feat(admin-ui): Permissions checks for Facet & Collection views

Relates to #94

packages/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html

@@ -19,6 +19,7 @@
         </button>
         <ng-template #updateButton>
             <button
+                *vdrIfPermissions="'UpdateCatalog'"
                 class="btn btn-primary"
                 (click)="save()"
                 [disabled]="(detailForm.invalid || detailForm.pristine) && !assetsChanged()"
@@ -34,7 +35,13 @@
         <div class="clr-col">
             <vdr-form-field [label]="'catalog.visibility' | translate" for="visibility">
                 <clr-toggle-wrapper>
-                    <input type="checkbox" clrToggle formControlName="visible" id="visibility" />
+                    <input
+                        type="checkbox"
+                        clrToggle
+                        formControlName="visible"
+                        id="visibility"
+                        [attr.disabled]="!('UpdateCatalog' | hasPermission)"
+                    />
                     <label class="visible-toggle">
                         {{
                             detailForm.value.visible
@@ -45,10 +52,16 @@
                 </clr-toggle-wrapper>
             </vdr-form-field>
             <vdr-form-field [label]="'common.name' | translate" for="name">
-                <input id="name" type="text" formControlName="name" />
+                <input
+                    id="name"
+                    type="text"
+                    formControlName="name"
+                    [readonly]="!('UpdateCatalog' | hasPermission)"
+                />
             </vdr-form-field>
             <vdr-rich-text-editor
                 formControlName="description"
+                [readonly]="!('UpdateCatalog' | hasPermission)"
                 [label]="'common.description' | translate"
             ></vdr-rich-text-editor>
 
@@ -81,11 +94,12 @@
                     [operation]="filter"
                     [operationDefinition]="getFilterDefinition(filter)"
                     [formControlName]="i"
+                    [readonly]="!('UpdateCatalog' | hasPermission)"
                     [activeChannel]="activeChannel$ | async"
                 ></vdr-configurable-input>
             </ng-container>
 
-            <div>
+            <div *vdrIfPermissions="'UpdateCatalog'">
                 <vdr-dropdown>
                     <button class="btn btn-outline" vdrDropdownTrigger>
                         <clr-icon shape="plus"></clr-icon>

packages/admin-ui/src/app/catalog/components/collection-list/collection-list.component.html

@@ -1,6 +1,6 @@
 <vdr-action-bar>
     <vdr-ab-right>
-        <a class="btn btn-primary" [routerLink]="['./create']">
+        <a class="btn btn-primary" *vdrIfPermissions="'CreateCatalog'" [routerLink]="['./create']">
             <clr-icon shape="plus"></clr-icon>
             {{ 'catalog.create-new-collection' | translate }}
         </a>

packages/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.html

@@ -3,7 +3,7 @@
     class="tree-node"
     #dropList
     [cdkDropListData]="collectionTree"
-    [cdkDropListDisabled]="false"
+    [cdkDropListDisabled]="!('UpdateCatalog' | hasPermission)"
     (cdkDropListDropped)="drop($event)"
 >
     <div
@@ -36,15 +36,19 @@
                 <clr-icon shape="edit"></clr-icon>
                 {{ 'common.edit' | translate }}
             </a>
-                <div class="drag-handle" cdkDragHandle>
-                    <clr-icon shape="drag-handle" size="24"></clr-icon>
-                </div>
+            <div class="drag-handle" cdkDragHandle *vdrIfPermissions="'UpdateCatalog'">
+                <clr-icon shape="drag-handle" size="24"></clr-icon>
+            </div>
             <vdr-dropdown>
                 <button class="icon-button" vdrDropdownTrigger>
                     <clr-icon shape="ellipsis-vertical"></clr-icon>
                 </button>
                 <vdr-dropdown-menu vdrPosition="bottom-right">
-                    <a class="dropdown-item" [routerLink]="['./', 'create', { parentId: collection.id }]">
+                    <a
+                        class="dropdown-item"
+                        [routerLink]="['./', 'create', { parentId: collection.id }]"
+                        *vdrIfPermissions="'CreateCatalog'"
+                    >
                         <clr-icon shape="plus"></clr-icon>
                         {{ 'catalog.create-new-collection' | translate }}
                     </a>
@@ -52,7 +56,7 @@
                     <button
                         type="button"
                         vdrDropdownItem
-                        [disabled]="i === 0"
+                        [disabled]="i === 0 || !('UpdateCatalog' | hasPermission)"
                         (click)="moveUp(collection, i)"
                     >
                         <clr-icon shape="caret up"></clr-icon>
@@ -61,7 +65,9 @@
                     <button
                         type="button"
                         vdrDropdownItem
-                        [disabled]="i === collectionTree.children.length - 1"
+                        [disabled]="
+                            i === collectionTree.children.length - 1 || !('UpdateCatalog' | hasPermission)
+                        "
                         (click)="moveDown(collection, i)"
                     >
                         <clr-icon shape="caret down"></clr-icon>
@@ -73,12 +79,18 @@
                         vdrDropdownItem
                         *ngFor="let item of getMoveListItems(collection)"
                         (click)="move(collection, item.id)"
+                        [disabled]="!('UpdateCatalog' | hasPermission)"
                     >
                         <clr-icon shape="child-arrow"></clr-icon>
                         {{ item.path }}
                     </button>
                     <div class="dropdown-divider"></div>
-                    <button class="button" vdrDropdownItem (click)="delete(collection.id)">
+                    <button
+                        class="button"
+                        vdrDropdownItem
+                        (click)="delete(collection.id)"
+                        [disabled]="!('DeleteCatalog' | hasPermission)"
+                    >
                         <clr-icon shape="trash" class="is-danger"></clr-icon>
                         {{ 'common.delete' | translate }}
                     </button>

packages/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"
         >
@@ -19,6 +19,7 @@
         </button>
         <ng-template #updateButton>
             <button
+                *vdrIfPermissions="'UpdateCatalog'"
                 class="btn btn-primary"
                 (click)="save()"
                 [disabled]="detailForm.invalid || detailForm.pristine"
@@ -29,11 +30,17 @@
     </vdr-ab-right>
 </vdr-action-bar>
 
-<form class="form" [formGroup]="detailForm" *ngIf="(entity$ | async) as facet">
+<form class="form" [formGroup]="detailForm" *ngIf="entity$ | async as facet">
     <section class="form-block" formGroupName="facet">
         <vdr-form-field [label]="'catalog.visibility' | translate" for="visibility">
             <clr-toggle-wrapper>
-                <input type="checkbox" clrToggle formControlName="visible" id="visibility" />
+                <input
+                    type="checkbox"
+                    clrToggle
+                    [attr.disabled]="!('UpdateCatalog' | hasPermission)"
+                    formControlName="visible"
+                    id="visibility"
+                />
                 <label class="visible-toggle">
                     {{
                         detailForm.value.facet.visible
@@ -48,11 +55,21 @@
                 id="name"
                 type="text"
                 formControlName="name"
+                [readonly]="!('UpdateCatalog' | hasPermission)"
                 (input)="updateCode(facet.code, $event.target.value)"
             />
         </vdr-form-field>
-        <vdr-form-field [label]="'common.code' | translate" for="code" [readOnlyToggle]="true">
-            <input id="code" type="text" formControlName="code" />
+        <vdr-form-field
+            [label]="'common.code' | translate"
+            for="code"
+            [readOnlyToggle]="'UpdateCatalog' | hasPermission"
+        >
+            <input
+                id="code"
+                type="text"
+                [readonly]="!('UpdateCatalog' | hasPermission)"
+                formControlName="code"
+            />
         </vdr-form-field>
 
         <section formGroupName="customFields" *ngIf="customFields.length">
@@ -91,6 +108,7 @@
                         <input
                             type="text"
                             formControlName="name"
+                            [readonly]="!('UpdateCatalog' | hasPermission)"
                             (input)="updateValueCode(facet.values[i]?.code, $event.target.value, i)"
                         />
                     </td>
@@ -116,8 +134,10 @@
                                     type="button"
                                     class="delete-button"
                                     (click)="deleteFacetValue(facet.values[i].id)"
+                                    [disabled]="!('UpdateCatalog' | hasPermission)"
                                     vdrDropdownItem
                                 >
+                                    <clr-icon shape="trash" class="is-danger"></clr-icon>
                                     {{ 'common.delete' | translate }}
                                 </button>
                             </vdr-dropdown-menu>
@@ -128,7 +148,12 @@
         </table>
 
         <div>
-            <button type="button" class="btn btn-secondary" (click)="addFacetValue()">
+            <button
+                type="button"
+                class="btn btn-secondary"
+                *vdrIfPermissions="'CreateCatalog'"
+                (click)="addFacetValue()"
+            >
                 <clr-icon shape="add"></clr-icon>
                 {{ 'catalog.add-facet-value' | translate }}
             </button>

packages/admin-ui/src/app/catalog/components/facet-list/facet-list.component.html

@@ -1,6 +1,8 @@
 <vdr-action-bar>
     <vdr-ab-right>
-        <a class="btn btn-primary" [routerLink]="['./create']">
+        <a class="btn btn-primary"
+           *vdrIfPermissions="'CreateCatalog'"
+           [routerLink]="['./create']">
             <clr-icon shape="plus"></clr-icon>
             {{ 'catalog.create-new-facet' | translate }}
         </a>
@@ -68,6 +70,7 @@
                         type="button"
                         class="delete-button"
                         (click)="deleteFacet(facet.id)"
+                        [disabled]="!('DeleteCatalog' | hasPermission)"
                         vdrDropdownItem
                     >
                         <clr-icon shape="trash" class="is-danger"></clr-icon>

packages/admin-ui/src/app/shared/components/configurable-input/configurable-input.component.html

@@ -5,42 +5,54 @@
             <div *ngFor="let arg of operation.args" class="arg-row">
                 <label>{{ arg.name | sentenceCase }}</label>
                 <clr-checkbox-wrapper *ngIf="getArgType(arg) === 'boolean'">
-                    <input type="checkbox" clrCheckbox [formControlName]="arg.name" [id]="arg.name" />
+                    <input
+                        type="checkbox"
+                        clrCheckbox
+                        [formControlName]="arg.name"
+                        [id]="arg.name"
+                        [attr.disabled]="readonly"
+                    />
                 </clr-checkbox-wrapper>
                 <input
                     *ngIf="isIntInput(arg)"
                     [name]="arg.name"
                     type="number"
                     step="1"
+                    [readonly]="readonly"
                     [formControlName]="arg.name"
                 />
                 <input
                     *ngIf="isStringWithoutOptions(arg)"
                     [name]="arg.name"
                     type="text"
+                    [readonly]="readonly"
                     [formControlName]="arg.name"
                 />
                 <input
                     *ngIf="getArgType(arg) === 'datetime'"
                     [name]="arg.name"
                     type="date"
+                    [readonly]="readonly"
                     [formControlName]="arg.name"
                 />
                 <vdr-currency-input
                     *ngIf="isMoneyInput(arg)"
                     [formControlName]="arg.name"
+                    [readonly]="readonly"
                     [currencyCode]="activeChannel?.currencyCode"
                 ></vdr-currency-input>
                 <vdr-percentage-suffix-input
                     *ngIf="isPercentageInput(arg)"
+                    [readonly]="readonly"
                     [formControlName]="arg.name"
                 ></vdr-percentage-suffix-input>
                 <vdr-facet-value-selector
+                    [readonly]="readonly"
                     [facets]="facets"
                     [formControlName]="arg.name"
                     *ngIf="getArgType(arg) === 'facetValueIds' && facets"
                 ></vdr-facet-value-selector>
-                <select clrSelect [formControlName]="arg.name" *ngIf="isStringWithOptions(arg)">
+                <select clrSelect [formControlName]="arg.name" *ngIf="isStringWithOptions(arg)" [attr.disabled]="readonly">
                     <option *ngFor="let option of getStringOptions(arg)" [value]="option.value">
                         {{ option.label || option.value }}
                     </option>
@@ -48,7 +60,7 @@
             </div>
         </form>
     </div>
-    <div class="card-footer">
+    <div class="card-footer" *ngIf="!readonly">
         <button class="btn btn-sm btn-link btn-warning" (click)="remove.emit(operation)">
             <clr-icon shape="times"></clr-icon>
             {{ 'common.remove' | translate }}

packages/admin-ui/src/app/shared/components/configurable-input/configurable-input.component.ts

@@ -59,6 +59,7 @@ export class ConfigurableInputComponent implements OnChanges, OnDestroy, Control
     @Input() operationDefinition?: ConfigurableOperationDefinition;
     @Input() facets: FacetWithValues.Fragment[] = [];
     @Input() activeChannel: GetActiveChannel.ActiveChannel;
+    @Input() readonly = false;
     @Output() remove = new EventEmitter<ConfigurableOperation>();
     argValues: { [name: string]: any } = {};
     onChange: (val: any) => void;

packages/admin-ui/src/app/shared/components/facet-value-selector/facet-value-selector.component.html

@@ -6,14 +6,14 @@
     multiple="true"
     appendTo="body"
     bindLabel="name"
-    [disabled]="disabled"
+    [disabled]="disabled || readonly"
     [ngModel]="value"
     (change)="onChange($event)"
 >
     <ng-template ng-label-tmp let-item="item" let-clear="clear">
         <vdr-facet-value-chip
             [facetValue]="item.value"
-            [removable]="true"
+            [removable]="!readonly"
             (remove)="clear(item)"
         ></vdr-facet-value-chip>
     </ng-template>

packages/admin-ui/src/app/shared/components/facet-value-selector/facet-value-selector.component.ts

@@ -28,6 +28,7 @@ export type FacetValueSeletorItem = {
 export class FacetValueSelectorComponent implements OnInit, ControlValueAccessor {
     @Output() selectedValuesChange = new EventEmitter<FacetValue.Fragment[]>();
     @Input() facets: FacetWithValues.Fragment[];
+    @Input() readonly = false;
 
     facetValues: FacetValueSeletorItem[] = [];
     onChangeFn: (val: any) => void;
@@ -41,6 +42,9 @@ export class FacetValueSelectorComponent implements OnInit, ControlValueAccessor
     }
 
     onChange(selected: FacetValueSeletorItem[]) {
+        if (this.readonly) {
+            return;
+        }
         this.selectedValuesChange.emit(selected.map(s => s.value));
         if (this.onChangeFn) {
             this.onChangeFn(JSON.stringify(selected.map(s => s.id)));