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

Relates to #71
vendure-ecommerce · Apr 25, 2019 · 4f17d3e · 4f17d3e
1 parent 848c8b4
commit 4f17d3e
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 9 deletions.
diff --git a/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html b/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html
@@ -33,6 +33,18 @@
     <div class="clr-row">
         <div class="clr-col">
             <section class="form-block">
+                <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.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" type="text" formControlName="name" />
                 </vdr-form-field>

diff --git a/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.scss b/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.scss
@@ -0,0 +1,3 @@
+.visible-toggle {
+    margin-top: -3px !important;
+}
diff --git a/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.ts b/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.ts
@@ -61,6 +61,7 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
         this.detailForm = this.formBuilder.group({
             name: ['', Validators.required],
             description: '',
+            visible: false,
             filters: this.formBuilder.array([]),
             customFields: this.formBuilder.group(
                 this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
@@ -194,6 +195,7 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
         this.detailForm.patchValue({
             name: currentTranslation ? currentTranslation.name : '',
             description: currentTranslation ? currentTranslation.description : '',
+            visible: !entity.isPrivate,
         });
 
         entity.filters.forEach(f => this.addFilter(f));
@@ -238,6 +240,7 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
         return {
             ...updatedCategory,
             ...this.assetChanges,
+            isPrivate: !form.value.visible,
             filters: this.mapOperationsToInputs(this.filters, this.detailForm.value.filters),
         };
     }

diff --git a/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.html b/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.html
@@ -21,14 +21,8 @@
                 <clr-icon shape="folder"></clr-icon>
                 {{ collection.name }}
             </div>
-            <div class="flex-spacer">
-                <vdr-facet-value-chip
-                    *ngFor="let facetValue of collection.facetValues"
-                    [facetValue]="facetValue"
-                    [displayFacetName]="false"
-                    [removable]="false"
-                ></vdr-facet-value-chip>
-            </div>
+            <div class="flex-spacer"></div>
+            <vdr-chip *ngIf="collection.isPrivate">{{ 'catalog.private' | translate }}</vdr-chip>
             <a class="btn btn-link btn-sm" [routerLink]="['./', { contents: collection.id }]">
                 <clr-icon shape="view-list"></clr-icon>
                 {{ 'catalog.view-contents' | translate }}

diff --git a/admin-ui/src/app/catalog/providers/routing/collection-resolver.ts b/admin-ui/src/app/catalog/providers/routing/collection-resolver.ts
@@ -14,6 +14,7 @@ export class CollectionResolver extends BaseEntityResolver<Collection.Fragment>
                 id: '',
                 languageCode: getDefaultLanguage(),
                 name: '',
+                isPrivate: false,
                 description: '',
                 featuredAsset: null,
                 assets: [],

diff --git a/admin-ui/src/app/data/definitions/collection-definitions.ts b/admin-ui/src/app/data/definitions/collection-definitions.ts
@@ -17,6 +17,7 @@ export const COLLECTION_FRAGMENT = gql`
         id
         name
         description
+        isPrivate
         languageCode
         featuredAsset {
             ...Asset
@@ -53,6 +54,7 @@ export const GET_COLLECTION_LIST = gql`
                 id
                 name
                 description
+                isPrivate
                 featuredAsset {
                     ...Asset
                 }

diff --git a/admin-ui/src/app/data/providers/collection-data.service.ts b/admin-ui/src/app/data/providers/collection-data.service.ts
@@ -76,6 +76,7 @@ export class CollectionDataService {
             {
                 input: pick(input, [
                     'id',
+                    'isPrivate',
                     'translations',
                     'assetIds',
                     'featuredAssetId',

diff --git a/admin-ui/src/i18n-messages/en.json b/admin-ui/src/i18n-messages/en.json
@@ -64,9 +64,11 @@
     "price": "Price",
     "price-includes-tax-at": "Price includes tax at { rate }%",
     "price-with-tax-in-default-zone": "Price with { rate }% tax: { price }",
+    "private": "Private",
     "product-details": "Product details",
     "product-name": "Product name",
     "product-variants": "Product variants",
+    "public": "Public",
     "remove-asset": "Remove asset",
     "search-asset-name": "Search assets by name",
     "search-product-name-or-code": "Search by product name or code",
@@ -81,7 +83,8 @@
     "truncated-options-count": "{count} further {count, plural, one {option} other {options}}",
     "upload-assets": "Upload assets",
     "values": "Values",
-    "view-contents": "View contents"
+    "view-contents": "View contents",
+    "visibility": "Visibility"
   },
   "common": {
     "ID": "ID",