diff --git a/src/app/core/directives/not-role-toggle.directive.spec.ts b/src/app/core/directives/not-role-toggle.directive.spec.ts index 641c824c8b..9fac3c98ac 100644 --- a/src/app/core/directives/not-role-toggle.directive.spec.ts +++ b/src/app/core/directives/not-role-toggle.directive.spec.ts @@ -9,6 +9,8 @@ import { RoleToggleModule } from 'ish-core/role-toggle.module';
content1
content2
content3
+
content4
+
content5
`, // Default change detection for dynamic role test changeDetection: ChangeDetectionStrategy.Default, @@ -73,4 +75,12 @@ describe('Not Role Toggle Directive', () => { expect(element.textContent).toContain('content3'); }); + + it('should not render content if role is in given roles', () => { + expect(element.textContent).not.toContain('content4'); + }); + + it('should render content if the role is not in given roles', () => { + expect(element.textContent).toContain('content5'); + }); }); diff --git a/src/app/core/directives/not-role-toggle.directive.ts b/src/app/core/directives/not-role-toggle.directive.ts index cf4538f4ef..bf9069147a 100644 --- a/src/app/core/directives/not-role-toggle.directive.ts +++ b/src/app/core/directives/not-role-toggle.directive.ts @@ -1,4 +1,4 @@ -import { Directive, Input, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core'; +import { ChangeDetectorRef, Directive, Input, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core'; import { ReplaySubject, Subject, Subscription } from 'rxjs'; import { distinctUntilChanged, takeUntil } from 'rxjs/operators'; @@ -6,12 +6,16 @@ import { RoleToggleService } from 'ish-core/utils/role-toggle/role-toggle.servic /** * Structural directive. - * Used on an element, this element will only be rendered if the logged in user has NOT the specified role. + * Used on an element, this element will only be rendered if the logged in user has NOT the specified role or one of the specified roles. * * @example *
* Only visible when the current user is not an OCI punchout user. *
+ * or + *
+ * Only visible when the current user is not an OCI punchout user. + *
*/ @Directive({ selector: '[ishHasNotRole]', @@ -25,7 +29,8 @@ export class NotRoleToggleDirective implements OnDestroy { constructor( private templateRef: TemplateRef, private viewContainer: ViewContainerRef, - private roleToggleService: RoleToggleService + private roleToggleService: RoleToggleService, + private cdRef: ChangeDetectorRef ) { this.enabled$.pipe(distinctUntilChanged(), takeUntil(this.destroy$)).subscribe(enabled => { if (enabled) { @@ -33,10 +38,11 @@ export class NotRoleToggleDirective implements OnDestroy { } else { this.viewContainer.clear(); } + this.cdRef.markForCheck(); }); } - @Input() set ishHasNotRole(roleId: string) { + @Input() set ishHasNotRole(roleId: string | string[]) { // end previous subscription and newly subscribe if (this.subscription) { // tslint:disable-next-line: ban diff --git a/src/app/core/role-toggle.module.ts b/src/app/core/role-toggle.module.ts index 7e6d03841a..bca639a8b4 100644 --- a/src/app/core/role-toggle.module.ts +++ b/src/app/core/role-toggle.module.ts @@ -21,7 +21,7 @@ export class RoleToggleModule { { provide: RoleToggleService, useValue: { - hasRole: (roleId: string) => + hasRole: (roleId: string | string[]) => RoleToggleModule.roleIds.pipe( whenTruthy(), map(roles => checkRole(roles, roleId)) diff --git a/src/app/core/utils/role-toggle/role-toggle.service.spec.ts b/src/app/core/utils/role-toggle/role-toggle.service.spec.ts index cae4368bd3..22741ac091 100644 --- a/src/app/core/utils/role-toggle/role-toggle.service.spec.ts +++ b/src/app/core/utils/role-toggle/role-toggle.service.spec.ts @@ -35,5 +35,13 @@ describe('Role Toggle Service', () => { it("should return false if user doesn't have the role", () => { expect(roleToggleService.hasRole('ROLE2')).toBeObservable(cold('a', { a: false })); }); + + it('should return true if user has one of the roles', () => { + expect(roleToggleService.hasRole(['ROLE1', 'ROLE3'])).toBeObservable(cold('a', { a: true })); + }); + + it("should return false if user doesn't have one the roles", () => { + expect(roleToggleService.hasRole(['ROLE2', 'ROLE3'])).toBeObservable(cold('a', { a: false })); + }); }); }); diff --git a/src/app/core/utils/role-toggle/role-toggle.service.ts b/src/app/core/utils/role-toggle/role-toggle.service.ts index ba2fa55e76..4663ca1749 100644 --- a/src/app/core/utils/role-toggle/role-toggle.service.ts +++ b/src/app/core/utils/role-toggle/role-toggle.service.ts @@ -6,8 +6,10 @@ import { map } from 'rxjs/operators'; import { getUserRoles } from 'ish-core/store/customer/authorization'; import { whenTruthy } from 'ish-core/utils/operators'; -export function checkRole(roleIds: string[], roleId: string): boolean { - return roleIds.includes(roleId); +export function checkRole(roleIds: string[], roleId: string | string[]): boolean { + // tslint:disable-next-line: no-parameter-reassignment + roleId = typeof roleId === 'string' ? [roleId] : typeof roleId === 'undefined' ? [] : roleId; + return roleId.some(id => roleIds.includes(id)); } @Injectable({ providedIn: 'root' }) @@ -18,9 +20,9 @@ export class RoleToggleService { this.roleIds$ = store.pipe(select(getUserRoles)).pipe(map(roles => roles.map(role => role.roleId))); } - hasRole(roleId: string): Observable { + hasRole(roleId: string | string[]): Observable { return this.roleIds$.pipe( - // wait for permissions to be loaded + // wait for user roles to be loaded whenTruthy(), map(roleIds => checkRole(roleIds, roleId)) );