feat(admin-ui): Improve collection list & child collection creation

vendure-ecommerce · May 14, 2019 · c996fa7 · c996fa7
1 parent 4de2a6a
commit c996fa7
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;