feat(admin-ui): Add UI controls for private Facets

Relates to #80
vendure-ecommerce · Apr 26, 2019 · 290a576 · 290a576
1 parent b6c3240
commit 290a576
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 9 deletions.
diff --git a/admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.html b/admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.html
@@ -11,7 +11,7 @@
     <vdr-ab-right>
         <button
             class="btn btn-primary"
-            *ngIf="(isNew$ | async); else: updateButton"
+            *ngIf="(isNew$ | async); else updateButton"
             (click)="create()"
             [disabled]="detailForm.invalid || detailForm.pristine"
         >
@@ -31,7 +31,18 @@
 
 <form class="form" [formGroup]="detailForm" *ngIf="(entity$ | async) as facet">
     <section class="form-block" formGroupName="facet">
-        <label>{{ 'catalog.facet' | translate }}</label>
+        <vdr-form-field [label]="'catalog.visibility' | translate" for="visibility">
+            <clr-toggle-wrapper>
+                <input type="checkbox" clrToggle formControlName="visible" id="visibility" />
+                <label class="visible-toggle">
+                    {{
+                        detailForm.value.facet.visible
+                            ? ('catalog.public' | translate)
+                            : ('catalog.private' | translate)
+                    }}
+                </label>
+            </clr-toggle-wrapper>
+        </vdr-form-field>
         <vdr-form-field [label]="'common.name' | translate" for="name">
             <input
                 id="name"

diff --git a/admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.scss b/admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.scss
@@ -1 +1,5 @@
 @import "variables";
+
+.visible-toggle {
+    margin-top: -3px !important;
+}
diff --git a/admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.ts b/admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.ts
@@ -4,10 +4,12 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { combineLatest, EMPTY, forkJoin, Observable } from 'rxjs';
 import { map, mergeMap, switchMap, take } from 'rxjs/operators';
 import {
+    CreateFacetInput,
     CreateFacetValueInput,
     DeletionResult,
     FacetWithValues,
     LanguageCode,
+    UpdateFacetInput,
     UpdateFacetValueInput,
 } from 'shared/generated-types';
 import { normalizeString } from 'shared/normalize-string';
@@ -53,6 +55,7 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
             facet: this.formBuilder.group({
                 code: ['', Validators.required],
                 name: '',
+                visible: true,
                 customFields: this.formBuilder.group(
                     this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
                 ),
@@ -117,7 +120,11 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
             .pipe(
                 take(1),
                 mergeMap(([facet, languageCode]) => {
-                    const newFacet = this.getUpdatedFacet(facet, facetForm as FormGroup, languageCode);
+                    const newFacet = this.getUpdatedFacet(
+                        facet,
+                        facetForm as FormGroup,
+                        languageCode,
+                    ) as CreateFacetInput;
                     return this.dataService.facet.createFacet(newFacet);
                 }),
             )
@@ -145,7 +152,11 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
                     const updateOperations: Array<Observable<any>> = [];
 
                     if (facetGroup && facetGroup.dirty) {
-                        const newFacet = this.getUpdatedFacet(facet, facetGroup as FormGroup, languageCode);
+                        const newFacet = this.getUpdatedFacet(
+                            facet,
+                            facetGroup as FormGroup,
+                            languageCode,
+                        ) as UpdateFacetInput;
                         if (newFacet) {
                             updateOperations.push(this.dataService.facet.updateFacet(newFacet));
                         }
@@ -244,6 +255,7 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
         this.detailForm.patchValue({
             facet: {
                 code: facet.code,
+                visible: !facet.isPrivate,
                 name: currentTranslation ? currentTranslation.name : '',
             },
         });
@@ -315,8 +327,8 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
         facet: FacetWithValues.Fragment,
         facetFormGroup: FormGroup,
         languageCode: LanguageCode,
-    ): any {
-        return createUpdatedTranslatable({
+    ): CreateFacetInput | UpdateFacetInput {
+        const input = createUpdatedTranslatable({
             translatable: facet,
             updatedFields: facetFormGroup.value,
             customFieldConfig: this.customFields,
@@ -326,6 +338,8 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
                 name: facet.name || '',
             },
         });
+        input.isPrivate = !facetFormGroup.value.visible;
+        return input;
     }
 
     /**

diff --git a/admin-ui/src/app/catalog/components/facet-list/facet-list.component.html b/admin-ui/src/app/catalog/components/facet-list/facet-list.component.html
@@ -18,18 +18,25 @@
     <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
     <vdr-dt-column [expand]="true">{{ 'catalog.values' | translate }}</vdr-dt-column>
+    <vdr-dt-column>{{ 'catalog.visibility' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-facet="item">
         <td class="left align-middle">{{ facet.code }}</td>
         <td class="left align-middle">{{ facet.name }}</td>
         <td class="left align-middle">
             <vdr-facet-value-chip
-                *ngFor="let value of facet.values"
+                *ngFor="let value of (facet.values | slice: 0:3)"
                 [facetValue]="value"
                 [removable]="false"
                 [displayFacetName]="false"
             ></vdr-facet-value-chip>
+            <vdr-chip *ngIf="facet.values.length > 3">+ {{ facet.values.length - 3 }}</vdr-chip>
+        </td>
+        <td>
+            <vdr-chip>
+                {{ facet.isPrivate ? ('catalog.private' | translate) : ('catalog.public' | translate) }}
+            </vdr-chip>
         </td>
         <td class="right align-middle">
             <vdr-table-row-action

diff --git a/admin-ui/src/app/catalog/providers/routing/facet-resolver.ts b/admin-ui/src/app/catalog/providers/routing/facet-resolver.ts
@@ -12,6 +12,7 @@ export class FacetResolver extends BaseEntityResolver<FacetWithValues.Fragment>
             {
                 __typename: 'Facet' as 'Facet',
                 id: '',
+                isPrivate: false,
                 languageCode: getDefaultLanguage(),
                 name: '',
                 code: '',

diff --git a/admin-ui/src/app/common/utilities/flatten-facet-values.spec.ts b/admin-ui/src/app/common/utilities/flatten-facet-values.spec.ts
@@ -1,3 +1,4 @@
+import { isPrivate } from '@babel/types';
 import { FacetWithValues, LanguageCode } from 'shared/generated-types';
 
 import { flattenFacetValues } from './flatten-facet-values';
@@ -48,6 +49,7 @@ describe('flattenFacetValues()', () => {
         const input: FacetWithValues.Fragment[] = [
             {
                 id: '1',
+                isPrivate: false,
                 languageCode: LanguageCode.en,
                 code: 'brand',
                 name: 'Brand',
@@ -56,6 +58,7 @@ describe('flattenFacetValues()', () => {
             },
             {
                 id: '2',
+                isPrivate: false,
                 languageCode: LanguageCode.en,
                 code: 'type',
                 name: 'Type',

diff --git a/admin-ui/src/app/data/definitions/facet-definitions.ts b/admin-ui/src/app/data/definitions/facet-definitions.ts
@@ -22,6 +22,7 @@ export const FACET_WITH_VALUES_FRAGMENT = gql`
     fragment FacetWithValues on Facet {
         id
         languageCode
+        isPrivate
         code
         name
         translations {

diff --git a/admin-ui/src/app/data/providers/facet-data.service.ts b/admin-ui/src/app/data/providers/facet-data.service.ts
@@ -53,14 +53,14 @@ export class FacetDataService {
 
     createFacet(facet: CreateFacetInput) {
         const input: CreateFacet.Variables = {
-            input: pick(facet, ['code', 'translations', 'values', 'customFields']),
+            input: pick(facet, ['code', 'isPrivate', 'translations', 'values', 'customFields']),
         };
         return this.baseDataService.mutate<CreateFacet.Mutation, CreateFacet.Variables>(CREATE_FACET, input);
     }
 
     updateFacet(facet: UpdateFacetInput) {
         const input: UpdateFacet.Variables = {
-            input: pick(facet, ['id', 'code', 'translations', 'customFields']),
+            input: pick(facet, ['id', 'code', 'isPrivate', 'translations', 'customFields']),
         };
         return this.baseDataService.mutate<UpdateFacet.Mutation, UpdateFacet.Variables>(UPDATE_FACET, input);
     }