Index.vue 1.6KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <script setup>
  2. import { Head } from '@inertiajs/inertia-vue3'
  3. import AppTable from '@/components/AppTable.vue'
  4. import AppButtonMove from '@/components/AppButtonMove.vue'
  5. import AppButtonDetail from '@/components/AppButtonDetail.vue'
  6. import AppPagination from '@/components/AppPagination.vue'
  7. import DefaultLayout from '@/layouts/DefaultLayout.vue'
  8. defineProps({
  9. laundries: Object,
  10. })
  11. </script>
  12. <template>
  13. <Head title="Daftar Tipe Laundry" />
  14. <DefaultLayout>
  15. <CRow class="mb-4">
  16. <CCol></CCol>
  17. <CCol xs="auto">
  18. <AppButtonMove :href="route('laundries.create')">Tambah tipe Laundry</AppButtonMove>
  19. </CCol>
  20. </CRow>
  21. <CRow>
  22. <CCol>
  23. <AppTable>
  24. <template #table-head>
  25. <CTableRow>
  26. <CTableHeaderCell>Nama</CTableHeaderCell>
  27. <CTableHeaderCell>Harga</CTableHeaderCell>
  28. <CTableHeaderCell>Satuan</CTableHeaderCell>
  29. </CTableRow>
  30. </template>
  31. <template #table-body>
  32. <CTableRow v-for="laundry in laundries.data" :key="laundry.id">
  33. <CTableDataCell>{{ laundry.name }}</CTableDataCell>
  34. <CTableDataCell>{{ laundry.price }}</CTableDataCell>
  35. <CTableDataCell>{{ laundry.unit }}</CTableDataCell>
  36. <CTableDataCell>
  37. <AppButtonDetail :href="route('laundries.edit', laundry.id)" />
  38. </CTableDataCell>
  39. </CTableRow>
  40. </template>
  41. </AppTable>
  42. </CCol>
  43. </CRow>
  44. <CRow>
  45. <AppPagination :links="laundries.links" />
  46. </CRow>
  47. </DefaultLayout>
  48. </template>