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

create processing and empty state when getting data pagination

Browse Source
This commit is contained in:
Geriano
2022-07-29 18:09:07 +07:00
parent 71036c6ade
commit 70d5a1b8f1
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,6 +14,7 @@ const { url, sticky } = defineProps({
}) })
const paginator = ref({}) const paginator = ref({})
const processing = ref(false)
const last = ref(null) const last = ref(null)
const config = useForm({ const config = useForm({
page: 1, page: 1,
@@ -37,6 +38,7 @@ const goTo = link => {
const fetch = async u => { const fetch = async u => {
try { try {
processing.value = true
const a = last.value = u || url const a = last.value = u || url
const response = await axios.post(a || last.value, config.data()) const response = await axios.post(a || last.value, config.data())
paginator.value = response.data paginator.value = response.data
@@ -53,6 +55,8 @@ const fetch = async u => {
return fetch(last.value) return fetch(last.value)
} }
} }
processing.value = false
} }
const createFloatingTh = () => { const createFloatingTh = () => {
@@ -129,16 +133,16 @@ onUpdated(() => rounded())
<div class="p-2"> <div class="p-2">
<div class="overflow-auto rounded-md border dark:border-gray-900 max-h-96"> <div class="overflow-auto rounded-md border dark:border-gray-900 max-h-96">
<table class="w-full border-collapse"> <table class="w-full border-collapse">
<thead ref="thead" class="border-inherit" :class="config.sticky && 'sticky top-0 left-0'"> <thead ref="thead" class="border-inherit z-10" :class="config.sticky && 'sticky top-0 left-0'">
<slot name="thead" :config="config" :paginator="paginator" :data="paginator.data" :refresh="fetch" /> <slot name="thead" :config="config" :paginator="paginator" :data="paginator.data" :refresh="fetch" />
</thead> </thead>
<tfoot ref="tfoot" class="border-inherit" :class="config.sticky && 'sticky bottom-0 left-0'"> <tfoot ref="tfoot" class="border-inherit z-10" :class="config.sticky && 'sticky bottom-0 left-0'">
<slot name="tfoot" :config="config" :paginator="paginator" :data="paginator.data" :refresh="fetch" /> <slot name="tfoot" :config="config" :paginator="paginator" :data="paginator.data" :refresh="fetch" />
</tfoot> </tfoot>
<tbody ref="tbody" class="border-inherit"> <tbody ref="tbody" class="border-inherit">
<slot name="tbody" :config="config" :paginator="paginator" :data="paginator.data" :refresh="fetch" /> <slot name="tbody" :config="config" :paginator="paginator" :data="paginator.data" :refresh="fetch" :processing="processing" :empty="!processing && !paginator?.data?.length" />
</tbody> </tbody>
</table> </table>
</div> </div>