salix-front/src/pages/Route/Cmr/CmrList.vue

<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { Notify } from 'quasar';
import { useStateStore } from 'stores/useStateStore';
import VnPaginate from 'components/ui/VnPaginate.vue';
import { useSession } from 'src/composables/useSession';
import { toDate } from 'filters/index';
import CmrFilter from './CmrFilter.vue';
import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';

const stateStore = useStateStore();
const { t } = useI18n();
const { getTokenMultimedia } = useSession();
const token = getTokenMultimedia();
const selected = ref([]);

const columns = computed(() => [
    {
        name: 'cmrFk',
        label: t('route.cmr.list.cmrFk'),
        field: (row) => row.cmrFk,
        sortable: true,
    },
    {
        name: 'hasCmrDms',
        label: t('route.cmr.list.hasCmrDms'),
        field: (row) => row.hasCmrDms,
        align: 'center',
        sortable: true,
        headerStyle: 'padding-left: 35px',
    },
    {
        name: 'ticketFk',
        label: t('route.cmr.list.ticketFk'),
        field: (row) => row.ticketFk,
        sortable: true,
    },
    {
        name: 'routeFkFk',
        label: t('route.cmr.list.routeFk'),
        field: (row) => row.routeFk,
        sortable: true,
    },
    {
        name: 'clientFk',
        label: t('route.cmr.list.clientFk'),
        field: (row) => row.clientFk,
        sortable: true,
    },
    {
        name: 'country',
        label: t('route.cmr.list.country'),
        field: (row) => row.country,
        align: 'left',
        sortable: true,
    },
    {
        name: 'shipped',
        label: t('route.cmr.list.shipped'),
        field: (row) => toDate(row.shipped),
        align: 'center',
        sortable: true,
        headerStyle: 'padding-left: 33px',
    },
    {
        name: 'icons',
        align: 'center',
        field: (row) => row.cmrFk,
    },
]);
function getApiUrl() {
    return new URL(window.location).origin;
}
function getCmrUrl(value) {
    return `${getApiUrl()}/api/Routes/${value}/cmr?access_token=${token}`;
}
function downloadPdfs() {
    if (!selected.value.length) {
        Notify.create({
            message: t('globals.noSelectedRows'),
            type: 'warning',
        });
        return;
    }
    let cmrs = [];
    for (let value of selected.value) cmrs.push(value.cmrFk);
    // prettier-ignore
    return window.open(`${getApiUrl()}/api/Routes/downloadCmrsZip?ids=${cmrs.join(',')}&access_token=${token}`);
}
</script>
<template>
    <template v-if="stateStore.isHeaderMounted()">
        <Teleport to="#actions-append">
            <div class="row q-gutter-x-sm">
                <QBtn
                    flat
                    @click="stateStore.toggleRightDrawer()"
                    round
                    dense
                    icon="menu"
                >
                    <QTooltip bottom anchor="bottom right">
                        {{ t('globals.collapseMenu') }}
                    </QTooltip>
                </QBtn>
            </div>
        </Teleport>
    </template>
    <div class="column items-center">
        <div class="list">
            <VnPaginate
                data-key="CmrList"
                :url="`Routes/cmrs`"
                order="cmrFk DESC"
                limit="null"
                auto-load
            >
                <template #body="{ rows }">
                    <QTable
                        :columns="columns"
                        :rows="rows"
                        :dense="$q.screen.lt.md"
                        row-key="cmrFk"
                        selection="multiple"
                        v-model:selected="selected"
                        :grid="$q.screen.lt.md"
                        auto-load
                    >
                        <template #top>
                            <div style="width: 100%; display: table">
                                <div style="float: right; color: lightgray">
                                    {{ `${rows.length} ${t('route.cmr.list.results')}` }}
                                </div>
                            </div>
                        </template>
                        <template #body-cell-hasCmrDms="{ value }">
                            <QTd align="center">
                                <QBadge
                                    text-color="black"
                                    :id="value ? 'true' : 'false'"
                                    :label="
                                        value
                                            ? t('route.cmr.list.true')
                                            : t('route.cmr.list.false')
                                    "
                                />
                            </QTd>
                        </template>
                        <template #body-cell-ticketFk="{ value }">
                            <QTd align="right" class="text-primary">
                                <span class="text-primary link">{{ value }}</span>
                                <TicketDescriptorProxy :id="value" />
                            </QTd>
                        </template>
                        <template #body-cell-clientFk="{ value }">
                            <QTd align="right" class="text-primary">
                                <span class="text-primary link">{{ value }}</span>
                                <CustomerDescriptorProxy :id="value" />
                            </QTd>
                        </template>
                        <template #body-cell-icons="{ value }">
                            <QTd align="center">
                                <a :href="getCmrUrl(value)" target="_blank">
                                    <QIcon
                                        name="visibility"
                                        color="primary"
                                        size="md"
                                        class="q-mr-sm q-ml-sm"
                                    />
                                    <QTooltip>
                                        {{ t('route.cmr.list.viewCmr') }}
                                    </QTooltip>
                                </a>
                            </QTd>
                        </template>
                    </QTable>
                </template>
            </VnPaginate>
        </div>
        <QPageSticky :offset="[20, 20]">
            <QBtn @click="downloadPdfs" fab icon="cloud_download" color="primary" />
        </QPageSticky>
        <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
            <QScrollArea class="fit text-grey-8">
                <CmrFilter data-key="CmrList" />
                <QTooltip>
                    {{ t('route.cmr.list.downloadCmrs') }}
                </QTooltip>
            </QScrollArea>
        </QDrawer>
    </div>
</template>

<style lang="scss" scoped>
.list {
    padding-top: 15px;
    padding-bottom: 15px;
    max-width: 1000px;
    width: 100%;
}
.grid-style-transition {
    transition: transform 0.28s, background-color 0.28s;
}
#true {
    background-color: $positive;
}
#false {
    background-color: $negative;
}
</style>