Update angular dependencies, improve routing, and enhance UI

Revised code to improve routing handling, updated Angular dependencies, and enhanced the UI elements. Changes include the introduction of contextual links to Product Edit Form component and the redefinition of routing paths for Waiters module. All Angular dependencies were updated to latest stable versions.

Signed-off-by: Dafnik <[email protected]>

src/app/_shared/services/system-info.service.ts

@@ -8,8 +8,6 @@ import {connect} from 'ngxtension/connect';
 
 import {b_fromStorage, st_set} from 'dfts-helper';
 
-
-
 import {AdminInfoResponse, JsonInfoResponse} from '../waiterrobot-backend';
 import {AuthService} from './auth/auth.service';
 

src/app/_shared/ui/loading/app-progress-bar.component.ts

@@ -13,33 +13,33 @@ import {booleanAttribute, ChangeDetectionStrategy, Component, input} from '@angu
     </div>
   `,
   styles: `
-        .progress-bar {
-  height: 0.25rem;
-  background-color: rgba(5, 114, 206, 0.2);
-  width: 100%;
-  overflow: hidden;
-}
+    .progress-bar {
+      height: 0.25rem;
+      background-color: rgba(5, 114, 206, 0.2);
+      width: 100%;
+      overflow: hidden;
+    }
 
-.progress-bar-value {
-  width: 100%;
-  height: 100%;
-  background-color: rgb(5, 114, 206);
-  animation: indeterminateAnimation 1s infinite linear;
-  transform-origin: 0% 50%;
-}
+    .progress-bar-value {
+      width: 100%;
+      height: 100%;
+      background-color: rgb(5, 114, 206);
+      animation: indeterminateAnimation 1s infinite linear;
+      transform-origin: 0% 50%;
+    }
 
-@keyframes indeterminateAnimation {
-  0% {
-    transform:  translateX(0) scaleX(0);
-  }
-  40% {
-    transform:  translateX(0) scaleX(0.4);
-  }
-  100% {
-    transform:  translateX(100%) scaleX(0.5);
-  }
-}
-    `,
+    @keyframes indeterminateAnimation {
+      0% {
+        transform: translateX(0) scaleX(0);
+      }
+      40% {
+        transform: translateX(0) scaleX(0.4);
+      }
+      100% {
+        transform: translateX(100%) scaleX(0.5);
+      }
+    }
+  `,
   selector: 'app-progress-bar',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/home/_shared/layouts/app-list-nav-items.component.ts

@@ -85,22 +85,22 @@ export class AppListNavItemDirective {
     </div>
   `,
   styles: `
-  .bd-toc-toggle {
-    color: var(--bs-body-color);
-    border: 1px solid var(--bs-border-color);
-    border-radius: var(--bs-border-radius);
-  }
-
-    .bd-toc-toggle[aria-expanded="true"] {
-    box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), 0.25);
-  }
-
-   .bd-toc-toggle[aria-expanded="true"] {
-    color: var(--bd-violet);
-    background-color: var(--bs-body-bg);
-    border-color: var(--bd-violet);
-  }
-   `,
+    .bd-toc-toggle {
+      color: var(--bs-body-color);
+      border: 1px solid var(--bs-border-color);
+      border-radius: var(--bs-border-radius);
+    }
+
+    .bd-toc-toggle[aria-expanded='true'] {
+      box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), 0.25);
+    }
+
+    .bd-toc-toggle[aria-expanded='true'] {
+      color: var(--bd-violet);
+      background-color: var(--bs-body-bg);
+      border-color: var(--bd-violet);
+    }
+  `,
   standalone: true,
   selector: 'app-list-nav-items',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/home/events/_services/events.service.ts

@@ -56,6 +56,10 @@ export class EventsService
     );
   }
 
+  getAllById$(organisationId: number): Observable<GetEventOrLocationResponse[]> {
+    return this.triggerGet$.pipe(switchMap(() => this.httpClient.get<GetEventOrLocationResponse[]>(this.url, {params: {organisationId}})));
+  }
+
   getSingle$(id: number): Observable<GetEventOrLocationResponse> {
     return this.triggerGet$.pipe(switchMap(() => this.httpClient.get<GetEventOrLocationResponse>(`${this.url}/${id}`)));
   }

src/app/home/home.layout.ts

@@ -29,37 +29,37 @@ import {selectedOrganisationRouteParamKey, SelectedOrganisationService} from './
   selector: 'app-home',
   templateUrl: './home.layout.html',
   styles: `
-main {
-  min-height: 90vh;
-  padding-top: 10px;
-}
+    main {
+      min-height: 90vh;
+      padding-top: 10px;
+    }
 
-.badge {
-  font-size: 12px;
-}
+    .badge {
+      font-size: 12px;
+    }
 
-.mobile-background-0 {
-  background-color: var(--bs-secondary-bg);
-  border-top-right-radius: 15px;
-  border-top-left-radius: 15px;
-  padding-top: 5px;
-  padding-left: 20px;
-  padding-right: 20px;
-  margin-top: 15px;
-}
+    .mobile-background-0 {
+      background-color: var(--bs-secondary-bg);
+      border-top-right-radius: 15px;
+      border-top-left-radius: 15px;
+      padding-top: 5px;
+      padding-left: 20px;
+      padding-right: 20px;
+      margin-top: 15px;
+    }
 
-.mobile-background-1 {
-  background-color: var(--bs-secondary-bg);
-  border-bottom-right-radius: 15px;
-  border-bottom-left-radius: 15px;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-bottom: 5px;
-}
+    .mobile-background-1 {
+      background-color: var(--bs-secondary-bg);
+      border-bottom-right-radius: 15px;
+      border-bottom-left-radius: 15px;
+      padding-left: 20px;
+      padding-right: 20px;
+      padding-bottom: 5px;
+    }
 
-small > a:hover {
-  text-decoration: underline;
-}
+    small > a:hover {
+      text-decoration: underline;
+    }
   `,
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/home/organisations/organisation-edit/organisation-edit-stripe.component.ts

@@ -1,18 +1,20 @@
 import {ChangeDetectionStrategy, Component, effect, inject, ViewChild} from '@angular/core';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {RouterLink} from '@angular/router';
 
 import {filter, of, pipe, startWith, switchMap} from 'rxjs';
 
+import {injectConfirmDialog} from '@home-shared/components/question-dialog.component';
+import {StopPropagationDirective} from '@home-shared/stop-propagation';
 import {NgbModal, NgbTooltip} from '@ng-bootstrap/ng-bootstrap';
+import {AppProgressBarComponent} from '@shared/ui/loading/app-progress-bar.component';
+import {CreateStripeAccountDto, GetStripeAccountResponse, UpdateStripeAccountDto} from '@shared/waiterrobot-backend';
 import {computedFrom} from 'ngxtension/computed-from';
 import {injectParams} from 'ngxtension/inject-params';
-import {CreateStripeAccountDto, UpdateStripeAccountDto} from '@shared/waiterrobot-backend';
-import {AppProgressBarComponent} from '@shared/ui/loading/app-progress-bar.component';
-import {injectConfirmDialog} from '@home-shared/components/question-dialog.component';
 
-import {DfxSortModule, DfxTableModule, NgbSort, NgbTableDataSource} from 'dfx-bootstrap-table';
 import {notNullAndUndefined} from 'dfts-helper';
 import {BiComponent} from 'dfx-bootstrap-icons';
+import {DfxSortModule, DfxTableModule, NgbSort, NgbTableDataSource} from 'dfx-bootstrap-table';
 import {DfxTr} from 'dfx-translate';
 
 import {OrganisationsStripeService} from '../_services/organisations-stripe.service';
@@ -69,7 +71,13 @@ import {StripeAccountStateBadge} from './stripe-account-state-badge.component';
           <ng-container ngbColumnDef="event">
             <th *ngbHeaderCellDef ngb-header-cell>{{ 'NAV_EVENTS' | tr }}</th>
             <td *ngbCellDef="let stripeAccount" ngb-cell>
-              {{ stripeAccount.event?.name ?? '-' }}
+              @if (stripeAccount.event; as event) {
+                <a routerLink="../../o/{{ stripeAccount.organisationId }}/events/{{ event.id }}" stopPropagation>
+                  {{ event.name }}
+                </a>
+              } @else {
+                -
+              }
             </td>
           </ng-container>
 
@@ -121,6 +129,8 @@ import {StripeAccountStateBadge} from './stripe-account-state-badge.component';
     ReactiveFormsModule,
     AppProgressBarComponent,
     StripeAccountStateBadge,
+    RouterLink,
+    StopPropagationDirective,
   ],
 })
 export class OrganisationEditStripeComponent {
@@ -167,25 +177,32 @@ export class OrganisationEditStripeComponent {
       ariaLabelledBy: 'modal-title-org-stripe-create',
       size: 'lg',
     });
-    (modalRef.componentInstance as OrganisationStripeAccountModal).action = 'CREATE';
-    (modalRef.componentInstance as OrganisationStripeAccountModal).organisationId = Number(this.idParam());
-    (modalRef.componentInstance as OrganisationStripeAccountModal).existingStripeAccountCount = this.stripeState.data()?.length ?? 0;
+    void (modalRef.componentInstance as OrganisationStripeAccountModal).state.set({
+      type: 'CREATE',
+      organisationId: Number(this.idParam()),
+      existingStripeAccountCount: this.stripeState.data()?.length ?? 0,
+      name: undefined,
+      eventId: undefined,
+    });
     modalRef.closed.subscribe((it?: CreateStripeAccountDto) => {
       if (it) {
         void this.stripeState.create(it);
       }
     });
   }
 
-  onUpdateStripeAccount(stripeAccount: UpdateStripeAccountDto): void {
+  onUpdateStripeAccount(stripeAccount: GetStripeAccountResponse): void {
     const modalRef = this.modal.open(OrganisationStripeAccountModal, {
       ariaLabelledBy: 'modal-title-org-stripe-update',
       size: 'lg',
     });
-    (modalRef.componentInstance as OrganisationStripeAccountModal).action = 'UPDATE';
-    (modalRef.componentInstance as OrganisationStripeAccountModal).organisationId = Number(this.idParam());
-    (modalRef.componentInstance as OrganisationStripeAccountModal).existingStripeAccountCount = this.stripeState.data()?.length ?? 0;
-    (modalRef.componentInstance as OrganisationStripeAccountModal).form.controls.name.patchValue(stripeAccount.name);
+    void (modalRef.componentInstance as OrganisationStripeAccountModal).state.set({
+      type: 'UPDATE',
+      organisationId: Number(this.idParam()),
+      existingStripeAccountCount: this.stripeState.data()?.length ?? 0,
+      name: stripeAccount.name,
+      eventId: stripeAccount.event?.id,
+    });
     modalRef.closed.subscribe((it?: Omit<UpdateStripeAccountDto, 'id'>) => {
       if (it) {
         void this.stripeState.update({