From effd1965dce18ba9a3f00960caf607e6401bba25 Mon Sep 17 00:00:00 2001
From: Leon Hoppe <leon@ladenbau-hoppe.de>
Date: Sat, 9 Nov 2024 22:12:00 +0100
Subject: [PATCH] Improved entry delete UX

---
 package.json                |  2 +-
 src/app/time/time.page.html |  1 +
 src/app/time/time.page.scss |  4 ++++
 src/app/time/time.page.ts   | 48 ++++++++++++++++++++++++++++++-------
 4 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 75cc928..729f143 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "WorkTime",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "author": "Ionic Framework",
   "homepage": "https://ionicframework.com/",
   "scripts": {
diff --git a/src/app/time/time.page.html b/src/app/time/time.page.html
index 7e994c4..909dd5f 100644
--- a/src/app/time/time.page.html
+++ b/src/app/time/time.page.html
@@ -29,6 +29,7 @@
       <div class="circle"></div>
       <ion-label class="type">{{getTypeText(entry.type)}}</ion-label>
       <span class="time">{{formatEntry(entry.registeredAt.getHours(), entry.registeredAt.getMinutes())}}</span>
+      <ion-icon name="trash" *ngIf="isToday()" />
       <span *ngIf="index !== 0" class="between">
         <span class="between-content">{{generateSeparatorText(today[index - 1], entry)}}</span>
       </span>
diff --git a/src/app/time/time.page.scss b/src/app/time/time.page.scss
index b5e867f..8dc3816 100644
--- a/src/app/time/time.page.scss
+++ b/src/app/time/time.page.scss
@@ -22,6 +22,10 @@
     line-height: 15px;
     z-index: 0;
 
+    ion-icon {
+      margin-left: 1rem;
+    }
+
     &.animate {
       opacity: 0;
       animation: fade-in 200ms ease-in-out forwards;
diff --git a/src/app/time/time.page.ts b/src/app/time/time.page.ts
index b83cdb2..fb36752 100644
--- a/src/app/time/time.page.ts
+++ b/src/app/time/time.page.ts
@@ -7,12 +7,21 @@ import {
   IonButton,
   IonList,
   IonItem,
-  IonLabel, IonIcon, IonModal, IonButtons, IonInput, IonDatetime, IonDatetimeButton, IonSelect, IonSelectOption
+  IonLabel,
+  IonIcon,
+  IonModal,
+  IonButtons,
+  IonInput,
+  IonDatetime,
+  IonDatetimeButton,
+  IonSelect,
+  IonSelectOption,
+  AlertController
 } from '@ionic/angular/standalone';
 import {TimeEntry, TimeType} from "../../models/timeEntry";
 import {NgClass, NgForOf, NgIf} from "@angular/common";
 import {addIcons} from "ionicons";
-import {add} from "ionicons/icons";
+import {add, trash} from "ionicons/icons";
 import {FormsModule} from "@angular/forms";
 import {TimeService} from "../../services/time.service";
 import {AppComponent} from "../app.component";
@@ -34,7 +43,7 @@ export class TimePage {
   public modalDate: any;
   public currentDate: any;
 
-  constructor(private timeService: TimeService) {
+  constructor(private timeService: TimeService, private alerts: AlertController) {
     this.data = timeService.loadEntries();
 
     for (let i = 0; i < this.data.length; i++) {
@@ -43,7 +52,7 @@ export class TimePage {
 
     this.updateCurrentAction();
 
-    addIcons({add});
+    addIcons({add, trash});
   }
 
   ionViewDidEnter() {
@@ -112,11 +121,32 @@ export class TimePage {
     this.updateCurrentAction();
   }
 
-  public removeEntry(entry: TimeEntry, index: number): void {
-    this.shouldAnimate.splice(index, 1);
-    this.data.splice(this.data.indexOf(entry), 1);
-    this.saveData();
-    this.updateCurrentAction();
+  public async removeEntry(entry: TimeEntry, index: number) {
+    if (!this.isToday()) return;
+
+    const alert = await this.alerts.create({
+      header: "Achtung!",
+      message: 'Möchtest du diesen Eintrag wirklich löschen?',
+      buttons: [
+        {
+          text: "Abbrechen",
+          role: "cancel"
+        },
+        {
+          text: "Löschen",
+          role: "destructive"
+        }
+      ]
+    });
+    await alert.present();
+    const result = await alert.onDidDismiss();
+
+    if (result.role == "destructive") {
+      this.shouldAnimate.splice(index, 1);
+      this.data.splice(this.data.indexOf(entry), 1);
+      this.saveData();
+      this.updateCurrentAction();
+    }
   }
 
   private updateCurrentAction(): void {