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-l-md': i === 0,
'rounded-r-md': i + 1 === paginator.links.length, '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>
</div> </div>

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

@@ -1,8 +1,7 @@
<script setup> <script setup>
import { getCurrentInstance, onMounted, ref } from 'vue' import { ref } from 'vue'
import Icon from '@/Components/Icon.vue' import Icon from '@/Components/Icon.vue'
const self = getCurrentInstance()
const { table, sort, name } = defineProps({ const { table, sort, name } = defineProps({
table: Object, table: Object,
sort: Boolean, sort: Boolean,
@@ -10,19 +9,18 @@ const { table, sort, name } = defineProps({
class: String, class: String,
}) })
const current = ref(table && table.config && name === table.config.order.key) const asc = ref(table.config.order.dir === 'asc')
const asc = ref(current.value && table.config.order.dir === 'asc') const desc = ref(table.config.order.dir === 'desc')
const desc = ref(current.value && table.config.order.dir === 'desc')
const click = () => { const click = () => {
if (current.value) { table.config.order.key = name
const dir = table.config.order.dir = table.config.order.dir === 'asc' ? 'desc' : 'asc'
asc.value = dir === 'asc' if (table.config.order.dir === 'asc') {
desc.value = dir === 'desc' table.config.order.dir = 'desc'
asc.value = false
desc.value = true
} else { } else {
table.config.order.key = name
table.config.order.dir = 'asc' table.config.order.dir = 'asc'
current.value = true
asc.value = true asc.value = true
desc.value = false desc.value = false
} }
@@ -40,8 +38,8 @@ const click = () => {
<template v-if="table && sort"> <template v-if="table && sort">
<div class="flex flex-col items-center justify-center text-xs"> <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-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="desc ? 'dark:text-white' : 'dark: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> </div>
</template> </template>
</div> </div>
@@ -54,8 +52,8 @@ const click = () => {
<template v-if="table && sort"> <template v-if="table && sort">
<div class="flex flex-col items-center justify-center text-xs"> <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-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="desc ? 'dark:text-white' : 'dark: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> </div>
</template> </template>
</div> </div>