refactor: 04 => screen.xs fetch scroll
This commit is contained in:
puriphatt
parent
a894bacb13
commit
f559987e0c
2 changed files with 733 additions and 671 deletions
|
|
@ -276,7 +276,10 @@ async function fetchWorkflowList() {
|
|||
: 'INACTIVE',
|
||||
});
|
||||
if (res) {
|
||||
workflowData.value = res.result;
|
||||
$q.screen.xs
|
||||
? workflowData.value.push(...res.result)
|
||||
: (workflowData.value = res.result);
|
||||
|
||||
workflowPageMax.value = Math.ceil(res.total / workflowPageSize.value);
|
||||
if (pageState.inputSearch || statusFilter.value !== 'all') return;
|
||||
pageState.total = res.total;
|
||||
|
|
@ -351,7 +354,7 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
|
|||
|
||||
<!-- 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"
|
||||
|
|
@ -500,173 +503,113 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
|
|||
</article>
|
||||
|
||||
<article v-else class="col q-pa-md surface-2 scroll full-width">
|
||||
<q-table
|
||||
flat
|
||||
bordered
|
||||
:grid="pageState.gridView"
|
||||
:rows="workflowData"
|
||||
:columns="columns"
|
||||
class="full-width"
|
||||
card-container-class="q-col-gutter-md"
|
||||
row-key="name"
|
||||
:rows-per-page-options="[0]"
|
||||
hide-pagination
|
||||
:visible-columns="fieldSelected"
|
||||
<q-infinite-scroll
|
||||
:offset="100"
|
||||
@load="
|
||||
(_, done) => {
|
||||
if ($q.screen.gt.xs || workflowPage === workflowPageMax) return;
|
||||
workflowPage = workflowPage + 1;
|
||||
fetchWorkflowList().then(() =>
|
||||
done(workflowPage >= workflowPageMax),
|
||||
);
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #header="{ cols }">
|
||||
<q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
|
||||
<q-th
|
||||
v-for="v in cols"
|
||||
:key="v"
|
||||
:class="{
|
||||
'text-left': v.name === 'name',
|
||||
'text-right': v.name === 'step',
|
||||
}"
|
||||
>
|
||||
{{
|
||||
v.label &&
|
||||
$t(v.label, {
|
||||
msg:
|
||||
v.name === 'step'
|
||||
? $t('flow.step')
|
||||
: v.name === 'name'
|
||||
? $t('flow.title')
|
||||
: '',
|
||||
})
|
||||
}}
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template #body="props">
|
||||
<q-tr
|
||||
:class="{
|
||||
'app-text-muted': props.row.status === 'INACTIVE',
|
||||
'status-active': props.row.status !== 'INACTIVE',
|
||||
'status-inactive': props.row.status === 'INACTIVE',
|
||||
}"
|
||||
:style="
|
||||
props.rowIndex % 2 !== 0
|
||||
? $q.dark.isActive
|
||||
? 'background: hsl(var(--gray-11-hsl)/0.2)'
|
||||
: `background: #f9fafc`
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<q-td
|
||||
v-if="fieldSelected.includes('order')"
|
||||
class="text-center"
|
||||
>
|
||||
{{ props.rowIndex + 1 }}
|
||||
<!-- {{ (currentPage - 1) * pageSize + props.rowIndex + 1 }} -->
|
||||
</q-td>
|
||||
<q-td v-if="fieldSelected.includes('name')">
|
||||
<section class="row items-center no-wrap">
|
||||
<q-avatar
|
||||
class="q-mr-sm"
|
||||
size="md"
|
||||
style="
|
||||
color: var(--gray-6);
|
||||
background: hsla(var(--gray-6-hsl) / 0.1);
|
||||
"
|
||||
>
|
||||
<q-icon name="mdi-cogs" />
|
||||
|
||||
<q-badge
|
||||
class="absolute-bottom-right no-padding"
|
||||
style="
|
||||
border-radius: 50%;
|
||||
min-width: 8px;
|
||||
min-height: 8px;
|
||||
"
|
||||
:style="{
|
||||
background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
|
||||
}"
|
||||
></q-badge>
|
||||
</q-avatar>
|
||||
{{ props.row.name }}
|
||||
</section>
|
||||
</q-td>
|
||||
<q-td v-if="fieldSelected.includes('step')" class="text-right">
|
||||
{{ props.row.step.length }}
|
||||
</q-td>
|
||||
<q-td style="width: 20%" class="text-right">
|
||||
<q-btn
|
||||
icon="mdi-eye-outline"
|
||||
size="sm"
|
||||
dense
|
||||
round
|
||||
flat
|
||||
@click.stop="
|
||||
() => {
|
||||
assignFormData(props.row);
|
||||
triggerDialog('view');
|
||||
}
|
||||
"
|
||||
/>
|
||||
<KebabAction
|
||||
:id-name="props.row.id"
|
||||
:status="props.row.status"
|
||||
@view="
|
||||
() => {
|
||||
assignFormData(props.row);
|
||||
triggerDialog('view');
|
||||
}
|
||||
"
|
||||
@edit="
|
||||
() => {
|
||||
assignFormData(props.row);
|
||||
triggerDialog('edit');
|
||||
}
|
||||
"
|
||||
@delete="() => deleteWorkflow(props.row.id)"
|
||||
@change-status="() => triggerChangeStatus(props.row)"
|
||||
/>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:item="props">
|
||||
<section class="col-12 col-md-4 column">
|
||||
<div
|
||||
<q-table
|
||||
flat
|
||||
bordered
|
||||
:grid="pageState.gridView"
|
||||
:rows="workflowData"
|
||||
:columns="columns"
|
||||
class="full-width"
|
||||
card-container-class="q-col-gutter-md"
|
||||
row-key="name"
|
||||
:rows-per-page-options="[0]"
|
||||
hide-pagination
|
||||
:visible-columns="fieldSelected"
|
||||
>
|
||||
<template #header="{ cols }">
|
||||
<q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
|
||||
<q-th
|
||||
v-for="v in cols"
|
||||
:key="v"
|
||||
:class="{
|
||||
'text-left': v.name === 'name',
|
||||
'text-right': v.name === 'step',
|
||||
}"
|
||||
>
|
||||
{{
|
||||
v.label &&
|
||||
$t(v.label, {
|
||||
msg:
|
||||
v.name === 'step'
|
||||
? $t('flow.step')
|
||||
: v.name === 'name'
|
||||
? $t('flow.title')
|
||||
: '',
|
||||
})
|
||||
}}
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template #body="props">
|
||||
<q-tr
|
||||
:class="{
|
||||
'app-text-muted': props.row.status === 'INACTIVE',
|
||||
'status-active': props.row.status !== 'INACTIVE',
|
||||
'status-inactive': props.row.status === 'INACTIVE',
|
||||
}"
|
||||
class="surface-1 rounded bordered row no-wrap col"
|
||||
style="overflow: hidden"
|
||||
:style="
|
||||
props.rowIndex % 2 !== 0
|
||||
? $q.dark.isActive
|
||||
? 'background: hsl(var(--gray-11-hsl)/0.2)'
|
||||
: `background: #f9fafc`
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="col-md-2 col-3 flex items-center justify-center"
|
||||
style="
|
||||
color: var(--gray-6);
|
||||
background: hsla(var(--gray-6-hsl) / 0.1);
|
||||
"
|
||||
<q-td
|
||||
v-if="fieldSelected.includes('order')"
|
||||
class="text-center"
|
||||
>
|
||||
<q-icon name="mdi-cogs" size="md" />
|
||||
</div>
|
||||
<article class="row q-pa-sm q-gutter-y-sm col">
|
||||
<div
|
||||
v-if="fieldSelected.includes('name')"
|
||||
class="text-weight-bold col-12 ellipsis-2-lines"
|
||||
:class="{
|
||||
'app-text-muted': props.row.status === 'INACTIVE',
|
||||
}"
|
||||
>
|
||||
{{ props.row.name }}
|
||||
{{ props.rowIndex + 1 }}
|
||||
<!-- {{ (currentPage - 1) * pageSize + props.rowIndex + 1 }} -->
|
||||
</q-td>
|
||||
<q-td v-if="fieldSelected.includes('name')">
|
||||
<section class="row items-center no-wrap">
|
||||
<q-avatar
|
||||
class="q-mr-sm"
|
||||
size="md"
|
||||
style="
|
||||
color: var(--gray-6);
|
||||
background: hsla(var(--gray-6-hsl) / 0.1);
|
||||
"
|
||||
>
|
||||
<q-icon name="mdi-cogs" />
|
||||
|
||||
<q-tooltip>
|
||||
{{ props.row.name }}
|
||||
</q-tooltip>
|
||||
</div>
|
||||
<div v-if="fieldSelected.includes('step')" class="self-end">
|
||||
<div class="bordered rounded q-px-sm">
|
||||
<q-icon name="mdi-note-edit-outline" class="q-pr-sm" />
|
||||
{{ props.row.step.length }}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<nav class="q-pa-sm row items-center self-start">
|
||||
<q-badge
|
||||
class="absolute-bottom-right no-padding"
|
||||
style="
|
||||
border-radius: 50%;
|
||||
min-width: 8px;
|
||||
min-height: 8px;
|
||||
"
|
||||
:style="{
|
||||
background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
|
||||
}"
|
||||
></q-badge>
|
||||
</q-avatar>
|
||||
{{ props.row.name }}
|
||||
</section>
|
||||
</q-td>
|
||||
<q-td
|
||||
v-if="fieldSelected.includes('step')"
|
||||
class="text-right"
|
||||
>
|
||||
{{ props.row.step.length }}
|
||||
</q-td>
|
||||
<q-td style="width: 20%" class="text-right">
|
||||
<q-btn
|
||||
icon="mdi-eye-outline"
|
||||
size="sm"
|
||||
|
|
@ -698,17 +641,108 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
|
|||
@delete="() => deleteWorkflow(props.row.id)"
|
||||
@change-status="() => triggerChangeStatus(props.row)"
|
||||
/>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:item="props">
|
||||
<section class="col-12 col-md-4 column">
|
||||
<div
|
||||
:class="{
|
||||
'status-inactive': props.row.status === 'INACTIVE',
|
||||
}"
|
||||
class="surface-1 rounded bordered row no-wrap col"
|
||||
style="overflow: hidden"
|
||||
>
|
||||
<div
|
||||
class="col-md-2 col-3 flex items-center justify-center"
|
||||
style="
|
||||
color: var(--gray-6);
|
||||
background: hsla(var(--gray-6-hsl) / 0.1);
|
||||
"
|
||||
>
|
||||
<q-icon name="mdi-cogs" size="md" />
|
||||
</div>
|
||||
<article class="row q-pa-sm q-gutter-y-sm col">
|
||||
<div
|
||||
v-if="fieldSelected.includes('name')"
|
||||
class="text-weight-bold col-12 ellipsis-2-lines"
|
||||
:class="{
|
||||
'app-text-muted': props.row.status === 'INACTIVE',
|
||||
}"
|
||||
>
|
||||
{{ props.row.name }}
|
||||
|
||||
<q-tooltip>
|
||||
{{ props.row.name }}
|
||||
</q-tooltip>
|
||||
</div>
|
||||
<div
|
||||
v-if="fieldSelected.includes('step')"
|
||||
class="self-end"
|
||||
>
|
||||
<div class="bordered rounded q-px-sm">
|
||||
<q-icon
|
||||
name="mdi-note-edit-outline"
|
||||
class="q-pr-sm"
|
||||
/>
|
||||
{{ props.row.step.length }}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<nav class="q-pa-sm row items-center self-start">
|
||||
<q-btn
|
||||
icon="mdi-eye-outline"
|
||||
size="sm"
|
||||
dense
|
||||
round
|
||||
flat
|
||||
@click.stop="
|
||||
() => {
|
||||
assignFormData(props.row);
|
||||
triggerDialog('view');
|
||||
}
|
||||
"
|
||||
/>
|
||||
<KebabAction
|
||||
:id-name="props.row.id"
|
||||
:status="props.row.status"
|
||||
@view="
|
||||
() => {
|
||||
assignFormData(props.row);
|
||||
triggerDialog('view');
|
||||
}
|
||||
"
|
||||
@edit="
|
||||
() => {
|
||||
assignFormData(props.row);
|
||||
triggerDialog('edit');
|
||||
}
|
||||
"
|
||||
@delete="() => deleteWorkflow(props.row.id)"
|
||||
@change-status="() => triggerChangeStatus(props.row)"
|
||||
/>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</q-table>
|
||||
|
||||
<template v-slot:loading>
|
||||
<div
|
||||
v-if="$q.screen.lt.sm && workflowPage !== workflowPageMax"
|
||||
class="row justify-center"
|
||||
>
|
||||
<q-spinner-dots color="primary" size="40px" />
|
||||
</div>
|
||||
</template>
|
||||
</q-table>
|
||||
</q-infinite-scroll>
|
||||
</article>
|
||||
|
||||
<!-- SEC: footer content -->
|
||||
<footer
|
||||
class="row justify-between items-center q-px-md q-py-sm surface-2"
|
||||
v-if="workflowPageMax > 0"
|
||||
v-if="workflowPageMax > 0 && $q.screen.gt.xs"
|
||||
>
|
||||
<div class="col-4">
|
||||
<div class="row items-center no-wrap">
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue