verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

feat: Replace CarList by Table

This commit is contained in:
Javier Segarra 2024-05-10 08:40:47 +02:00
parent 7f185c091b
commit 2697078a55
1 changed files with 114 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
src/pages/Zone/ZoneList.vue
View File

@ -1,7 +1,8 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { onMounted } from 'vue'; import { onMounted, computed } from 'vue';
import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
import VnPaginate from 'src/components/ui/VnPaginate.vue'; import VnPaginate from 'src/components/ui/VnPaginate.vue';
import CardList from 'components/ui/CardList.vue'; import CardList from 'components/ui/CardList.vue';
@ -12,7 +13,6 @@ import ZoneFilterPanel from './ZoneFilterPanel.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { toTimeFormat } from 'src/filters/date'; import { toTimeFormat } from 'src/filters/date';
import { toCurrency } from 'filters/index';
import { useVnConfirm } from 'composables/useVnConfirm'; import { useVnConfirm } from 'composables/useVnConfirm';
import useNotify from 'src/composables/useNotify.js'; import useNotify from 'src/composables/useNotify.js';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
@ -25,13 +25,56 @@ const { notify } = useNotify();
const { viewSummary } = useSummaryDialog(); const { viewSummary } = useSummaryDialog();
const { openConfirmationModal } = useVnConfirm(); const { openConfirmationModal } = useVnConfirm();
const redirectToZoneSummary = (id) => { const redirectToZoneSummary = (event, { id }) => {
router.push({ name: 'ZoneSummary', params: { id } }); router.push({ name: 'ZoneSummary', params: { id } });
}; };
function redirectToCreateView() { function redirectToCreateView() {
router.push({ path: `/zone/create` }); router.push({ path: `/zone/create` });
} }
const columns = computed(() => [
{
name: 'ID',
label: t('list.id'),
field: (row) => row.id,
sortable: true,
align: 'left',
},
{
name: 'name',
label: t('list.name'),
field: (row) => row.name,
sortable: true,
align: 'left',
},
{
name: 'agency',
label: t('list.agency'),
field: (row) => row?.agencyMode?.name,
sortable: true,
align: 'left',
},
{
name: 'close',
label: t('list.close'),
field: (row) => (row?.hour ? toTimeFormat(row?.hour) : '-'),
sortable: true,
align: 'left',
},
{
name: 'price',
label: t('list.price'),
field: (row) => (row?.price ? toCurrency(row.price) : '-'),
sortable: true,
align: 'left',
},
{
name: 'actions',
label: '',
sortable: false,
align: 'right',
},
]);
const exprBuilder = (param, value) => { const exprBuilder = (param, value) => {
switch (param) { switch (param) {
@ -71,7 +114,13 @@ async function clone(id) {
console.error('Error cloning zone: ', error); console.error('Error cloning zone: ', error);
} }
} }
const handleClone = (id) => {
openConfirmationModal(
t('list.confirmCloneTitle'),
t('list.confirmCloneSubtitle'),
() => clone(id)
);
};
onMounted(async () => { onMounted(async () => {
stateStore.rightDrawer = true; stateStore.rightDrawer = true;
}); });
@ -97,8 +146,8 @@ onMounted(async () => {
<ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" /> <ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
</QScrollArea> </QScrollArea>
</QDrawer> </QDrawer>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center">
<div class="vn-card-list"> <div style="width: 100%">
<VnPaginate <VnPaginate
data-key="ZoneList" data-key="ZoneList"
url="Zones" url="Zones"
@ -108,54 +157,65 @@ onMounted(async () => {
auto-load auto-load
> >
<template #body="{ rows }"> <template #body="{ rows }">
<CardList <div class="q-pa-md">
v-for="row of rows" <QTable
:key="row.id" :rows="rows"
:title="row.name" :columns="columns"
:id="row.id" row-key="clientId"
@click="redirectToZoneSummary(row.id)" class="full-width"
@row-click="redirectToZoneSummary"
> >
<template #list-items> <template #header="props">
<VnLv <QTr :props="props" class="bg">
:label="t('list.id')" <QTh
:title-label="t('list.id')" v-for="col in props.cols"
:value="row.id" :key="col.name"
/> :props="props"
<VnLv :label="t('list.name')" :value="row?.name" /> >
<VnLv {{ t(col.label) }}
:label="t('list.agency')" <QTooltip v-if="col.tooltip">{{
:value="row.agencyMode?.name" col.tooltip
/> }}</QTooltip>
<VnLv </QTh>
:label="t('list.close')" </QTr>
:value="toTimeFormat(row?.hour)"
/>
<VnLv
:label="t('list.price')"
:value="toCurrency(row?.price)"
/>
</template> </template>
<template #actions>
<QBtn <template #body-cell="props">
:label="t('list.clone')" <QTd :props="props">
@click.stop=" <QTr :props="props" class="cursor-pointer">
openConfirmationModal( {{ props.value }}
t('list.confirmCloneTitle'), </QTr></QTd
t('list.confirmCloneSubtitle'), ></template
() => clone(row.id) >
) <template #body-cell-actions="props">
" <QTd :props="props">
outline <div class="table-actions">
<QIcon
style="margin-top: 15px" style="margin-top: 15px"
/> name="vn:clone"
<QBtn size="sm"
:label="t('list.openSummary')"
@click.stop="viewSummary(row.id, ZoneSummary)"
color="primary" color="primary"
@click.stop="handleClone(props.row.id)"
>
<QTooltip>{{
t('globals.clone')
}}</QTooltip> </QIcon
><QIcon
style="margin-top: 15px" style="margin-top: 15px"
/> name="preview"
size="sm"
color="primary"
@click.stop="
viewSummary(props.row.id, ZoneSummary)
"
>
<QTooltip>{{ t('Preview') }}</QTooltip>
</QIcon>
</div>
</QTd>
</template> </template>
</CardList> </QTable>
</div>
</template> </template>
</VnPaginate> </VnPaginate>
</div> </div>