From d827a2a703712eea2e7cd8c4a1f1fba8650603d1 Mon Sep 17 00:00:00 2001
From: Margarita Golubeva <margaret.golubeva@gmail.com>
Date: Thu, 5 Sep 2024 22:14:27 +0300
Subject: [PATCH] refactor: ride confirmation modal

---
 .../admin/components/ride/ride.component.html | 23 +++++++-------
 .../admin/components/ride/ride.component.scss | 15 +++-------
 .../admin/components/ride/ride.component.ts   | 30 +++++++++++--------
 .../routes-list/routes-list.component.ts      |  2 +-
 4 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/src/app/admin/components/ride/ride.component.html b/src/app/admin/components/ride/ride.component.html
index 38db0af..c8b927e 100644
--- a/src/app/admin/components/ride/ride.component.html
+++ b/src/app/admin/components/ride/ride.component.html
@@ -43,24 +43,23 @@ <h2>Ride {{ ride()?.rideId }}</h2>
 
 <ng-template #deleteCurrentRide>
   <div class="modal-wrapper">
-    <strong class="subtitle">{{ 'Are you sure you want to delete this ride?' }}</strong>
+    <p class="subtitle">{{ 'Are you sure you want to delete this ride?' }}</p>
     <div class="buttons">
       <p-button
-        [icon]="!isRideDeleted() ? 'pi pi-spin pi-cog' : 'pi pi-trash'"
-        severity="danger"
-        (onClick)="deleteRide(ride()?.rideId ?? 0); modalService.closeModal()"
-        [label]="!isRideDeleted() ? 'Deleting...' : 'Delete'"
+        [icon]="!isRideDeleted() ? 'pi pi-spin pi-cog' : 'pi pi-times'"
         [disabled]="!isRideDeleted()"
-      ></p-button>
-      <button
-        pButton
-        pRipple
-        label="Cancel"
-        [icon]="isRideDeleted() ? 'pi pi-times' : 'pi pi-spin pi-cog'"
+        [rounded]="true"
         class="p-button-primary"
         (click)="modalService.closeModal()"
+      ></p-button>
+
+      <p-button
+        [icon]="!isRideDeleted() ? 'pi pi-spin pi-cog' : 'pi pi-trash'"
         [disabled]="!isRideDeleted()"
-      ></button>
+        [rounded]="true"
+        severity="danger"
+        (onClick)="deleteRide(ride()?.rideId ?? 0)"
+      ></p-button>
     </div>
   </div>
 </ng-template>
diff --git a/src/app/admin/components/ride/ride.component.scss b/src/app/admin/components/ride/ride.component.scss
index 05fe378..7d5476b 100644
--- a/src/app/admin/components/ride/ride.component.scss
+++ b/src/app/admin/components/ride/ride.component.scss
@@ -65,22 +65,15 @@
 .modal-wrapper {
   display: flex;
   flex-direction: column;
-  gap: $offset-s;
+  gap: 1rem;
+  align-items: center;
   justify-content: center;
 
-  padding: $offset-s;
+  padding: 2rem;
   padding-bottom: 0;
 }
 
-.subtitle {
-  font-weight: 500;
-  color: $gray-700;
-  text-align: center;
-}
-
 .buttons {
   display: flex;
-  gap: $offset-xs;
-  align-self: center;
-  width: max-content;
+  gap: 0.5rem;
 }
diff --git a/src/app/admin/components/ride/ride.component.ts b/src/app/admin/components/ride/ride.component.ts
index 0623370..bcb807f 100644
--- a/src/app/admin/components/ride/ride.component.ts
+++ b/src/app/admin/components/ride/ride.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, computed, inject, input, OnDestroy,
 
 import { ButtonModule } from 'primeng/button';
 import { RippleModule } from 'primeng/ripple';
-import { catchError, EMPTY, Observable, Subscription, take } from 'rxjs';
+import { catchError, EMPTY, finalize, Observable, Subscription, take } from 'rxjs';
 
 import { isOverriddenHttpErrorResponse } from '@/app/api/helpers/isOverriddenHttpErrorResponse';
 import { CustomSchedule } from '@/app/api/models/schedule';
@@ -137,23 +137,29 @@ export class RideComponent implements OnDestroy {
   public deleteRide(rideId: number): void {
     this.isRideDeleted.set(false);
     this.subscription.add(
-      this.rideService.deleteRide(this.rideService.currentRouteId(), rideId).subscribe({
-        next: () =>
-          this.rideService.getRouteById(this.rideService.currentRouteId()).subscribe(() => {
-            this.userMessageService.showSuccessMessage(USER_MESSAGE.RIDE_DELETED_SUCCESSFULLY);
+      this.rideService
+        .deleteRide(this.rideService.currentRouteId(), rideId)
+        .pipe(
+          finalize(() => {
             this.isRideDeleted.set(true);
+            this.modalService.closeModal();
           }),
-        error: () => {
-          this.userMessageService.showErrorMessage(USER_MESSAGE.RIDE_DELETED_ERROR);
-          this.isRideDeleted.set(true);
-        },
-      }),
+        )
+        .subscribe({
+          next: () =>
+            this.rideService.getRouteById(this.rideService.currentRouteId()).subscribe(() => {
+              this.userMessageService.showSuccessMessage(USER_MESSAGE.RIDE_DELETED_SUCCESSFULLY);
+            }),
+          error: () => {
+            this.userMessageService.showErrorMessage(USER_MESSAGE.RIDE_DELETED_ERROR);
+          },
+        }),
     );
   }
 
   public setParamsInModal(): void {
-    this.modalService.position$$.set(POSITION_DIRECTION.CENTER);
-    this.modalService.contentWidth$$.set('50%');
+    this.modalService.contentWidth$$.set('40%');
+    this.modalService.position$$.set(POSITION_DIRECTION.CENTER_TOP);
   }
 
   public ngOnDestroy(): void {
diff --git a/src/app/admin/components/routes-list/routes-list.component.ts b/src/app/admin/components/routes-list/routes-list.component.ts
index e6b1885..9f8756b 100644
--- a/src/app/admin/components/routes-list/routes-list.component.ts
+++ b/src/app/admin/components/routes-list/routes-list.component.ts
@@ -58,7 +58,7 @@ export class RoutesListComponent implements OnDestroy {
     this.deletionRouteId.set(id);
     this.modalService.contentWidth$$.set('40%');
     this.modalService.position$$.set(POSITION_DIRECTION.CENTER_TOP);
-    this.modalService.openModal(this.deleteRouteConfirm, `Delete route ${id}?`);
+    this.modalService.openModal(this.deleteRouteConfirm, `Delete route ${id}`);
   }
 
   public deleteRoute(): void {