Edit.vue 2.4KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <script setup>
  2. import { useForm, Head } from '@inertiajs/inertia-vue3'
  3. import { useFormErrorReset } from '@/components/useFormErrorReset'
  4. import AppInputText from '@/components/AppInputText.vue'
  5. import DashboardLayout from '@/layouts/DashboardLayout.vue'
  6. const props = defineProps({
  7. customer: Object,
  8. })
  9. const form = useForm({
  10. name: props.customer.name,
  11. address: props.customer.address,
  12. phone: props.customer.phone,
  13. npwp: props.customer.npwp,
  14. })
  15. useFormErrorReset(form)
  16. const onSubmit = () => {
  17. form.put(route('customers.update', props.customer.id))
  18. }
  19. </script>
  20. <template>
  21. <Head title="Ubah Pelanggan" />
  22. <DashboardLayout>
  23. <div class="grid">
  24. <div class="col-12 lg:col-8">
  25. <Card>
  26. <template #title> Ubah Pelanggan </template>
  27. <template #content>
  28. <div class="grid">
  29. <div class="col-12 md:col-6">
  30. <AppInputText
  31. label="Nama"
  32. placeholder="nama"
  33. :error="form.errors.name"
  34. v-model="form.name"
  35. />
  36. </div>
  37. <div class="col-12 md:col-6">
  38. <AppInputText
  39. label="Alamat"
  40. placeholder="alamat"
  41. :error="form.errors.address"
  42. v-model="form.address"
  43. />
  44. </div>
  45. <div class="col-12 md:col-6">
  46. <AppInputText
  47. label="No HP"
  48. placeholder="no hp"
  49. type="number"
  50. :error="form.errors.phone"
  51. v-model="form.phone"
  52. />
  53. </div>
  54. <div class="col-12 md:col-6">
  55. <AppInputText
  56. label="NPWP"
  57. placeholder="npwp"
  58. type="number"
  59. :error="form.errors.npwp"
  60. v-model="form.npwp"
  61. />
  62. </div>
  63. </div>
  64. </template>
  65. <template #footer>
  66. <div class="flex flex-column md:flex-row justify-content-end">
  67. <Button
  68. label="Simpan"
  69. icon="pi pi-check"
  70. class="p-button-outlined"
  71. :disabled="form.processing"
  72. @click="onSubmit"
  73. />
  74. </div>
  75. </template>
  76. </Card>
  77. </div>
  78. </div>
  79. </DashboardLayout>
  80. </template>