salix-front/src/pages/Zone/ZoneList.vue

<script setup>
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { onMounted, computed } from 'vue';
import { toCurrency } from 'src/filters';

import VnPaginate from 'src/components/ui/VnPaginate.vue';
import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';

import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { toTimeFormat } from 'src/filters/date';
import { useVnConfirm } from 'composables/useVnConfirm';
import useNotify from 'src/composables/useNotify.js';
import { useStateStore } from 'stores/useStateStore';
import axios from 'axios';

const stateStore = useStateStore();
const { t } = useI18n();
const router = useRouter();
const { notify } = useNotify();
const { viewSummary } = useSummaryDialog();
const { openConfirmationModal } = useVnConfirm();

const redirectToZoneSummary = (event, { id }) => {
    router.push({ name: 'ZoneSummary', params: { id } });
};

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',
    },
]);

async function clone(id) {
    const { data } = await axios.post(`Zones/${id}/clone`);
    notify(t('globals.dataSaved'), 'positive');
    router.push({ name: 'ZoneBasicData', params: { id: data.id } });
}
const handleClone = (id) => {
    openConfirmationModal(
        t('list.confirmCloneTitle'),
        t('list.confirmCloneSubtitle'),
        () => clone(id)
    );
};
onMounted(() => (stateStore.rightDrawer = true));
</script>

<template>
    <QPage class="column items-center q-pa-md">
        <div class="vn-card-list">
            <VnPaginate
                data-key="ZoneList"
                url="Zones"
                :filter="{
                    include: { relation: 'agencyMode', scope: { fields: ['name'] } },
                }"
                :limit="20"
                auto-load
            >
                <template #body="{ rows }">
                    <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" class="q-gutter-x-sm">
                                    <QIcon
                                        name="vn:clone"
                                        size="sm"
                                        color="primary"
                                        @click.stop="handleClone(props.row.id)"
                                    >
                                        <QTooltip>{{ t('globals.clone') }}</QTooltip>
                                    </QIcon>
                                    <QIcon
                                        name="preview"
                                        size="sm"
                                        color="primary"
                                        @click.stop="
                                            viewSummary(props.row.id, ZoneSummary)
                                        "
                                    >
                                        <QTooltip>{{ t('Preview') }}</QTooltip>
                                    </QIcon>
                                </QTd>
                            </template>
                        </QTable>
                    </div>
                </template>
            </VnPaginate>
        </div>
        <QPageSticky position="bottom-right" :offset="[18, 18]">
            <QBtn :to="{ path: `/zone/create` }" fab icon="add" color="primary">
                <QTooltip>{{ t('list.create') }}</QTooltip>
            </QBtn>
        </QPageSticky>
    </QPage>
</template>