Refactor CustomerFormModal and SupplierFormModal to utilize useFormDialog for improved form handling. Remove unnecessary watch statements to streamline code and enhance maintainability.

This commit is contained in:
Yoga Pangestu 2026-06-12 16:30:39 +07:00
parent c734d18018
commit f5d562f8e8
2 changed files with 22 additions and 32 deletions

View File

@ -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>

View File

@ -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>