fix(admin-ui): Fix permission handling in nav menu

vendure-ecommerce · Oct 27, 2020 · 70037e5 · 70037e5
1 parent cbcd21f
commit 70037e5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 19 deletions.
diff --git a/packages/admin-ui/src/lib/core/src/components/main-nav/main-nav.component.html b/packages/admin-ui/src/lib/core/src/components/main-nav/main-nav.component.html
@@ -13,24 +13,26 @@
                 <input [id]="section.id" type="checkbox" [checked]="section.collapsedByDefault" />
                 <label [for]="section.id">{{ section.label | translate }}</label>
                 <ul class="nav-list">
-                    <li *ngFor="let item of section.items">
-                        <a
-                            class="nav-link"
-                            [attr.data-item-id]="section.id"
-                            [routerLink]="getRouterLink(item)"
-                            routerLinkActive="active"
-                        >
-                            <ng-container *ngIf="item.statusBadge | async as itemBadge">
-                                <div
-                                    *ngIf="itemBadge.type !== 'none'"
-                                    class="status-badge"
-                                    [class]="itemBadge.type"
-                                ></div>
-                            </ng-container>
-                            <clr-icon [attr.shape]="item.icon || 'block'" size="20"></clr-icon>
-                            {{ item.label | translate }}
-                        </a>
-                    </li>
+                    <ng-container *ngFor="let item of section.items">
+                        <li *vdrIfPermissions="item.requiresPermission">
+                            <a
+                                class="nav-link"
+                                [attr.data-item-id]="section.id"
+                                [routerLink]="getRouterLink(item)"
+                                routerLinkActive="active"
+                            >
+                                <ng-container *ngIf="item.statusBadge | async as itemBadge">
+                                    <div
+                                        *ngIf="itemBadge.type !== 'none'"
+                                        class="status-badge"
+                                        [class]="itemBadge.type"
+                                    ></div>
+                                </ng-container>
+                                <clr-icon [attr.shape]="item.icon || 'block'" size="20"></clr-icon>
+                                {{ item.label | translate }}
+                            </a>
+                        </li>
+                    </ng-container>
                 </ul>
             </section>
         </ng-container>

diff --git a/packages/admin-ui/src/lib/core/src/shared/directives/if-permissions.directive.ts b/packages/admin-ui/src/lib/core/src/shared/directives/if-permissions.directive.ts
@@ -37,7 +37,9 @@ export class IfPermissionsDirective extends IfDirectiveBase<[Permission | null]>
         private changeDetectorRef: ChangeDetectorRef,
     ) {
         super(_viewContainer, templateRef, permission => {
-            if (!permission) {
+            if (permission == null) {
+                return of(true);
+            } else if (!permission) {
                 return of(false);
             }
             return this.dataService.client