feat(admin-ui): Update collection preview on filter inheritance toggle

packages/admin-ui/src/lib/catalog/src/components/collection-contents/collection-contents.component.ts

@@ -40,6 +40,7 @@ import {
 export class CollectionContentsComponent implements OnInit, OnChanges, OnDestroy {
     @Input() collectionId: string;
     @Input() parentId: string;
+    @Input() inheritFilters: boolean;
     @Input() updatedFilters: ConfigurableOperationInput[] | undefined;
     @Input() previewUpdatedFilters = false;
     @ContentChild(TemplateRef, { static: true }) headerTemplate: TemplateRef<any>;
@@ -53,6 +54,7 @@ export class CollectionContentsComponent implements OnInit, OnChanges, OnDestroy
     private collectionIdChange$ = new BehaviorSubject<string>('');
     private parentIdChange$ = new BehaviorSubject<string>('');
     private filterChanges$ = new BehaviorSubject<ConfigurableOperationInput[]>([]);
+    private inheritFiltersChanges$ = new BehaviorSubject<boolean>(true);
     private refresh$ = new BehaviorSubject<boolean>(true);
     private destroy$ = new Subject<void>();
 
@@ -85,21 +87,29 @@ export class CollectionContentsComponent implements OnInit, OnChanges, OnDestroy
             startWith([]),
         );
 
+        const inheritFiltersChanges$ = this.inheritFiltersChanges$.asObservable().pipe(
+            filter(() => this.inheritFilters != null),
+            distinctUntilChanged(),
+            tap(() => this.setContentsPageNumber(1)),
+            startWith(true),
+        );
+
         const fetchUpdate$ = combineLatest(
             this.collectionIdChange$,
             this.parentIdChange$,
             this.contentsCurrentPage$,
             this.contentsItemsPerPage$,
             filterTerm$,
             filterChanges$,
+            inheritFiltersChanges$,
             this.refresh$,
         );
 
         const collection$ = fetchUpdate$.pipe(
             takeUntil(this.destroy$),
             tap(() => (this.isLoading = true)),
             debounceTime(50),
-            switchMap(([id, parentId, currentPage, itemsPerPage, filterTerm, filters]) => {
+            switchMap(([id, parentId, currentPage, itemsPerPage, filterTerm, filters, inheritFilters]) => {
                 const take = itemsPerPage;
                 const skip = (currentPage - 1) * itemsPerPage;
                 if (filters.length && this.previewUpdatedFilters) {
@@ -111,6 +121,7 @@ export class CollectionContentsComponent implements OnInit, OnChanges, OnDestroy
                             {
                                 parentId,
                                 filters,
+                                inheritFilters,
                             },
                             {
                                 take,
@@ -143,6 +154,9 @@ export class CollectionContentsComponent implements OnInit, OnChanges, OnDestroy
         if ('parentId' in changes) {
             this.parentIdChange$.next(changes.parentId.currentValue);
         }
+        if ('inheritFilters' in changes) {
+            this.inheritFiltersChanges$.next(changes.inheritFilters.currentValue);
+        }
         if ('updatedFilters' in changes) {
             if (this.updatedFilters) {
                 this.filterChanges$.next(this.updatedFilters);

packages/admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.html

@@ -162,6 +162,7 @@
                 [collectionId]="id"
                 [parentId]="parentId$ | async"
                 [updatedFilters]="updatedFilters$ | async"
+                [inheritFilters]="inheritFilters$ | async"
                 [previewUpdatedFilters]="livePreview"
                 #collectionContents
             >

packages/admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.ts

@@ -6,7 +6,7 @@ import {
     OnInit,
     ViewChild,
 } from '@angular/core';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
@@ -35,7 +35,7 @@ import {
 } from '@vendure/admin-ui/core';
 import { normalizeString } from '@vendure/common/lib/normalize-string';
 import { combineLatest, merge, Observable, of, Subject } from 'rxjs';
-import { debounceTime, filter, map, mergeMap, switchMap, take } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, filter, map, mergeMap, switchMap, take } from 'rxjs/operators';
 
 import { CollectionContentsComponent } from '../collection-contents/collection-contents.component';
 
@@ -55,6 +55,7 @@ export class CollectionDetailComponent
     filters: ConfigurableOperation[] = [];
     allFilters: ConfigurableOperationDefinition[] = [];
     updatedFilters$: Observable<ConfigurableOperationInput[]>;
+    inheritFilters$: Observable<boolean>;
     livePreview = false;
     parentId$: Observable<string | undefined>;
     readonly updatePermission = [Permission.UpdateCatalog, Permission.UpdateCollection];
@@ -94,6 +95,8 @@ export class CollectionDetailComponent
             this.allFilters = res.collectionFilters;
         });
         const filtersFormArray = this.detailForm.get('filters') as FormArray;
+        const inheritFiltersControl = this.detailForm.get('inheritFilters') as FormControl;
+        this.inheritFilters$ = inheritFiltersControl.valueChanges.pipe(distinctUntilChanged());
         this.updatedFilters$ = merge(filtersFormArray.statusChanges, this.filterRemoved$).pipe(
             debounceTime(200),
             filter(() => filtersFormArray.touched),

packages/admin-ui/src/lib/core/src/common/generated-types.ts

@@ -3793,6 +3793,7 @@ export type PermissionDefinition = {
 
 export type PreviewCollectionVariantsInput = {
   filters: Array<ConfigurableOperationInput>;
+  inheritFilters: Scalars['Boolean'];
   parentId?: InputMaybe<Scalars['ID']>;
 };