refactor: laundry master

public/js/resources_js_pages_laundry_TableHeader_js.js

@@ -0,0 +1,27 @@
+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["resources_js_pages_laundry_TableHeader_js"],{
+
+/***/ "./resources/js/pages/laundry/TableHeader.js":
+/*!***************************************************!*\
+  !*** ./resources/js/pages/laundry/TableHeader.js ***!
+  \***************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([{
+  field: 'name',
+  header: 'Nama'
+}, {
+  field: 'price',
+  header: 'Harga'
+}, {
+  field: 'unit',
+  header: 'Satuan'
+}]);
+
+/***/ })
+
+}]);

public/js/vue.js

@@ -49318,6 +49318,14 @@ var map = {
 		"./resources/js/pages/laundry/Index.vue",
 		"resources_js_pages_laundry_Index_vue"
 	],
+	"./laundry/TableHeader": [
+		"./resources/js/pages/laundry/TableHeader.js",
+		"resources_js_pages_laundry_TableHeader_js"
+	],
+	"./laundry/TableHeader.js": [
+		"./resources/js/pages/laundry/TableHeader.js",
+		"resources_js_pages_laundry_TableHeader_js"
+	],
 	"./outlet/Create": [
 		"./resources/js/pages/outlet/Create.vue",
 		"resources_js_pages_outlet_Create_vue"
@@ -49499,7 +49507,7 @@ module.exports = JSON.parse('{"name":"axios","version":"0.21.4","description":"P
 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return "js/" + chunkId + ".js?id=" + {"resources_js_pages_auth_ForgotPassword_vue":"30c9f46c66d8a730","resources_js_pages_auth_Login_vue":"83c27ad5e582a71f","resources_js_pages_auth_ResetPassword_vue":"fee80cdfce4206fb","resources_js_pages_auth_VerifyEmail_vue":"632c69e9e8e9c0af","resources_js_pages_customer_Create_vue":"935626d17b99c29a","resources_js_pages_customer_Edit_vue":"986cfff059399280","resources_js_pages_customer_Index_vue":"89afeac23faa853b","resources_js_pages_customer_TableHeader_js":"be6685f342bbd7c2","resources_js_pages_laundry_Create_vue":"caa3a15d5de03139","resources_js_pages_laundry_Edit_vue":"0a5134292fb1ca38","resources_js_pages_laundry_Index_vue":"00bc6dad90bff53d","resources_js_pages_outlet_Create_vue":"5c72446fc4abfb32","resources_js_pages_outlet_Edit_vue":"458b77e9d1813ab9","resources_js_pages_outlet_Index_vue":"19e833b73f2287ff","resources_js_pages_outlet_TableHeader_js":"960433b5f8e003c1","resources_js_pages_user_Create_vue":"9a026560c48a81c6","resources_js_pages_user_Edit_vue":"5910e5432eeceb00","resources_js_pages_user_Index_vue":"3dc5212ff1dc0b19","resources_js_pages_user_TableHeader_js":"c19ccf0fa7c2fb2b"}[chunkId] + "";
+/******/ 			return "js/" + chunkId + ".js?id=" + {"resources_js_pages_auth_ForgotPassword_vue":"30c9f46c66d8a730","resources_js_pages_auth_Login_vue":"83c27ad5e582a71f","resources_js_pages_auth_ResetPassword_vue":"fee80cdfce4206fb","resources_js_pages_auth_VerifyEmail_vue":"632c69e9e8e9c0af","resources_js_pages_customer_Create_vue":"935626d17b99c29a","resources_js_pages_customer_Edit_vue":"986cfff059399280","resources_js_pages_customer_Index_vue":"89afeac23faa853b","resources_js_pages_customer_TableHeader_js":"be6685f342bbd7c2","resources_js_pages_laundry_Create_vue":"bc874286cd673c41","resources_js_pages_laundry_Edit_vue":"d7b5086ab3df24d0","resources_js_pages_laundry_Index_vue":"fbee86c7c6eb4e71","resources_js_pages_laundry_TableHeader_js":"494e577855bbcaf6","resources_js_pages_outlet_Create_vue":"5c72446fc4abfb32","resources_js_pages_outlet_Edit_vue":"458b77e9d1813ab9","resources_js_pages_outlet_Index_vue":"19e833b73f2287ff","resources_js_pages_outlet_TableHeader_js":"960433b5f8e003c1","resources_js_pages_user_Create_vue":"9a026560c48a81c6","resources_js_pages_user_Edit_vue":"5910e5432eeceb00","resources_js_pages_user_Index_vue":"3dc5212ff1dc0b19","resources_js_pages_user_TableHeader_js":"c19ccf0fa7c2fb2b"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/pages/customer/Index.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { Head, Link } from '@inertiajs/inertia-vue3'
-
 import AppButton from '@/components/AppButton.vue'
 import AppPagination from '@/components/AppPagination.vue'
 import AppLayout from '@/layouts/AppLayout.vue'

resources/js/pages/laundry/Create.vue

@@ -1,9 +1,8 @@
 <script setup>
 import { Head, useForm } from '@inertiajs/inertia-vue3'
-
-import AppButtonCreate from '@/components/AppButtonCreate.vue'
-import AppTextInput from '@/components/AppTextInput.vue'
-import DefaultLayout from '@/layouts/DefaultLayout.vue'
+import AppButton from '@/components/AppButton.vue'
+import AppInputText from '@/components/AppInputText.vue'
+import AppLayout from '@/layouts/AppLayout.vue'
 
 const form = useForm({
   name: '',
@@ -19,31 +18,33 @@ const submit = () => {
 <template>
   <Head title="Tambah tipe Laundry" />
 
-  <DefaultLayout>
-    <CRow>
-      <CCol md="8">
-        <CCard color="light" class="border-light">
-          <CForm @submit.prevent="submit">
-            <CRow class="p-4">
-              <CCol md="6" class="mb-4">
-                <AppTextInput label="Nama" placeholder="nama" :error="form.errors.name" v-model="form.name" />
-              </CCol>
-
-              <CCol md="6" class="mb-4">
-                <AppTextInput label="Harga" placeholder="harga" :error="form.errors.price" v-model="form.price" />
-              </CCol>
-
-              <CCol md="6" class="mb-4">
-                <AppTextInput label="Satuan" placeholder="unit" :error="form.errors.unit" v-model="form.unit" />
-              </CCol>
-            </CRow>
-
-            <CCardFooter class="d-flex justify-content-end">
-              <AppButtonCreate :disabled="form.processing">Tambah tipe Laundry</AppButtonCreate>
-            </CCardFooter>
-          </CForm>
-        </CCard>
-      </CCol>
-    </CRow>
-  </DefaultLayout>
+  <AppLayout>
+    <div class="grid">
+      <div class="col-12 lg:col-8">
+        <Card>
+          <template #content>
+            <div class="grid">
+              <div class="col-12 md:col-6">
+                <AppInputText label="Nama" placeholder="nama" :error="form.errors.name" v-model="form.name" />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText label="Harga" placeholder="harga" :error="form.errors.price" v-model="form.price" />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText label="Satuan" placeholder="satuan" :error="form.errors.unit" v-model="form.unit" />
+              </div>
+            </div>
+          </template>
+
+          <template #footer>
+            <div class="flex justify-content-end">
+              <AppButton @click="submit" label="Simpan" icon="pi pi-check" />
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </AppLayout>
 </template>

resources/js/pages/laundry/Edit.vue

@@ -1,12 +1,11 @@
 <script setup>
+import { ref } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
 import { Head, useForm } from '@inertiajs/inertia-vue3'
-
-import AppTextInput from '@/components/AppTextInput.vue'
-import AppButtonCreate from '@/components/AppButtonCreate.vue'
-import AppButtonDelete from '@/components/AppButtonDelete.vue'
-import AppButtonAction from '@/components/AppButtonAction.vue'
-import AppModalAlert from '@/components/AppModalAlert.vue'
-import DefaultLayout from '@/layouts/DefaultLayout.vue'
+import AppButton from '@/components/AppButton.vue'
+import AppInputText from '@/components/AppInputText.vue'
+import AppDialog from '@/components/AppDialog.vue'
+import AppLayout from '@/layouts/AppLayout.vue'
 
 const props = defineProps({
   laundry: Object,
@@ -21,46 +20,59 @@ const form = useForm({
 const submit = () => {
   form.put(route('laundries.update', props.laundry.id))
 }
+
+const visibleDialog = ref(false)
+
+const confirmDialog = () => {
+  visibleDialog.value = true
+}
+
+const onAgree = (id) => Inertia.delete(route('laundries.destroy', id))
+
+const onCancel = () => (visibleDialog.value = false)
 </script>
 
 <template>
   <Head title="Ubah tipe Laundry" />
 
-  <DefaultLayout v-slot="{ toggleModalAlert }">
-    <CRow>
-      <CCol md="8">
-        <CCard color="light" class="border-light">
-          <CForm @submit.prevent="submit">
-            <CRow class="p-4">
-              <CCol md="6" class="mb-4">
-                <AppTextInput label="Nama" placeholder="nama" :error="form.errors.name" v-model="form.name" />
-              </CCol>
-
-              <CCol md="6" class="mb-4">
-                <AppTextInput label="Harga" placeholder="harga" :error="form.errors.price" v-model="form.price" />
-              </CCol>
+  <AppLayout>
+    <div class="grid">
+      <div class="col-12 lg:col-8">
+        <Card>
+          <template #content>
+            <div class="grid">
+              <div class="col-12 md:col-6">
+                <AppInputText label="Nama" placeholder="nama" :error="form.errors.name" v-model="form.name" />
+              </div>
 
-              <CCol md="6" class="mb-4">
-                <AppTextInput label="Satuan" placeholder="unit" :error="form.errors.unit" v-model="form.unit" />
-              </CCol>
-            </CRow>
+              <div class="col-12 md:col-6">
+                <AppInputText label="Harga" placeholder="harga" :error="form.errors.price" v-model="form.price" />
+              </div>
 
-            <CCardFooter class="d-flex justify-content-between">
-              <AppButtonAction @click="toggleModalAlert">Hapus tipe Laundry</AppButtonAction>
+              <div class="col-12 md:col-6">
+                <AppInputText label="Satuan" placeholder="satuan" :error="form.errors.unit" v-model="form.unit" />
+              </div>
+            </div>
+          </template>
 
-              <AppModalAlert>
-                Anda yakin ingin mengahapus tipe laundry ini?
+          <template #footer>
+            <div
+              class="flex flex-column sm:flex-row align-items-center sm:justify-content-center sm:justify-content-between"
+            >
+              <AppDialog
+                message="Yakin akan menghapus data ini?"
+                v-model:visible="visibleDialog"
+                @agree="onAgree(laundry.id)"
+                @cancel="onCancel"
+              />
 
-                <template #footer>
-                  <AppButtonDelete :href="route('laundries.destroy', laundry.id)">Hapus tipe Laundry</AppButtonDelete>
-                </template>
-              </AppModalAlert>
+              <Button label="Hapus" icon="pi pi-trash" class="p-button-text p-button-danger" @click="confirmDialog" />
 
-              <AppButtonCreate :disabled="form.processing">Ubah tipe Laundry</AppButtonCreate>
-            </CCardFooter>
-          </CForm>
-        </CCard>
-      </CCol>
-    </CRow>
-  </DefaultLayout>
+              <AppButton @click="submit" label="Simpan" icon="pi pi-check" />
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </AppLayout>
 </template>

resources/js/pages/laundry/Index.vue

@@ -1,11 +1,10 @@
 <script setup>
-import { Head } from '@inertiajs/inertia-vue3'
-
-import AppTable from '@/components/AppTable.vue'
-import AppButtonMove from '@/components/AppButtonMove.vue'
-import AppButtonDetail from '@/components/AppButtonDetail.vue'
+import { Head, Link } from '@inertiajs/inertia-vue3'
+import AppButton from '@/components/AppButton.vue'
 import AppPagination from '@/components/AppPagination.vue'
-import DefaultLayout from '@/layouts/DefaultLayout.vue'
+import AppLayout from '@/layouts/AppLayout.vue'
+
+import TableHeader from './TableHeader'
 
 defineProps({
   laundries: Object,
@@ -15,41 +14,50 @@ defineProps({
 <template>
   <Head title="Daftar Tipe Laundry" />
 
-  <DefaultLayout>
-    <CRow class="mb-4">
-      <CCol></CCol>
-
-      <CCol xs="auto">
-        <AppButtonMove :href="route('laundries.create')">Tambah tipe Laundry</AppButtonMove>
-      </CCol>
-    </CRow>
-
-    <CRow>
-      <CCol>
-        <AppTable>
-          <template #table-head>
-            <CTableRow>
-              <CTableHeaderCell>Nama</CTableHeaderCell>
-              <CTableHeaderCell>Harga</CTableHeaderCell>
-              <CTableHeaderCell>Satuan</CTableHeaderCell>
-            </CTableRow>
-          </template>
-          <template #table-body>
-            <CTableRow v-for="laundry in laundries.data" :key="laundry.id">
-              <CTableDataCell>{{ laundry.name }}</CTableDataCell>
-              <CTableDataCell>{{ laundry.price }}</CTableDataCell>
-              <CTableDataCell>{{ laundry.unit }}</CTableDataCell>
-              <CTableDataCell>
-                <AppButtonDetail :href="route('laundries.edit', laundry.id)" />
-              </CTableDataCell>
-            </CTableRow>
-          </template>
-        </AppTable>
-      </CCol>
-    </CRow>
-
-    <CRow>
-      <AppPagination :links="laundries.links" />
-    </CRow>
-  </DefaultLayout>
+  <AppLayout>
+    <DataTable
+      responsiveLayout="scroll"
+      columnResizeMode="expand"
+      :value="laundries.data"
+      :rowHover="true"
+      :stripedRows="true"
+    >
+      <template #header>
+        <div class="grid">
+          <div class="col-12 md:col-6">
+            <div class="flex align-items-center">
+              <h5 class="mr-3 mb-0">Laundry</h5>
+
+              <InputText class="w-full md:w-27rem" placeholder="cari..." />
+            </div>
+          </div>
+
+          <div class="col-12 md:col-6 flex justify-content-end">
+            <AppButton :href="route('laundries.create')" label="Tambah Laundry" icon="pi pi-pencil" />
+          </div>
+        </div>
+      </template>
+
+      <Column
+        v-for="tableHeader in TableHeader"
+        :field="tableHeader.field"
+        :header="tableHeader.header"
+        :key="tableHeader.field"
+      />
+
+      <Column>
+        <template #body="{ data }">
+          <Link
+            as="button"
+            :href="route('laundries.edit', data.id)"
+            class="p-button p-component p-button-icon-only p-button-rounded p-button-text"
+          >
+            <i class="pi pi-angle-double-right p-button-icon"></i>
+          </Link>
+        </template>
+      </Column>
+    </DataTable>
+
+    <AppPagination :links="laundries.links" />
+  </AppLayout>
 </template>

resources/js/pages/laundry/TableHeader.js

@@ -0,0 +1,5 @@
+export default [
+  { field: 'name', header: 'Nama' },
+  { field: 'price', header: 'Harga' },
+  { field: 'unit', header: 'Satuan' },
+]