feat(admin-ui): Display Collection contents in detail view

Relates to #71
vendure-ecommerce · Mar 7, 2019 · b12ee88 · b12ee88
1 parent 0db7890
commit b12ee88
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 13 deletions.
diff --git a/admin-ui/src/app/catalog/components/collection-contents/collection-contents.component.html b/admin-ui/src/app/catalog/components/collection-contents/collection-contents.component.html
@@ -25,7 +25,7 @@
             <vdr-table-row-action
                 iconShape="edit"
                 [label]="'common.edit' | translate"
-                [linkTo]="['../products', variant.productId, { tab: 'variants' }]"
+                [linkTo]="['/catalog/products', variant.productId, { tab: 'variants' }]"
             ></vdr-table-row-action>
         </td>
     </ng-template>

diff --git a/admin-ui/src/app/catalog/components/collection-contents/collection-contents.component.ts b/admin-ui/src/app/catalog/components/collection-contents/collection-contents.component.ts
@@ -41,6 +41,7 @@ export class CollectionContentsComponent implements OnInit, OnChanges, OnDestroy
     contentsCurrentPage$: Observable<number>;
     filterTermControl = new FormControl('');
     private collectionIdChange$ = new BehaviorSubject<string>('');
+    private refresh$ = new BehaviorSubject<boolean>(true);
     private destroy$ = new Subject<void>();
 
     constructor(private route: ActivatedRoute, private router: Router, private dataService: DataService) {}
@@ -71,6 +72,7 @@ export class CollectionContentsComponent implements OnInit, OnChanges, OnDestroy
             this.contentsCurrentPage$,
             this.contentsItemsPerPage$,
             filterTerm$,
+            this.refresh$,
         ).pipe(
             takeUntil(this.destroy$),
             switchMap(([id, currentPage, itemsPerPage, filterTerm]) => {
@@ -111,6 +113,10 @@ export class CollectionContentsComponent implements OnInit, OnChanges, OnDestroy
         this.setParam('contentsPerPage', perPage);
     }
 
+    refresh() {
+        this.refresh$.next(true);
+    }
+
     private setParam(key: string, value: any) {
         this.router.navigate(['./', { ...this.route.snapshot.params, [key]: value }], {
             relativeTo: this.route,

diff --git a/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html b/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html
@@ -94,5 +94,16 @@
                 </clr-dropdown>
             </div>
         </div>
+        <div class="clr-col">
+            <vdr-collection-contents [collectionId]="id" #collectionContents>
+                <ng-template let-count>
+                    <div class="contents-title">
+                        {{ 'catalog.collection-contents' | translate }} ({{
+                            'common.results-count' | translate: { count: count }
+                        }})
+                    </div>
+                </ng-template>
+            </vdr-collection-contents>
+        </div>
     </div>
 </form>
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
@@ -1,4 +1,11 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    OnDestroy,
+    OnInit,
+    ViewChild,
+} from '@angular/core';
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { combineLatest, Observable } from 'rxjs';
@@ -21,6 +28,7 @@ import { NotificationService } from '../../../core/providers/notification/notifi
 import { DataService } from '../../../data/providers/data.service';
 import { ServerConfigService } from '../../../data/server-config';
 import { ModalService } from '../../../shared/providers/modal/modal.service';
+import { CollectionContentsComponent } from '../collection-contents/collection-contents.component';
 
 @Component({
     selector: 'vdr-collection-detail',
@@ -36,6 +44,7 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
     filters: ConfigurableOperation[] = [];
     allFilters: ConfigurableOperation[] = [];
     facets$: Observable<FacetWithValues.Fragment[]>;
+    @ViewChild('collectionContents') contentsComponent: CollectionContentsComponent;
 
     constructor(
         router: Router,
@@ -166,6 +175,7 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
                     this.notificationService.success(_('common.notify-update-success'), {
                         entity: 'Collection',
                     });
+                    this.contentsComponent.refresh();
                 },
                 err => {
                     this.notificationService.error(_('common.notify-update-error'), {

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
@@ -33,7 +33,7 @@
                 <clr-icon shape="view-list"></clr-icon>
                 {{ 'catalog.view-contents' | translate }}
             </a>
-            <a class="btn btn-link btn-sm" [routerLink]="['./', collection.id]">
+            <a class="btn btn-link btn-sm" [routerLink]="['/catalog/collections/', collection.id]">
                 <clr-icon shape="edit"></clr-icon>
                 {{ 'common.edit' | translate }}
             </a>

diff --git a/admin-ui/src/app/shared/components/configurable-input/configurable-input.component.scss b/admin-ui/src/app/shared/components/configurable-input/configurable-input.component.scss
@@ -5,7 +5,9 @@
 
 .operation-inputs {
 
-    .arg-row {
+    padding-top: 0;
+
+    .arg-row:not(:last-child) {
         margin-bottom: 24px;
     }
 

diff --git a/.../src/app/shared/components/items-per-page-controls/items-per-page-controls.component.html b/.../src/app/shared/components/items-per-page-controls/items-per-page-controls.component.html
@@ -1,10 +1,8 @@
-<div class="form-group">
-    <div class="select">
-        <select [value]="itemsPerPage" (change)="itemsPerPageChange.emit($event.target.value)">
-            <option [value]="10">{{ 'common.items-per-page-option' | translate: { count: 10 } }}</option>
-            <option [value]="25">{{ 'common.items-per-page-option' | translate: { count: 25 } }}</option>
-            <option [value]="50">{{ 'common.items-per-page-option' | translate: { count: 50 } }}</option>
-            <option [value]="100">{{ 'common.items-per-page-option' | translate: { count: 100 } }}</option>
-        </select>
-    </div>
+<div class="select">
+    <select [value]="itemsPerPage" (change)="itemsPerPageChange.emit($event.target.value)">
+        <option [value]="10">{{ 'common.items-per-page-option' | translate: { count: 10 } }}</option>
+        <option [value]="25">{{ 'common.items-per-page-option' | translate: { count: 25 } }}</option>
+        <option [value]="50">{{ 'common.items-per-page-option' | translate: { count: 50 } }}</option>
+        <option [value]="100">{{ 'common.items-per-page-option' | translate: { count: 100 } }}</option>
+    </select>
 </div>
diff --git a/admin-ui/src/i18n-messages/en.json b/admin-ui/src/i18n-messages/en.json
@@ -27,6 +27,7 @@
     "add-facet-value": "Add facet value",
     "add-facets": "Add facets",
     "assets-selected-count": "{ count } assets selected",
+    "collection-contents": "Collection contents",
     "confirm-delete-country": "Delete country?",
     "confirm-delete-facet": "Delete facet?",
     "confirm-delete-facet-value": "Delete facet value?",