From f5d562f8e8a2075f14114445633d1b66913f7142 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 12 Jun 2026 16:30:39 +0700
Subject: [PATCH] Refactor CustomerFormModal and SupplierFormModal to utilize
 useFormDialog for improved form handling. Remove unnecessary watch statements
 to streamline code and enhance maintainability.

---
 .../master/customers/CustomerFormModal.vue    | 27 ++++++++-----------
 .../master/suppliers/SupplierFormModal.vue    | 27 ++++++++-----------
 2 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/resources/js/components/admin/master/customers/CustomerFormModal.vue b/resources/js/components/admin/master/customers/CustomerFormModal.vue
index c6b1211..8cf6ae2 100644
--- a/resources/js/components/admin/master/customers/CustomerFormModal.vue
+++ b/resources/js/components/admin/master/customers/CustomerFormModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useForm } from '@inertiajs/vue3';
 import { Save } from '@lucide/vue';
-import { computed, watch } from 'vue';
+import { computed } from 'vue';
 import { toast } from 'vue-sonner';
 import { Button } from '@/components/ui/button';
 import {
@@ -21,6 +21,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { PhoneNumberInput } from '@/components/ui/phone-number-input';
 import { Textarea } from '@/components/ui/textarea';
+import { useFormDialog } from '@/composables/useFormDialog';
 import { formErrors } from '@/lib/form';
 import type { CustomerFormData, CustomerListItem } from '@/types/customers';
 
@@ -55,19 +56,11 @@ function populateForm(customer: CustomerListItem | null | undefined) {
     form.address = customer.address;
 }
 
-watch(
-    () => props.customer,
-    (customer) => {
-        populateForm(customer);
-    },
-);
-
-watch(open, (isOpen) => {
-    if (isOpen) {
-        populateForm(props.customer);
-    } else {
-        resetForm();
-    }
+useFormDialog({
+    open,
+    source: () => props.customer,
+    populate: populateForm,
+    reset: resetForm,
 });
 
 function submit() {
@@ -83,9 +76,11 @@ function submit() {
 
     if (isEditing.value && props.customer) {
         form.put(`/admin/master/customers/${props.customer.id}`, options);
-    } else {
-        form.post('/admin/master/customers', options);
+
+        return;
     }
+
+    form.post('/admin/master/customers', options);
 }
 </script>
 
diff --git a/resources/js/components/admin/master/suppliers/SupplierFormModal.vue b/resources/js/components/admin/master/suppliers/SupplierFormModal.vue
index c7a8550..0b76931 100644
--- a/resources/js/components/admin/master/suppliers/SupplierFormModal.vue
+++ b/resources/js/components/admin/master/suppliers/SupplierFormModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useForm } from '@inertiajs/vue3';
 import { Save } from '@lucide/vue';
-import { computed, watch } from 'vue';
+import { computed } from 'vue';
 import { toast } from 'vue-sonner';
 import { Button } from '@/components/ui/button';
 import {
@@ -21,6 +21,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { PhoneNumberInput } from '@/components/ui/phone-number-input';
 import { Textarea } from '@/components/ui/textarea';
+import { useFormDialog } from '@/composables/useFormDialog';
 import { formErrors } from '@/lib/form';
 import type { SupplierFormData, SupplierListItem } from '@/types/supplier';
 
@@ -55,19 +56,11 @@ function populateForm(supplier: SupplierListItem | null | undefined) {
     form.address = supplier.address;
 }
 
-watch(
-    () => props.supplier,
-    (supplier) => {
-        populateForm(supplier);
-    },
-);
-
-watch(open, (isOpen) => {
-    if (isOpen) {
-        populateForm(props.supplier);
-    } else {
-        resetForm();
-    }
+useFormDialog({
+    open,
+    source: () => props.supplier,
+    populate: populateForm,
+    reset: resetForm,
 });
 
 function submit() {
@@ -83,9 +76,11 @@ function submit() {
 
     if (isEditing.value && props.supplier) {
         form.put(`/admin/master/suppliers/${props.supplier.id}`, options);
-    } else {
-        form.post('/admin/master/suppliers', options);
+
+        return;
     }
+
+    form.post('/admin/master/suppliers', options);
 }
 </script>