Create.vue 2.7KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <script setup>
  2. import { useForm, Head } from '@inertiajs/inertia-vue3'
  3. import AppInputText from '@/components/AppInputText.vue'
  4. import AppDropdown from '@/components/AppDropdown.vue'
  5. import AppButton from '@/components/AppButton.vue'
  6. import AppLayout from '@/layouts/AppLayout.vue'
  7. import { useConfirm } from 'primevue/useconfirm'
  8. defineProps({
  9. genders: Array,
  10. outlets: Array,
  11. roles: Array,
  12. })
  13. const form = useForm({
  14. name: '',
  15. phone: '',
  16. email: '',
  17. address: '',
  18. gender_id: '',
  19. outlet_id: '',
  20. role_id: '',
  21. })
  22. const submit = () => {
  23. form.post(route('users.store'))
  24. }
  25. </script>
  26. <template>
  27. <Head title="Tambah User" />
  28. <AppLayout>
  29. <div class="grid">
  30. <div class="col-12 lg:col-8">
  31. <Card>
  32. <template #content>
  33. <div class="grid">
  34. <div class="col-12 md:col-6">
  35. <AppInputText label="Nama" placeholder="nama" :error="form.errors.name" v-model="form.name" />
  36. </div>
  37. <div class="col-12 md:col-6">
  38. <AppInputText label="Nomor HP" placeholder="nomor hp" :error="form.errors.phone" v-model="form.phone" />
  39. </div>
  40. <div class="col-12 md:col-6">
  41. <AppInputText label="Email" placeholder="email" :error="form.errors.email" v-model="form.email" />
  42. </div>
  43. <div class="col-12 md:col-6">
  44. <AppInputText label="Alamat" placeholder="alamat" :error="form.errors.address" v-model="form.address" />
  45. </div>
  46. <div class="col-12 md:col-6">
  47. <AppDropdown
  48. label="Jenis Kelamin"
  49. placeholder="pilih satu"
  50. v-model="form.gender_id"
  51. :options="genders"
  52. :error="form.errors.gender_id"
  53. />
  54. </div>
  55. <div class="col-12 md:col-6">
  56. <AppDropdown
  57. label="Hak Akses"
  58. placeholder="pilih satu"
  59. v-model="form.role_id"
  60. :options="roles"
  61. :error="form.errors.role_id"
  62. />
  63. </div>
  64. <div class="col-12 md:col-6">
  65. <AppDropdown
  66. label="Outlet"
  67. placeholder="pilih satu"
  68. v-model="form.outlet_id"
  69. :options="outlets"
  70. :error="form.errors.outlet_id"
  71. />
  72. </div>
  73. </div>
  74. </template>
  75. <template #footer>
  76. <div class="flex justify-content-end">
  77. <AppButton @click="submit" label="Simpan" icon="pi pi-check" />
  78. </div>
  79. </template>
  80. </Card>
  81. </div>
  82. </div>
  83. </AppLayout>
  84. </template>