From c996fa7aefbd1a4f853a7080904a9a2505aa9c88 Mon Sep 17 00:00:00 2001
From: Michael Bromley <michael@michaelbromley.co.uk>
Date: Tue, 14 May 2019 15:05:26 +0200
Subject: [PATCH] feat(admin-ui): Improve collection list & child collection
 creation

---
 .../collection-detail.component.ts               |  4 ++++
 .../collection-tree-node.component.html          | 16 +++++++++++-----
 .../collection-tree-node.component.scss          |  4 ++++
 .../product-list/product-list.component.html     |  2 +-
 .../product-list/product-list.component.scss     |  6 ------
 .../data/providers/collection-data.service.ts    |  1 +
 admin-ui/src/styles/theme/_theme.scss            |  6 ++++++
 7 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.ts b/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.ts
index a4802d53fd..c9ea30c099 100644
--- a/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.ts
+++ b/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.ts
@@ -141,6 +141,10 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
                         this.detailForm,
                         languageCode,
                     ) as CreateCollectionInput;
+                    const parentId = this.route.snapshot.paramMap.get('parentId');
+                    if (parentId) {
+                        input.parentId = parentId;
+                    }
                     return this.dataService.collection.createCollection(input);
                 }),
             )
diff --git a/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.html b/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.html
index 65f27e119a..633f1b2ab4 100644
--- a/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.html
+++ b/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.html
@@ -8,6 +8,7 @@
 >
     <div
         class="collection"
+        [class.private]="collection.isPrivate"
         *ngFor="let collection of collectionTree.children; index as i"
         cdkDrag
         [cdkDragData]="collection"
@@ -38,13 +39,18 @@
                 </div>
             -->
             <vdr-dropdown>
-                <span class="trigger" vdrDropdownTrigger>
+                <button class="icon-button" vdrDropdownTrigger>
                     <clr-icon shape="ellipsis-vertical"></clr-icon>
-                </span>
+                </button>
                 <vdr-dropdown-menu vdrPosition="bottom-right">
+                    <a class="dropdown-item" [routerLink]="['./', 'create', { parentId: collection.id }]">
+                        <clr-icon shape="plus"></clr-icon>
+                        {{ 'catalog.create-new-collection' | translate }}
+                    </a>
+                    <div class="dropdown-divider"></div>
                     <button
                         type="button"
-                        class="dropdown-item"
+                        vdrDropdownItem
                         [disabled]="i === 0"
                         (click)="moveUp(collection, i)"
                     >
@@ -53,7 +59,7 @@
                     </button>
                     <button
                         type="button"
-                        class="dropdown-item"
+                        vdrDropdownItem
                         [disabled]="i === collectionTree.children.length - 1"
                         (click)="moveDown(collection, i)"
                     >
@@ -63,7 +69,7 @@
                     <h4 class="dropdown-header">{{ 'catalog.move-to' | translate }}</h4>
                     <button
                         type="button"
-                        class="dropdown-item"
+                        vdrDropdownItem
                         *ngFor="let item of getMoveListItems(collection)"
                         (click)="move(collection, item.id)"
                     >
diff --git a/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.scss b/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.scss
index 1cf8a193ef..f28acd72fc 100644
--- a/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.scss
+++ b/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.scss
@@ -8,6 +8,10 @@
     color: rgba(0, 0, 0, 0.87);
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 
+    &.private {
+        background-color: $color-grey-200;
+    }
+
     .collection-detail {
         padding: 6px 12px;
         display: flex;
diff --git a/admin-ui/src/app/catalog/components/product-list/product-list.component.html b/admin-ui/src/app/catalog/components/product-list/product-list.component.html
index 9479723498..70c1c34ae1 100644
--- a/admin-ui/src/app/catalog/components/product-list/product-list.component.html
+++ b/admin-ui/src/app/catalog/components/product-list/product-list.component.html
@@ -8,7 +8,7 @@
                 (facetValueChange)="setFacetValueIds($event)"
             ></vdr-product-search-input>
             <vdr-dropdown class="search-settings-menu">
-                <button type="button" vdrDropdownTrigger>
+                <button type="button" class="icon-button" vdrDropdownTrigger>
                     <clr-icon shape="cog"></clr-icon>
                 </button>
                 <vdr-dropdown-menu vdrPosition="bottom-right">
diff --git a/admin-ui/src/app/catalog/components/product-list/product-list.component.scss b/admin-ui/src/app/catalog/components/product-list/product-list.component.scss
index 8631245060..734e61fb30 100644
--- a/admin-ui/src/app/catalog/components/product-list/product-list.component.scss
+++ b/admin-ui/src/app/catalog/components/product-list/product-list.component.scss
@@ -23,12 +23,6 @@
 }
 .search-settings-menu {
     margin: 0 12px;
-    > button {
-        background: none;
-        border: none;
-        cursor: pointer;
-        color: $color-grey-500;
-    }
 }
 td.disabled {
     background-color: $color-grey-200;
diff --git a/admin-ui/src/app/data/providers/collection-data.service.ts b/admin-ui/src/app/data/providers/collection-data.service.ts
index 5e426a88f3..695b99d35a 100644
--- a/admin-ui/src/app/data/providers/collection-data.service.ts
+++ b/admin-ui/src/app/data/providers/collection-data.service.ts
@@ -61,6 +61,7 @@ export class CollectionDataService {
             {
                 input: pick(input, [
                     'translations',
+                    'parentId',
                     'assetIds',
                     'featuredAssetId',
                     'filters',
diff --git a/admin-ui/src/styles/theme/_theme.scss b/admin-ui/src/styles/theme/_theme.scss
index 6b4f52504c..8548896718 100644
--- a/admin-ui/src/styles/theme/_theme.scss
+++ b/admin-ui/src/styles/theme/_theme.scss
@@ -34,6 +34,12 @@ a:focus, button:focus {
 .compact-label {
     display: initial;
 }
+button.icon-button {
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: $color-grey-500;
+}
 @media screen and (min-width: $breakpoint-small) {
     .full-label {
         display: initial;