enable form on error

resources/js/components/SMForm.vue

@@ -30,7 +30,7 @@ watch(
         if (!status) {
             enableFormInputs();
         }
-    }
+    },
 );
 
 /**
@@ -49,7 +49,9 @@ const handleSubmit = async function () {
     }
 
     if (await props.modelValue.validate()) {
-        emits("submit");
+        emits("submit", () => {
+            enableFormInputs();
+        });
     } else {
         emits("failedValidation");
         enableFormInputs();

resources/js/views/dashboard/ArticleEdit.vue

@@ -197,7 +197,7 @@ const loadData = async () => {
     }
 };
 
-const handleSubmit = async () => {
+const handleSubmit = async (enableFormCallBack) => {
     try {
         let data = {
             title: form.controls.title.value,
@@ -258,6 +258,7 @@ const handleSubmit = async () => {
                 type: "danger",
             });
         });
+        enableFormCallBack();
     }
 };
 

resources/js/views/dashboard/EventEdit.vue

@@ -303,7 +303,7 @@ const loadData = async () => {
     }
 };
 
-const handleSubmit = async () => {
+const handleSubmit = async (enableFormCallBack) => {
     try {
         let data = {
             title: form.controls.title.value,
@@ -376,6 +376,7 @@ const handleSubmit = async () => {
             content: "An error occurred saving the event.",
             type: "danger",
         });
+        enableFormCallBack();
     }
 };
 

resources/js/views/dashboard/MediaEdit.vue

@@ -12,7 +12,10 @@
                 @submit="handleSubmit"
                 @failed-validation="handleFailValidation">
                 <div>
-                    <SMImage v-if="!editMultiple" class="mb-8" :src="imageUrl" />
+                    <SMImage
+                        v-if="!editMultiple"
+                        class="mb-8"
+                        :src="imageUrl" />
                     <SMImageStack v-else class="mb-8" :src="imageStackUrls" />
                 </div>
                 <SMInputFile
@@ -22,26 +25,30 @@
                     class="mb-8" />
                 <SMInput control="title" class="mb-8" />
                 <SMInput control="permission" class="mb-8" />
-                <div v-if="!editMultiple" class="flex flex-col md:flex-row gap-4">
+                <div
+                    v-if="!editMultiple"
+                    class="flex flex-col md:flex-row gap-4">
                     <SMInput
-						class="mb-8"
+                        class="mb-8"
                         v-model="computedFileSize"
                         type="static"
                         label="File Size" />
                     <SMInput
                         class="mb-8"
-						v-model="fileData.mime_type"
+                        v-model="fileData.mime_type"
                         type="static"
                         label="File Mime Type" />
                 </div>
-                <div v-if="!editMultiple" class="flex flex-col md:flex-row gap-4">
+                <div
+                    v-if="!editMultiple"
+                    class="flex flex-col md:flex-row gap-4">
                     <SMInput
-						class="mb-8"
+                        class="mb-8"
                         v-model="fileData.status"
                         type="static"
                         label="Status" />
                     <SMInput
-						class="mb-8"
+                        class="mb-8"
                         v-model="fileData.dimensions"
                         type="static"
                         label="Dimensions" />
@@ -110,7 +117,7 @@ const form = reactive(
         title: FormControl(),
         description: FormControl(),
         permission: FormControl(),
-    })
+    }),
 );
 
 const fileData = reactive({
@@ -177,7 +184,7 @@ const handleLoad = async () => {
     pageLoading.value = false;
 };
 
-const handleSubmit = async () => {
+const handleSubmit = async (enableFormCallBack) => {
     try {
         form.loading(true);
         if (editMultiple === false) {
@@ -191,11 +198,11 @@ const handleSubmit = async () => {
             submitData.append("title", form.controls.title.value as string);
             submitData.append(
                 "permission",
-                form.controls.permission.value as string
+                form.controls.permission.value as string,
             );
             submitData.append(
                 "description",
-                form.controls.description.value as string
+                form.controls.description.value as string,
             );
 
             if (route.params.id) {
@@ -210,7 +217,7 @@ const handleSubmit = async () => {
                     },
                     progress: (progressEvent) =>
                         (progressText.value = `Uploading File: ${Math.floor(
-                            (progressEvent.loaded / progressEvent.total) * 100
+                            (progressEvent.loaded / progressEvent.total) * 100,
                         )}%`),
                 });
             } else {
@@ -222,7 +229,7 @@ const handleSubmit = async () => {
                     },
                     progress: (progressEvent) =>
                         (progressText.value = `Uploading File: ${Math.floor(
-                            (progressEvent.loaded / progressEvent.total) * 100
+                            (progressEvent.loaded / progressEvent.total) * 100,
                         )}%`),
                 });
             }
@@ -293,6 +300,8 @@ const handleSubmit = async () => {
             content: "An error occurred saving the media.",
             type: "danger",
         });
+
+        enableFormCallBack();
     } finally {
         progressText.value = "";
         form.loading(false);
@@ -364,7 +373,7 @@ watch(
                 .toLowerCase()
                 .replace(/\b\w/g, (c) => c.toUpperCase());
         }
-    }
+    },
 );
 
 handleLoad();

resources/js/views/dashboard/ShortlinkEdit.vue

@@ -57,15 +57,16 @@ let form = reactive(
     Form({
         code: FormControl("", And([Required(), Length(4)])),
         url: FormControl("", And([Required(), Min(4), Max(255)])),
-    })
+    }),
 );
 
 const used = ref(0);
 
 /**
  * Load the page data.
+ * @param enableFormCallBack
  */
-const loadData = async () => {
+const loadData = async (enableFormCallBack) => {
     if (route.params.id) {
         try {
             form.loading(true);
@@ -91,6 +92,8 @@ const loadData = async () => {
                     type: "danger",
                 });
             });
+
+            enableFormCallBack();
         } finally {
             form.loading(false);
         }

resources/js/views/dashboard/UserEdit.vue

@@ -114,7 +114,7 @@ let form = reactive(
         last_name: FormControl("", Custom(customRequire)),
         email: FormControl("", And([Required(), Email()])),
         phone: FormControl("", Phone()),
-    })
+    }),
 );
 
 const permissions = ref({
@@ -168,8 +168,9 @@ const loadData = async () => {
 
 /**
  * Handle the user submitting the form.
+ * @param enableFormCallBack
  */
-const handleSubmit = async () => {
+const handleSubmit = async (enableFormCallBack) => {
     try {
         form.loading(true);
         const id = route.params.id ? route.params.id : userStore.id;
@@ -237,6 +238,8 @@ const handleSubmit = async () => {
                 type: "danger",
             });
         });
+
+        enableFormCallBack();
     } finally {
         form.loading(false);
     }