From 21402cc4b59069f5968ee9f2ffc27adcd6fb68e6 Mon Sep 17 00:00:00 2001
From: Muhammad Esa Yusriana <mesayusriana12@gmail.com>
Date: Wed, 29 Mar 2023 21:48:31 +0700
Subject: [PATCH] fix: datatable pagination and sort

---
 resources/js/Components/DataTable/Builder.vue |  2 +-
 resources/js/Components/DataTable/Th.vue      | 28 +++++++++----------
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/resources/js/Components/DataTable/Builder.vue b/resources/js/Components/DataTable/Builder.vue
index f548d1c..34aff16 100644
--- a/resources/js/Components/DataTable/Builder.vue
+++ b/resources/js/Components/DataTable/Builder.vue
@@ -146,7 +146,7 @@ defineExpose(all)
               'rounded-l-md': i === 0,
               'rounded-r-md': i + 1 === paginator.links.length,
             }"
-            v-html="link.label"
+            v-html="link.label === 'pagination.next' ? `&gt;` : (link.label === 'pagination.previous' ? '&lt;' : link.label)"
           />
         </div>
       </div>
diff --git a/resources/js/Components/DataTable/Th.vue b/resources/js/Components/DataTable/Th.vue
index 656bdee..48278d5 100644
--- a/resources/js/Components/DataTable/Th.vue
+++ b/resources/js/Components/DataTable/Th.vue
@@ -1,8 +1,7 @@
 <script setup>
-import { getCurrentInstance, onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import Icon from '@/Components/Icon.vue'
 
-const self = getCurrentInstance()
 const { table, sort, name } = defineProps({
   table: Object,
   sort: Boolean,
@@ -10,19 +9,18 @@ const { table, sort, name } = defineProps({
   class: String,
 })
 
-const current = ref(table && table.config && name === table.config.order.key)
-const asc = ref(current.value && table.config.order.dir === 'asc')
-const desc = ref(current.value && table.config.order.dir === 'desc')
+const asc = ref(table.config.order.dir === 'asc')
+const desc = ref(table.config.order.dir === 'desc')
 
 const click = () => {
-  if (current.value) {
-    const dir = table.config.order.dir = table.config.order.dir === 'asc' ? 'desc' : 'asc'
-    asc.value = dir === 'asc'
-    desc.value = dir === 'desc'
+  table.config.order.key = name
+  
+  if (table.config.order.dir === 'asc') {
+    table.config.order.dir = 'desc'
+    asc.value = false
+    desc.value = true
   } else {
-    table.config.order.key = name
     table.config.order.dir = 'asc'
-    current.value = true
     asc.value = true
     desc.value = false
   }
@@ -40,8 +38,8 @@ const click = () => {
 
       <template v-if="table && sort">
         <div class="flex flex-col items-center justify-center text-xs">
-          <Icon name="caret-up" class="transition-all duration-300" :class="asc ? 'dark:text-white' : 'dark:text-gray-400'" />
-          <Icon name="caret-down" class="transition-all duration-300" :class="desc ? 'dark:text-white' : 'dark:text-gray-400'" />
+          <Icon name="caret-up" class="transition-all duration-300" :class="table.config.order.key === name && table.config.order.dir === 'asc' && asc ? 'text-black dark:text-white' : ' dark:text-gray-400 text-gray-400'" />
+          <Icon name="caret-down" class="transition-all duration-300" :class="table.config.order.key === name && table.config.order.dir === 'desc' && desc ? 'text-black dark:text-white' : 'dark:text-gray-400 text-gray-400'" />
         </div>
       </template>
     </div>
@@ -54,8 +52,8 @@ const click = () => {
 
         <template v-if="table && sort">
           <div class="flex flex-col items-center justify-center text-xs">
-            <Icon name="caret-up" class="transition-all duration-300" :class="asc ? 'dark:text-white' : 'dark:text-gray-400'" />
-            <Icon name="caret-down" class="transition-all duration-300" :class="desc ? 'dark:text-white' : 'dark:text-gray-400'" />
+            <Icon name="caret-up" class="transition-all duration-300" :class="table.config.order.key === name && table.config.order.dir === 'asc' && asc ? 'text-black dark:text-white' : ' dark:text-gray-400 text-gray-400'" />
+            <Icon name="caret-down" class="transition-all duration-300" :class="table.config.order.key === name && table.config.order.dir === 'desc' && desc ? 'text-black dark:text-white' : 'dark:text-gray-400 text-gray-400'" />
           </div>
         </template>
       </div>