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))
);