From 8c7d91ea52fdd4953fac6dd3bf5be3f2b33ca112 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Mon, 31 Jul 2023 08:22:08 -0800
Subject: [PATCH] fix: prevent resetting dialog state on error (#524)

---
 frontend/composables/use-defer.ts             | 19 ++++++++++++++
 .../pages/item/[id]/index/maintenance.vue     | 26 ++++++++++++++-----
 2 files changed, 38 insertions(+), 7 deletions(-)
 create mode 100644 frontend/composables/use-defer.ts

diff --git a/frontend/composables/use-defer.ts b/frontend/composables/use-defer.ts
new file mode 100644
index 0000000..17e8436
--- /dev/null
+++ b/frontend/composables/use-defer.ts
@@ -0,0 +1,19 @@
+type DeferFunction<TArgs extends any[], TReturn> = (...args: TArgs) => TReturn;
+
+// useDefer is a function that takes a function and returns a function that
+// calls the original function and then calls the onComplete function.
+export function useDefer<TArgs extends any[], TReturn>(
+  onComplete: (...args: TArgs) => void,
+  func: DeferFunction<TArgs, TReturn>
+): DeferFunction<TArgs, TReturn> {
+  return (...args: TArgs) => {
+    let result: TReturn;
+    try {
+      result = func(...args);
+    } finally {
+      onComplete(...args);
+    }
+
+    return result;
+  };
+}
diff --git a/frontend/pages/item/[id]/index/maintenance.vue b/frontend/pages/item/[id]/index/maintenance.vue
index cf6055d..7042525 100644
--- a/frontend/pages/item/[id]/index/maintenance.vue
+++ b/frontend/pages/item/[id]/index/maintenance.vue
@@ -71,6 +71,7 @@
   }
 
   function resetEntry() {
+    console.log("Resetting entry");
     entry.id = null;
     entry.name = "";
     entry.completedDate = null;
@@ -79,13 +80,26 @@
     entry.cost = "";
   }
 
-  async function createEntry() {
+  watch(
+    () => entry.modal,
+    (v, pv) => {
+      if (pv === true && v === false) {
+        resetEntry();
+      }
+    }
+  );
+
+  // Calls either edit or create depending on entry.id being set
+  async function dispatchFormSubmit() {
     if (entry.id) {
-      editEntry();
-      resetEntry();
+      await editEntry();
       return;
     }
 
+    await createEntry();
+  }
+
+  async function createEntry() {
     const { error } = await api.items.maintenance.create(props.item.id, {
       name: entry.name,
       completedDate: entry.completedDate ?? "",
@@ -123,14 +137,13 @@
   }
 
   function openEditDialog(e: MaintenanceEntry) {
-    console.log(e);
-    entry.modal = true;
     entry.id = e.id;
     entry.name = e.name;
     entry.completedDate = new Date(e.completedDate);
     entry.scheduledDate = new Date(e.scheduledDate);
     entry.description = e.description;
     entry.cost = e.cost;
+    entry.modal = true;
   }
 
   async function editEntry() {
@@ -152,7 +165,6 @@
     }
 
     entry.modal = false;
-
     refreshLog();
   }
 </script>
@@ -163,7 +175,7 @@
       <template #title>
         {{ entry.id ? "Edit Entry" : "New Entry" }}
       </template>
-      <form @submit.prevent="createEntry">
+      <form @submit.prevent="dispatchFormSubmit">
         <FormTextField v-model="entry.name" autofocus label="Entry Name" />
         <DatePicker v-model="entry.completedDate" label="Completed Date" />
         <DatePicker v-model="entry.scheduledDate" label="Scheduled Date" />