From a2d1569d93f8f14d3cbf7594db613384a1bd49ef Mon Sep 17 00:00:00 2001
From: Matthew Aaron Raymer <matthew.raymer@anomalistdesign.com>
Date: Thu, 16 Feb 2023 17:30:09 +0800
Subject: [PATCH] Added Save progress and a text counter on textbox

---
 src/views/NewEditProjectView.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/views/NewEditProjectView.vue b/src/views/NewEditProjectView.vue
index a805cf3..d6b1c1f 100644
--- a/src/views/NewEditProjectView.vue
+++ b/src/views/NewEditProjectView.vue
@@ -33,17 +33,26 @@
       class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
       rows="5"
       v-model="description"
+      maxlength="500"
     ></textarea>
     <div class="text-xs text-slate-500 italic -mt-3 mb-4">
-      88/500 max. characters
+      {{ description.length }}/500 max. characters
     </div>
 
     <div class="mt-8">
       <button
+        :disabled="isHiddenSave"
         class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
         @click="onSaveProjectClick()"
       >
-        Save Project
+        <!-- SHOW if in idle state -->
+        <span :class="{ hidden: isHiddenSave }">Save Project</span>
+
+        <!-- SHOW if in saving state; DISABLE button while in saving state -->
+        <span :class="{ hidden: isHiddenSpinner }"
+          ><i class="fa-solid fa-spinner fa-spin-pulse"></i>
+          Saving&hellip;</span
+        >
       </button>
       <button
         type="button"
@@ -96,6 +105,8 @@ export default class NewEditProjectView extends Vue {
   alertMessage = "";
 
   projectId = localStorage.getItem("projectId") || "";
+  isHiddenSave = false;
+  isHiddenSpinner = true;
 
   async created() {
     if (this.projectId === "") {
@@ -222,6 +233,8 @@ export default class NewEditProjectView extends Vue {
   }
 
   public async onSaveProjectClick() {
+    this.isHiddenSave = true;
+    this.isHiddenSpinner = false;
     await db.open();
     const num_accounts = await db.accounts.count();
     if (num_accounts === 0) {