Edit.vue 2.3KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <script setup>
  2. import { ref } from 'vue'
  3. import { Inertia } from '@inertiajs/inertia'
  4. import { Head, useForm } from '@inertiajs/inertia-vue3'
  5. import AppButton from '@/components/AppButton.vue'
  6. import AppInputText from '@/components/AppInputText.vue'
  7. import AppDialog from '@/components/AppDialog.vue'
  8. import AppLayout from '@/layouts/AppLayout.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. const visibleDialog = ref(false)
  21. const confirmDialog = () => {
  22. visibleDialog.value = true
  23. }
  24. const onAgree = (id) => Inertia.delete(route('laundries.destroy', id))
  25. const onCancel = () => (visibleDialog.value = false)
  26. </script>
  27. <template>
  28. <Head title="Ubah tipe Laundry" />
  29. <AppLayout>
  30. <div class="grid">
  31. <div class="col-12 lg:col-8">
  32. <Card>
  33. <template #content>
  34. <div class="grid">
  35. <div class="col-12 md:col-6">
  36. <AppInputText label="Nama" placeholder="nama" :error="form.errors.name" v-model="form.name" />
  37. </div>
  38. <div class="col-12 md:col-6">
  39. <AppInputText label="Harga" placeholder="harga" :error="form.errors.price" v-model="form.price" />
  40. </div>
  41. <div class="col-12 md:col-6">
  42. <AppInputText label="Satuan" placeholder="satuan" :error="form.errors.unit" v-model="form.unit" />
  43. </div>
  44. </div>
  45. </template>
  46. <template #footer>
  47. <div
  48. class="flex flex-column sm:flex-row align-items-center sm:justify-content-center sm:justify-content-between"
  49. >
  50. <AppDialog
  51. message="Yakin akan menghapus data ini?"
  52. v-model:visible="visibleDialog"
  53. @agree="onAgree(laundry.id)"
  54. @cancel="onCancel"
  55. />
  56. <Button label="Hapus" icon="pi pi-trash" class="p-button-text p-button-danger" @click="confirmDialog" />
  57. <AppButton @click="submit" label="Simpan" icon="pi pi-check" />
  58. </div>
  59. </template>
  60. </Card>
  61. </div>
  62. </div>
  63. </AppLayout>
  64. </template>