396 Disabling the save button after click (#397)

* disable the save button after click * reduce opacity of button when disabled
piccolo-orm · Jun 12, 2024 · cafbdec · cafbdec
1 parent b011f78
commit cafbdec
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 18 deletions.
diff --git a/admin_ui/src/components/AddRowForm.vue b/admin_ui/src/components/AddRowForm.vue
@@ -6,7 +6,9 @@
 
         <form v-if="defaults" v-on:submit.prevent="submitForm($event)">
             <RowForm v-bind:row="defaults" v-bind:schema="schema" />
-            <button data-uitest="create_button">{{ $t("Create") }}</button>
+            <button :disabled="!saveButtonEnabled" data-uitest="create_button">
+                {{ $t("Create") }}
+            </button>
         </form>
     </div>
 </template>
@@ -38,7 +40,8 @@ export default defineComponent({
     data() {
         return {
             defaults: {} as { [key: string]: any },
-            errors: [] as string[]
+            errors: [] as string[],
+            saveButtonEnabled: true
         }
     },
     setup() {
@@ -48,6 +51,8 @@ export default defineComponent({
     },
     methods: {
         async submitForm(event: Event) {
+            this.saveButtonEnabled = false
+
             const form = new FormData(event.target as HTMLFormElement)
 
             const json: { [key: string]: any } = {}
@@ -66,6 +71,17 @@ export default defineComponent({
                     tableName: this.tableName,
                     data: json
                 })
+
+                this.errors = []
+
+                var message: APIResponseMessage = {
+                    contents: "Successfully added row",
+                    type: "success"
+                }
+                this.$store.commit("updateApiResponseMessage", message)
+
+                this.$emit("addedRow")
+                this.$emit("close")
             } catch (error) {
                 if (axios.isAxiosError(error) && error.response) {
                     this.errors = parseErrorResponse(
@@ -81,19 +97,9 @@ export default defineComponent({
                     type: "error"
                 }
                 this.$store.commit("updateApiResponseMessage", message)
-
-                return
-            }
-            this.errors = []
-
-            var message: APIResponseMessage = {
-                contents: "Successfully added row",
-                type: "success"
             }
-            this.$store.commit("updateApiResponseMessage", message)
 
-            this.$emit("addedRow")
-            this.$emit("close")
+            this.saveButtonEnabled = true
         }
     },
     async mounted() {

diff --git a/admin_ui/src/components/EditRowForm.vue b/admin_ui/src/components/EditRowForm.vue
@@ -32,7 +32,9 @@
                 :row="selectedRow"
                 :schema="schema"
             />
-            <button data-uitest="save_button">{{ $t("Save") }}</button>
+            <button :disabled="!saveButtonEnabled" data-uitest="save_button">
+                {{ $t("Save") }}
+            </button>
         </form>
 
         <ReferencingTables :rowID="rowID" :tableName="tableName" />
@@ -79,7 +81,8 @@ export default defineComponent({
     data: function () {
         return {
             errors: [] as string[],
-            showDropdown: false
+            showDropdown: false,
+            saveButtonEnabled: true
         }
     },
     computed: {
@@ -99,6 +102,8 @@ export default defineComponent({
         async submitForm(event: Event) {
             console.log("Submitting...")
 
+            this.saveButtonEnabled = false
+
             const form = new FormData(event.target as HTMLFormElement)
 
             const json: { [key: string]: any } = {}
@@ -125,6 +130,7 @@ export default defineComponent({
                     type: "success"
                 }
                 this.$store.commit("updateApiResponseMessage", message)
+                this.errors = []
             } catch (error) {
                 if (axios.isAxiosError(error) && error.response) {
                     this.errors = parseErrorResponse(
@@ -140,11 +146,9 @@ export default defineComponent({
                     type: "error"
                 }
                 this.$store.commit("updateApiResponseMessage", message)
-
-                return
             }
 
-            this.errors = []
+            this.saveButtonEnabled = true
         },
         async deleteRow() {
             if (window.confirm("Are you sure you want to delete this row?")) {

diff --git a/admin_ui/src/main.less b/admin_ui/src/main.less
@@ -253,6 +253,10 @@ button {
     &:hover {
         transition: background-color 0.5s;
     }
+
+    &:disabled {
+        opacity: 0.8;
+    }
 }
 
 a {