From 019e25137c4fac47d0b0b633a2734f7d004e05af Mon Sep 17 00:00:00 2001
From: Geriano <gerznewbie@gmail.com>
Date: Sun, 31 Jul 2022 10:06:45 +0700
Subject: [PATCH] implementing data table refresh

---
 resources/js/Pages/Superuser/Role/Index.vue | 30 ++++++++--------
 resources/js/Pages/Superuser/User/Index.vue | 39 +++++++++++----------
 2 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/resources/js/Pages/Superuser/Role/Index.vue b/resources/js/Pages/Superuser/Role/Index.vue
index fdd66e6..2e3ae40 100644
--- a/resources/js/Pages/Superuser/Role/Index.vue
+++ b/resources/js/Pages/Superuser/Role/Index.vue
@@ -19,13 +19,14 @@ const self = getCurrentInstance()
 const { permissions } = defineProps({
   permissions: Array,
 })
+
 const form = useForm({
   id: null,
   name: '',
   permissions: [],
 })
 
-const tableRefresh = ref(null)
+const table = ref(null)
 const open = ref(false)
 
 const show = () => {
@@ -36,9 +37,10 @@ const show = () => {
 const close = () => {
   open.value = false
   form.reset()
+  table.value?.refresh()
 }
 
-const detach = async (role, permission, refresh) => {
+const detach = async (role, permission) => {
   const response = await Swal.fire({
     title: 'are you sure?',
     icon: 'question',
@@ -49,13 +51,13 @@ const detach = async (role, permission, refresh) => {
   if (!response.isConfirmed)
     return
 
-  Inertia.on('finish', () => refresh())
+  Inertia.on('finish', () => close())
   Inertia.patch(route('superuser.role.detach', { role: role.id, permission: permission.id }))
 }
 
 const store = () => {
   return form.post(route('superuser.role.store'), {
-    onSuccess: () => close() || (tableRefresh.value && tableRefresh.value()),
+    onSuccess: () => close(),
     onError: () => show(),
   })
 }
@@ -70,12 +72,12 @@ const edit = role => {
 
 const update = () => {
   return form.patch(route('superuser.role.update', form.id), {
-    onSuccess: () => close() || (tableRefresh.value && tableRefresh.value()),
+    onSuccess: () => close(),
     onError: () => show(),
   })
 }
 
-const destroy = async (role, refresh) => {
+const destroy = async role => {
   const response = await Swal.fire({
     title: 'Are you sure?',
     text: 'You can\'t restore it after deleted',
@@ -85,7 +87,7 @@ const destroy = async (role, refresh) => {
   })
 
   if (response.isConfirmed) {
-    Inertia.on('finish', () => refresh())
+    Inertia.on('finish', () => close())
 
     return Inertia.delete(route('superuser.role.destroy', role.id))
   }
@@ -114,8 +116,8 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
 
       <template #body>
         <div class="flex flex-col space-y-2">
-          <Builder :url="route('api.v1.superuser.role.paginate')">
-            <template v-slot:thead="table">
+          <Builder ref="table" :url="route('api.v1.superuser.role.paginate')">
+            <template #thead="table">
               <tr class="bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-900">
                 <Th class="border px-3 py-2 text-center" :table="table" :sort="false">no</Th>
                 <Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="name">name</Th>
@@ -124,7 +126,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
               </tr>
             </template>
 
-            <template v-slot:tfoot="table">
+            <template #tfoot="table">
               <tr class="bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-900">
                 <Th class="border px-3 py-2 text-center" :table="table" :sort="false">no</Th>
                 <Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">name</Th>
@@ -133,7 +135,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
               </tr>
             </template>
 
-            <template v-slot:tbody="{ data, processing, empty, refresh }">
+            <template #tbody="{ data, processing, empty, refresh }">
               <transition-group
                 enterActiveClass="transition-all duration-300"
                 leaveActiveClass="transition-all duration-100"
@@ -145,7 +147,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                 </template>
 
                 <template v-else>
-                  <tr v-for="(role, i) in (tableRefresh = refresh) ? data : data" :key="i" class="dark:hover:bg-gray-600 transition-all duration-300">
+                  <tr v-for="(role, i) in data" :key="i" class="dark:hover:bg-gray-600 transition-all duration-300">
                     <td class="px-2 py-1 border dark:border-gray-800 text-center">{{ i + 1 }}</td>
                     <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ role.name }}</td>
                     <td class="px-2 py-1 border dark:border-gray-800">
@@ -161,12 +163,12 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                     </td>
                     <td class="px-2 py-1 border dark:border-gray-800">
                       <div class="flex items-center space-x-2">
-                        <ButtonBlue v-if="can('update role')" @click.prevent="edit(role, refresh)">
+                        <ButtonBlue v-if="can('update role')" @click.prevent="edit(role)">
                           <Icon name="edit" />
                           <p class="uppercase">edit</p>
                         </ButtonBlue>
 
-                        <ButtonRed v-if="can('delete role')" @click.prevent="destroy(role, refresh)">
+                        <ButtonRed v-if="can('delete role')" @click.prevent="destroy(role)">
                           <Icon name="trash" />
                           <p class="uppercase">delete</p>
                         </ButtonRed>
diff --git a/resources/js/Pages/Superuser/User/Index.vue b/resources/js/Pages/Superuser/User/Index.vue
index 3124a66..1dd9da2 100644
--- a/resources/js/Pages/Superuser/User/Index.vue
+++ b/resources/js/Pages/Superuser/User/Index.vue
@@ -31,7 +31,7 @@ const form = useForm({
   roles: [],
 })
 
-const tableRefresh = ref(null)
+const table = ref(null)
 const open = ref(false)
 
 const show = () => {
@@ -42,12 +42,12 @@ const show = () => {
 const close = () => {
   open.value = false
   form.reset()
-  form.clearErrors()
+  table.value?.refresh()
 }
 
 const store = () => {
   return form.post(route('superuser.user.store'), {
-    onSuccess: () => close() || (tableRefresh.value && tableRefresh.value()),
+    onSuccess: () => close(),
     onError: () => show(),
   })
 }
@@ -65,12 +65,12 @@ const edit = user => {
 
 const update = () => {
   return form.patch(route('superuser.user.update', form.id), {
-    onSuccess: () => close() || (tableRefresh.value && tableRefresh.value()),
+    onSuccess: () => close(),
     onError: () => show(),
   })
 }
 
-const destroy = async (user, refresh) => {
+const destroy = async user => {
   const response = await Swal.fire({
     title: 'Are you sure?',
     text: 'You can\'t restore it after deleted',
@@ -80,7 +80,7 @@ const destroy = async (user, refresh) => {
   })
 
   if (response.isConfirmed) {
-    Inertia.on('finish', () => refresh())
+    Inertia.on('finish', () => close())
 
     return Inertia.delete(route('superuser.user.destroy', user.id))
   }
@@ -88,7 +88,7 @@ const destroy = async (user, refresh) => {
 
 const submit = () => form.id ? update() : store()
 
-const detachPermission = async (user, permission, refresh) => {
+const detachPermission = async (user, permission) => {
   const response = await Swal.fire({
     title: 'Are you sure?',
     text: 'You can re adding it on edit page',
@@ -100,11 +100,11 @@ const detachPermission = async (user, permission, refresh) => {
   if (!response.isConfirmed)
     return
 
-  Inertia.on('finish', () => refresh())
+  Inertia.on('finish', () => close())
   Inertia.patch(route('superuser.user.permission.detach', { user: user.id, permission: permission.id }))
 }
 
-const detachRole = async (user, role, refresh) => {
+const detachRole = async (user, role) => {
   const response = await Swal.fire({
     title: 'Are you sure?',
     text: 'You can re adding it on edit page',
@@ -116,11 +116,12 @@ const detachRole = async (user, role, refresh) => {
   if (!response.isConfirmed)
     return
 
-  Inertia.on('finish', () => refresh())
+  Inertia.on('finish', () => close())
   Inertia.patch(route('superuser.user.role.detach', { user: user.id, role: role.id }))
 }
 
 const esc = e => e.key === 'Escape' && close()
+
 onMounted(() => window.addEventListener('keydown', esc))
 onUnmounted(() => window.removeEventListener('keydown', esc))
 </script>
@@ -141,8 +142,8 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
 
       <template #body>
         <div class="flex flex-col space-y-2">
-          <Builder :url="route('api.v1.superuser.user.paginate')">
-            <template v-slot:thead="table">
+          <Builder ref="table" :url="route('api.v1.superuser.user.paginate')">
+            <template #thead="table">
               <tr class="bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-900">
                 <Th class="border px-3 py-2 text-center" :table="table" :sort="false">no</Th>
                 <Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="name">name</Th>
@@ -157,7 +158,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
               </tr>
             </template>
 
-            <template v-slot:tfoot="table">
+            <template #tfoot="table">
               <tr class="bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-900">
                 <Th class="border px-3 py-2 text-center" :table="table" :sort="false">no</Th>
                 <Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">name</Th>
@@ -172,7 +173,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
               </tr>
             </template>
 
-            <template v-slot:tbody="{ data, processing, empty, refresh }">
+            <template #tbody="{ data, processing, empty }">
               <transition-group
                 enterActiveClass="transition-all duration-100"
                 leaveActiveClass="transition-all duration-50"
@@ -187,7 +188,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                 </template>
 
                 <template v-else>
-                  <tr v-for="(user, i) in (tableRefresh = refresh) ? data : data" :key="i" class="dark:hover:bg-gray-600 transition-all duration-300">
+                  <tr v-for="(user, i) in data" :key="i" class="dark:hover:bg-gray-600 transition-all duration-300">
                     <td class="px-2 py-1 border dark:border-gray-800 text-center">{{ i + 1 }}</td>
                     <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ user.name }}</td>
                     <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ user.username }}</td>
@@ -198,7 +199,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                           <div class="flex items-center justify-between space-x-1">
                             <p class="uppercase font-semibold">{{ permission.name }}</p>
 
-                            <Icon @click.prevent="detachPermission(user, permission, refresh)" v-if="can('update user')" name="times" class="px-2 py-1 rounded-md dark:bg-gray-700 transition-all hover:bg-red-500 cursor-pointer" />
+                            <Icon @click.prevent="detachPermission(user, permission)" v-if="can('update user')" name="times" class="px-2 py-1 rounded-md dark:bg-gray-700 transition-all hover:bg-red-500 cursor-pointer" />
                           </div>
                         </div>
                       </div>
@@ -209,7 +210,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                           <div class="flex items-center justify-between space-x-2">
                             <p class="uppercase font-semibold">{{ role.name }}</p>
 
-                            <Icon @click.prevent="detachRole(user, role, refresh)" v-if="can('update user')" name="times" class="px-2 py-1 rounded-md dark:bg-gray-700 transition-all hover:bg-red-500 cursor-pointer" />
+                            <Icon @click.prevent="detachRole(user, role)" v-if="can('update user')" name="times" class="px-2 py-1 rounded-md dark:bg-gray-700 transition-all hover:bg-red-500 cursor-pointer" />
                           </div>
                         </div>
                       </div>
@@ -219,12 +220,12 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                     <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ new Date(user.updated_at).toLocaleString('id') }}</td>
                     <td class="px-2 py-1 border dark:border-gray-800">
                       <div class="flex items-center space-x-2">
-                        <ButtonBlue v-if="can('update user')" @click.prevent="edit(user, refresh)">
+                        <ButtonBlue v-if="can('update user')" @click.prevent="edit(user)">
                           <Icon name="edit" />
                           <p class="uppercase">edit</p>
                         </ButtonBlue>
 
-                        <ButtonRed v-if="can('delete user')" @click.prevent="destroy(user, refresh)">
+                        <ButtonRed v-if="can('delete user')" @click.prevent="destroy(user)">
                           <Icon name="trash" />
                           <p class="uppercase">delete</p>
                         </ButtonRed>