12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <script setup>
  2. import { Head, useForm } from '@inertiajs/inertia-vue3'
  3. import AppButton from '@/components/AppButton.vue'
  4. import AppDropdown from '@/components/AppDropdown.vue'
  5. import AppInputText from '@/components/AppInputText.vue'
  6. import AppLayout from '@/layouts/AppLayout.vue'
  7. const props = defineProps({
  8. customer_number: String,
  9. genders: Array,
  10. })
  11. const form = useForm({
  12. customer_number: props.customer_number,
  13. name: '',
  14. phone: '',
  15. address: '',
  16. gender_id: '',
  17. })
  18. const submit = () => {
  19. form.post(route('customers.store'))
  20. }
  21. </script>
  22. <template>
  23. <Head title="Tambah Customer" />
  24. <AppLayout>
  25. <div class="grid">
  26. <div class="col-12 lg:col-8">
  27. <Card>
  28. <template #content>
  29. <div class="grid">
  30. <div class="col-12 md:col-6">
  31. <AppInputText :disabled="true" label="Id Customer" v-model="form.customer_number" />
  32. </div>
  33. <div class="col-12 md:col-6">
  34. <AppInputText label="Nama" placeholder="nama" :error="form.errors.name" v-model="form.name" />
  35. </div>
  36. <div class="col-12 md:col-6">
  37. <AppInputText label="Nomor HP" placeholder="nomor hp" :error="form.errors.phone" v-model="form.phone" />
  38. </div>
  39. <div class="col-12 md:col-6">
  40. <AppInputText label="Alamat" placeholder="alamat" :error="form.errors.address" v-model="form.address" />
  41. </div>
  42. <div class="col-12 md:col-6">
  43. <AppDropdown
  44. label="Jenis Kelamin"
  45. placeholder="Pilih satu"
  46. v-model="form.gender_id"
  47. :options="genders"
  48. :error="form.errors.gender_id"
  49. />
  50. </div>
  51. </div>
  52. </template>
  53. <template #footer>
  54. <div class="flex justify-content-end">
  55. <AppButton @click="submit" label="Simpan" icon="pi pi-check" />
  56. </div>
  57. </template>
  58. </Card>
  59. </div>
  60. </div>
  61. </AppLayout>
  62. </template>