[Personal-cabinet] - fix active tab for personal cabinet (parent, provider, admins)

src/app/header/header.component.html

@@ -97,17 +97,16 @@ <h2 class="header_descr">
         <a [routerLink]="'./personal-cabinet/' + user.role + '/info'"> <button mat-menu-item>Інформація про
             {{roles[user.role]}}</button></a>
         <a [routerLink]="'./personal-cabinet/workshops'"><button mat-menu-item>Мої гуртки</button></a>
-        <a [routerLink]="'./personal-cabinet/applications/All'"><button mat-menu-item>Мої заяви</button></a>
-        <a *ngIf="user.role === Role.provider" [routerLink]="'./personal-cabinet/administration/all'"><button
+        <a [routerLink]="'./personal-cabinet/applications'"><button mat-menu-item>Мої заяви</button></a>
+        <a *ngIf="user.role === Role.provider" [routerLink]="'./personal-cabinet/administration'"><button
             mat-menu-item>Адміністрування</button></a>
-        <!-- <a [routerLink]="'./personal-cabinet/messages'"><button mat-menu-item>Повідомлення</button></a> -->
         <a *ngIf="user.role === Role.parent" [routerLink]="'./personal-cabinet/parent/favorite'"><button
             mat-menu-item>Улюблене</button></a>
         <button mat-menu-item (click)="logout()">Вийти</button>
       </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 [routerLink]="'./admin-tools/platform/'"> <button mat-menu-item>Адміністрування</button></a>
         <button mat-menu-item (click)="logout()">Вийти</button>
       </ng-template>
     </mat-menu>

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

@@ -1,8 +1,9 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Select, Store } from '@ngxs/store';
 import { Observable, Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
+import { ApplicationStatus } from 'src/app/shared/enum/applications';
 import { ApplicationApproved, ApplicationLeft, ApplicationPending, ApplicationRejected } from 'src/app/shared/enum/enumUA/declinations/notification-declination';
 import { NotificationsConstants } from '../../../constants/constants';
 import { ApplicationTitlesReverse } from '../../../enum/enumUA/applications';
@@ -31,6 +32,7 @@ export class NotificationsListComponent implements OnInit, OnDestroy {
   constructor(
     private store: Store,
     private router: Router,
+    private route: ActivatedRoute
   ) { }
 
   ngOnInit(): void {
@@ -55,8 +57,8 @@ export class NotificationsListComponent implements OnInit, OnDestroy {
 
     switch (NotificationType[notificationsGrouped.type]) {
       case NotificationType.Application:
-        let status: string = ApplicationTitlesReverse[notificationsGrouped.groupedData];
-        this.router.navigate([`/personal-cabinet/${NotificationType.Application}/${[status]}`]);
+        let status: string = ApplicationStatus[notificationsGrouped.groupedData];
+        this.router.navigate([`/personal-cabinet/${NotificationType.Application}/`], { relativeTo: this.route, queryParams: { status: status } });
         break;
       case NotificationType.Workshop:
         break;

src/app/shared/components/sidenav/sidenav.component.html

@@ -48,16 +48,16 @@
               про
               {{roles[user.role]}}</a>
             <a [routerLink]="'./personal-cabinet/workshops'" (click)="changeView()">Мої гуртки</a>
-            <a [routerLink]="'./personal-cabinet/applications/All'" (click)="changeView()">Мої заяви</a>
-            <a *ngIf="user.role === Role.provider" [routerLink]="'./personal-cabinet/administration/all'"
+            <a [routerLink]="'./personal-cabinet/applications'" (click)="changeView()">Мої заяви</a>
+            <a *ngIf="user.role === Role.provider" [routerLink]="'./personal-cabinet/administration'"
               (click)="changeView()">Адміністрування</a>
             <!-- <a [routerLink]="'./personal-cabinet/messages'" (click)="changeView()">Повідомлення</a> TODO: add to teh second release-->
             <a *ngIf="user.role === Role.parent" [routerLink]="'./personal-cabinet/parent/favorite'"
               (click)="changeView()">Улюблене</a>
           </ng-template>
           <ng-template #AdminView>
             <a [routerLink]="'./personal-cabinet/config'" (click)="changeView()">Особиста інформація</a>
-            <a [routerLink]="'./admin-tools/platform/AboutPortal'" (click)="changeView()">Адміністрування</a>
+            <a [routerLink]="'./admin-tools/platform'" (click)="changeView()">Адміністрування</a>
           </ng-template>
         </div>
       </div>

src/app/shared/store/user.state.ts

@@ -386,7 +386,7 @@ export class UserState {
   onCreateProviderAdminSuccess({ dispatch }: StateContext<UserStateModel>, { payload }: OnCreateProviderAdminSuccess): void {
     dispatch(new MarkFormDirty(false));
     dispatch(new ShowMessageBar({ message: 'Користувача успішно створено', type: 'success' }));
-    this.router.navigate(['/personal-cabinet/administration/all']);
+    this.router.navigate(['/personal-cabinet/administration']);
   }
 
   @Action(BlockProviderAdminById)

src/app/shell/admin-tools/admin-tools-routing.module.ts

@@ -6,7 +6,7 @@ import { UsersComponent } from './data/users/users.component';
 
 const routes: Routes = [
   {
-    path: 'platform/:index', component: PlatformComponent,
+    path: 'platform', component: PlatformComponent,
     loadChildren: () => import('./platform/platform.module').then(m => m.PlatformModule),
   },
   {

src/app/shell/admin-tools/admin-tools.component.html

@@ -1,10 +1,10 @@
 <div class="container">
   <h1 class="title">АДМІНІСТРУВАННЯ</h1>
   <nav class="nav" mat-tab-nav-bar>
-    <a mat-tab-link [routerLinkActive]="['active']" [routerLink]="'./platform/AboutPortal'">ПОРТАЛ</a>
+    <a mat-tab-link [routerLinkActive]="['active']" [routerLink]="'./platform/'">ПОРТАЛ</a>
     <a mat-tab-link [routerLinkActive]="['active']">АДМІНІСТРАТОРИ</a>
     <a mat-tab-link [routerLinkActive]="['active']" [routerLink]="'./data/provider-list'">ЗАКЛАДИ</a>
-    <a mat-tab-link [routerLinkActive]="['active']" [routerLink]="['./data/users', '']">КОРИСТУВАЧІ</a>
+    <a mat-tab-link [routerLinkActive]="['active']" [routerLink]="['./data/users']">КОРИСТУВАЧІ</a>
     <a mat-tab-link [routerLinkActive]="['active']">ЗАЯВИ</a>
     <a mat-tab-link [routerLinkActive]="['active']">ІСТОРІЯ ЗМІН</a>
     <a mat-tab-link [routerLinkActive]="['active']">СТАТИСТИЧНІ ДАНІ</a>

src/app/shell/admin-tools/data/data-routing.module.ts

@@ -5,7 +5,7 @@ import { UsersComponent } from './users/users.component';
 
 const routes: Routes = [
   { path: 'provider-list', component: ProviderListComponent},
-  { path: 'users/:index', component: UsersComponent},
+  { path: 'users', component: UsersComponent},
 ];
 @NgModule({
   imports: [RouterModule.forChild(routes)],

src/app/shell/admin-tools/data/users/users.component.ts

@@ -78,9 +78,7 @@ export class UsersComponent implements OnInit, OnDestroy {
    */
    onTabChange(event: MatTabChangeEvent): void {
     this.filter.reset();
-    this.router.navigate(
-      ['../', UserTabsUkrReverse[event.tab.textLabel]],
-      { relativeTo: this.route }
+    this.router.navigate(['./'], { relativeTo: this.route, queryParams: { role: UserTabsUkrReverse[event.tab.textLabel] } }
     );
   }
 

src/app/shell/admin-tools/platform/platform.component.ts

@@ -36,16 +36,16 @@ export class PlatformComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.store.dispatch(new GetPlatformInfo());
 
-    this.route.params
+    this.route.queryParams
       .pipe(takeUntil(this.destroy$))
       .subscribe((params: Params) => {
-        this.tabIndex = +this.adminTabs[params.index];
-        this.type = PlatformInfoType[params.index];
+        this.tabIndex = +this.adminTabs[params['page']];
+        this.type = PlatformInfoType[params['page']];
       });
   }
 
   onSelectedTabChange(event: MatTabChangeEvent): void {
-    this.router.navigate([`admin-tools/platform/${this.adminTabs[event.index]}`]);
+    this.router.navigate([`admin-tools/platform`], {queryParams: {page: this.adminTabs[event.index]}});
   }
 
   ngOnDestroy(): void {

src/app/shell/personal-cabinet/applications/applications.component.ts

@@ -1,16 +1,17 @@
 
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Actions, ofAction, Store } from '@ngxs/store';
-import { debounceTime, filter, mergeMap, takeUntil } from 'rxjs/operators';
+import { debounceTime, mergeMap, takeUntil } from 'rxjs/operators';
 import { InfoBoxHostDirective } from 'src/app/shared/directives/info-box-host.directive';
 import { Role } from 'src/app/shared/enum/role';
-import { Child, ChildCards } from 'src/app/shared/models/child.model';
+import { Child } from 'src/app/shared/models/child.model';
 import { InfoBoxService } from 'src/app/shared/services/info-box/info-box.service';
 import { UpdateApplication } from 'src/app/shared/store/user.actions';
 import { Application, ApplicationUpdate } from '../../../shared/models/application.model';
 import { CabinetDataComponent } from '../cabinet-data/cabinet-data.component';
 import { MatTabChangeEvent } from '@angular/material/tabs/tab-group';
+import { MatTabGroup } from '@angular/material/tabs';
 import { NoResultsTitle } from 'src/app/shared/enum/no-results';
 import { ApplicationTitles, ApplicationTitlesReverse } from 'src/app/shared/enum/enumUA/applications';
 import { Constants } from 'src/app/shared/constants/constants';
@@ -24,7 +25,7 @@ import { ChildDeclination, WorkshopDeclination } from 'src/app/shared/enum/enumU
   templateUrl: './applications.component.html',
   styleUrls: ['./applications.component.scss']
 })
-export class ApplicationsComponent extends CabinetDataComponent implements OnInit {
+export class ApplicationsComponent extends CabinetDataComponent implements OnInit, AfterViewInit {
 
   readonly noApplicationTitle = NoResultsTitle.noApplication;
   readonly constants: typeof Constants = Constants;
@@ -45,6 +46,9 @@ export class ApplicationsComponent extends CabinetDataComponent implements OnIni
   @ViewChild(InfoBoxHostDirective, { static: true })
   infoBoxHost: InfoBoxHostDirective;
 
+  @ViewChild(MatTabGroup)
+  tabGroup: MatTabGroup;
+
   constructor(
     store: Store,
     private infoBoxService: InfoBoxService,
@@ -54,12 +58,16 @@ export class ApplicationsComponent extends CabinetDataComponent implements OnIni
     private route: ActivatedRoute,) {
     super(store, matDialog, actions$);
   }
+  ngAfterViewInit(): void {
+    this.tabGroup.selectedIndex = this.tabIndex;
+  }
 
   ngOnInit(): void {
     this.getUserData();
-    this.route.params
+    this.route.queryParams
       .pipe(takeUntil(this.destroy$))
-      .subscribe((params: Params) => this.tabIndex = Object.keys(ApplicationTitles).indexOf(params.param));
+      .subscribe((params: Params) => this.tabIndex = Object.keys(ApplicationTitles).indexOf(params['status'])      
+      );
 
     this.actions$.pipe(ofAction(OnUpdateApplicationSuccess))
       .pipe(
@@ -142,7 +150,7 @@ export class ApplicationsComponent extends CabinetDataComponent implements OnIni
     } else {
       this.getParentApplications(status);
     }
-    this.router.navigate(['../', tabLabel], { relativeTo: this.route });
+    this.router.navigate(['./'], { relativeTo: this.route, queryParams: { status: tabLabel } });
   }
 
   /**

src/app/shell/personal-cabinet/personal-cabinet-routing.module.ts

@@ -22,7 +22,7 @@ const routes: Routes = [
     component: MessagesComponent,
   },
   {
-    path: 'applications/:param',
+    path: 'applications',
     component: ApplicationsComponent,
   },
   {
@@ -36,7 +36,7 @@ const routes: Routes = [
     canLoad: [ParentGuard]
   },
   {
-    path: 'administration/:param',
+    path: 'administration',
     component: ProviderAdminsComponent,
   },
 ];

src/app/shell/personal-cabinet/personal-cabinet.component.html

@@ -31,15 +31,15 @@ <h1 class="title">
       <a
         mat-tab-link
         [routerLinkActive]="['active']"
-        [routerLink]="'./applications/all'"
+        [routerLink]="['./applications']"
         >ЗАЯВИ</a
       >
     </ng-container>
     <ng-container *ngIf="userRole === Role.provider">
       <a
         mat-tab-link
         [routerLinkActive]="['active']"
-        [routerLink]="'./administration/all'"
+        [routerLink]="['./administration']"
         >АДМІНІСТРУВАННЯ</a
       >
     </ng-container>

src/app/shell/personal-cabinet/provider-admins/provider-admins.component.ts

@@ -70,13 +70,11 @@ export class ProviderAdminsComponent implements OnInit, OnDestroy {
       .subscribe((providerAdmins: ProviderAdmin[]) => {
         this.providerAdmins = this.updateStructureForTheTable(providerAdmins);
       });
-    this.route.params
+    this.route.queryParams
       .pipe(takeUntil(this.destroy$))
       .subscribe((params: Params) => {
-        this.tabIndex = Object.keys(this.providerAdminRole).indexOf(
-          params.param
-        );
-        this.btnView = providerAdminRoleUkr[params.param];
+        this.tabIndex = Object.keys(this.providerAdminRole).indexOf(params['role']);
+        this.btnView = providerAdminRoleUkr[params['role']];
       });
 
     this.provider$
@@ -113,9 +111,7 @@ export class ProviderAdminsComponent implements OnInit, OnDestroy {
   onTabChange(event: MatTabChangeEvent): void {
     this.btnView = event.tab.textLabel;
     this.filter.reset();
-    this.router.navigate(
-      ['../', providerAdminRoleUkrReverse[event.tab.textLabel]],
-      { relativeTo: this.route }
+    this.router.navigate(['./'], { relativeTo: this.route, queryParams: { role: providerAdminRoleUkrReverse[event.tab.textLabel] } }
     );
   }
 

src/app/shell/personal-cabinet/provider/create-provider-admin/create-provider-admin.component.html

@@ -76,7 +76,7 @@ <h3 class="wrapper-title">{{(isDeputy) ? 'ДОДАТИ ЗАСТУПНИКА ДИ
         </div>
 
         <div fxLayout="row" fxLayoutAlign="center center" class="footer">
-          <a [routerLink]="'/personal-cabinet/administration/all'"><button mat-raised-button
+          <a [routerLink]="'/personal-cabinet/administration'"><button mat-raised-button
               class="btn btn-cancel">Скасувати</button></a>
           <button class="btn" mat-raised-button matStepperNext (click)="checkValidation(ProviderAdminFormGroup)"
             [disabled]="ProviderAdminFormGroup.invalid">Далі</button>
@@ -110,7 +110,7 @@ <h3 class="wrapper-title">{{(isDeputy) ? 'ДОДАТИ ЗАСТУПНИКА ДИ
         </div>
         <div fxLayout="row" fxLayoutAlign="center center" class="footer">
           <button class="btn" mat-raised-button matStepperPrevious>Назад</button>
-          <a [routerLink]="'/personal-cabinet/administration/all'"><button mat-raised-button
+          <a [routerLink]="'/personal-cabinet/administration'"><button mat-raised-button
               class="btn btn-cancel">Скасувати</button></a>
           <button class="btn" mat-button type="submit" (click)="onSubmit()">Зберегти</button>
         </div>