jaro/ikea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1 from mesayusriana12/master

Browse Source 
fix: datatable pagination and sort
This commit is contained in:
Geriano
2023-03-30 12:02:06 +07:00
committed by GitHub
parent dba9f242c3 21402cc4b5
commit 1a4e4c3639
2 changed files with 14 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/Components/DataTable/Builder.vue
View File

@@ -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' ? `>` : (link.label === 'pagination.previous' ? '<' : link.label)"
/>
</div>
</div>

28
resources/js/Components/DataTable/Th.vue
View File

@@ -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>