feat(admin-ui): Use server pagination of product variants

Relates to #1110
vendure-ecommerce · Sep 24, 2021 · 552eafe · 552eafe
1 parent 438ac46
commit 552eafe
Show file tree

Hide file tree

Showing 19 changed files with 544 additions and 325 deletions.
diff --git a/packages/admin-ui/src/lib/catalog/src/catalog.routes.ts b/packages/admin-ui/src/lib/catalog/src/catalog.routes.ts
@@ -7,7 +7,7 @@ import {
     createResolveData,
     detailBreadcrumb,
     FacetWithValues,
-    ProductWithVariants,
+    GetProductWithVariants,
 } from '@vendure/admin-ui/core';
 import { map } from 'rxjs/operators';
 
@@ -112,7 +112,7 @@ export const catalogRoutes: Route[] = [
 ];
 
 export function productBreadcrumb(data: any, params: any) {
-    return detailBreadcrumb<ProductWithVariants.Fragment>({
+    return detailBreadcrumb<GetProductWithVariants.Product>({
         entity: data.entity,
         id: params.id,
         breadcrumbKey: 'breadcrumb.products',

diff --git a/...mponents/assign-products-to-channel-dialog/assign-products-to-channel-dialog.component.ts b/...mponents/assign-products-to-channel-dialog/assign-products-to-channel-dialog.component.ts
@@ -111,9 +111,9 @@ export class AssignProductsToChannelDialogComponent implements OnInit, Dialog<an
 
         for (let i = 0; i < this.productIds.length && variants.length < take; i++) {
             const productVariants = await this.dataService.product
-                .getProduct(this.productIds[i])
+                .getProduct(this.productIds[i], { take: this.isProductVariantMode ? undefined : take })
                 .mapSingle(({ product }) => {
-                    const _variants = product ? product.variants : [];
+                    const _variants = product ? product.variantList.items : [];
                     return _variants.filter(v =>
                         this.isProductVariantMode ? this.productVariantIds?.includes(v.id) : true,
                     );

diff --git a/...ages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.html b/...ages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.html
@@ -45,11 +45,7 @@
     </vdr-ab-right>
 </vdr-action-bar>
 
-<form
-    class="form"
-    [formGroup]="detailForm"
-    *ngIf="product$ | async as product"
->
+<form class="form" [formGroup]="detailForm" *ngIf="product$ | async as product">
     <button type="submit" hidden x-data="prevents enter key from triggering other buttons"></button>
     <clr-tabs>
         <clr-tab>
@@ -111,7 +107,7 @@
                                     />
                                     <label>{{
                                         'catalog.auto-update-product-variant-name' | translate
-                                        }}</label>
+                                    }}</label>
                                 </clr-checkbox-wrapper>
                             </div>
                             <vdr-form-field
@@ -225,9 +221,24 @@ <h4>{{ 'catalog.product-variants' | translate }}</h4>
                         </a>
                     </div>
 
+                    <div class="pagination-row mt4" *ngIf="10 < (paginationConfig$ | async)?.totalItems">
+                        <vdr-items-per-page-controls
+                            [itemsPerPage]="itemsPerPage$ | async"
+                            (itemsPerPageChange)="setItemsPerPage($event)"
+                        ></vdr-items-per-page-controls>
+
+                        <vdr-pagination-controls
+                            [id]="(paginationConfig$ | async)?.id"
+                            [currentPage]="currentPage$ | async"
+                            [itemsPerPage]="itemsPerPage$ | async"
+                            (pageChange)="setPage($event)"
+                        ></vdr-pagination-controls>
+                    </div>
+
                     <vdr-product-variants-table
                         *ngIf="variantDisplayMode === 'table'"
                         [variants]="variants$ | async"
+                        [paginationConfig]="paginationConfig$ | async"
                         [optionGroups]="product.optionGroups"
                         [channelPriceIncludesTax]="channelPriceIncludesTax$ | async"
                         [productVariantsFormArray]="detailForm.get('variants')"
@@ -236,6 +247,7 @@ <h4>{{ 'catalog.product-variants' | translate }}</h4>
                     <vdr-product-variants-list
                         *ngIf="variantDisplayMode === 'card'"
                         [variants]="variants$ | async"
+                        [paginationConfig]="paginationConfig$ | async"
                         [channelPriceIncludesTax]="channelPriceIncludesTax$ | async"
                         [facets]="facets$ | async"
                         [optionGroups]="product.optionGroups"
@@ -253,6 +265,19 @@ <h4>{{ 'catalog.product-variants' | translate }}</h4>
                         (selectFacetValueClick)="selectVariantFacetValue($event)"
                     ></vdr-product-variants-list>
                 </section>
+                <div class="pagination-row mt4" *ngIf="10 < (paginationConfig$ | async)?.totalItems">
+                    <vdr-items-per-page-controls
+                        [itemsPerPage]="itemsPerPage$ | async"
+                        (itemsPerPageChange)="setItemsPerPage($event)"
+                    ></vdr-items-per-page-controls>
+
+                    <vdr-pagination-controls
+                        [id]="(paginationConfig$ | async)?.id"
+                        [currentPage]="currentPage$ | async"
+                        [itemsPerPage]="itemsPerPage$ | async"
+                        (pageChange)="setPage($event)"
+                    ></vdr-pagination-controls>
+                </div>
             </clr-tab-content>
         </clr-tab>
     </clr-tabs>

diff --git a/...ages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.scss b/...ages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.scss
@@ -56,3 +56,9 @@ vdr-action-bar clr-toggle-wrapper {
         margin-bottom: 12px;
     }
 }
+
+.pagination-row {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+}