refactor(utils): Centralize form submission logic with shared onSubmi…

…t utility

resources/js/Pages/Servers/Automations.vue

@@ -12,7 +12,7 @@ import { route } from '@/route';
 import CustomFormField from '@/components/CustomFormField.vue';
 import CustomForm from '@/components/CustomForm.vue';
 import { Separator } from '@/components/ui/separator';
-import { instantSave as sharedInstantSave, getInstantSaveRefs } from '@/lib/utils';
+import { instantSave as sharedInstantSave, getInstantSaveRefs, onSubmit as sharedOnSubmit } from '@/lib/utils';
 
 import { ServerSettings, Server } from '@/types/ServerType';
 const props = defineProps<{
@@ -45,16 +45,12 @@ const isFormValid = useIsFormValid()
 const isFormDirty = useIsFormDirty();
 
 const onSubmit = veeForm.handleSubmit(async (values) => {
-  inertiaForm.transform(() => ({
-    docker_cleanup_frequency: values.docker_cleanup_frequency,
-    docker_cleanup_threshold: values.docker_cleanup_threshold,
-    server_disk_usage_notification_threshold: values.server_disk_usage_notification_threshold,
-    server_disk_usage_check_frequency: values.server_disk_usage_check_frequency,
-  })).post(route('next_server_automations_store', props.server.uuid), {
-    showProgress: false,
-    onSuccess: async () => {
-      toast.success('Automations updated successfully')
-    },
+  return sharedOnSubmit({
+    route: route('next_server_automations_store', props.server.uuid),
+    values,
+    veeForm,
+    inertiaForm,
+    instantSaveRefs
   })
 })
 

resources/js/Pages/Servers/Connection.vue

@@ -15,6 +15,8 @@ import { Button } from '@/components/ui/button';
 import axios from 'axios';
 import { SelectGroup, SelectItem } from '@/components/ui/select';
 import { Separator } from '@/components/ui/separator';
+import { onSubmit as sharedOnSubmit } from '@/lib/utils';
+
 const props = defineProps<{
   server: Server,
   private_keys: {
@@ -53,23 +55,13 @@ const veeForm = useVeeForm({
 const isFormValid = useIsFormValid()
 const isFormDirty = useIsFormDirty()
 
+
 const onSubmit = veeForm.handleSubmit(async (values) => {
-  inertiaForm.transform(() => ({
-    name: values.name,
-    description: values.description,
-    ip: values.ip,
-    user: values.user,
-    port: values.port,
-    private_key_id: values.private_key_id,
-  })).post(route('next_server_connection_store', props.server.uuid), {
-    showProgress: false,
-    onSuccess: async () => {
-      toast.success('Server connection updated successfully.')
-      inertiaForm.reset()
-      veeForm.resetForm({
-        values
-      })
-    },
+  return sharedOnSubmit({
+    route: route('next_server_connection_store', props.server.uuid),
+    values,
+    veeForm,
+    inertiaForm,
     onError: (errors) => {
       if (errors.error) {
         toast.error('Server connection update failed.', {
@@ -94,6 +86,8 @@ const onSubmit = veeForm.handleSubmit(async (values) => {
   })
 })
 
+
+
 const testConnection = async () => {
   isTestingConnection.value = true
   try {
@@ -134,7 +128,7 @@ const sidebarNavItems = getServerSidebarNavItems(props.server.uuid)
       {{ server.description }}
     </template>
     <template #main>
-      <h2 class="pb-2">
+      <h2 class="pb-2 font-bold text-lg">
         Connection
       </h2>
       <p class="text-sm text-muted-foreground pb-2">

resources/js/components/CustomForm.vue

@@ -44,7 +44,7 @@ const onSubmit = (e: Event) => {
         <div class="grid gap-4">
           <div class="text-sm" v-html="confirmationMessage || 'Are you sure you want to continue?'"></div>
           <div class="flex gap-2 justify-between">
-            <Button class="md:w-fit w-full" type="button" variant="outline" @click="isOpen = false">No</Button>
+            <Button class="md:w-fit w-full" type="button" variant="secondary" @click="isOpen = false">No</Button>
             <Button class="md:w-fit w-full" type="submit" variant="destructive" :disabled="!isFormValid || !isFormDirty"
               @click="onSubmit">Yes</Button>
           </div>

resources/js/components/Forms/Server/General.vue

@@ -8,6 +8,8 @@ import { toast } from 'vue-sonner'
 import CustomFormField from '@/components/CustomFormField.vue';
 import CustomForm from '@/components/CustomForm.vue';
 import { Separator } from '@/components/ui/separator';
+import { onSubmit as sharedOnSubmit } from '@/lib/utils';
+
 const props = defineProps<{
   uuid: string
   name: string
@@ -44,26 +46,17 @@ const isFormValid = useIsFormValid()
 const isFormDirty = useIsFormDirty()
 
 const onSubmit = veeForm.handleSubmit(async (values) => {
-  inertiaForm.transform(() => ({
-    name: values.name,
-    description: values.description,
-    wildcard_domain: values.wildcard_domain,
-    server_timezone: values.server_timezone,
-  })).post(route('next_server_store', props.uuid, true), {
-    showProgress: false,
-    onSuccess: () => {
-      toast.success('Server updated successfully.')
-      inertiaForm.reset()
-      veeForm.resetForm({
-        values
-      })
-    }
+  return sharedOnSubmit({
+    route: route('next_server_store', props.uuid),
+    values,
+    veeForm,
+    inertiaForm,
   })
 })
 </script>
 
 <template>
-  <h2 class="pb-2">
+  <h2 class="pb-2 font-bold text-lg">
     General
   </h2>
   <p class="text-sm text-muted-foreground pb-2">

resources/js/lib/utils.ts

@@ -5,22 +5,22 @@ import { toast } from 'vue-sonner';
 import { Ref } from 'vue';
 import { ref } from 'vue';
 
+
 export const inputType = 'w-full rounded-xl border border-l-4 border-input bg-input-background px-3 py-2 text-sm';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 
-export async function instantSave(route: string, data: Record<string, any>, successMessage: string = 'Settings updated successfully.') {
-  return await useForm(data).post(route, {
+export function instantSave(route: string, data: Record<string, any>, successMessage: string = 'Settings updated successfully.') {
+  return useForm(data).post(route, {
     showProgress: true,
     onSuccess: async () => {
       toast.success(successMessage);
     },
     onError: async (error) => {
-      const errorMessage = error.error || 'Unknown error occurred.';
       toast.error('Failed to update settings.', {
-        description: errorMessage
+        description: error.error || 'Unknown error occurred.'
       });
     }
   });
@@ -31,4 +31,30 @@ export function getInstantSaveRefs(fields: string[], props: any) {
     [field]: ref(props[field])
   }), {} as Record<string, Ref<boolean>>)
 }
-
+export function onSubmit({ route, values, veeForm, inertiaForm, instantSaveRefs, onError, onSuccess, successMessage = 'Configuration updated successfully.', errorMessage = 'Failed to update configuration.' }: { route: string, values: any, veeForm: any, inertiaForm: any, instantSaveRefs: any, onError?: (error: any) => Promise<void>, onSuccess?: () => Promise<void>, successMessage: string, errorMessage: string }) {
+  const options = {
+    showProgress: false,
+    onSuccess: async () => {
+      toast.success(successMessage)
+      veeForm.resetForm({
+        values
+      })
+      for (const field in instantSaveRefs) {
+        veeForm.setFieldValue(field, instantSaveRefs[field].value)
+      }
+      inertiaForm.reset()
+    },
+    onError: async (error: any) => {
+      toast.error(errorMessage, {
+        description: error.error || 'Unknown error occurred.'
+      })
+    }
+  }
+  if (onError) {
+    options.onError = onError
+  }
+  if (onSuccess) {
+    options.onSuccess = onSuccess
+  }
+  return inertiaForm.transform(() => values).post(route, options)
+}