Refactor order process to fix flicker bug

src/app/selected-seats.service.ts

@@ -1,69 +1,61 @@
-import { Injectable, signal } from '@angular/core';
+import { computed, Injectable, signal } from '@angular/core';
 import {Sitzplatz} from '@infinimotion/model-frontend';
 
 @Injectable({
   providedIn: 'root',
 })
 export class SelectedSeatsService {
-  private selectedSeatsSignal = signal<Sitzplatz[]>([]);
-  private seatIsSelectable: boolean = true;
-  private commited = false;
-  private debug = false;
 
-  get selectedSeats() {
-    return this.selectedSeatsSignal;
-  }
+  private selectedSeatsSignal = signal<Sitzplatz[]>([]);
+  private seatIsSelectableSignal = signal(true);
+  private committedSignal = signal(false);
+  private debugSignal = signal(false);
+
+  readonly selectedSeats = this.selectedSeatsSignal.asReadonly();
+  readonly seatIsSelectable = this.seatIsSelectableSignal.asReadonly();
+  readonly committed = this.committedSignal.asReadonly();
+  readonly debug = this.debugSignal.asReadonly();
+
+  readonly totalSeats = computed(() => this.selectedSeats().length);
+  readonly totalPrice = computed(() => this.selectedSeats().reduce((sum, seat) => sum + seat.row.category.price, 0));
 
   pushSelectedSeat(selectedSeat: Sitzplatz): void {
     this.selectedSeatsSignal.update(seats => [...seats, selectedSeat]);
   }
 
   removeSelectedSeat(selectedSeat: Sitzplatz): void {
-    this.selectedSeatsSignal.update(seats =>
-      seats.filter(seat => seat.id !== selectedSeat.id)
-    );
+    this.selectedSeatsSignal.update(seats => seats.filter(seat => seat.id !== selectedSeat.id));
   }
 
-  getSelectedSeatsList(): Sitzplatz[] {
-    return this.selectedSeatsSignal();
+  getSeatsByCategory(categoryId: number): Sitzplatz[] {
+    return this.selectedSeats().filter(seat => seat.row.category.id === categoryId);
   }
 
-  getSelectedSeatsByCategory(categoryId: number): Sitzplatz[] {
-    return this.selectedSeatsSignal().filter(seat => seat.row.category.id === categoryId);
-  }
-
-  clearSelectedSeatsList(): void {
+  clearSelection(): void {
     this.selectedSeatsSignal.set([]);
-    this.commited = false;
+    this.committedSignal.set(false);
   }
 
   getSeatIsSelectable(): boolean{
-    return this.seatIsSelectable;
+    return this.seatIsSelectable();
   }
 
-  setSeatIsSelectableTrue(): void {
-    this.seatIsSelectable = true;
-    this.commited = false;
+  setSeatSelectable(selectable: boolean): void {
+    this.seatIsSelectableSignal.set(selectable);
+    if (selectable) {
+      this.committedSignal.set(false);
+    }
   }
 
-  setSeatIsSelectableFalse(): void {
-    this.seatIsSelectable = false;
-  }
-
-  getCommited(): boolean {
-    return this.commited;
-  }
-
-  setCommitedTrue(): void {
-    this.commited = true;
-  }
-
-  getDebug(): boolean {
-    return this.debug;
+  commit(): void {
+    this.committedSignal.set(true);
   }
 
   toggleDebug(): void {
-    this.debug = !this.debug;
+    this.debugSignal.update(debug => !debug);
   }
 
+  isSeatSelected(seatId: number): boolean {
+    return this.selectedSeats().some(seat => seat.id === seatId);
+  }
 }