SI-425 FE Button "qualifizieren" nur für Qualifizierer und Status "angelegt",...

SI-425 FE Button "qualifizieren" nur für Qualifizierer und Status "angelegt", "aktualisiert" und "geplant"sichtbar machen
SI-427 FE Button "Stornieren" nur für Qualifizierer und Status "angelegt", "aktualisiert" und "geplant"sichtbar machen
SI-432 FE Unit Test

Signed-off-by: Dimitrios Chalepakis <dimitrios.chalepakis@pta.de>

projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html

@@ -490,22 +490,24 @@
             </button>
           </div>
           <div>
-            <button
-              *ngIf="gridFailureDetailsSandbox.saveEnabled"
-              type="button"
-              class="btn btn-info right-button"
-              (click)="gridFailureDetailsSandbox.setQualifiyState()"
-            >
-              {{ 'QualifyBtn' | translate }}
-            </button>
-            <button
-              *ngIf="gridFailureDetailsSandbox.saveEnabled"
-              type="button"
-              class="btn btn-warning right -button"
-              (click)="gridFailureDetailsSandbox.setCancelState()"
-            >
-              {{ 'StornoBtn' | translate }}
-            </button>
+            <!-- State Buttons -->
+            <ng-container *ngIf="gridFailureDetailsSandbox.saveEnabled">
+              <ng-container *ngIf="gridFailureDetailsSandbox.showQualifyButton">
+                <ng-template visibleByRight [acceptedRole]="RolesEnum.QUALIFIER">
+                  <button type="button" class="btn btn-info right-button" (click)="gridFailureDetailsSandbox.setState(StateEnum.QUALIFIED)">
+                    {{ 'QualifyBtn' | translate }}
+                  </button>
+                </ng-template>
+              </ng-container>
+
+              <ng-container *ngIf="gridFailureDetailsSandbox.showStornoButton">
+                <ng-template visibleByRight [acceptedRole]="RolesEnum.QUALIFIER">
+                  <button type="button" class="btn btn-warning right -button" (click)="gridFailureDetailsSandbox.setState(StateEnum.CANCELED)">
+                    {{ 'StornoBtn' | translate }}
+                  </button>
+                </ng-template>
+              </ng-container>
+            </ng-container>
           </div>
         </div>
       </div>

projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.ts

@@ -18,6 +18,7 @@ import { GridFailure } from '@grid-failure-information-app/shared/models/grid-fa
 import * as store from '@grid-failure-information-app/shared/store';
 import { Store } from '@ngrx/store';
 import { Globals } from '@grid-failure-information-app/shared/constants/globals';
+import { RolesEnum, StateEnum } from '@grid-failure-information-app/shared/constants/enums';
 
 @Component({
   selector: 'app-grid-failure-details',
@@ -26,8 +27,9 @@ import { Globals } from '@grid-failure-information-app/shared/constants/globals'
 })
 export class GridFailureDetailsComponent implements OnInit {
   public Globals = Globals;
+  public RolesEnum = RolesEnum;
+  public StateEnum = StateEnum;
   public gridFailureVersions$: Observable<GridFailure[]> = this.appState$.select(store.getGridFailureVersionsData);
-
   constructor(public gridFailureDetailsSandbox: GridFailureDetailsSandbox, protected appState$: Store<store.State>) {}
 
   ngOnInit() {

projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.sandbox.spec.ts

@@ -19,6 +19,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ActionsSubject, Store } from '@ngrx/store';
 import { of } from 'rxjs';
 import { Router } from '@angular/router';
+import { StateEnum } from '@grid-failure-information-app/shared/constants/enums';
 
 describe('GridFailureDetailsSandbox', () => {
   let service: GridFailureDetailsSandbox;
@@ -194,7 +195,64 @@ describe('GridFailureDetailsSandbox', () => {
     gridFailure.versionNumber = 3;
     const gridFailureVersions: GridFailure[] = [gridFailure];
     spyOn(actionSubject, 'pipe').and.returnValue(of({ payload: gridFailureVersions }));
+    const spy = spyOn(service as any, '_showButtonsByState');
+
     service.registerEvents();
     expect(service.currentFormState).toBeDefined();
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should show qualify button state is applied', () => {
+    const state = StateEnum.APPLIED;
+    (service as any)._showButtonsByState(state);
+    expect(service.showQualifyButton).toBeTruthy();
+  });
+
+  it('should show qualify button state is updated', () => {
+    const state = StateEnum.UPDATED;
+    (service as any)._showButtonsByState(state);
+    expect(service.showQualifyButton).toBeTruthy();
+  });
+
+  it('should show qualify button state is scheduled', () => {
+    const state = StateEnum.SCHEDULED;
+    (service as any)._showButtonsByState(state);
+    expect(service.showQualifyButton).toBeTruthy();
+  });
+
+  it('should show storno button state is applied', () => {
+    const state = StateEnum.APPLIED;
+    (service as any)._showButtonsByState(state);
+    expect(service.showStornoButton).toBeTruthy();
+  });
+
+  it('should show storno button state is updated', () => {
+    const state = StateEnum.UPDATED;
+    (service as any)._showButtonsByState(state);
+    expect(service.showStornoButton).toBeTruthy();
+  });
+
+  it('should show storno button state is scheduled', () => {
+    const state = StateEnum.SCHEDULED;
+    (service as any)._showButtonsByState(state);
+    expect(service.showStornoButton).toBeTruthy();
+  });
+
+  it('should set the state in form to qualify and call save fuction', () => {
+    service.gridFailureInternalStates$ = { pipe: () => of({}), map: () => of({}) } as any;
+    spyOn(service.gridFailureInternalStates$, 'pipe').and.returnValue(of([{ status: StateEnum.QUALIFIED, id: '123' }]));
+    const spySave = spyOn(service, 'saveGridFailure');
+    service.setState(StateEnum.QUALIFIED);
+    expect(spySave).toHaveBeenCalled();
+    expect(dispatchSpy).toHaveBeenCalled();
+  });
+
+  it('should set the state in form to canceled and call save fuction', () => {
+    service.gridFailureInternalStates$ = { pipe: () => of({}), map: () => of({}) } as any;
+    spyOn(service.gridFailureInternalStates$, 'pipe').and.returnValue(of([{ status: StateEnum.CANCELED, id: '123' }]));
+    const spySave = spyOn(service, 'saveGridFailure');
+    service.setState(StateEnum.CANCELED);
+    expect(spySave).toHaveBeenCalled();
+    expect(dispatchSpy).toHaveBeenCalled();
   });
 });

projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.sandbox.ts

@@ -44,10 +44,12 @@ import { DisableAction, EnableAction, FormGroupState, NgrxValueConverter, ResetA
 import { Observable } from 'rxjs';
 import { take, takeUntil, map } from 'rxjs/operators';
 import { Globals } from '@grid-failure-information-app/shared/constants/globals';
+import { StateEnum } from '@grid-failure-information-app/shared/constants/enums';
 
 @Injectable()
 export class GridFailureDetailsSandbox extends BaseFormSandbox<GridFailure> {
   public Globals = Globals;
+  public StateEnum = StateEnum;
   public gridFailureDetailsFormState$: Observable<FormGroupState<GridFailure>> = this.appState$.select(store.getGridFailuresDetails);
   public currentFormState: FormGroupState<GridFailure>;
   public gridFailureClassifications$: Observable<FailureClassification[]> = this.appState$.select(store.getGridFailureClassificationsData);
@@ -68,6 +70,8 @@ export class GridFailureDetailsSandbox extends BaseFormSandbox<GridFailure> {
   public internExternEnum = InternExternEnum;
   public saveEnabled: boolean = true;
   public maxVersionNumber: number;
+  public showQualifyButton: boolean = false;
+  public showStornoButton: boolean = false;
 
   private _gridFailureId: string;
   private _qualifyState: FailureState;
@@ -129,26 +133,18 @@ export class GridFailureDetailsSandbox extends BaseFormSandbox<GridFailure> {
     }
   }
 
-  public setQualifiyState(): void {
+  public setState(newState: string): void {
     this.gridFailureInternalStates$
       .pipe(
-        map(states => states.filter(item => item.status === this.Globals.STATI.QUALIFIED)),
+        map(states => states.filter(item => item.status === newState)),
         takeUntil(this._endSubscriptions$)
       )
-      .subscribe(states => (this._qualifyState = states[0]));
-    this.appState$.dispatch(new SetValueAction(gridFailuresDetailFormReducer.INITIAL_STATE.controls.statusInternId.id, this._qualifyState.id));
-    this.saveGridFailure();
-  }
-
-  public setCancelState(): void {
-    this.gridFailureInternalStates$
-      .pipe(
-        map(states => states.filter(item => item.status === this.Globals.STATI.CANCELED)),
-        takeUntil(this._endSubscriptions$)
-      )
-      .subscribe(states => (this._cancelState = states[0]));
-    this.appState$.dispatch(new SetValueAction(gridFailuresDetailFormReducer.INITIAL_STATE.controls.statusInternId.id, this._cancelState.id));
-    this.saveGridFailure();
+      .subscribe(states => {
+        if (states && states.length > 0) {
+          this.appState$.dispatch(new SetValueAction(gridFailuresDetailFormReducer.INITIAL_STATE.controls.statusInternId.id, states[0].id));
+          this.saveGridFailure();
+        }
+      });
   }
 
   public clearGridFailureData(actionType: string): void {
@@ -217,9 +213,10 @@ export class GridFailureDetailsSandbox extends BaseFormSandbox<GridFailure> {
   }
 
   public registerEvents(): void {
-    this.gridFailureDetailsFormState$
-      .pipe(takeUntil(this._endSubscriptions$))
-      .subscribe((formState: FormGroupState<GridFailure>) => (this.currentFormState = formState));
+    this.gridFailureDetailsFormState$.pipe(takeUntil(this._endSubscriptions$)).subscribe((formState: FormGroupState<GridFailure>) => {
+      this.currentFormState = formState;
+      this._showButtonsByState(formState.value.statusIntern);
+    });
     this._actionsSubject
       .pipe(ofType(gridFailureActions.loadGridFailureVersionsSuccess), takeUntil(this._endSubscriptions$))
       .map(action => action['payload'])
@@ -236,4 +233,19 @@ export class GridFailureDetailsSandbox extends BaseFormSandbox<GridFailure> {
     this.saveEnabled = true;
     navigateHome(this._router);
   }
+
+  private _showButtonsByState(state: string): void {
+    switch (state) {
+      case StateEnum.APPLIED:
+      case StateEnum.UPDATED:
+      case StateEnum.SCHEDULED:
+        this.showQualifyButton = true;
+        this.showStornoButton = true;
+        break;
+      default:
+        this.showQualifyButton = false;
+        this.showStornoButton = false;
+        break;
+    }
+  }
 }

projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure.module.ts

@@ -26,7 +26,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { NgrxFormsModule } from 'ngrx-forms';
 import { FormsModule } from '@angular/forms';
 import { AgGridModule } from 'ag-grid-angular';
-import { DirectivesModule } from '@grid-failure-information-app/shared/directives';
+import { DirectivesModule } from '@grid-failure-information-app/shared/directives/directives.module';
 import { FiltersModule } from '@grid-failure-information-app/shared/filters/filters.module';
 import { ContainersModule } from '@grid-failure-information-app/shared/containers/containers.module';
 import { SetFilterComponent } from '@grid-failure-information-app/shared/filters/ag-grid/set-filter/set-filter.component';

projects/grid-failure-information-app/src/app/pages/imported-grid-failure/imported-grid-failure.module.ts

@@ -16,7 +16,7 @@ import { RouterModule } from '@angular/router';
 import { ComponentsModule } from '@grid-failure-information-app/shared/components/components.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { FormsModule } from '@angular/forms';
-import { DirectivesModule } from '@grid-failure-information-app/shared/directives';
+import { DirectivesModule } from '@grid-failure-information-app/shared/directives/directives.module';
 import { ContainersModule } from '@grid-failure-information-app/shared/containers/containers.module';
 import { ImportedGridFailureListComponent } from '@grid-failure-information-app/app/pages/imported-grid-failure/imported-grid-failure-list/imported-grid-failure-list.component';
 import { ImportedGridFailureListSandbox } from '@grid-failure-information-app/app/pages/imported-grid-failure/imported-grid-failure-list/imported-grid-failure-list.sandbox';

projects/grid-failure-information-app/src/app/pages/logout/logout.module.ts

@@ -16,7 +16,7 @@ import { RouterModule } from '@angular/router';
 import { ComponentsModule } from '@grid-failure-information-app/shared/components/components.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { FormsModule } from '@angular/forms';
-import { DirectivesModule } from '@grid-failure-information-app/shared/directives';
+import { DirectivesModule } from '@grid-failure-information-app/shared/directives/directives.module';
 import { ContainersModule } from '@grid-failure-information-app/shared/containers/containers.module';
 import { LogoutPageSandbox } from '@grid-failure-information-app/pages/logout/logout/logout.sandbox';
 import { LogoutPageComponent } from '@grid-failure-information-app/pages/logout/logout/logout.component';

projects/grid-failure-information-app/src/app/shared/components/cell-renderer/icon-cell-renderer/icon-cell-renderer.component.html

@@ -11,19 +11,12 @@
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/ -->
 
-<ng-template visibleByRight [elseTemplate]="readonlyRightsTemplate">
-  <button *ngIf="editIcon" (click)="clicked('edit')" class="tool-icon">
-    <fa name="edit"></fa>
-  </button>
-  <button *ngIf="readonlyIcon" (click)="clicked('readonly')" class="tool-icon">
-    <fa name="eye"></fa>
-  </button>
-  <button *ngIf="deleteIcon" (click)="clicked('delete')" class="tool-icon">
-    <fa name="trash"></fa>
-  </button>
-</ng-template>
-<ng-template #readonlyRightsTemplate>
-  <button (click)="clicked('readonly')" class="tool-icon">
-    <fa name="eye"></fa>
-  </button>
-</ng-template>
+<button *ngIf="editIcon" (click)="clicked('edit')" class="tool-icon">
+  <fa name="edit"></fa>
+</button>
+<button *ngIf="readonlyIcon" (click)="clicked('readonly')" class="tool-icon">
+  <fa name="eye"></fa>
+</button>
+<button *ngIf="deleteIcon" (click)="clicked('delete')" class="tool-icon">
+  <fa name="trash"></fa>
+</button>

projects/grid-failure-information-app/src/app/shared/components/components.module.ts

@@ -27,7 +27,7 @@ import { PageNotFoundComponent } from '@grid-failure-information-app/shared/comp
 import { PaginationComponent } from '@grid-failure-information-app/shared/components/pagination/pagination.component';
 import { SpinnerComponent } from '@grid-failure-information-app/shared/components/spinner/spinner.component';
 import { VersionInfo } from '@grid-failure-information-app/shared/components/version-info/version-info.component';
-import { DirectivesModule } from '@grid-failure-information-app/shared/directives/index';
+import { DirectivesModule } from '@grid-failure-information-app/shared/directives/directives.module';
 import { PipesModule } from '@grid-failure-information-app/shared/pipes/pipes.module';
 import { NgbDatepickerModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';

projects/grid-failure-information-app/src/app/shared/components/pagination/pagination.component.spec.ts

@@ -73,9 +73,6 @@ describe('PaginationComponent', () => {
   xit('check if setLastPage works', () => {
     component.totalPages = 10;
     component.setLastPage();
-    // console.log(component.currentPageIndex);
-    // console.log(component.pageEventItems[0]);
-    // console.log(component.pageEventItems[component.currentPageIndex].pageIndex);
     expect(component.currentPageIndex).toBe(5);
   });
 
@@ -103,7 +100,6 @@ describe('PaginationComponent', () => {
     component.totalPages = 6;
     component.setNextPage();
     let isLastPageLastIcon = component.isLastPageLastIcon();
-    // console.log(component.pageEventItems[component.currentPageIndex].pageIndex);
     expect(isLastPageLastIcon).toBeFalsy();
   });
 });

projects/grid-failure-information-app/src/app/shared/constants/enums.ts

@@ -33,3 +33,22 @@ export enum InternExternEnum {
   I = 'Intern',
   E = 'Extern',
 }
+
+export enum RolesEnum {
+  ADMIN = 'grid-failure-admin',
+  CREATOR = 'grid-failure-creator',
+  PUBLISHER = 'grid-failure-publisher',
+  QUALIFIER = 'grid-failure-qualifier',
+}
+
+export enum StateEnum {
+  NEW = 'neu',
+  CONFIRMED = 'bestätigt',
+  ACTIVE = 'aktiv',
+  CLOSED = 'geschlossen',
+  CANCELED = 'storniert',
+  QUALIFIED = 'qualifiziert',
+  APPLIED = 'angelegt',
+  UPDATED = 'aktualisiert',
+  SCHEDULED = 'geplant',
+}

projects/grid-failure-information-app/src/app/shared/constants/globals.ts

@@ -13,5 +13,4 @@
 export class Globals {
   public static DATE_TIME_PLACEHOLDER_PATTERN: string = 'tt.mm.jjjj / HH:MM';
   public static HELP_URL: string = './assets/userDocumentation/userDocumentation.adoc.html';
-  public static STATI = { QUALIFIED: 'qualifiziert', CANCELED: 'storniert' };
 }

projects/grid-failure-information-app/src/app/shared/directives/index.ts → projects/grid-failure-information-app/src/app/shared/directives/directives.module.ts

@@ -10,18 +10,18 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
-import { AgGridAngular } from 'ag-grid-angular';
-import { AutoResizeColumnsDirective } from '@grid-failure-information-app/shared/directives/agGrid/auto-resize-columns.directive';
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { TranslateColumnDefinitionsDirective } from '@grid-failure-information-app/shared/directives/agGrid/translate-column-definitions.directive';
+import { NgModule } from '@angular/core';
+import { AutoResizeColumnsDirective } from '@grid-failure-information-app/shared/directives/agGrid/auto-resize-columns.directive';
 import { ServerSideDirective } from '@grid-failure-information-app/shared/directives/agGrid/server-side.directive';
-import { FormDisableDirective } from '@grid-failure-information-app/shared/directives/form-disable.directive';
+import { TranslateColumnDefinitionsDirective } from '@grid-failure-information-app/shared/directives/agGrid/translate-column-definitions.directive';
 import { VisibleByRightDirective } from '@grid-failure-information-app/shared/directives/visible-by-right';
+import { AgGridAngular } from 'ag-grid-angular';
+
 @NgModule({
   imports: [CommonModule],
-  declarations: [AutoResizeColumnsDirective, TranslateColumnDefinitionsDirective, ServerSideDirective, FormDisableDirective, VisibleByRightDirective],
-  exports: [AutoResizeColumnsDirective, TranslateColumnDefinitionsDirective, ServerSideDirective, FormDisableDirective, VisibleByRightDirective],
+  declarations: [AutoResizeColumnsDirective, TranslateColumnDefinitionsDirective, ServerSideDirective, VisibleByRightDirective],
+  exports: [AutoResizeColumnsDirective, TranslateColumnDefinitionsDirective, ServerSideDirective, VisibleByRightDirective],
 
   entryComponents: [AgGridAngular],
 })

projects/grid-failure-information-app/src/app/shared/directives/form-disable.directive.spec.ts

-/********************************************************************************
- * Copyright (c) 2020 Contributors to the Eclipse Foundation
- *
- * See the NOTICE file(s) distributed with this work for additional
- * information regarding copyright ownership.
- *
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License v. 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * SPDX-License-Identifier: EPL-2.0
- ********************************************************************************/
-import { FormDisableDirective } from '@grid-failure-information-app/shared/directives/form-disable.directive';
-import { async } from '@angular/core/testing';
-import { of } from 'rxjs/observable/of';
-
-describe('FormDisableDirective', () => {
-  let viewContainerRef: any;
-  let appState: any;
-  beforeEach(async(() => {
-    viewContainerRef = {
-      createEmbeddedView: () => {},
-      clear: () => {},
-      element: { nativeElement: { elements: [{ classList: {}, disabled: false, childNodes: [] }] } },
-    };
-
-    appState = {
-      pipe: () => of(),
-      dispatch: () => {},
-      select: () => of({ roles: ['kon-reader'] }),
-      map: () => of({ reader: true }),
-    };
-  }));
-
-  it('should create an instance', () => {
-    const directive = new FormDisableDirective(viewContainerRef as any, appState as any);
-    expect(directive).toBeTruthy();
-  });
-
-  it('should traverse a DOM', () => {
-    const directive = new FormDisableDirective(viewContainerRef as any, appState as any);
-    const spy = spyOn(directive, '_traverseDOM' as any);
-    directive.ngAfterViewInit();
-    expect(spy).toHaveBeenCalled();
-  });
-
-  it('should disable form element', () => {
-    const directive = new FormDisableDirective(viewContainerRef as any, appState as any);
-    directive.ngAfterViewInit();
-    expect(viewContainerRef.element.nativeElement.elements[0].disabled).toBe(true);
-  });
-});

projects/grid-failure-information-app/src/app/shared/directives/form-disable.directive.ts

-/********************************************************************************
- * Copyright (c) 2020 Contributors to the Eclipse Foundation
- *
- * See the NOTICE file(s) distributed with this work for additional
- * information regarding copyright ownership.
- *
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License v. 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * SPDX-License-Identifier: EPL-2.0
- ********************************************************************************/
-import { Directive, ViewContainerRef, AfterViewInit, OnDestroy } from '@angular/core';
-import { Store } from '@ngrx/store';
-import * as store from '@grid-failure-information-app/shared/store';
-import { Observable, Subject } from 'rxjs';
-import { User } from '@grid-failure-information-app/shared/models/user';
-import { PermissionsModel } from '@grid-failure-information-app/shared/models/permissions.model';
-import { takeUntil } from 'rxjs/operators';
-
-@Directive({
-  selector: 'form',
-})
-export class FormDisableDirective implements AfterViewInit, OnDestroy {
-  private _endSubscriptions$: Subject<boolean> = new Subject();
-  private _permissions$: Observable<PermissionsModel> = this._appState$
-    .select(store.getUser)
-    .pipe(takeUntil(this._endSubscriptions$))
-    .map((user: User) => {
-      return new PermissionsModel(user.roles);
-    });
-
-  constructor(private _viewContainer: ViewContainerRef, private _appState$: Store<store.State>) {}
-
-  ngAfterViewInit() {
-    this._permissions$.subscribe(permissions => {
-      this._traverseDOM(this._viewContainer.element.nativeElement.elements, permissions);
-    });
-  }
-  ngOnDestroy() {
-    this._endSubscriptions$.next(true);
-  }
-  private _traverseDOM(elements: any[], permissions: PermissionsModel): void {
-    for (const element of elements) {
-      const isCancelButton = !!Object.keys(element.classList || {}).find(
-        item => element.classList[item] === 'cancel-button' || element.classList[item] === 'btn-sm'
-      );
-      element.disabled = element.disabled || (!isCancelButton && permissions.reader);
-
-      this._traverseDOM(element.childNodes, permissions);
-    }
-  }
-}

projects/grid-failure-information-app/src/app/shared/directives/visible-by-right.spec.ts

@@ -10,8 +10,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
-import { VisibleByRightDirective } from '@grid-failure-information-app/shared/directives/visible-by-right';
 import { async } from '@angular/core/testing';
+import { RolesEnum } from '@grid-failure-information-app/shared/constants/enums';
+import { VisibleByRightDirective } from '@grid-failure-information-app/shared/directives/visible-by-right';
 import { of } from 'rxjs/observable/of';
 
 describe('VisibleByRightDirective', () => {
@@ -28,8 +29,8 @@ describe('VisibleByRightDirective', () => {
     appState = {
       pipe: () => of(),
       dispatch: () => {},
-      select: () => of({ roles: ['kon-reader'] }),
-      map: () => of({ reader: true }),
+      select: () => of({ roles: [RolesEnum.CREATOR] }),
+      map: () => of({ creator: true, publisher: false, admin: false, qualifier: false }),
     };
   }));
 
@@ -42,8 +43,8 @@ describe('VisibleByRightDirective', () => {
     appState = {
       pipe: () => of(),
       dispatch: () => {},
-      select: () => of({ roles: ['kon-admin'] }),
-      map: () => of({ reader: true }),
+      select: () => of({ roles: [RolesEnum.ADMIN] }),
+      map: () => of({ creator: false, publisher: false, admin: true, qualifier: false }),
     };
     const directive = new VisibleByRightDirective(templateRef as any, viewContainerRef as any, appState as any);
 
@@ -52,26 +53,26 @@ describe('VisibleByRightDirective', () => {
     expect(spy).toHaveBeenCalled();
   });
 
-  it('should create embedded view for other role than admin with an substitutional template', () => {
+  it('should create embedded view for role qualifier', () => {
     appState = {
       pipe: () => of(),
       dispatch: () => {},
-      select: () => of({ roles: ['kon-reader'] }),
-      map: () => of({ reader: true }),
+      select: () => of({ roles: [RolesEnum.QUALIFIER] }),
+      map: () => of({ creator: false, publisher: false, admin: false, qualifier: true }),
     };
     const directive = new VisibleByRightDirective(templateRef as any, viewContainerRef as any, appState as any);
+    directive.acceptedRole = RolesEnum.QUALIFIER;
     const spy = spyOn(directive['_viewContainer'], 'createEmbeddedView' as any);
-    directive.elseTemplate = {} as any;
     directive.ngOnInit();
     expect(spy).toHaveBeenCalled();
   });
 
-  it('should create embedded view for other role than admin with an substitutional template', () => {
+  it('should clear view for another role than admin or qualifier', () => {
     appState = {
       pipe: () => of(),
       dispatch: () => {},
-      select: () => of({ roles: ['kon-reader'] }),
-      map: () => of({ reader: true }),
+      select: () => of({ roles: [RolesEnum.PUBLISHER] }),
+      map: () => of({ creator: false, publisher: true, admin: false, qualifier: false }),
     };
     const directive = new VisibleByRightDirective(templateRef as any, viewContainerRef as any, appState as any);
     const spy = spyOn(directive['_viewContainer'], 'clear' as any);

projects/grid-failure-information-app/src/app/shared/directives/visible-by-right.ts

@@ -10,20 +10,20 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
-import { Directive, ViewContainerRef, OnInit, TemplateRef, Input, OnDestroy } from '@angular/core';
-import { Store } from '@ngrx/store';
+import { Directive, Input, OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { RolesEnum } from '@grid-failure-information-app/shared/constants/enums';
+import { PermissionsModel } from '@grid-failure-information-app/shared/models/permissions.model';
+import { User } from '@grid-failure-information-app/shared/models/user';
 import * as store from '@grid-failure-information-app/shared/store';
+import { Store } from '@ngrx/store';
 import { Observable, Subject } from 'rxjs';
-import { User } from '@grid-failure-information-app/shared/models/user';
-import { PermissionsModel } from '@grid-failure-information-app/shared/models/permissions.model';
 import { takeUntil } from 'rxjs/operators';
 
 @Directive({
   selector: '[visibleByRight]',
 })
 export class VisibleByRightDirective implements OnInit, OnDestroy {
-  @Input() elseTemplate: TemplateRef<any>;
-  @Input() onlyForAdmin: boolean = false;
+  @Input() acceptedRole?: string = '';
   private _endSubscriptions$: Subject<boolean> = new Subject();
   private _permissions$: Observable<PermissionsModel> = this._appState$
     .select(store.getUser)
@@ -34,10 +34,8 @@ export class VisibleByRightDirective implements OnInit, OnDestroy {
 
   ngOnInit() {
     this._permissions$.subscribe(permissions => {
-      if (permissions.admin || (!this.onlyForAdmin && permissions.writer)) {
+      if (permissions.admin || (permissions.qualifier && this.acceptedRole === RolesEnum.QUALIFIER)) {
         this._viewContainer.createEmbeddedView(this._templateRef);
-      } else if (!!this.elseTemplate) {
-        this._viewContainer.createEmbeddedView(this.elseTemplate);
       } else {
         this._viewContainer.clear();
       }

projects/grid-failure-information-app/src/app/shared/models/permissions.model.ts

@@ -10,10 +10,13 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
+import { RolesEnum } from '@grid-failure-information-app/shared/constants/enums';
+
 export class PermissionsModel {
-  public reader: boolean = false;
-  public writer: boolean = false;
   public admin: boolean = false;
+  public creator: boolean = false;
+  public publisher: boolean = false;
+  public qualifier: boolean = false;
 
   /**
    *Creates an instance of PermissionsModel.
@@ -24,14 +27,17 @@ export class PermissionsModel {
     if (!!data) {
       data.forEach((permissionItem: string) => {
         switch (permissionItem) {
-          case 'kon-admin':
+          case RolesEnum.ADMIN:
             this.admin = true;
             break;
-          case 'kon-writer':
-            this.writer = true;
+          case RolesEnum.CREATOR:
+            this.creator = true;
+            break;
+          case RolesEnum.PUBLISHER:
+            this.publisher = true;
             break;
-          case 'kon-reader':
-            this.reader = true;
+          case RolesEnum.QUALIFIER:
+            this.qualifier = true;
             break;
           default:
             break;