fix(admin-ui): Update variant pagination controls when filtering

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

@@ -10,7 +10,6 @@ import {
     createUpdatedTranslatable,
     CustomFieldConfig,
     DataService,
-    FacetValueFragment,
     findTranslation,
     getChannelCodeFromUserStatus,
     GetProductWithVariants,
@@ -40,7 +39,6 @@ import { BehaviorSubject, combineLatest, concat, EMPTY, from, merge, Observable
 import {
     debounceTime,
     distinctUntilChanged,
-    filter,
     map,
     mergeMap,
     shareReplay,
@@ -52,7 +50,6 @@ import {
     take,
     takeUntil,
     tap,
-    withLatestFrom,
 } from 'rxjs/operators';
 
 import { ProductDetailService } from '../../providers/product-detail/product-detail.service';
@@ -164,24 +161,17 @@ export class ProductDetailComponent
     ngOnInit() {
         this.init();
         this.product$ = this.entity$;
-        this.totalItems$ = this.product$.pipe(map(product => product.variantList.totalItems));
-        this.paginationConfig$ = combineLatest(this.totalItems$, this.itemsPerPage$, this.currentPage$).pipe(
-            map(([totalItems, itemsPerPage, currentPage]) => ({
-                totalItems,
-                itemsPerPage,
-                currentPage,
-            })),
-        );
-        const variants$ = this.product$.pipe(map(product => product.variantList.items));
         const filterTerm$ = this.filterInput.valueChanges.pipe(
             startWith(''),
             debounceTime(200),
             shareReplay(),
+            tap(() => this.currentPage$.next(1)),
         );
         const initialVariants$ = this.product$.pipe(map(p => p.variantList.items));
-        const updatedVariants$ = combineLatest(filterTerm$, this.currentPage$, this.itemsPerPage$).pipe(
+        const variantsList$ = combineLatest(filterTerm$, this.currentPage$, this.itemsPerPage$).pipe(
             skipUntil(initialVariants$),
             skip(1),
+            debounceTime(100),
             switchMap(([term, currentPage, itemsPerPage]) => {
                 return this.dataService.product
                     .getProductVariants(
@@ -195,10 +185,11 @@ export class ProductDetailComponent
                         },
                         this.id,
                     )
-                    .mapStream(({ productVariants }) => productVariants.items);
+                    .mapStream(({ productVariants }) => productVariants);
             }),
             shareReplay({ bufferSize: 1, refCount: true }),
         );
+        const updatedVariants$ = variantsList$.pipe(map(result => result.items));
         this.variants$ = merge(initialVariants$, updatedVariants$).pipe(
             tap(variants => {
                 for (const variant of variants) {
@@ -206,6 +197,17 @@ export class ProductDetailComponent
                 }
             }),
         );
+        this.totalItems$ = merge(
+            this.product$.pipe(map(product => product.variantList.totalItems)),
+            variantsList$.pipe(map(result => result.totalItems)),
+        );
+        this.paginationConfig$ = combineLatest(this.totalItems$, this.itemsPerPage$, this.currentPage$).pipe(
+            map(([totalItems, itemsPerPage, currentPage]) => ({
+                totalItems,
+                itemsPerPage,
+                currentPage,
+            })),
+        );
         this.taxCategories$ = this.productDetailService.getTaxCategories().pipe(takeUntil(this.destroy$));
         this.activeTab$ = this.route.paramMap.pipe(map(qpm => qpm.get('tab') as any));