Create.vue 2.3KB

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