Merge pull request #194 from Kleostro/refactor/tu-02-65/ride-modal

refactor(tu-02-65): ride confirmation modal
Kleostro · Sep 5, 2024 · a27ec87 · a27ec87
2 parents 40f54ce + d827a2a
commit a27ec87
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 {