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

<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
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';

const stateStore = useStateStore();
const { t } = useI18n();
const session = useSession();
const token = session.getToken();

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: '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',
    },
]);
function getProjectUrl() {
    return ((new URL(window.location)).origin);
};
</script>
<template>
    <div class="column items-center">
        <div class="list">
            <VnPaginate
                data-key="CmrList"
                :url="`Routes/getExternalCmrs`"
                order="cmrFk DESC"
                limit="null"
                auto-load
            >
                <template #body="{ rows }">
                    <QTable
                        :columns="columns"
                        :rows="rows"
                        :dense="$q.screen.lt.md"
                        :pagination="{ rowsPerPage: null }"
                        hide-pagination
                        :grid="$q.screen.lt.md"
                        auto-load
                    >
                    <template #top>
                        {{ t('route.cmr.list.total', [rows.length]) }}
                    </template>
                    <template #body-cell-cmrFk="{ value }">
                        <QTd align="right" class="text-primary">
                                <a :href="`${getProjectUrl()}/api/Routes/${value}/cmr?access_token=${token}`" target="_blank">
                                    <span class="text-primary">{{ value }}</span>
                                </a>
                        </QTd>
                    </template>
                    <template #body-cell-hasCmrDms="{ value }">
                        <QTd align="center">
                            <QBadge
                                :id="(value) ? 'true' : 'false'" 
                                :label="(value)
                                    ? t('route.cmr.list.true')
                                    : t('route.cmr.list.false')"
                            />
                        </QTd>
                    </template>
                    </QTable>
                </template>
            </VnPaginate>
        </div>
        <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
                <QScrollArea class="fit text-grey-8">
                    <CmrFilter data-key="CmrList" />
                </QScrollArea>
        </QDrawer>
    </div>
</template>

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