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