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

Relates to #1257

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>

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;
         }
     }
 

packages/admin-ui/src/lib/core/src/data/definitions/facet-definitions.ts

@@ -43,6 +43,30 @@ export const FACET_WITH_VALUES_FRAGMENT = gql`
     ${FACET_VALUE_FRAGMENT}
 `;
 
+export const FACET_WITH_VALUE_LIST_FRAGMENT = gql`
+    fragment FacetWithValueList on Facet {
+        id
+        createdAt
+        updatedAt
+        languageCode
+        isPrivate
+        code
+        name
+        translations {
+            id
+            languageCode
+            name
+        }
+        valueList(options: { take: 100 }) {
+            totalItems
+            items {
+                ...FacetValue
+            }
+        }
+    }
+    ${FACET_VALUE_FRAGMENT}
+`;
+
 export const CREATE_FACET = gql`
     mutation CreateFacet($input: CreateFacetInput!) {
         createFacet(input: $input) {