refactor(tu-01-50): admin pages

public/styles/common.scss

@@ -17,7 +17,6 @@ html {
 
 html,
 body {
-  scroll-behavior: smooth;
   height: 100%;
 }
 

src/app/admin/components/carriage/carriage.component.html

@@ -19,9 +19,9 @@
         @if (seatsSchema(); as seatsSchema) {
           <div class="right-seats">
             <div class="left-line"></div>
-            @for (rightRow of seatsSchema.rightSeats; track rightRow; let i = $index) {
+            @for (rightRow of seatsSchema.rightSeats; let i = $index; track i) {
               <div class="right-seats-row">
-                @for (rightSeat of rightRow; track rightSeat) {
+                @for (rightSeat of rightRow; let index = $index; track index) {
                   @if (i === seatsSchema.rightSeats.length - 1) {
                     <app-seat
                       [numberSeat]="rightSeat"
@@ -40,7 +40,7 @@
           </div>
           <div class="left-seats">
             <div class="left-line"></div>
-            @for (leftRow of seatsSchema.leftSeats; track leftRow; let i = $index) {
+            @for (leftRow of seatsSchema.leftSeats; let i = $index; track i) {
               <div class="left-seats-row">
                 @for (leftSeat of leftRow; track leftSeat) {
                   @if (i === 0) {

src/app/admin/components/carriages-list/carriages-list.component.html

@@ -1,11 +1,13 @@
 <div class="wrapper">
-  @for (carriage of allCarriages(); track carriage) {
-    <app-carriage
-      [carriage]="carriage"
-      [isInteractive]="!routingService.isAdminCarriagesPage$$()"
-      [isEditable]="true"
-      (openEditModal)="handleOpenEditModal($event)"
-    ></app-carriage>
+  @if (allCarriages().length) {
+    @for (carriage of allCarriages(); track carriage.code) {
+      <app-carriage
+        [carriage]="carriage"
+        [isInteractive]="!routingService.isAdminCarriagesPage$$()"
+        [isEditable]="true"
+        (openEditModal)="handleOpenEditModal($event)"
+      ></app-carriage>
+    }
   }
 </div>
 

src/app/admin/components/create-carriage-form/create-carriage-form.component.ts

@@ -1,22 +1,14 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  inject,
-  OnDestroy,
-  OnInit,
-  signal,
-} from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit, signal } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
 import { ButtonModule } from 'primeng/button';
 import { InputNumberModule } from 'primeng/inputnumber';
 import { InputTextModule } from 'primeng/inputtext';
 import { RippleModule } from 'primeng/ripple';
-import { debounceTime, distinctUntilChanged, map, Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged, map, Subscription, take } from 'rxjs';
 
 import { CarriageService } from '@/app/api/carriagesService/carriage.service';
-import { Carriage } from '@/app/api/models/carriage';
+import { Carriage, Code } from '@/app/api/models/carriage';
 import { ModalService } from '@/app/shared/services/modal/modal.service';
 import { USER_MESSAGE } from '@/app/shared/services/userMessage/constants/user-messages';
 import { UserMessageService } from '@/app/shared/services/userMessage/user-message.service';
@@ -32,17 +24,17 @@ import { CarriageComponent } from '../carriage/carriage.component';
   styleUrl: './create-carriage-form.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CreateCarriageFormComponent implements OnInit, OnDestroy {
+export class CreateCarriageFormComponent implements OnInit, AfterViewInit, OnDestroy {
   private fb = inject(FormBuilder);
   private modalService = inject(ModalService);
   private userMessageService = inject(UserMessageService);
   private carriageService = inject(CarriageService);
-  private cdr = inject(ChangeDetectorRef);
 
   private subsciption = new Subscription();
 
   public newCarriage = signal<Carriage>(INITIAL_CARRIAGE);
   public isCreated = signal(false);
+
   public carriageForm = this.fb.nonNullable.group({
     name: ['', [Validators.required.bind(this)]],
     rows: [0, [Validators.required.bind(this), Validators.min(1)]],
@@ -60,14 +52,13 @@ export class CreateCarriageFormComponent implements OnInit, OnDestroy {
       currentCarriage.leftSeats = leftSeats ?? currentCarriage.leftSeats;
       currentCarriage.rightSeats = rightSeats ?? currentCarriage.rightSeats;
       this.newCarriage.set({ ...currentCarriage });
-      this.cdr.detectChanges();
     }
   }
 
   public submit(): void {
     this.carriageForm.markAsTouched();
     this.carriageForm.updateValueAndValidity();
-    const updatedCarriage = {
+    const newCarriage = {
       name: this.carriageForm.controls.name.value ?? '',
       rows: this.carriageForm.controls.rows.value,
       leftSeats: this.carriageForm.controls.leftSeats.value,
@@ -76,27 +67,33 @@ export class CreateCarriageFormComponent implements OnInit, OnDestroy {
 
     if (this.carriageForm.valid) {
       this.isCreated.set(true);
-      this.subsciption.add(
-        this.carriageService.hasCarriageNameInCarriages(updatedCarriage.name).subscribe((hasCarriage) => {
-          if (!hasCarriage) {
-            this.carriageService.createCarriage(updatedCarriage).subscribe({
-              next: () => this.submitSuccessHandler(),
-            });
-          } else {
-            this.submitErrorHandler();
-          }
-        }),
-      );
+
+      if (this.carriageService.hasCarriageNameInCarriages(newCarriage.name)) {
+        this.submitErrorHandler();
+      } else {
+        this.subsciption.add(
+          this.carriageService
+            .createCarriage(newCarriage)
+            .pipe(take(1))
+            .subscribe((code) => this.submitSuccessHandler(code)),
+        );
+      }
     }
   }
 
-  private submitSuccessHandler(): void {
-    this.carriageService.getCarriages().subscribe((carriages) => {
-      this.carriageService.allCarriages.next([carriages[carriages.length - 1], ...carriages]);
+  private submitSuccessHandler(code: Code): void {
+    this.carriageService.getCarriages().subscribe(() => {
+      const newCarriage = this.newCarriage();
+      newCarriage.code = code.code;
+      this.newCarriage.set({ ...newCarriage });
+      const restCarriages = this.carriageService
+        .allCarriages()
+        .slice(0, this.carriageService.allCarriages().length - 1);
+      this.carriageService.allCarriages.set([this.newCarriage(), ...restCarriages]);
+      this.isCreated.set(false);
+      this.modalService.closeModal();
+      this.userMessageService.showSuccessMessage(USER_MESSAGE.CARRIAGE_CREATED_SUCCESSFULLY);
     });
-    this.isCreated.set(false);
-    this.modalService.closeModal();
-    this.userMessageService.showSuccessMessage(USER_MESSAGE.CARRIAGE_CREATED_SUCCESSFULLY);
   }
 
   private submitErrorHandler(): void {
@@ -116,6 +113,10 @@ export class CreateCarriageFormComponent implements OnInit, OnDestroy {
     );
   }
 
+  public ngAfterViewInit(): void {
+    this.carriageForm.patchValue(INITIAL_CARRIAGE);
+  }
+
   public ngOnDestroy(): void {
     this.subsciption.unsubscribe();
   }

src/app/admin/components/create-station-form/create-station-form.component.html

@@ -98,5 +98,4 @@ <h1>Create Station</h1>
       Create
     </button>
   </div>
-  <p-toast position="bottom-left" />
 </form>

src/app/admin/components/create-station-form/create-station-form.component.ts

@@ -1,14 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  computed,
-  inject,
-  input,
-  OnDestroy,
-  OnInit,
-  signal,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit, signal } from '@angular/core';
 import {
   FormArray,
   FormBuilder,
@@ -24,10 +14,9 @@ import { ButtonModule } from 'primeng/button';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import { InputNumberModule } from 'primeng/inputnumber';
 import { RippleModule } from 'primeng/ripple';
-import { ToastModule } from 'primeng/toast';
-import { Subscription } from 'rxjs';
+import { Subscription, take } from 'rxjs';
 
-import { NewStation, Station } from '@/app/api/models/stations';
+import { NewStation } from '@/app/api/models/stations';
 import { StationsService } from '@/app/api/stationsService/stations.service';
 import { USER_MESSAGE } from '@/app/shared/services/userMessage/constants/user-messages';
 import { UserMessageService } from '@/app/shared/services/userMessage/user-message.service';
@@ -43,7 +32,6 @@ import { MapService } from '../../services/map/map.service';
     ReactiveFormsModule,
     RippleModule,
     ButtonModule,
-    ToastModule,
     AutoCompleteModule,
     FormsModule,
   ],
@@ -57,12 +45,8 @@ export class CreateStationFormComponent implements OnInit, OnDestroy {
   private stationsService = inject(StationsService);
   private userMessageService = inject(UserMessageService);
   private subscription = new Subscription();
-  private cdr = inject(ChangeDetectorRef);
-
-  public allStations = input.required<Station[]>();
 
   public isStationCreated = signal(false);
-  public allStationNames = computed(() => this.allStations().map((station) => station.city));
   public filteredCountries: string[] = [];
 
   public createStationForm = this.fb.nonNullable.group({
@@ -75,7 +59,7 @@ export class CreateStationFormComponent implements OnInit, OnDestroy {
   public filterCountry(event: { originalEvent: Event; query: string }): void {
     this.filteredCountries = [];
 
-    this.allStationNames()?.forEach((city) => {
+    this.stationsService.allStationNames().forEach((city) => {
       if (city.toLowerCase().includes(event.query.toLowerCase())) {
         this.filteredCountries.push(city);
       }
@@ -85,15 +69,10 @@ export class CreateStationFormComponent implements OnInit, OnDestroy {
   public addConnection(name = ''): FormGroup<{
     connection: FormControl<string>;
   }> {
-    const connectionControl = this.fb.nonNullable.group(
-      {
-        connection: [name],
-      },
-      { updateOn: 'blur' },
-    );
+    const connectionControl = this.fb.nonNullable.group({ connection: [name] }, { updateOn: 'blur' });
     this.subscription.add(
-      connectionControl.valueChanges.subscribe((value) => {
-        if (value.connection && this.allStationNames()?.includes(value.connection)) {
+      connectionControl.valueChanges.pipe(take(1)).subscribe((value) => {
+        if (value.connection && this.stationsService.allStationNames().includes(value.connection)) {
           this.createStationForm.controls.connections.push(this.addConnection());
         }
       }),
@@ -102,14 +81,9 @@ export class CreateStationFormComponent implements OnInit, OnDestroy {
   }
 
   public getValidFormData(): NewStation {
-    const { city, latitude, longitude, connections } = this.createStationForm.getRawValue();
     return {
-      city,
-      latitude,
-      longitude,
-      relations: connections
-        .map((connection) => this.allStations().find((station) => station.city === connection.connection)?.id)
-        .filter((id): id is number => id !== undefined),
+      ...this.createStationForm.getRawValue(),
+      relations: this.stationsService.collectedStationConnectionIds(this.createStationForm.getRawValue().connections),
     };
   }
 
@@ -122,42 +96,39 @@ export class CreateStationFormComponent implements OnInit, OnDestroy {
     }
 
     this.isStationCreated.set(true);
-    this.subscription.add(
-      this.stationsService.isStationInCity(this.createStationForm.getRawValue().city).subscribe({
-        next: (isStationInCity) => {
-          if (isStationInCity) {
-            this.submitErrorHandler(new Error(USER_MESSAGE.STATION_EXISTS));
-            return;
-          }
-          this.stationsService.createNewStation(this.getValidFormData()).subscribe({
-            next: this.submitSuccessHandler.bind(this),
-            error: this.submitErrorHandler.bind(this),
-          });
-        },
-      }),
-    );
+
+    if (this.stationsService.isStationInCity(this.createStationForm.getRawValue().city)) {
+      this.submitErrorHandler(USER_MESSAGE.STATION_EXISTS);
+    } else {
+      this.subscription.add(
+        this.stationsService
+          .createNewStation(this.getValidFormData())
+          .pipe(take(1))
+          .subscribe(({ id }) => {
+            if (id) {
+              this.submitSuccessHandler();
+            } else {
+              this.submitErrorHandler(USER_MESSAGE.STATION_CREATED_ERROR);
+            }
+          }),
+      );
+    }
   }
 
   private submitSuccessHandler(): void {
-    this.subscription.add(
-      this.stationsService.getStations().subscribe((stations) => {
-        this.stationsService.allStations.next(stations);
-      }),
-    );
-
+    this.subscription.add(this.stationsService.getStations().pipe(take(1)).subscribe());
     this.mapService.createNewMarker({
       city: this.createStationForm.getRawValue().city,
       lat: this.createStationForm.getRawValue().latitude,
       lng: this.createStationForm.getRawValue().longitude,
     });
-
     this.resetForm();
     this.userMessageService.showSuccessMessage(USER_MESSAGE.STATION_CREATED_SUCCESSFULLY);
   }
 
-  private submitErrorHandler(error: Error): void {
+  private submitErrorHandler(message: string): void {
     this.resetForm();
-    this.userMessageService.showErrorMessage(error.message);
+    this.userMessageService.showErrorMessage(message);
   }
 
   private resetForm(): void {
@@ -179,20 +150,18 @@ export class CreateStationFormComponent implements OnInit, OnDestroy {
         });
 
         this.initConnections(lngLat);
-        this.cdr.detectChanges();
       }),
     );
   }
 
   private initConnections(lngLat: { lng: number; lat: number }): void {
     this.createStationForm.controls.connections.controls = [];
     this.stationsService.findStationByLngLat(lngLat)?.connectedTo.forEach(({ id }) => {
-      const stationById = this.allStations().find((station) => station.id === id);
-      if (stationById) {
-        this.createStationForm.controls.connections.controls.push(this.addConnection(stationById.city));
+      const city = this.stationsService.findStationById(id)?.city;
+      if (city) {
+        this.createStationForm.controls.connections.controls.push(this.addConnection(city));
       }
     });
-
     this.createStationForm.controls.connections.controls.push(this.addConnection());
   }
 

src/app/admin/components/map/map.component.html

@@ -1,5 +1,5 @@
 <div class="map-wrap">
-  <div class="map" #map>
+  <div class="map" #mapContainer>
     <p-skeleton width="100%" height="100%" [hidden]="isMapLoaded()" />
   </div>
 </div>