Merge pull request #82 from Kleostro/refactor/tu-01-48/carriage-forms

refactor(tu-01-48): carriage forms

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

@@ -23,9 +23,15 @@
               <div class="right-seats-row">
                 @for (rightSeat of rightRow; track rightSeat) {
                   @if (i === seatsSchema.rightSeats.length - 1) {
-                    <app-seat [numberSeat]="rightSeat" [classes]="['right', 'free-seat', 'first-seat']"></app-seat>
+                    <app-seat
+                      [numberSeat]="rightSeat"
+                      [classes]="['right', 'free-seat', 'first-seat', isInteractive() ? 'interactive' : '']"
+                    ></app-seat>
                   } @else {
-                    <app-seat [numberSeat]="rightSeat" [classes]="['right', 'free-seat']"></app-seat>
+                    <app-seat
+                      [numberSeat]="rightSeat"
+                      [classes]="['right', 'free-seat', isInteractive() ? 'interactive' : '']"
+                    ></app-seat>
                   }
                 }
               </div>
@@ -38,9 +44,15 @@
               <div class="left-seats-row">
                 @for (leftSeat of leftRow; track leftSeat) {
                   @if (i === 0) {
-                    <app-seat [numberSeat]="leftSeat" [classes]="['left', 'free-seat', 'first-seat']"></app-seat>
+                    <app-seat
+                      [numberSeat]="leftSeat"
+                      [classes]="['left', 'free-seat', 'first-seat', isInteractive() ? 'interactive' : '']"
+                    ></app-seat>
                   } @else {
-                    <app-seat [numberSeat]="leftSeat" [classes]="['left', 'free-seat']"></app-seat>
+                    <app-seat
+                      [numberSeat]="leftSeat"
+                      [classes]="['left', 'free-seat', isInteractive() ? 'interactive' : '']"
+                    ></app-seat>
                   }
                 }
               </div>

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

@@ -21,6 +21,7 @@ import { SeatComponent } from '../seat/seat.component';
 export class CarriageComponent {
   public carriage = input<Carriage | null>(null);
   public isEditable = input(false);
+  public isInteractive = input(true);
   public seatsSchema = computed(() => createSeatsSchema(this.carriage()));
   public modalService = inject(ModalService);
 

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

@@ -2,6 +2,7 @@
   @for (carriage of allCarriages(); track carriage) {
     <app-carriage
       [carriage]="carriage"
+      [isInteractive]="!routingService.isAdminCarriagesPage$$()"
       [isEditable]="true"
       (openEditModal)="handleOpenEditModal($event)"
     ></app-carriage>

src/app/admin/components/carriages-list/carriages-list.component.spec.ts

@@ -1,4 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+
+import { of } from 'rxjs';
 
 import { CarriagesListComponent } from './carriages-list.component';
 
@@ -9,6 +12,7 @@ describe('CarriagesListComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [CarriagesListComponent],
+      providers: [{ provide: ActivatedRoute, useValue: { queryParams: of({}) } }],
     }).compileComponents();
 
     fixture = TestBed.createComponent(CarriagesListComponent);

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

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, inject, input, signal, TemplateRef, ViewChild } from '@angular/core';
 
 import { Carriage } from '@/app/api/models/carriage';
+import { RoutingService } from '@/app/core/services/routing/routing.service';
 import { ModalService } from '@/app/shared/services/modal/modal.service';
 
 import { CarriageComponent } from '../carriage/carriage.component';
@@ -15,6 +16,7 @@ import { UpdateCarriageFormComponent } from '../update-carriage-form/update-carr
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CarriagesListComponent {
+  public routingService = inject(RoutingService);
   public modalService = inject(ModalService);
   public allCarriages = input<Carriage[]>([]);
   public editCarriage = signal<Carriage | null>(null);

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

@@ -16,6 +16,7 @@
       <label for="leftSeats"> Left seats count:</label>
       <p-inputNumber inputId="leftSeats" formControlName="leftSeats" />
     </div>
+
     <button
       pButton
       pRipple
@@ -28,6 +29,6 @@
   </div>
 
   @if (newCarriage(); as newCarriage) {
-    <app-carriage [carriage]="newCarriage"></app-carriage>
+    <app-carriage [isInteractive]="false" [carriage]="newCarriage"></app-carriage>
   }
 </form>

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

@@ -1,6 +1,7 @@
 .controls {
   display: flex;
   gap: 0.5rem;
+  justify-content: center;
   margin: 1rem 0;
 }
 

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

@@ -21,6 +21,7 @@ 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';
 
+import INITIAL_CARRIAGE from '../../constants/initial-carriage';
 import { CarriageComponent } from '../carriage/carriage.component';
 
 @Component({
@@ -33,13 +34,15 @@ import { CarriageComponent } from '../carriage/carriage.component';
 })
 export class CreateCarriageFormComponent implements OnInit, OnDestroy {
   private fb = inject(FormBuilder);
-  private cdr = inject(ChangeDetectorRef);
   private modalService = inject(ModalService);
   private userMessageService = inject(UserMessageService);
   private carriageService = inject(CarriageService);
-  public newCarriage = signal<Carriage>({ name: '', rows: 0, leftSeats: 0, rightSeats: 0, code: '' });
-  public isCreated = signal(false);
+  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)]],
@@ -59,8 +62,6 @@ export class CreateCarriageFormComponent implements OnInit, OnDestroy {
       this.newCarriage.set({ ...currentCarriage });
       this.cdr.detectChanges();
     }
-
-    this.cdr.detectChanges();
   }
 
   public submit(): void {
@@ -75,9 +76,17 @@ export class CreateCarriageFormComponent implements OnInit, OnDestroy {
 
     if (this.carriageForm.valid) {
       this.isCreated.set(true);
-      this.carriageService.createCarriage(updatedCarriage).subscribe({
-        next: () => this.submitSuccessHandler(),
-      });
+      this.subsciption.add(
+        this.carriageService.hasCarriageNameInCarriages(updatedCarriage.name).subscribe((hasCarriage) => {
+          if (!hasCarriage) {
+            this.carriageService.createCarriage(updatedCarriage).subscribe({
+              next: () => this.submitSuccessHandler(),
+            });
+          } else {
+            this.submitErrorHandler();
+          }
+        }),
+      );
     }
   }
 
@@ -90,6 +99,11 @@ export class CreateCarriageFormComponent implements OnInit, OnDestroy {
     this.userMessageService.showSuccessMessage(USER_MESSAGE.CARRIAGE_CREATED_SUCCESSFULLY);
   }
 
+  private submitErrorHandler(): void {
+    this.isCreated.set(false);
+    this.userMessageService.showErrorMessage(USER_MESSAGE.CARRIAGE_ALREADY_EXISTS);
+  }
+
   public ngOnInit(): void {
     this.subsciption.add(
       this.carriageForm.valueChanges

src/app/admin/components/seat/seat.component.scss

@@ -2,7 +2,8 @@
 @import 'mixins';
 
 .seat {
-  cursor: pointer;
+  pointer-events: none;
+  cursor: auto;
   user-select: none;
 
   position: relative;
@@ -15,6 +16,7 @@
   height: 2.2rem;
   margin-bottom: 0.5rem;
 
+  filter: grayscale(0.8);
   border-radius: 0.5rem;
 
   transition:
@@ -31,14 +33,6 @@
     border: $two solid #ddd;
     border-radius: $offset-xxs;
   }
-
-  @include hover {
-    filter: brightness(0.9);
-  }
-
-  &:active {
-    scale: 0.9;
-  }
 }
 
 .left {
@@ -155,3 +149,17 @@
   color: $black-100;
   background-color: #f7e40b;
 }
+
+.interactive {
+  pointer-events: all;
+  cursor: pointer;
+  filter: grayscale(0);
+
+  @include hover {
+    filter: grayscale(0) brightness(0.9);
+  }
+
+  &:active {
+    scale: 0.9;
+  }
+}

src/app/admin/components/update-carriage-form/update-carriage-form.component.html

@@ -24,6 +24,6 @@
   </div>
 
   @if (currentCarriage(); as currentCarriage) {
-    <app-carriage [carriage]="currentCarriage"></app-carriage>
+    <app-carriage [isInteractive]="false" [carriage]="currentCarriage"></app-carriage>
   }
 </form>

src/app/admin/components/update-carriage-form/update-carriage-form.component.scss

@@ -1,6 +1,7 @@
 .controls {
   display: flex;
   gap: 0.5rem;
+  justify-content: center;
   margin: 1rem 0;
 }
 

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

@@ -34,14 +34,16 @@ import { CarriageComponent } from '../carriage/carriage.component';
 })
 export class UpdateCarriageFormComponent implements OnInit, OnDestroy {
   private fb = inject(FormBuilder);
-  private cdr = inject(ChangeDetectorRef);
   private modalService = inject(ModalService);
   private userMessageService = inject(UserMessageService);
   private carriageService = inject(CarriageService);
+  private cdr = inject(ChangeDetectorRef);
+
   public carriage = input<Carriage | null>(null);
+
+  private subsciption = new Subscription();
   public currentCarriage = signal<Carriage | null>(null);
   public isUpdating = signal(false);
-  private subsciption = new Subscription();
   public carriageForm = this.fb.nonNullable.group({
     rows: [0, [Validators.required.bind(this), Validators.min(1)]],
     leftSeats: [0, [Validators.required.bind(this), Validators.min(1)]],
@@ -77,9 +79,11 @@ export class UpdateCarriageFormComponent implements OnInit, OnDestroy {
 
     if (this.carriageForm.valid) {
       this.isUpdating.set(true);
-      this.carriageService.updateCarriage(updatedCarriage).subscribe({
-        next: () => this.submitSuccessHandler(),
-      });
+      this.subsciption.add(
+        this.carriageService.updateCarriage(updatedCarriage).subscribe({
+          next: () => this.submitSuccessHandler(),
+        }),
+      );
     }
   }
 

src/app/admin/constants/initial-carriage.ts

@@ -0,0 +1,11 @@
+import { Carriage } from '@/app/api/models/carriage';
+
+const INITIAL_CARRIAGE: Carriage = {
+  name: '',
+  rows: 0,
+  leftSeats: 0,
+  rightSeats: 0,
+  code: '',
+};
+
+export default INITIAL_CARRIAGE;

src/app/admin/pages/carriages/carriages.component.spec.ts

@@ -1,5 +1,8 @@
 import { provideHttpClient } from '@angular/common/http';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+
+import { of } from 'rxjs';
 
 import { CarriagesComponent } from './carriages.component';
 
@@ -10,7 +13,7 @@ describe('CarriagesComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [CarriagesComponent],
-      providers: [provideHttpClient()],
+      providers: [provideHttpClient(), { provide: ActivatedRoute, useValue: { queryParams: of({}) } }],
     }).compileComponents();
 
     fixture = TestBed.createComponent(CarriagesComponent);

src/app/api/carriagesService/carriage.service.ts

@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, map, Observable } from 'rxjs';
 
 import { Carriage, Code } from '../models/carriage';
 
@@ -21,6 +21,12 @@ export class CarriageService {
     return this.httpClient.post<Code>(this.CARRIAGE_ENDPOINT, carriage);
   }
 
+  public hasCarriageNameInCarriages(name: string): Observable<boolean> {
+    return this.httpClient
+      .get<Carriage[]>(this.CARRIAGE_ENDPOINT)
+      .pipe(map((carriages) => carriages.some((carriage) => carriage.name.toLowerCase() === name.toLowerCase())));
+  }
+
   public updateCarriage(carriage: Carriage): Observable<Code> {
     return this.httpClient.put<Code>(`${this.CARRIAGE_ENDPOINT}/${carriage.code}`, carriage);
   }

src/app/core/services/routing/routing.service.ts

@@ -16,6 +16,7 @@ export class RoutingService {
 
   public queryParams$$ = signal<Record<string, string>>({});
   public isAdminPage$$ = signal<boolean>(false);
+  public isAdminCarriagesPage$$ = signal<boolean>(false);
 
   constructor() {
     this.activatedRoute.queryParams.subscribe((params) => {
@@ -24,6 +25,7 @@ export class RoutingService {
 
     this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
       this.isAdminPage$$.set(this.router.url.startsWith(APP_ROUTE.ADMIN));
+      this.isAdminCarriagesPage$$.set(this.router.url.startsWith(`${APP_ROUTE.ADMIN}/carriages`));
     });
   }
 

src/app/shared/services/userMessage/constants/user-messages.ts

@@ -9,4 +9,5 @@ export const USER_MESSAGE = {
   STATION_EXISTS: 'Station already exists in this city!',
   CARRIAGE_CREATED_SUCCESSFULLY: 'Carriage created successfully!',
   CARRIAGE_UPDATED_SUCCESSFULLY: 'Carriage updated successfully!',
+  CARRIAGE_ALREADY_EXISTS: 'Carriage already exists in this name!',
 };