feat: add a permission directive for manage all sections to view

Author: efirst91

apps/angular/6-structural-directive/src/app/directives/permission.directive.spec.ts

@@ -0,0 +1,8 @@
+import { PermissionDirective } from './permission.directive';
+
+describe('PermissionDirective', () => {
+  it('should create an instance', () => {
+    const directive = new PermissionDirective();
+    expect(directive).toBeTruthy();
+  });
+});

apps/angular/6-structural-directive/src/app/directives/permission.directive.ts

@@ -0,0 +1,79 @@
+import {
+  Directive,
+  EmbeddedViewRef,
+  inject,
+  input,
+  OnInit,
+  TemplateRef,
+  ViewContainerRef,
+  ViewRef,
+} from '@angular/core';
+import { Role, User } from '../user.model';
+import { UserStore } from '../user.store';
+
+@Directive({
+  selector: '[appHasRole],[appHasRoleSuperAdmin]',
+  standalone: true,
+})
+export class PermissionDirective implements OnInit {
+  private readonly templateRef = inject(TemplateRef);
+  private readonly viewContainerRef = inject(ViewContainerRef);
+  private readonly userStore = inject(UserStore);
+
+  appHasRole = input<string | string[] | null>(null);
+  appHasRoleSuperAdmin = input<boolean | string>(true);
+
+  private currentEmbeddedView: EmbeddedViewRef<ViewRef> | null = null;
+
+  ngOnInit() {
+    this.manageSubscriptions();
+  }
+
+  private manageSubscriptions(): void {
+    this.userStore.user$.subscribe({
+      next: (user) => {
+        if (!user) {
+          this.viewContainerRef.clear();
+          return;
+        }
+        const renderView = this.canSectionBeVisible(user);
+        if (renderView) {
+          this.createView();
+        } else {
+          this.clearView();
+        }
+      },
+      error: () => {
+        // addition error handling goes here
+        this.clearView();
+      },
+    });
+  }
+
+  private createView(): void {
+    this.currentEmbeddedView ??= this.viewContainerRef.createEmbeddedView(
+      this.templateRef,
+    );
+  }
+
+  private clearView(): void {
+    this.viewContainerRef.clear();
+    this.currentEmbeddedView = null;
+  }
+
+  private canSectionBeVisible(activeUser: User): boolean {
+    const { roles } = activeUser;
+    const hasRole = this.appHasRole();
+    const isSuperAdmin = this.appHasRoleSuperAdmin();
+
+    if (Array.isArray(hasRole) && hasRole.length > 0) {
+      return hasRole.some((rolName: string) => roles.includes(rolName as Role));
+    }
+
+    if (typeof hasRole === 'string') {
+      return roles.includes(hasRole as Role);
+    }
+
+    return activeUser.isAdmin === !!isSuperAdmin;
+  }
+}