Create.vue 2.6KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  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. email: null,
  10. phone: null,
  11. npwp: null,
  12. })
  13. useFormErrorReset(form)
  14. const onSubmit = () => {
  15. form.post(route('suppliers.store'), { onSuccess: () => form.reset() })
  16. }
  17. </script>
  18. <template>
  19. <Head title="Tambah Supplier" />
  20. <DashboardLayout>
  21. <div class="grid">
  22. <div class="col-12 lg:col-8">
  23. <Card>
  24. <template #title> Tambah Supplier </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="Surel"
  46. placeholder="surel"
  47. :error="form.errors.email"
  48. v-model="form.email"
  49. />
  50. </div>
  51. <div class="col-12 md:col-6">
  52. <AppInputText
  53. label="No HP"
  54. placeholder="no hp"
  55. type="number"
  56. :error="form.errors.phone"
  57. v-model="form.phone"
  58. />
  59. </div>
  60. <div class="col-12 md:col-6">
  61. <AppInputText
  62. label="NPWP"
  63. placeholder="npwp"
  64. type="number"
  65. :error="form.errors.npwp"
  66. v-model="form.npwp"
  67. />
  68. </div>
  69. </div>
  70. </template>
  71. <template #footer>
  72. <div class="flex flex-column md:flex-row justify-content-end">
  73. <Button
  74. label="Simpan"
  75. icon="pi pi-check"
  76. class="p-button-outlined"
  77. :disabled="form.processing"
  78. @click="onSubmit"
  79. />
  80. </div>
  81. </template>
  82. </Card>
  83. </div>
  84. </div>
  85. </DashboardLayout>
  86. </template>