[Service provider] 'Адміністрування' tab - fix table sorting (#1045)

* check isloading cabinet * fix: table sorting * change template name * fix: replace bydlo-coding with pipe * fix: test * fix: test * remove comments
ita-social-projects · Apr 8, 2022 · cc2b8bd · cc2b8bd
1 parent 028d8bd
commit cc2b8bd
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 57 deletions.
diff --git a/src/app/shared/pipes/provider-admins-filter.pipe.spec.ts b/src/app/shared/pipes/provider-admins-filter.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { ProviderAdminsFilterPipe } from './provider-admins-filter.pipe';
+
+describe('ProviderAdminsFilterPipe', () => {
+  it('create an instance', () => {
+    const pipe = new ProviderAdminsFilterPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/pipes/provider-admins-filter.pipe.ts b/src/app/shared/pipes/provider-admins-filter.pipe.ts
@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { providerAdminRole } from '../enum/provider-admin';
+import { ProviderAdminTable } from '../models/providerAdmin.model';
+
+@Pipe({
+  name: 'providerAdminsFilter'
+})
+export class ProviderAdminsFilterPipe implements PipeTransform {
+
+  transform(users: ProviderAdminTable[], userType: string): ProviderAdminTable[] {
+    const isDeputy = userType === providerAdminRole.deputy;
+    return users.filter((user) => (user.isDeputy === isDeputy));
+  }
+
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -58,6 +58,7 @@ import { UsersListComponent } from './components/users-list/users-list.component
 import { KeyFilterDirective } from './directives/key-filter.directive';
 import { CustomCarouselDirective } from './directives/custom-carousel.directive';
 import { PhoneTransformPipe } from './pipes/phone-transform.pipe';
+import { ProviderAdminsFilterPipe } from './pipes/provider-admins-filter.pipe';
 
 @NgModule({
   declarations: [
@@ -112,6 +113,7 @@ import { PhoneTransformPipe } from './pipes/phone-transform.pipe';
     KeyFilterDirective,
     CustomCarouselDirective,
     PhoneTransformPipe,
+    ProviderAdminsFilterPipe,
   ],
   imports: [
     MaterialModule,
@@ -175,6 +177,7 @@ import { PhoneTransformPipe } from './pipes/phone-transform.pipe';
     KeyFilterDirective,
     CustomCarouselDirective,
     PhoneTransformPipe,
+    ProviderAdminsFilterPipe,
   ]
 })
 export class SharedModule { }
diff --git a/src/app/shell/personal-cabinet/provider-admins/provider-admins.component.html b/src/app/shell/personal-cabinet/provider-admins/provider-admins.component.html
@@ -29,33 +29,28 @@
   <div class="tab-wrapper">
     <mat-tab-group mat-align-tabs="start" (selectedTabChange)="onTabChange($event)" [selectedIndex]="tabIndex">
       <mat-tab label="{{providerAdminRoleUkr.all}}">
-        <ng-container *ngTemplateOutlet="UsersListFull; context:{ $implicit: filterValue }">
+        <ng-container *ngTemplateOutlet="UsersList; context:{ $implicit: filterValue, users: providerAdmins}">
         </ng-container>
       </mat-tab>
       <mat-tab label="{{providerAdminRoleUkr.deputy}}">
-        <ng-container *ngTemplateOutlet="UsersListFiltered; context:{ $implicit: filterValue }">
+        <ng-container *ngTemplateOutlet="UsersList; context:{ $implicit: filterValue, users: providerAdmins | providerAdminsFilter : 'deputy'}">
         </ng-container>
       </mat-tab>
       <mat-tab label="{{providerAdminRoleUkr.admin}}">
-        <ng-container *ngTemplateOutlet="UsersListFiltered; context:{ $implicit: filterValue }">
+        <ng-container *ngTemplateOutlet="UsersList; context:{ $implicit: filterValue, users: providerAdmins | providerAdminsFilter : 'admin'}">
         </ng-container>
       </mat-tab>
     </mat-tab-group>
   </div>
 
 </div>
 
-<ng-template #UsersListFull let-filterValue>
+<ng-template #UsersList let-filterValue let-users="users">
   <ng-container *ngIf="!(isLoadingCabinet$ | async)">
-    <ng-container *ngIf="providerAdmins?.length else isEmptyList;">
-      <app-users-list [users]="providerAdmins" [filterValue]="filterValue" (deleteAdmin)="onDelete($event)" (blockAdmin)="onBlock($event)"></app-users-list>
+    <ng-container *ngIf="users?.length else isEmptyList;">
+      <app-users-list [users]="users" [filterValue]="filterValue" (deleteAdmin)="onDelete($event)"
+        (blockAdmin)="onBlock($event)"></app-users-list>
     </ng-container>
-  </ng-container>  
-</ng-template>
-
-<ng-template #UsersListFiltered let-filterValue>
-  <ng-container *ngIf="filteredProviderAdmins?.length else isEmptyList;">
-    <app-users-list [users]="filteredProviderAdmins" [filterValue]="filterValue" (deleteAdmin)="onDelete($event)" (blockAdmin)="onBlock($event)"></app-users-list>
   </ng-container>
 </ng-template>
 

diff --git a/src/app/shell/personal-cabinet/provider-admins/provider-admins.component.spec.ts b/src/app/shell/personal-cabinet/provider-admins/provider-admins.component.spec.ts
@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ProviderAdminsComponent } from './provider-admins.component';
 import { MatTabsModule } from '@angular/material/tabs';
 import { NgxsModule} from '@ngxs/store';
-import { Component, Input } from '@angular/core';
+import { Component, Input, Pipe } from '@angular/core';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatIconModule } from '@angular/material/icon';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -12,6 +12,8 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import { NoResultCardComponent } from 'src/app/shared/components/no-result-card/no-result-card.component';
 import { MatDialogModule } from '@angular/material/dialog';
+import { ProviderAdminsFilterPipe } from 'src/app/shared/pipes/provider-admins-filter.pipe';
+import { ProviderAdminTable } from 'src/app/shared/models/providerAdmin.model';
 
 describe('ProviderAdminsComponent', () => {
   let component: ProviderAdminsComponent;
@@ -34,7 +36,8 @@ describe('ProviderAdminsComponent', () => {
       declarations: [
         ProviderAdminsComponent,
         MockUsersListComponent,
-        NoResultCardComponent
+        NoResultCardComponent,
+        ProviderAdminsFilterPipe,
       ],
     })
       .compileComponents();
@@ -55,6 +58,8 @@ describe('ProviderAdminsComponent', () => {
   template: ''
 })
 class MockUsersListComponent {
-  @Input() users: Array<object>;
+  @Input() providerAdmins: ProviderAdminTable[];
+  @Input() users: ProviderAdminTable[];
   @Input() filterValue: string;
+  @Input() userType: string;
 }
diff --git a/src/app/shell/personal-cabinet/provider-admins/provider-admins.component.ts b/src/app/shell/personal-cabinet/provider-admins/provider-admins.component.ts
@@ -17,14 +17,12 @@ import { RegistrationState } from 'src/app/shared/store/registration.state';
 import { BlockProviderAdminById, DeleteProviderAdminById, GetAllProviderAdmins } from 'src/app/shared/store/user.actions';
 import { UserState } from 'src/app/shared/store/user.state';
 
-
 @Component({
   selector: 'app-provider-admins',
   templateUrl: './provider-admins.component.html',
-  styleUrls: ['./provider-admins.component.scss']
+  styleUrls: ['./provider-admins.component.scss'],
 })
 export class ProviderAdminsComponent implements OnInit, OnDestroy {
-
   readonly providerAdminRoleUkr = providerAdminRoleUkr;
   readonly providerAdminRole = providerAdminRole;
   readonly noProviderAdmins = NoResultsTitle.noProviderAdmins;
@@ -33,11 +31,10 @@ export class ProviderAdminsComponent implements OnInit, OnDestroy {
   isLoadingCabinet$: Observable<boolean>;
   @Select(UserState.providerAdmins)
   providerAdmins$: Observable<ProviderAdmin[]>;
-  providerAdmins: ProviderAdminTable[];
+  providerAdmins: ProviderAdminTable[] = [];
   @Select(RegistrationState.provider)
   provider$: Observable<Provider>;
   provider: Provider;
-  filteredProviderAdmins: Array<object> = [];
   filter = new FormControl('');
   filterValue: string;
   btnView: string;
@@ -48,7 +45,8 @@ export class ProviderAdminsComponent implements OnInit, OnDestroy {
     public store: Store,
     private router: Router,
     private route: ActivatedRoute,
-    private matDialog: MatDialog) {}
+    private matDialog: MatDialog
+  ) {}
 
   ngOnInit(): void {
     this.btnView = providerAdminRoleUkr.all;
@@ -67,33 +65,27 @@ export class ProviderAdminsComponent implements OnInit, OnDestroy {
       .pipe(takeUntil(this.destroy$))
       .subscribe((providerAdmins: ProviderAdmin[]) => {
         this.providerAdmins = this.updateStructureForTheTable(providerAdmins);
-        this.filterProviderAdmins();
       });
-    this.route.params.pipe(
-      takeUntil(this.destroy$))
+    this.route.params
+      .pipe(takeUntil(this.destroy$))
       .subscribe((params: Params) => {
-        this.tabIndex = Object.keys(this.providerAdminRole).indexOf(params.param);
+        this.tabIndex = Object.keys(this.providerAdminRole).indexOf(
+          params.param
+        );
         this.btnView = providerAdminRoleUkr[params.param];
       });
 
-      this.provider$.pipe(
+    this.provider$
+      .pipe(
         filter((provider: Provider) => !!provider),
         takeUntil(this.destroy$)
-      ).subscribe((provider: Provider) => this.provider = provider);
+      )
+      .subscribe((provider: Provider) => (this.provider = provider));
   }
 
   getAllProviderAdmins(): void {
     this.store.dispatch(new GetAllProviderAdmins());
   }
-  filterProviderAdmins(): void {
-    this.route.params.pipe(
-      takeUntil(this.destroy$))
-      .subscribe((params: Params) => {
-        this.filteredProviderAdmins = this.providerAdmins.filter(
-          (user) => user.isDeputy === (params.param === 'deputy')
-        );
-      })
-    }
 
   updateStructureForTheTable(admins: ProviderAdmin[]): ProviderAdminTable[] {
     let updatedAdmins = [];
@@ -104,9 +96,8 @@ export class ProviderAdminsComponent implements OnInit, OnDestroy {
         email: admin.email,
         phoneNumber: admin.phoneNumber,
         isDeputy: admin.isDeputy,
-        status: admin.accountStatus
+        status: admin.accountStatus,
       });
-
     });
     return updatedAdmins;
   }
@@ -117,44 +108,62 @@ export class ProviderAdminsComponent implements OnInit, OnDestroy {
    */
   onTabChange(event: MatTabChangeEvent): void {
     this.btnView = event.tab.textLabel;
-    this.filterProviderAdmins();
     this.filter.reset();
-    this.router.navigate(['../', providerAdminRoleUkrReverse[event.tab.textLabel]], {relativeTo: this.route});
+    this.router.navigate(
+      ['../', providerAdminRoleUkrReverse[event.tab.textLabel]],
+      { relativeTo: this.route }
+    );
   }
 
   /**
    * This method delete provider Admin By Id
    */
-   onDelete(user): void {
+  onDelete(user): void {
     const dialogRef = this.matDialog.open(ConfirmationModalWindowComponent, {
       width: '330px',
       data: {
-        type: (user.deputy) ? ModalConfirmationType.deleteProviderAdminDeputy : ModalConfirmationType.deleteProviderAdmin,
-        property: user.pib
-      }
+        type: user.deputy
+          ? ModalConfirmationType.deleteProviderAdminDeputy
+          : ModalConfirmationType.deleteProviderAdmin,
+        property: user.pib,
+      },
     });
 
     dialogRef.afterClosed().subscribe((result: boolean) => {
-      result && this.store.dispatch(new DeleteProviderAdminById({userId: user.id, providerId: this.provider.id}));
+      result &&
+        this.store.dispatch(
+          new DeleteProviderAdminById({
+            userId: user.id,
+            providerId: this.provider.id,
+          })
+        );
     });
   }
 
   /**
    * This method block provider Admin By Id
    */
-   onBlock(user): void {
-   const dialogRef = this.matDialog.open(ConfirmationModalWindowComponent, {
-     width: '330px',
-     data: {
-       type: (user.deputy) ? ModalConfirmationType.blockProviderAdminDeputy : ModalConfirmationType.blockProviderAdmin,
-       property: user.pib
-     }
-   });
+  onBlock(user): void {
+    const dialogRef = this.matDialog.open(ConfirmationModalWindowComponent, {
+      width: '330px',
+      data: {
+        type: user.deputy
+          ? ModalConfirmationType.blockProviderAdminDeputy
+          : ModalConfirmationType.blockProviderAdmin,
+        property: user.pib,
+      },
+    });
 
-   dialogRef.afterClosed().subscribe((result: boolean) => {
-     result && this.store.dispatch(new BlockProviderAdminById({userId: user.id, providerId: this.provider.id}));
-   });
- }
+    dialogRef.afterClosed().subscribe((result: boolean) => {
+      result &&
+        this.store.dispatch(
+          new BlockProviderAdminById({
+            userId: user.id,
+            providerId: this.provider.id,
+          })
+        );
+    });
+  }
 
   ngOnDestroy(): void {
     this.destroy$.unsubscribe();