dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
resources/js/components/admin/master/customers/CustomerFormModal.vue
View File

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

27
resources/js/components/admin/master/suppliers/SupplierFormModal.vue
View File

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