feat(admin-ui): Add filter inheritance control to Collection detail view

Relates to #1382.
vendure-ecommerce · Mar 3, 2022 · 7f1b01e · 7f1b01e
1 parent 5d4206f
commit 7f1b01e
Show file tree

Hide file tree

Showing 20 changed files with 115 additions and 51 deletions.
diff --git a/packages/admin-ui/i18n-coverage.json b/packages/admin-ui/i18n-coverage.json
@@ -1,71 +1,66 @@
 {
-  "generatedOn": "2022-02-15T19:48:25.835Z",
-  "lastCommit": "f3a265411399551d08b71173ba493744f28f7219",
+  "generatedOn": "2022-03-03T10:38:41.224Z",
+  "lastCommit": "08d339378d3d16daee27f003eb187243816869e5",
   "translationStatus": {
     "cs": {
-      "tokenCount": 638,
+      "tokenCount": 641,
       "translatedCount": 591,
-      "percentage": 93
-    },
-    "de": {
-      "tokenCount": 638,
-      "translatedCount": 570,
-      "percentage": 89
+      "percentage": 92
     },
     "en": {
-      "tokenCount": 638,
-      "translatedCount": 637,
+      "tokenCount": 641,
+      "translatedCount": 638,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 638,
+      "tokenCount": 641,
       "translatedCount": 623,
-      "percentage": 98
+      "percentage": 97
     },
     "fr": {
-      "tokenCount": 638,
+      "tokenCount": 641,
       "translatedCount": 613,
       "percentage": 96
     },
     "it": {
-      "tokenCount": 638,
+      "tokenCount": 641,
       "translatedCount": 621,
       "percentage": 97
     },
     "pl": {
-      "tokenCount": 638,
+      "tokenCount": 641,
       "translatedCount": 405,
       "percentage": 63
     },
     "pt_BR": {
-      "tokenCount": 638,
+      "tokenCount": 641,
       "translatedCount": 589,
       "percentage": 92
     },
     "pt_PT": {
-      "tokenCount": 638,
+      "tokenCount": 641,
       "translatedCount": 634,
       "percentage": 99
     },
     "ru": {
-      "tokenCount": 638,
+      "tokenCount": 641,
       "translatedCount": 620,
       "percentage": 97
     },
     "uk": {
-      "tokenCount": 638,
+      "tokenCount": 641,
       "translatedCount": 620,
       "percentage": 97
     },
     "zh_Hans": {
-      "tokenCount": 638,
+      "tokenCount": 641,
       "translatedCount": 557,
       "percentage": 87
     },
     "zh_Hant": {
-      "tokenCount": 638,
+      "tokenCount": 641,
       "translatedCount": 385,
       "percentage": 60
     }
   }
-}
+}
diff --git a/...dmin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.html b/...dmin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.html
@@ -45,7 +45,9 @@
                         [vdrDisabled]="!(updatePermission | hasPermission)"
                     />
                     <label class="visible-toggle">
-                        <ng-container *ngIf="detailForm.value.visible; else private">{{ 'catalog.public' | translate }}</ng-container>
+                        <ng-container *ngIf="detailForm.value.visible; else private">{{
+                            'catalog.public' | translate
+                        }}</ng-container>
                         <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>
                     </label>
                 </clr-toggle-wrapper>
@@ -101,18 +103,39 @@
             ></vdr-assets>
         </div>
     </div>
-    <div class="clr-row" formArrayName="filters">
+    <div class="clr-row">
         <div class="clr-col">
             <label>{{ 'catalog.filters' | translate }}</label>
-            <ng-container *ngFor="let filter of filters; index as i">
-                <vdr-configurable-input
-                    (remove)="removeFilter($event)"
-                    [operation]="filter"
-                    [operationDefinition]="getFilterDefinition(filter)"
-                    [formControlName]="i"
-                    [readonly]="!(updatePermission | hasPermission)"
-                ></vdr-configurable-input>
-            </ng-container>
+            <vdr-form-field [label]="'catalog.filter-inheritance' | translate" for="inheritFilters">
+                <clr-toggle-wrapper>
+                    <input
+                        type="checkbox"
+                        clrToggle
+                        formControlName="inheritFilters"
+                        id="inheritFilters"
+                        [vdrDisabled]="!(updatePermission | hasPermission)"
+                    />
+                    <label class="visible-toggle">
+                        <ng-container *ngIf="detailForm.value.inheritFilters; else noInherit">{{
+                            'catalog.inherit-filters-from-parent' | translate
+                        }}</ng-container>
+                        <ng-template #noInherit>{{
+                            'catalog.do-not-inherit-filters' | translate
+                        }}</ng-template>
+                    </label>
+                </clr-toggle-wrapper>
+            </vdr-form-field>
+            <div formArrayName="filters">
+                <ng-container *ngFor="let filter of filters; index as i">
+                    <vdr-configurable-input
+                        (remove)="removeFilter($event)"
+                        [operation]="filter"
+                        [operationDefinition]="getFilterDefinition(filter)"
+                        [formControlName]="i"
+                        [readonly]="!(updatePermission | hasPermission)"
+                    ></vdr-configurable-input>
+                </ng-container>
+            </div>
 
             <div *vdrIfPermissions="updatePermission">
                 <vdr-dropdown>

diff --git a/.../admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.ts b/.../admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.ts
@@ -73,6 +73,7 @@ export class CollectionDetailComponent
             slug: ['', unicodePatternValidator(/^[\p{Letter}0-9_-]+$/)],
             description: '',
             visible: false,
+            inheritFilters: true,
             filters: this.formBuilder.array([]),
             customFields: this.formBuilder.group(
                 this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
@@ -232,6 +233,7 @@ export class CollectionDetailComponent
             slug: currentTranslation ? currentTranslation.slug : '',
             description: currentTranslation ? currentTranslation.description : '',
             visible: !entity.isPrivate,
+            inheritFilters: entity.inheritFilters,
         });
 
         entity.filters.forEach(f => this.addFilter(f));

diff --git a/packages/admin-ui/src/lib/catalog/src/providers/routing/collection-resolver.ts b/packages/admin-ui/src/lib/catalog/src/providers/routing/collection-resolver.ts
@@ -27,6 +27,7 @@ export class CollectionResolver extends BaseEntityResolver<CollectionFragment> {
                 featuredAsset: null,
                 assets: [],
                 translations: [],
+                inheritFilters: true,
                 filters: [],
                 parent: {} as any,
                 children: null,