Create.vue 1.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  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 label="Alamat" placeholder="alamat" :error="form.errors.address" v-model="form.address" />
  39. </CCol>
  40. </CRow>
  41. <CCardFooter class="d-flex justify-content-end">
  42. <AppButtonCreate :disabled="form.processing">Tambah Outlet</AppButtonCreate>
  43. </CCardFooter>
  44. </CForm>
  45. </CCard>
  46. </CCol>
  47. </CRow>
  48. </DefaultLayout>
  49. </template>