Dev branch

resources/js/Pages/Settings/FieldJob/Index.vue

@@ -1,7 +1,8 @@
 <script setup>
 import AppLayout from "@/Layouts/AppLayout.vue";
 import { Link, useForm } from "@inertiajs/vue3";
-import DialogModal from "@/Components/DialogModal.vue";
+import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
+import UpdateDialog from "@/Components/Dialogs/UpdateDialog.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import InputLabel from "@/Components/InputLabel.vue";
 import InputError from "@/Components/InputError.vue";
@@ -162,10 +163,15 @@ watch(
             <PrimaryButton @click="openCreate">+ New</PrimaryButton>
           </div>
 
-          <DialogModal :show="showCreate" @close="closeCreate">
-            <template #title> Create Field Job Setting </template>
-            <template #content>
-              <form @submit.prevent="store">
+          <CreateDialog
+            :show="showCreate"
+            title="Create Field Job Setting"
+            confirm-text="Create"
+            :processing="form.processing"
+            @close="closeCreate"
+            @confirm="store"
+          >
+            <form @submit.prevent="store">
                 <div class="grid grid-cols-1 gap-4">
                   <div>
                     <InputLabel for="segment" value="Segment" />
@@ -308,24 +314,17 @@ watch(
                     <InputError :message="form.errors.queue_segment_id" class="mt-1" />
                   </div>
                 </div>
-
-                <div class="flex justify-end gap-2 mt-6">
-                  <button
-                    type="button"
-                    @click="closeCreate"
-                    class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300"
-                  >
-                    Cancel
-                  </button>
-                  <PrimaryButton :disabled="form.processing">Create</PrimaryButton>
-                </div>
               </form>
-            </template>
-          </DialogModal>
-          <DialogModal :show="showEdit" @close="closeEdit">
-            <template #title> Edit Field Job Setting </template>
-            <template #content>
-              <form @submit.prevent="update">
+          </CreateDialog>
+          <UpdateDialog
+            :show="showEdit"
+            title="Edit Field Job Setting"
+            confirm-text="Save"
+            :processing="editForm.processing"
+            @close="closeEdit"
+            @confirm="update"
+          >
+            <form @submit.prevent="update">
                 <div class="grid grid-cols-1 gap-4">
                   <div>
                     <InputLabel for="edit-segment" value="Segment" />
@@ -483,20 +482,8 @@ watch(
                     />
                   </div>
                 </div>
-
-                <div class="flex justify-end gap-2 mt-6">
-                  <button
-                    type="button"
-                    @click="closeEdit"
-                    class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300"
-                  >
-                    Cancel
-                  </button>
-                  <PrimaryButton :disabled="editForm.processing">Save</PrimaryButton>
-                </div>
               </form>
-            </template>
-          </DialogModal>
+          </UpdateDialog>
           <table class="min-w-full text-left text-sm">
             <thead>
               <tr class="border-b">