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

<script setup>
import { onBeforeMount, onMounted, computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { Notify } from 'quasar';
import axios from 'axios';
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';
import RightMenu from 'src/components/common/RightMenu.vue';
import { useStateStore } from 'src/stores/useStateStore';

import VnTable from 'components/VnTable/VnTable.vue';

const { t } = useI18n();
const { getTokenMultimedia } = useSession();
const token = getTokenMultimedia();
const state = useStateStore();
const selected = ref([]);
const warehouses = 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,
    },
    {
        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,
    },
    {
        name: 'warehouseFk',
        label: t('globals.warehouse'),
        field: ({ warehouseFk }) => warehouseFk,
        align: 'center',
        sortable: true,
    },
    {
        name: 'icons',
        align: 'center',
        field: (row) => row.cmrFk,
    },
]);

onBeforeMount(async () => {
    const { data } = await axios.get('Warehouses');
    warehouses.value = data;
});

onMounted(() => (state.rightDrawer = true));

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>
    <VnTable
        ref="tableRef"
        data-key="CmrList"
        url="Routes/cmrs"
        order="cmrFk DESC"
        :columns="columns"
        :right-search="true"
        :use-model="true"
    />
</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;
}
:deep(.q-table th) {
    max-width: 80px;
}
:deep(.q-table th:nth-child(3)) {
    max-width: 100px;
}
</style>