AW-4641 Add fmHasRole directive

projects/common/src/fm/common.module.ts

@@ -33,7 +33,8 @@ import { TagInputComponent } from './components/tag-input/tag-input.component';
 import { MenuBackgroundComponent } from './components/menu-background/menu-background.component';
 import { HasPackageDirective} from './components/has-package/has-package.directive';
 import { PackageExistsDirective} from './components/package-exists/package-exists.directive';
-import { HasClaimDirective} from './components/has-claim/has-claim.directive';
+import { HasClaimDirective } from './components/has-claim/has-claim.directive';
+import { HasRoleDirective } from './components/has-role/has-role.directive';
 import { UserMenuComponent} from './components/user-menu/user-menu.component';
 import { ThumbnailComponent } from './components/thumbnail/thumbnail.component';
 import { Alert } from './enumerations/alert.enum';
@@ -85,6 +86,7 @@ export {
   HasPackageDirective,
   PackageExistsDirective,
   HasClaimDirective,
+  HasRoleDirective,
   Alert,
   IEventMessage,
   IItem,
@@ -148,6 +150,7 @@ export {
     HasPackageDirective,
     PackageExistsDirective,
     HasClaimDirective,
+    HasRoleDirective,
     UserMenuComponent,
     GradientComponent,
     GradientSelectComponent,
@@ -179,6 +182,7 @@ export {
     HasPackageDirective,
     PackageExistsDirective,
     HasClaimDirective,
+    HasRoleDirective,
     UserMenuComponent,
     GradientComponent,
     GradientSelectComponent,

projects/common/src/fm/components/has-role/has-role.directive.ts

@@ -0,0 +1,33 @@
+import { Directive, ViewContainerRef,TemplateRef,OnInit,Input, OnDestroy } from '@angular/core';
+import { Store} from '@ngrx/store';
+import * as appCommonReducer from '../../reducers/app-common.reducer'
+import { Observable, Subscription } from 'rxjs';
+import { IUser } from '../../models/user';
+
+@Directive({
+  selector: '[fmHasRole]',
+})
+export class HasRoleDirective  implements OnInit, OnDestroy{
+  @Input('fmHasRole') role:string;
+
+  constructor(private templateRef$: TemplateRef<any>,private viewContainerRef$: ViewContainerRef,private store$: Store<appCommonReducer.State>) { }
+  private user$:Observable<IUser> = this.store$.select(appCommonReducer.SelectGetUser);
+  private hasView = false;
+  private roleClaim = 'role';
+  private sub: Subscription;
+  ngOnInit() {   
+    this.sub = this.user$.subscribe((user) => {
+      console.log('fmHasRole', this.role);
+      if (user && user.claims[this.roleClaim]?.includes(this.role)) {
+        this.viewContainerRef$.createEmbeddedView(this.templateRef$);
+        this.hasView=true;
+      } else if (this.hasView) {
+        this.viewContainerRef$.clear();
+        this.hasView = false;     
+      }  
+    });    
+  }
+  ngOnDestroy() {
+    if (this.sub) {this.sub.unsubscribe() };
+  }
+}

src/app/menu/menu.component.html

@@ -14,6 +14,7 @@
     <div class="card menu-card">
       <ul class="navbar-nav">
         <li class="nav-item py-0" *fmHasPackage="'vnd.farmmaps.itemtype.package.agrirouter'"><a [routerLinkActive]="['active']" [routerLink]="['/agrirouter']" class="nav-link"><span><i class="fal fa-plug" aria-hidden="true"></i> <span i18n>agrirouter</span></span></a></li>
+        <li class="nav-item py-0" *fmHasRole="'admin'"><a [routerLinkActive]="['active']" [routerLink]="['/admin']" class="nav-link"><span><i class="fal fa-plug" aria-hidden="true"></i> <span i18n>Admin role</span></span></a></li>
       </ul>
     </div> 
 </div>