chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: 07 => screen.xs fetch scroll

Browse source
This commit is contained in:
puriphatt 2025-01-29 17:37:42 +07:00
parent f559987e0c
commit 508e6d3f5b
1 changed files with 246 additions and 221 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/pages/07_agencies-management/MainPage.vue
View file

@ -241,7 +241,7 @@ async function fetchData() {
});
if (ret) {
data.value = ret.result;
$q.screen.xs ? data.value.push(...ret.result) : (data.value = ret.result);
pageMax.value = Math.ceil(ret.total / pageSize.value);
pageState.total = ret.total;
}
@ -316,7 +316,7 @@ watch(
<!-- SEC: header content -->
<section class="col surface-1 rounded bordered overflow-hidden">
<div class="column full-height">
<div class="column full-height no-wrap">
<header
class="row surface-3 justify-between full-width items-center bordered-b"
style="z-index: 1"
@ -448,6 +448,16 @@ watch(
</article>
<article v-else class="col q-pa-md surface-2 scroll full-width">
<q-infinite-scroll
:offset="100"
@load="
(_, done) => {
if ($q.screen.gt.xs || page === pageMax) return;
page = page + 1;
fetchData().then(() => done(page >= pageMax));
}
"
>
<q-table
flat
bordered
@ -466,7 +476,11 @@ watch(
style="background-color: hsla(var(--info-bg) / 0.07)"
:props="props"
>
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
{{ $t(col.label) }}
</q-th>
<q-th auto-width />
@ -637,7 +651,9 @@ watch(
{{ props.row.code }}
</span>
</span>
<nav class="row q-ml-auto items-center justify-end no-wrap">
<nav
class="row q-ml-auto items-center justify-end no-wrap"
>
<q-btn
icon="mdi-eye-outline"
size="sm"
@ -718,12 +734,21 @@ watch(
</section>
</template>
</q-table>
<template v-slot:loading>
<div
v-if="$q.screen.lt.sm && page !== pageMax"
class="row justify-center"
>
<q-spinner-dots color="primary" size="40px" />
</div>
</template>
</q-infinite-scroll>
</article>
<!-- SEC: footer content -->
<footer
class="row justify-between items-center q-px-md q-py-sm surface-2"
v-if="pageMax > 0"
v-if="pageMax > 0 && $q.screen.gt.xs"
>
<div class="col-4">
<div class="row items-center no-wrap">