fix(admin-ui): Fix pagination on options editor view

vendure-ecommerce · Jun 13, 2023 · dda5e67 · dda5e67
1 parent c0630fb
commit dda5e67
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/...c/lib/catalog/src/components/product-options-editor/product-options-editor.component.html b/...c/lib/catalog/src/components/product-options-editor/product-options-editor.component.html
@@ -78,7 +78,9 @@
                         id="edit-options-list"
                         *ngIf="getOptions(optionGroup) as options"
                         [items]="options"
-                        [itemsPerPage]="10"
+                        [itemsPerPage]="paginationSettings[optionGroup.value.id]?.itemsPerPage"
+                        [currentPage]="paginationSettings[optionGroup.value.id]?.currentPage"
+                        (pageChange)="paginationSettings[optionGroup.value.id].currentPage = $event"
                         [totalItems]="options.length"
                     >
                         <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">

diff --git a/...src/lib/catalog/src/components/product-options-editor/product-options-editor.component.ts b/...src/lib/catalog/src/components/product-options-editor/product-options-editor.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { FormControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { UntypedFormArray, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
@@ -13,15 +13,14 @@ import {
     NotificationService,
     Permission,
     ProductOptionFragment,
-    ProductOptionGroup,
     ProductOptionGroupFragment,
     ServerConfigService,
     TranslationOf,
     UpdateProductOptionGroupInput,
     UpdateProductOptionInput,
 } from '@vendure/admin-ui/core';
 import { combineLatest, forkJoin, Observable } from 'rxjs';
-import { map, mergeMap, take } from 'rxjs/operators';
+import { map, mergeMap, take, tap } from 'rxjs/operators';
 
 import { ProductDetailService } from '../../providers/product-detail/product-detail.service';
 
@@ -41,6 +40,7 @@ export class ProductOptionsEditorComponent extends BaseDetailComponent<ProductWi
     optionGroupCustomFields: CustomFieldConfig[];
     optionCustomFields: CustomFieldConfig[];
     autoUpdateVariantNames = true;
+    paginationSettings: { [groupId: string]: { currentPage: number; itemsPerPage: number } } = {};
     readonly updatePermission = [Permission.UpdateCatalog, Permission.UpdateProduct];
 
     constructor(
@@ -61,6 +61,14 @@ export class ProductOptionsEditorComponent extends BaseDetailComponent<ProductWi
     ngOnInit(): void {
         this.optionGroups$ = this.route.snapshot.data.entity.pipe(
             map((product: ProductWithOptions) => product.optionGroups),
+            tap((optionGroups: ProductWithOptions['optionGroups']) => {
+                for (const group of optionGroups) {
+                    this.paginationSettings[group.id] = {
+                        currentPage: 1,
+                        itemsPerPage: 10,
+                    };
+                }
+            }),
         );
         this.detailForm = new UntypedFormGroup({
             optionGroups: new UntypedFormArray([]),