Edit.vue 2.1KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <script setup>
  2. import { Head, useForm } from '@inertiajs/inertia-vue3'
  3. import AppTextInput from '@/components/AppTextInput.vue'
  4. import AppButtonCreate from '@/components/AppButtonCreate.vue'
  5. import AppButtonDelete from '@/components/AppButtonDelete.vue'
  6. import AppButtonAction from '@/components/AppButtonAction.vue'
  7. import AppModalAlert from '@/components/AppModalAlert.vue'
  8. import DefaultLayout from '@/layouts/DefaultLayout.vue'
  9. const props = defineProps({
  10. laundry: Object,
  11. })
  12. const form = useForm({
  13. name: props.laundry.name,
  14. price: props.laundry.price,
  15. unit: props.laundry.unit,
  16. })
  17. const submit = () => {
  18. form.put(route('laundries.update', props.laundry.id))
  19. }
  20. </script>
  21. <template>
  22. <Head title="Ubah tipe Laundry" />
  23. <DefaultLayout v-slot="{ toggleModalAlert }">
  24. <CRow>
  25. <CCol md="8">
  26. <CCard color="light" class="border-light">
  27. <CForm @submit.prevent="submit">
  28. <CRow class="p-4">
  29. <CCol md="6" class="mb-4">
  30. <AppTextInput label="Nama" placeholder="nama" :error="form.errors.name" v-model="form.name" />
  31. </CCol>
  32. <CCol md="6" class="mb-4">
  33. <AppTextInput label="Harga" placeholder="harga" :error="form.errors.price" v-model="form.price" />
  34. </CCol>
  35. <CCol md="6" class="mb-4">
  36. <AppTextInput label="Satuan" placeholder="unit" :error="form.errors.unit" v-model="form.unit" />
  37. </CCol>
  38. </CRow>
  39. <CCardFooter class="d-flex justify-content-between">
  40. <AppButtonAction @click="toggleModalAlert">Hapus tipe Laundry</AppButtonAction>
  41. <AppModalAlert>
  42. Anda yakin ingin mengahapus tipe laundry ini?
  43. <template #footer>
  44. <AppButtonDelete :href="route('laundries.destroy', laundry.id)">Hapus tipe Laundry</AppButtonDelete>
  45. </template>
  46. </AppModalAlert>
  47. <AppButtonCreate :disabled="form.processing">Ubah tipe Laundry</AppButtonCreate>
  48. </CCardFooter>
  49. </CForm>
  50. </CCard>
  51. </CCol>
  52. </CRow>
  53. </DefaultLayout>
  54. </template>