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