fix(admin-ui): Limit FacetValues in Facet list component

Relates to #1257
vendure-ecommerce · Jul 27, 2023 · b445955 · b445955
1 parent 09c7175
commit b445955
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 10 deletions.
diff --git a/packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.html b/packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.html
@@ -90,19 +90,22 @@
         <ng-template let-facet="item">
             <div class="facet-values-list">
                 <vdr-facet-value-chip
-                    *ngFor="let value of facet.values | slice : 0 : displayLimit[facet.id] || 3"
+                    *ngFor="let value of facet.valueList.items | slice : 0 : displayLimit[facet.id] || 3"
                     [facetValue]="value"
                     [removable]="false"
                     [displayFacetName]="false"
                 ></vdr-facet-value-chip>
+                <vdr-chip *ngIf="displayLimit[facet.id] < facet.valueList.totalItems && (displayLimit[facet.id] || 0) === facet.valueList.items.length">
+                    ... + {{ facet.valueList.totalItems - facet.valueList.items.length }}
+                </vdr-chip>
                 <button
                     class="button-small"
-                    *ngIf="facet.values.length > initialLimit"
+                    *ngIf="facet.valueList.items.length > initialLimit"
                     (click)="toggleDisplayLimit(facet)"
                 >
-                    <ng-container *ngIf="(displayLimit[facet.id] || 0) < facet.values.length; else collapse">
+                    <ng-container *ngIf="(displayLimit[facet.id] || 0) < facet.valueList.items.length; else collapse">
                         <clr-icon shape="plus"></clr-icon>
-                        {{ facet.values.length - initialLimit }}
+                        {{ facet.valueList.totalItems - initialLimit }}
                     </ng-container>
                     <ng-template #collapse>
                         <clr-icon shape="minus"></clr-icon>

diff --git a/packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.ts b/packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
     DataService,
+    FACET_WITH_VALUE_LIST_FRAGMENT,
     FACET_WITH_VALUES_FRAGMENT,
     GetFacetListDocument,
     GetFacetListQuery,
@@ -15,12 +16,12 @@ export const FACET_LIST_QUERY = gql`
     query GetFacetList($options: FacetListOptions) {
         facets(options: $options) {
             items {
-                ...FacetWithValues
+                ...FacetWithValueList
             }
             totalItems
         }
     }
-    ${FACET_WITH_VALUES_FRAGMENT}
+    ${FACET_WITH_VALUE_LIST_FRAGMENT}
 `;
 
 @Component({
@@ -82,10 +83,10 @@ export class FacetListComponent
     }
 
     toggleDisplayLimit(facet: ItemOf<GetFacetListQuery, 'facets'>) {
-        if (this.displayLimit[facet.id] === facet.values.length) {
+        if (this.displayLimit[facet.id] === facet.valueList.items.length) {
             this.displayLimit[facet.id] = this.initialLimit;
         } else {
-            this.displayLimit[facet.id] = facet.values.length;
+            this.displayLimit[facet.id] = facet.valueList.items.length;
         }
     }