Create.vue 1.8KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <script setup>
  2. import { Head, useForm } from '@inertiajs/inertia-vue3'
  3. import AppButtonCreate from '@/components/AppButtonCreate.vue'
  4. import AppTextInput from '@/components/AppTextInput.vue'
  5. import DefaultLayout from '@/layouts/DefaultLayout.vue'
  6. const props = defineProps({
  7. outlet_number: String,
  8. })
  9. const form = useForm({
  10. outlet_number: props.outlet_number,
  11. name: '',
  12. phone: '',
  13. address: '',
  14. })
  15. const submit = () => {
  16. form.post(route('outlets.store'))
  17. }
  18. </script>
  19. <template>
  20. <Head title="Tambah Outlet" />
  21. <DefaultLayout>
  22. <CRow>
  23. <CCol md="8">
  24. <CCard color="light" class="border-light">
  25. <CForm @submit.prevent="submit">
  26. <CRow class="p-4">
  27. <CCol md="6" class="mb-4">
  28. <CFormLabel>Id Outlet</CFormLabel>
  29. <CFormInput disabled v-model="form.outlet_number" />
  30. </CCol>
  31. <CCol md="6" class="mb-4">
  32. <AppTextInput label="Nama" placeholder="nama" :error="form.errors.name" v-model="form.name" />
  33. </CCol>
  34. <CCol md="6" class="mb-4">
  35. <AppTextInput label="Nomor HP" placeholder="nomor hp" :error="form.errors.phone" v-model="form.phone" />
  36. </CCol>
  37. <CCol md="6" class="mb-4">
  38. <AppTextInput
  39. label="Address"
  40. placeholder="address"
  41. :error="form.errors.address"
  42. v-model="form.address"
  43. />
  44. </CCol>
  45. </CRow>
  46. <CCardFooter class="d-flex justify-content-end">
  47. <AppButtonCreate :disabled="form.processing">Tambah Outlet</AppButtonCreate>
  48. </CCardFooter>
  49. </CForm>
  50. </CCard>
  51. </CCol>
  52. </CRow>
  53. </DefaultLayout>
  54. </template>