[Workshop Admin/ Deputy] - personal cabinet functionality #1173

src/app/header/header.component.html

@@ -107,7 +107,7 @@ <h2 class="header_descr">
       </ng-template>
       <ng-template #AdminView>
         <a [routerLink]="'./personal-cabinet/config'"><button mat-menu-item>Особиста інформація</button></a>
-        <a [routerLink]="'./admin-tools/platform/AboutPortal'"> <button mat-menu-item>Адміністрування</button></a>
+        <a *ngIf="subrole !== 'ProviderAdmin'" [routerLink]="'./admin-tools/platform/AboutPortal'"> <button mat-menu-item>Адміністрування</button></a>
         <button mat-menu-item (click)="logout()">Вийти</button>
       </ng-template>
     </mat-menu>

src/app/header/header.component.ts

@@ -21,10 +21,9 @@ import { AdminState } from '../shared/store/admin.state';
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
+  styleUrls: ['./header.component.scss'],
 })
 export class HeaderComponent implements OnInit, OnDestroy {
-
   readonly Languages: typeof Languages = Languages;
   readonly Role: typeof Role = Role;
   readonly roles: typeof RoleLinks = RoleLinks;
@@ -63,16 +62,19 @@ export class HeaderComponent implements OnInit, OnDestroy {
 
   private destroy$: Subject<boolean> = new Subject<boolean>();
 
-  constructor(
-    private store: Store,
-    private router: Router) {
-  }
+  constructor(private store: Store, private router: Router) {}
 
   changeView(): void {
     this.store.dispatch(new SidenavToggle());
   }
 
   ngOnInit(): void {
+    combineLatest([
+      this.isLoadingResultPage$,
+      this.isLoadingMetaData$,
+      this.isLoadingCabinet$,
+    ])
+
     combineLatest([this.isLoadingResultPage$, this.isLoadingMetaData$, this.isLoadingCabinet$, this.isLoadingAdminData$])
       .pipe(takeUntil(this.destroy$), delay(0))
       .subscribe(([isLoadingResult, isLoadingMeta, isLoadingCabinet, isLoadingAdminData]) => {
@@ -87,21 +89,25 @@ export class HeaderComponent implements OnInit, OnDestroy {
       .subscribe(([isMobile, navigationPaths]) => {
         this.isMobile = isMobile;
         this.navigationPaths = navigationPaths;
-      })
+      });
 
     this.store.dispatch(new CheckAuth());
 
-    this.user$.pipe(
-      filter((user) => !!user),
-      takeUntil(this.destroy$)
-    ).subscribe((user: User) => {
-      this.userShortName = this.getFullName(user);
-      this.user = user;
-    });
+    this.user$
+      .pipe(
+        filter((user) => !!user),
+        takeUntil(this.destroy$)
+      )
+      .subscribe((user: User) => {
+        this.userShortName = this.getFullName(user);
+        this.user = user;
+      });
   }
 
   private getFullName(user: User): string {
-    return `${user.lastName} ${(user.firstName).slice(0, 1)}.${(user.middleName) ? (user.middleName).slice(0, 1) + '.' : ''}`;
+    return `${user.lastName} ${user.firstName.slice(0, 1)}.${
+      user.middleName ? user.middleName.slice(0, 1) + '.' : ''
+    }`;
   }
 
   logout(): void {

src/app/shared/components/users-list/users-list.component.html

@@ -91,7 +91,7 @@
       <a class="more-details" [routerLink]="['#']">
         <span class="Cancel"> Скасувати </span>
       </a>
-      <button mat-icon-button [matMenuTriggerFor]="actions">
+      <button mat-icon-button [matMenuTriggerFor]="actions" [disabled]="subrole === Role.deputy && user.isDeputy">
         <mat-icon>more_vert</mat-icon>
       </button>
       <button mat-icon-button [matMenuTriggerFor]="email">
@@ -105,7 +105,7 @@
         <button mat-menu-item (click)="onDelete(user)">
           Видалити користувача
         </button>
-      </mat-menu>
+    </mat-menu>
       <mat-menu #email="matMenu" class="header_menu">
         <button mat-menu-item (click)="sendInvitation()">
           Надіслати запрошення

src/app/shared/components/users-list/users-list.component.spec.ts

@@ -3,6 +3,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
 import { RouterTestingModule } from '@angular/router/testing';
+import { NgxsModule } from '@ngxs/store';
 import { UsersListComponent } from './users-list.component';
 
 describe('UsersListComponent', () => {
@@ -15,6 +16,7 @@ describe('UsersListComponent', () => {
         MatTableModule,
         RouterTestingModule,
         MatMenuModule,
+        NgxsModule.forRoot([]),
         MatIconModule,
       ],
       declarations: [ UsersListComponent ]
@@ -26,6 +28,7 @@ describe('UsersListComponent', () => {
     fixture = TestBed.createComponent(UsersListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    component.subrole = '' as string;
   });
 
   it('should create', () => {

src/app/shared/components/users-list/users-list.component.ts

@@ -1,20 +1,40 @@
 import { LiveAnnouncer } from '@angular/cdk/a11y';
-import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
 import { MatSort, Sort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { providerAdminRoleUkr, ProviderAdminTitles } from '../../enum/enumUA/provider-admin';
+import { Select } from '@ngxs/store';
+import { Observable } from 'rxjs';
+import { Constants } from 'src/app/shared/constants/constants';
+import {
+  providerAdminRoleUkr,
+  ProviderAdminTitles,
+} from '../../enum/enumUA/provider-admin';
+
+import { Role } from '../../enum/role';
 import { ProviderAdminIcons, ProviderAdminStatus } from '../../enum/provider-admin';
 import { ProviderAdminTable } from '../../models/providerAdmin.model';
+import { RegistrationState } from '../../store/registration.state';
 
 /**
  * @title Table with sorting
  */
 @Component({
   selector: 'app-users-list',
   templateUrl: './users-list.component.html',
-  styleUrls: ['./users-list.component.scss']
+  styleUrls: ['./users-list.component.scss'],
 })
 export class UsersListComponent implements OnInit, AfterViewInit {
+  @Select(RegistrationState.subrole)
+  subrole$: Observable<string>;
 
   @Input() users: Array<object>;
   @Input() filterValue: string;
@@ -25,32 +45,35 @@ export class UsersListComponent implements OnInit, AfterViewInit {
   readonly providerAdminTitles = ProviderAdminTitles;
   readonly providerAdminStatus = ProviderAdminStatus;
   readonly providerAdminIcons = ProviderAdminIcons;
+  subrole: string;
+  Role = Role;
   displayedColumns: string[];
   dataSource: MatTableDataSource<object> = new MatTableDataSource([{}]);
 
   constructor(private _liveAnnouncer: LiveAnnouncer) {}
 
   @ViewChild(MatSort) sort: MatSort;
 
-  ngOnInit(): void {
-      this.displayedColumns = ['pib', 'email', 'phone', 'place', 'role', 'status', 'actions'];
-      this.dataSource = new MatTableDataSource(this.users);
+  ngOnInit(): void {    
+    this.subrole$.subscribe((subrole) => (this.subrole = subrole));
+    this.displayedColumns = ['pib', 'email', 'phone', 'place', 'role', 'status', 'actions'];
+    this.dataSource = new MatTableDataSource(this.users);
   }
 
   ngAfterViewInit() {
     this.dataSource.sort = this.sort;
   }
 
   ngOnChanges(changes: SimpleChanges) {
-      if (changes.filterValue && changes.filterValue.currentValue) {
-        let filter = changes.filterValue.currentValue;
-        this.dataSource.filter = filter.trim().toLowerCase();
-      } else this.dataSource.filter = "";
-      
-      if (changes.users && changes.users.currentValue) {
-        const users = changes.users.currentValue;
-        this.dataSource = new MatTableDataSource(users);
-      }
+    if (changes.filterValue && changes.filterValue.currentValue) {
+      let filter = changes.filterValue.currentValue;
+      this.dataSource.filter = filter.trim().toLowerCase();
+    } else this.dataSource.filter = '';
+
+    if (changes.users && changes.users.currentValue) {
+      const users = changes.users.currentValue;
+      this.dataSource = new MatTableDataSource(users);
+    }
   }
 
   /** Announce the change in sort state for assistive technology. */
@@ -62,10 +85,10 @@ export class UsersListComponent implements OnInit, AfterViewInit {
     }
   }
 
-  onDelete(user: ProviderAdminTable): void {
+  onDelete(user: ProviderAdminTable): void {    
     this.deleteAdmin.emit(user);
   }
-
+  
   onBlock(user: ProviderAdminTable): void {
     this.blockAdmin.emit(user);
   }

src/app/shared/enum/enumUA/provider-admin.ts

@@ -20,7 +20,7 @@ export enum PersonalCabinetTitle {
   None = 'КАБІНЕТ НАДАВАЧА',
   admin = 'КАБІНЕТ ТЕХ. АДМІНА',
   user = 'КАБІНЕТ КОРИСТУВАЧА',
-  deputy = 'КАБІНЕТ ЗАСТУПНИКА ДИРЕКТОРА',
+  ProviderDeputy = 'КАБІНЕТ ЗАСТУПНИКА ДИРЕКТОРА',
   ProviderAdmin = 'КАБІНЕТ АДМІНІСТРАТОРА ГУРТКА',
 }
 

src/app/shared/enum/role.ts

@@ -3,6 +3,8 @@ export enum Role {
   parent = 'parent',
   unauthorized = 'unauthorized',
   techAdmin = 'admin',
+  deputy = 'ProviderDeputy',
+  admin = 'ProviderAdmin',
   all = 'all',
   child = 'child'
 }

src/app/shell/admin-tools/data/provider-list/provider-list.component.html

@@ -72,12 +72,13 @@
           <th
             mat-header-cell
             *matHeaderCellDef
-            mat-sort-header            
+            mat-sort-header  
+            sortActionDescription="Sort by city"          
           >
             Населений пункт
           </th>
           <td mat-cell *matCellDef="let element">
-            {{ element.legalAddress.city }}
+            {{ element.legalAddress.city || ""}}
           </td>
         </ng-container>
 

src/app/shell/personal-cabinet/applications/application-card/application-card.component.html

@@ -43,7 +43,7 @@ <h4 class="name title">{{ application.child.lastName }} {{ application.child.fir
 
   <mat-card-content class="card-block card-block-buttons" *ngIf="userRole === role.provider">
     <div fxLayout="column" fxLayoutAlign="start start"
-      [ngClass]="(application.status === applicationStatus.Approved || application.status === applicationStatus.Left) && 'hidden'">
+      [ngClass]="application.status === applicationStatus.Approved && 'hidden'">
       <button class="btn btn-blue" (click)="onApprove(application)">
         <p>ПРИЙНЯТИ</p>
       </button>

src/app/shell/personal-cabinet/applications/application-card/application-card.component.scss

@@ -148,7 +148,7 @@ p {
     row-gap: 1rem;
   }
   .hidden {
-    display: none!important;
+    display: none !important;
   }
 }