feat(admin-ui): Support new permissions

Relates to #617
vendure-ecommerce · Apr 26, 2021 · 57566b0 · 57566b0
1 parent 4ed2ed5
commit 57566b0
Show file tree

Hide file tree

Showing 51 changed files with 297 additions and 192 deletions.
diff --git a/packages/admin-ui/src/lib/catalog/src/components/asset-detail/asset-detail.component.html b/packages/admin-ui/src/lib/catalog/src/components/asset-detail/asset-detail.component.html
@@ -6,7 +6,7 @@
     <vdr-ab-right>
         <vdr-action-bar-items locationId="asset-detail"></vdr-action-bar-items>
         <button
-            *vdrIfPermissions="'UpdateCatalog'"
+            *vdrIfPermissions="['UpdateCatalog', 'UpdateAsset']"
             class="btn btn-primary"
             (click)="save()"
             [disabled]="detailForm.invalid || detailForm.pristine"

diff --git a/packages/admin-ui/src/lib/catalog/src/components/asset-list/asset-list.component.html b/packages/admin-ui/src/lib/catalog/src/components/asset-list/asset-list.component.html
@@ -20,7 +20,7 @@
 <vdr-asset-gallery
     [assets]="(items$ | async)! | paginate: (paginationConfig$ | async) || {}"
     [multiSelect]="true"
-    [canDelete]="'DeleteCatalog' | hasPermission"
+    [canDelete]="['DeleteCatalog', 'DeleteAsset'] | hasPermission"
     (deleteAssets)="deleteAssets($event)"
 ></vdr-asset-gallery>
 

diff --git a/...dmin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.html b/...dmin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.html
@@ -21,7 +21,7 @@
         </button>
         <ng-template #updateButton>
             <button
-                *vdrIfPermissions="'UpdateCatalog'"
+                *vdrIfPermissions="['UpdateCatalog', 'UpdateCollection']"
                 class="btn btn-primary"
                 (click)="save()"
                 [disabled]="(detailForm.invalid || detailForm.pristine) && !assetsChanged()"
@@ -42,7 +42,7 @@
                         clrToggle
                         formControlName="visible"
                         id="visibility"
-                        [vdrDisabled]="!('UpdateCatalog' | hasPermission)"
+                        [vdrDisabled]="!(['UpdateCatalog', 'UpdateCollection'] | hasPermission)"
                     />
                     <label class="visible-toggle">
                         <ng-container *ngIf="detailForm.value.visible; else private">{{ 'catalog.public' | translate }}</ng-container>
@@ -55,7 +55,7 @@
                     id="name"
                     type="text"
                     formControlName="name"
-                    [readonly]="!('UpdateCatalog' | hasPermission)"
+                    [readonly]="!(['UpdateCatalog', 'UpdateCollection'] | hasPermission)"
                     (input)="updateSlug($event.target.value)"
                 />
             </vdr-form-field>
@@ -68,13 +68,13 @@
                     id="slug"
                     type="text"
                     formControlName="slug"
-                    [readonly]="!('UpdateCatalog' | hasPermission)"
+                    [readonly]="!(['UpdateCatalog', 'UpdateCollection'] | hasPermission)"
                     pattern="[a-z0-9_-]+"
                 />
             </vdr-form-field>
             <vdr-rich-text-editor
                 formControlName="description"
-                [readonly]="!('UpdateCatalog' | hasPermission)"
+                [readonly]="!(['UpdateCatalog', 'UpdateCollection'] | hasPermission)"
                 [label]="'common.description' | translate"
             ></vdr-rich-text-editor>
 
@@ -107,11 +107,11 @@
                     [operation]="filter"
                     [operationDefinition]="getFilterDefinition(filter)"
                     [formControlName]="i"
-                    [readonly]="!('UpdateCatalog' | hasPermission)"
+                    [readonly]="!(['UpdateCatalog', 'UpdateCollection'] | hasPermission)"
                 ></vdr-configurable-input>
             </ng-container>
 
-            <div *vdrIfPermissions="'UpdateCatalog'">
+            <div *vdrIfPermissions="['UpdateCatalog', 'UpdateCollection']">
                 <vdr-dropdown>
                     <button class="btn btn-outline" vdrDropdownTrigger>
                         <clr-icon shape="plus"></clr-icon>

diff --git a/...es/admin-ui/src/lib/catalog/src/components/collection-list/collection-list.component.html b/...es/admin-ui/src/lib/catalog/src/components/collection-list/collection-list.component.html
@@ -7,7 +7,7 @@
     </vdr-ab-left>
     <vdr-ab-right>
         <vdr-action-bar-items locationId="collection-list"></vdr-action-bar-items>
-        <a class="btn btn-primary" *vdrIfPermissions="'CreateCatalog'" [routerLink]="['./create']">
+        <a class="btn btn-primary" *vdrIfPermissions="['CreateCatalog', 'CreateCollection']" [routerLink]="['./create']">
             <clr-icon shape="plus"></clr-icon>
             {{ 'catalog.create-new-collection' | translate }}
         </a>

diff --git a/...min-ui/src/lib/catalog/src/components/collection-tree/collection-tree-node.component.html b/...min-ui/src/lib/catalog/src/components/collection-tree/collection-tree-node.component.html
@@ -47,7 +47,7 @@
                 <clr-icon shape="edit"></clr-icon>
                 {{ 'common.edit' | translate }}
             </a>
-            <div class="drag-handle" cdkDragHandle *vdrIfPermissions="'UpdateCatalog'">
+            <div class="drag-handle" cdkDragHandle *vdrIfPermissions="['UpdateCatalog', 'UpdateCollection']">
                 <clr-icon shape="drag-handle" size="24"></clr-icon>
             </div>
             <vdr-dropdown>
@@ -58,7 +58,7 @@
                     <a
                         class="dropdown-item"
                         [routerLink]="['./', 'create', { parentId: collection.id }]"
-                        *vdrIfPermissions="'CreateCatalog'"
+                        *vdrIfPermissions="['CreateCatalog', 'CreateCollection']"
                     >
                         <clr-icon shape="plus"></clr-icon>
                         {{ 'catalog.create-new-collection' | translate }}

diff --git a/...admin-ui/src/lib/catalog/src/components/collection-tree/collection-tree-node.component.ts b/...admin-ui/src/lib/catalog/src/components/collection-tree/collection-tree-node.component.ts
@@ -9,8 +9,7 @@ import {
     SimpleChanges,
     SkipSelf,
 } from '@angular/core';
-import { Permission } from '@vendure/admin-ui/core';
-import { DataService } from '@vendure/admin-ui/core';
+import { DataService, Permission } from '@vendure/admin-ui/core';
 import { Observable } from 'rxjs';
 import { map, shareReplay } from 'rxjs/operators';
 
@@ -48,8 +47,18 @@ export class CollectionTreeNodeComponent implements OnInit, OnChanges {
             .userStatus()
             .mapStream(data => data.userStatus.permissions)
             .pipe(shareReplay(1));
-        this.hasUpdatePermission$ = permissions$.pipe(map(perms => perms.includes(Permission.UpdateCatalog)));
-        this.hasDeletePermission$ = permissions$.pipe(map(perms => perms.includes(Permission.DeleteCatalog)));
+        this.hasUpdatePermission$ = permissions$.pipe(
+            map(
+                perms =>
+                    perms.includes(Permission.UpdateCatalog) || perms.includes(Permission.UpdateCollection),
+            ),
+        );
+        this.hasDeletePermission$ = permissions$.pipe(
+            map(
+                perms =>
+                    perms.includes(Permission.DeleteCatalog) || perms.includes(Permission.DeleteCollection),
+            ),
+        );
     }
 
     ngOnChanges(changes: SimpleChanges) {

diff --git a/packages/admin-ui/src/lib/catalog/src/components/facet-detail/facet-detail.component.html b/packages/admin-ui/src/lib/catalog/src/components/facet-detail/facet-detail.component.html
@@ -21,7 +21,7 @@
         </button>
         <ng-template #updateButton>
             <button
-                *vdrIfPermissions="'UpdateCatalog'"
+                *vdrIfPermissions="['UpdateCatalog', 'UpdateFacet']"
                 class="btn btn-primary"
                 (click)="save()"
                 [disabled]="detailForm.invalid || detailForm.pristine"
@@ -39,7 +39,7 @@
                 <input
                     type="checkbox"
                     clrToggle
-                    [vdrDisabled]="!('UpdateCatalog' | hasPermission)"
+                    [vdrDisabled]="!(['UpdateCatalog', 'UpdateFacet'] | hasPermission)"
                     formControlName="visible"
                     id="visibility"
                 />
@@ -54,19 +54,19 @@
                 id="name"
                 type="text"
                 formControlName="name"
-                [readonly]="!('UpdateCatalog' | hasPermission)"
+                [readonly]="!(['UpdateCatalog', 'UpdateFacet'] | hasPermission)"
                 (input)="updateCode(facet.code, $event.target.value)"
             />
         </vdr-form-field>
         <vdr-form-field
             [label]="'common.code' | translate"
             for="code"
-            [readOnlyToggle]="'UpdateCatalog' | hasPermission"
+            [readOnlyToggle]="['UpdateCatalog', 'UpdateFacet'] | hasPermission"
         >
             <input
                 id="code"
                 type="text"
-                [readonly]="!('UpdateCatalog' | hasPermission)"
+                [readonly]="!(['UpdateCatalog', 'UpdateFacet'] | hasPermission)"
                 formControlName="code"
             />
         </vdr-form-field>
@@ -112,7 +112,7 @@
                         <input
                             type="text"
                             formControlName="name"
-                            [readonly]="!('UpdateCatalog' | hasPermission)"
+                            [readonly]="!(['UpdateCatalog', 'UpdateFacet'] | hasPermission)"
                             (input)="updateValueCode(facet.values[i]?.code, $event.target.value, i)"
                         />
                     </td>
@@ -139,7 +139,7 @@
                                     type="button"
                                     class="delete-button"
                                     (click)="deleteFacetValue(facet.values[i]?.id, i)"
-                                    [disabled]="!('UpdateCatalog' | hasPermission)"
+                                    [disabled]="!(['UpdateCatalog', 'UpdateFacet'] | hasPermission)"
                                     vdrDropdownItem
                                 >
                                     <clr-icon shape="trash" class="is-danger"></clr-icon>
@@ -156,7 +156,7 @@
             <button
                 type="button"
                 class="btn btn-secondary"
-                *vdrIfPermissions="'CreateCatalog'"
+                *vdrIfPermissions="['CreateCatalog', 'CreateFacet']"
                 (click)="addFacetValue()"
             >
                 <clr-icon shape="add"></clr-icon>

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
@@ -2,7 +2,7 @@
     <vdr-ab-right>
         <vdr-action-bar-items locationId="facet-list"></vdr-action-bar-items>
         <a class="btn btn-primary"
-           *vdrIfPermissions="'CreateCatalog'"
+           *vdrIfPermissions="['CreateCatalog', 'CreateFacet']"
            [routerLink]="['./create']">
             <clr-icon shape="plus"></clr-icon>
             {{ 'catalog.create-new-facet' | translate }}
@@ -72,7 +72,7 @@
                         type="button"
                         class="delete-button"
                         (click)="deleteFacet(facet.id)"
-                        [disabled]="!('DeleteCatalog' | hasPermission)"
+                        [disabled]="!(['DeleteCatalog', 'DeleteFacet'] | hasPermission)"
                         vdrDropdownItem
                     >
                         <clr-icon shape="trash" class="is-danger"></clr-icon>

diff --git a/...ages/admin-ui/src/lib/catalog/src/components/product-assets/product-assets.component.html b/...ages/admin-ui/src/lib/catalog/src/components/product-assets/product-assets.component.html
@@ -13,7 +13,7 @@
         </div>
     </div>
     <div class="card-block"><ng-container *ngTemplateOutlet="assetList"></ng-container></div>
-    <div class="card-footer" *vdrIfPermissions="'UpdateCatalog'">
+    <div class="card-footer" *vdrIfPermissions="updatePermissions">
         <button class="btn" (click)="selectAssets()">
             <clr-icon shape="attachment"></clr-icon>
             {{ 'asset.add-asset' | translate }}
@@ -33,7 +33,7 @@
     </div>
     <ng-container *ngTemplateOutlet="assetList"></ng-container>
     <button
-        *vdrIfPermissions="'UpdateCatalog'"
+        *vdrIfPermissions="updatePermissions"
         class="compact-select btn btn-icon btn-sm btn-block"
         [title]="'asset.add-asset' | translate"
         (click)="selectAssets()"
@@ -48,14 +48,14 @@
         <div
             cdkDropList
             #dl
-            [cdkDropListDisabled]="!('UpdateCatalog' | hasPermission)"
+            [cdkDropListDisabled]="!(updatePermissions | hasPermission)"
             [cdkDropListEnterPredicate]="dropListEnterPredicate"
             (cdkDropListDropped)="dropListDropped()"
         ></div>
         <div
             *ngFor="let asset of assets"
             cdkDropList
-            [cdkDropListDisabled]="!('UpdateCatalog' | hasPermission)"
+            [cdkDropListDisabled]="!(updatePermissions | hasPermission)"
             [cdkDropListEnterPredicate]="dropListEnterPredicate"
             (cdkDropListDropped)="dropListDropped()"
         >
@@ -75,7 +75,7 @@
                     </button>
                     <button
                         type="button"
-                        [disabled]="isFeatured(asset) || !('UpdateCatalog' | hasPermission)"
+                        [disabled]="isFeatured(asset) || !(updatePermissions | hasPermission)"
                         vdrDropdownItem
                         (click)="setAsFeatured(asset)"
                     >
@@ -86,7 +86,7 @@
                         type="button"
                         class="remove-asset"
                         vdrDropdownItem
-                        [disabled]="!('UpdateCatalog' | hasPermission)"
+                        [disabled]="!(updatePermissions | hasPermission)"
                         (click)="removeAsset(asset)"
                     >
                         {{ 'asset.remove-asset' | translate }}

diff --git a/packages/admin-ui/src/lib/catalog/src/components/product-assets/product-assets.component.ts b/packages/admin-ui/src/lib/catalog/src/components/product-assets/product-assets.component.ts
@@ -8,6 +8,7 @@ import {
     EventEmitter,
     HostBinding,
     Input,
+    Optional,
     Output,
     ViewChild,
 } from '@angular/core';
@@ -16,9 +17,12 @@ import {
     AssetPickerDialogComponent,
     AssetPreviewDialogComponent,
     ModalService,
+    Permission,
 } from '@vendure/admin-ui/core';
 import { unique } from '@vendure/common/lib/unique';
 
+import { CollectionDetailComponent } from '../collection-detail/collection-detail.component';
+
 export interface AssetChange {
     assets: Asset[];
     featuredAsset: Asset | undefined;
@@ -58,10 +62,22 @@ export class ProductAssetsComponent implements AfterViewInit {
     public activeContainer;
     public assets: Asset[] = [];
 
+    private readonly updateCollectionPermissions = [Permission.UpdateCatalog, Permission.UpdateCollection];
+    private readonly updateProductPermissions = [Permission.UpdateCatalog, Permission.UpdateProduct];
+
+    get updatePermissions(): Permission[] {
+        if (this.collectionDetailComponent) {
+            return this.updateCollectionPermissions;
+        } else {
+            return this.updateProductPermissions;
+        }
+    }
+
     constructor(
         private modalService: ModalService,
         private changeDetector: ChangeDetectorRef,
         private viewportRuler: ViewportRuler,
+        @Optional() private collectionDetailComponent?: CollectionDetailComponent,
     ) {}
 
     ngAfterViewInit() {

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
@@ -2,7 +2,7 @@
     <vdr-ab-left>
         <div class="flex clr-flex-row">
             <vdr-entity-info [entity]="entity$ | async"></vdr-entity-info>
-            <clr-toggle-wrapper *vdrIfPermissions="'UpdateCatalog'">
+            <clr-toggle-wrapper *vdrIfPermissions="['UpdateCatalog', 'UpdateProduct']">
                 <input
                     type="checkbox"
                     clrToggle
@@ -32,7 +32,7 @@
         </button>
         <ng-template #updateButton>
             <button
-                *vdrIfPermissions="'UpdateCatalog'"
+                *vdrIfPermissions="['UpdateCatalog', 'UpdateProduct']"
                 class="btn btn-primary"
                 (click)="save()"
                 [disabled]="
@@ -90,7 +90,7 @@
                                     id="name"
                                     type="text"
                                     formControlName="name"
-                                    [readonly]="!('UpdateCatalog' | hasPermission)"
+                                    [readonly]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
                                     (input)="updateSlug($event.target.value)"
                                 />
                             </vdr-form-field>
@@ -121,13 +121,13 @@
                                     id="slug"
                                     type="text"
                                     formControlName="slug"
-                                    [readonly]="!('UpdateCatalog' | hasPermission)"
+                                    [readonly]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
                                     pattern="[a-z0-9_-]+"
                                 />
                             </vdr-form-field>
                             <vdr-rich-text-editor
                                 formControlName="description"
-                                [readonly]="!('UpdateCatalog' | hasPermission)"
+                                [readonly]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
                                 [label]="'common.description' | translate"
                             ></vdr-rich-text-editor>
 
@@ -139,7 +139,7 @@
                                         entityName="Product"
                                         [customFieldsFormGroup]="detailForm.get(['product', 'customFields'])"
                                         [customField]="customField"
-                                        [readonly]="!('UpdateCatalog' | hasPermission)"
+                                        [readonly]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
                                     ></vdr-custom-field-control>
                                 </ng-container>
                             </section>
@@ -148,12 +148,12 @@
                                 <vdr-facet-value-chip
                                     *ngFor="let facetValue of facetValues$ | async"
                                     [facetValue]="facetValue"
-                                    [removable]="'UpdateCatalog' | hasPermission"
+                                    [removable]="['UpdateCatalog', 'UpdateProduct'] | hasPermission"
                                     (remove)="removeProductFacetValue(facetValue.id)"
                                 ></vdr-facet-value-chip>
                                 <button
                                     class="btn btn-sm btn-secondary"
-                                    *vdrIfPermissions="'UpdateCatalog'"
+                                    *vdrIfPermissions="['UpdateCatalog', 'UpdateProduct']"
                                     (click)="selectProductFacetValue()"
                                 >
                                     <clr-icon shape="plus"></clr-icon>
@@ -215,7 +215,7 @@ <h4>{{ 'catalog.product-variants' | translate }}</h4>
                         </div>
                         <div class="flex-spacer"></div>
                         <a
-                            *vdrIfPermissions="'UpdateCatalog'"
+                            *vdrIfPermissions="['UpdateCatalog', 'UpdateProduct']"
                             [routerLink]="['./', 'manage-variants']"
                             class="btn btn-secondary edit-variants-btn"
                         >