integrated singals in edit-payment page

src/Client/Logistics.OfficeApp/src/app/app.config.ts

@@ -2,17 +2,17 @@ import {provideHttpClient, withInterceptors} from "@angular/common/http";
 import {ApplicationConfig, importProvidersFrom} from "@angular/core";
 import {BrowserModule} from "@angular/platform-browser";
 import {provideAnimations} from "@angular/platform-browser/animations";
-import {provideRouter} from "@angular/router";
+import {provideRouter, withComponentInputBinding} from "@angular/router";
 import {provideAuth} from "angular-auth-oidc-client";
-import {APP_ROUTES} from "./app.routes";
-import {AUTH_CONFIG} from "./configs";
-import {tenantInterceptor, tokenInterceptor} from "./core/interceptors";
-import { MessageService } from "primeng/api";
+import {MessageService} from "primeng/api";
+import {tenantInterceptor, tokenInterceptor} from "@/core/interceptors";
+import {AUTH_CONFIG} from "@/configs";
+import {appRoutes} from "./app.routes";
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideAuth({config: AUTH_CONFIG}),
-    provideRouter(APP_ROUTES),
+    provideRouter(appRoutes, withComponentInputBinding()),
     importProvidersFrom(BrowserModule),
     provideAnimations(),
     provideHttpClient(withInterceptors([tenantInterceptor, tokenInterceptor])),

src/Client/Logistics.OfficeApp/src/app/app.routes.ts

@@ -3,7 +3,7 @@ import {Error404Component} from "@/pages/error404";
 import {LoginComponent} from "@/pages/login";
 import {UnauthorizedComponent} from "@/pages/unauthorized";
 
-export const APP_ROUTES: Routes = [
+export const appRoutes: Routes = [
   {
     path: "home",
     loadChildren: () => import("./pages/home").then((m) => m.HOME_ROUTES),
@@ -17,42 +17,42 @@ export const APP_ROUTES: Routes = [
   },
   {
     path: "employees",
-    loadChildren: () => import("./pages/employee").then((m) => m.EMPLOYEE_ROUTES),
+    loadChildren: () => import("./pages/employee").then((m) => m.employeeRoutes),
     data: {
       breadcrumb: "Employees",
     },
   },
   {
     path: "loads",
-    loadChildren: () => import("./pages/load").then((m) => m.LOAD_ROUTES),
+    loadChildren: () => import("./pages/load").then((m) => m.loadRoutes),
     data: {
       breadcrumb: "Loads",
     },
   },
   {
     path: "trucks",
-    loadChildren: () => import("./pages/truck").then((m) => m.TRUCK_ROUTES),
+    loadChildren: () => import("./pages/truck").then((m) => m.truckRoutes),
     data: {
       breadcrumb: "Trucks",
     },
   },
   {
     path: "customers",
-    loadChildren: () => import("./pages/customer").then((m) => m.CUSTOMER_ROUTES),
+    loadChildren: () => import("./pages/customer").then((m) => m.customerRoutes),
     data: {
       breadcrumb: "Customers",
     },
   },
   {
     path: "accounting",
-    loadChildren: () => import("./pages/accounting").then((m) => m.ACCOUNTING_ROUTES),
+    loadChildren: () => import("./pages/accounting").then((m) => m.accountingRoutes),
     data: {
       breadcrumb: "",
     },
   },
   {
     path: "payment",
-    loadChildren: () => import("./pages/payment").then((m) => m.PAYMENT_ROUTES),
+    loadChildren: () => import("./pages/payment").then((m) => m.paymentRoutes),
     data: {
       breadcrumb: "",
     },

src/Client/Logistics.OfficeApp/src/app/core/guards/auth.guard.ts

@@ -1,5 +1,5 @@
 import {inject} from "@angular/core";
-import { CanActivateFn, Router} from "@angular/router";
+import {CanActivateFn, Router} from "@angular/router";
 import {map} from "rxjs";
 import {AuthService, UserData} from "@/core/auth";
 

src/Client/Logistics.OfficeApp/src/app/pages/accounting/accounting.routes.ts

@@ -9,7 +9,7 @@ import {ListPayrollComponent} from "./list-payroll/list-payroll.component";
 import {EditPayrollComponent} from "./edit-payroll/edit-payroll.component";
 import {ViewEmployeePayrollsComponent} from "./view-employee-payrolls/view-employee-payrolls.component";
 
-export const ACCOUNTING_ROUTES: Routes = [
+export const accountingRoutes: Routes = [
   {
     path: "payments",
     component: ListPaymentsComponent,

src/Client/Logistics.OfficeApp/src/app/pages/accounting/edit-payment/edit-payment.component.html

@@ -1,10 +1,10 @@
-<h1 class="text-center">{{ title }}</h1>
+<h1 class="text-center">{{ title() }}</h1>
 <hr class="w-100" />
 
 <div class="row justify-content-center mx-0">
   <div class="col-12 col-md-6">
     <p-card>
-      @if (isLoading) {
+      @if (isLoading()) {
         <p-progressSpinner></p-progressSpinner>
       }
 
@@ -58,7 +58,7 @@ <h1 class="text-center">{{ title }}</h1>
         </div>
 
         <div>
-          <p-button type="submit" class="mt-3" icon="bi bi-pencil-square" label="Save" [disabled]="isLoading">
+          <p-button type="submit" class="mt-3" icon="bi bi-pencil-square" label="Save" [disabled]="isLoading()">
           </p-button>
           <p-button
             type="button"

src/Client/Logistics.OfficeApp/src/app/pages/accounting/edit-payment/edit-payment.component.ts

@@ -1,7 +1,7 @@
-import {Component, OnInit} from "@angular/core";
+import {Component, input, OnInit, signal} from "@angular/core";
 import {CommonModule} from "@angular/common";
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {ActivatedRoute, Router, RouterModule} from "@angular/router";
+import {Router, RouterModule} from "@angular/router";
 import {ButtonModule} from "primeng/button";
 import {CardModule} from "primeng/card";
 import {ProgressSpinnerModule} from "primeng/progressspinner";
@@ -38,21 +38,16 @@ export class EditPaymentComponent implements OnInit {
   public readonly paymentStatuses = PaymentStatusEnum.toArray();
   public readonly paymentMethods = PaymentMethodEnum.toArray();
   public readonly paymentForValues = PaymentForEnum.toArray();
-  public title: string;
-  public id: string | null;
-  public isLoading: boolean;
+  public title = signal("Edit payment");
+  public id = input<string>("");
+  public isLoading = signal(false);
   public form: FormGroup<PaymentForm>;
 
   constructor(
     private readonly apiService: ApiService,
     private readonly toastService: ToastService,
-    private readonly route: ActivatedRoute,
     private readonly router: Router
   ) {
-    this.title = "Edit payment";
-    this.id = null;
-    this.isLoading = false;
-
     this.form = new FormGroup<PaymentForm>({
       comment: new FormControl<string>("", {validators: Validators.required, nonNullable: true}),
       paymentMethod: new FormControl<PaymentMethod>(PaymentMethod.BankAccount, {
@@ -72,15 +67,11 @@ export class EditPaymentComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.route.params.subscribe((params) => {
-      this.id = params["id"];
-    });
-
     if (this.isEditMode()) {
-      this.title = "Edit payment";
+      this.title.set("Edit payment");
       this.fetchPayment();
     } else {
-      this.title = "Add a new payment";
+      this.title.set("Add a new payment");
     }
   }
 
@@ -89,21 +80,21 @@ export class EditPaymentComponent implements OnInit {
       return;
     }
 
-    if (this.id) {
+    if (this.isEditMode()) {
       this.updatePayment();
     } else {
       this.addPayment();
     }
   }
 
   isEditMode(): boolean {
-    return this.id != null && this.id !== "";
+    return this.id() != null && this.id() !== "";
   }
 
   private fetchPayment() {
-    this.isLoading = true;
+    this.isLoading.set(true);
 
-    this.apiService.getPayment(this.id!).subscribe((result) => {
+    this.apiService.getPayment(this.id()!).subscribe((result) => {
       if (result.data) {
         const payment = result.data;
 
@@ -116,12 +107,12 @@ export class EditPaymentComponent implements OnInit {
         });
       }
 
-      this.isLoading = false;
+      this.isLoading.set(false);
     });
   }
 
   private addPayment() {
-    this.isLoading = true;
+    this.isLoading.set(true);
 
     const command: CreatePaymentCommand = {
       amount: this.form.value.amount!,
@@ -136,15 +127,15 @@ export class EditPaymentComponent implements OnInit {
         this.router.navigateByUrl("/accounting/payments");
       }
 
-      this.isLoading = false;
+      this.isLoading.set(false);
     });
   }
 
   private updatePayment() {
-    this.isLoading = true;
+    this.isLoading.set(true);
 
     const commad: UpdatePaymentCommand = {
-      id: this.id!,
+      id: this.id()!,
       amount: this.form.value.amount,
       method: this.form.value.paymentMethod,
       paymentFor: this.form.value.paymentFor,
@@ -158,7 +149,7 @@ export class EditPaymentComponent implements OnInit {
         this.router.navigateByUrl("/accounting/payments");
       }
 
-      this.isLoading = false;
+      this.isLoading.set(false);
     });
   }
 }

src/Client/Logistics.OfficeApp/src/app/pages/customer/customer.routes.ts

@@ -4,7 +4,7 @@ import {authGuard} from "@/core/guards";
 import {ListCustomersComponent} from "./list-customers/list-customers.component";
 import {EditCustomerComponent} from "./edit-customer/edit-customer.component";
 
-export const CUSTOMER_ROUTES: Routes = [
+export const customerRoutes: Routes = [
   {
     path: "",
     component: ListCustomersComponent,

src/Client/Logistics.OfficeApp/src/app/pages/dashboard/dashboard.routes.ts

@@ -3,7 +3,7 @@ import {Permissions} from "@/core/enums";
 import {authGuard} from "@/core/guards";
 import {DashboardComponent} from "./dashboard.component";
 
-export const DASHBOARD_ROUTES: Routes = [
+export const dashboardRoutes: Routes = [
   {
     path: "",
     component: DashboardComponent,

src/Client/Logistics.OfficeApp/src/app/pages/dashboard/index.ts

@@ -1 +1 @@
-export {DASHBOARD_ROUTES} from "./dashboard.routes";
+export {dashboardRoutes as DASHBOARD_ROUTES} from "./dashboard.routes";

src/Client/Logistics.OfficeApp/src/app/pages/employee/employee.routes.ts

@@ -5,7 +5,7 @@ import {AddEmployeeComponent} from "./add-employee/add-employee.component";
 import {EditEmployeeComponent} from "./edit-employee/edit-employee.component";
 import {ListEmployeeComponent} from "./list-employees/list-employees.component";
 
-export const EMPLOYEE_ROUTES: Routes = [
+export const employeeRoutes: Routes = [
   {
     path: "",
     component: ListEmployeeComponent,

src/Client/Logistics.OfficeApp/src/app/pages/home/home.routes.ts

@@ -3,7 +3,7 @@ import {Permissions} from "@/core/enums";
 import {authGuard} from "@/core/guards";
 import {HomeComponent} from "./home.component";
 
-export const HOME_ROUTES: Routes = [
+export const homeRoutes: Routes = [
   {
     path: "",
     component: HomeComponent,

src/Client/Logistics.OfficeApp/src/app/pages/home/index.ts

@@ -1 +1 @@
-export {HOME_ROUTES} from "./home.routes";
+export {homeRoutes as HOME_ROUTES} from "./home.routes";

src/Client/Logistics.OfficeApp/src/app/pages/load/index.ts

@@ -1 +1 @@
-export {LOAD_ROUTES} from "./load.routes";
+export * from "./load.routes";

src/Client/Logistics.OfficeApp/src/app/pages/load/load.routes.ts

@@ -5,7 +5,7 @@ import {EditLoadComponent} from "./edit-load/edit-load.component";
 import {ListLoadComponent} from "./list-loads/list-loads.component";
 import {AddLoadComponent} from "./add-load/add-load.component";
 
-export const LOAD_ROUTES: Routes = [
+export const loadRoutes: Routes = [
   {
     path: "",
     component: ListLoadComponent,

src/Client/Logistics.OfficeApp/src/app/pages/payment/payment.routes.ts

@@ -1,7 +1,7 @@
 import {Routes} from "@angular/router";
 import {ProcessPaymentComponent} from "./process-payment/process-payment.component";
 
-export const PAYMENT_ROUTES: Routes = [
+export const paymentRoutes: Routes = [
   {
     path: "invoice/:invoiceId",
     component: ProcessPaymentComponent,

src/Client/Logistics.OfficeApp/src/app/pages/truck/truck.routes.ts

@@ -5,7 +5,7 @@ import {EditTruckComponent} from "./edit-truck/edit-truck.component";
 import {ListTruckComponent} from "./list-trucks/list-trucks.component";
 import {TruckDetailsComponent} from "./truck-details/truck-details.component";
 
-export const TRUCK_ROUTES: Routes = [
+export const truckRoutes: Routes = [
   {
     path: "",
     component: ListTruckComponent,