Dev branch

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

@@ -2,7 +2,8 @@
 import AppLayout from "@/Layouts/AppLayout.vue";
 import { useForm, router } from "@inertiajs/vue3";
 import { ref } from "vue";
-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";
@@ -84,10 +85,15 @@ const update = () => {
             <PrimaryButton @click="openCreate">+ New</PrimaryButton>
           </div>
 
-          <DialogModal :show="showCreate" @close="closeCreate">
-            <template #title>New Segment</template>
-            <template #content>
-              <form @submit.prevent="store" class="space-y-4">
+          <CreateDialog
+            :show="showCreate"
+            title="New Segment"
+            confirm-text="Create"
+            :processing="createForm.processing"
+            @close="closeCreate"
+            @confirm="store"
+          >
+            <form @submit.prevent="store" class="space-y-4">
                 <div>
                   <InputLabel for="nameCreate" value="Name" />
                   <TextInput
@@ -120,24 +126,18 @@ const update = () => {
                   />
                   <label for="excludeCreate">Exclude</label>
                 </div>
-                <div class="flex justify-end gap-2 mt-4">
-                  <button
-                    type="button"
-                    @click="closeCreate"
-                    class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300"
-                  >
-                    Cancel
-                  </button>
-                  <PrimaryButton :disabled="createForm.processing">Create</PrimaryButton>
-                </div>
               </form>
-            </template>
-          </DialogModal>
+          </CreateDialog>
 
-          <DialogModal :show="showEdit" @close="closeEdit">
-            <template #title>Edit Segment</template>
-            <template #content>
-              <form @submit.prevent="update" class="space-y-4">
+          <UpdateDialog
+            :show="showEdit"
+            title="Edit Segment"
+            confirm-text="Save"
+            :processing="editForm.processing"
+            @close="closeEdit"
+            @confirm="update"
+          >
+            <form @submit.prevent="update" class="space-y-4">
                 <div>
                   <InputLabel for="nameEdit" value="Name" />
                   <TextInput
@@ -167,19 +167,8 @@ const update = () => {
                   <label for="excludeEdit">Exclude</label>
                 </div>
 
-                <div class="flex justify-end gap-2 mt-4">
-                  <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>