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

174 lines
6.1 KiB
Vue
Raw Normal View History

<script setup>
2023-08-10 12:33:25 +00:00
import { computed, ref } 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';
2023-08-30 10:53:18 +00:00
import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
const stateStore = useStateStore();
const { t } = useI18n();
const session = useSession();
2023-08-09 12:26:13 +00:00
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,
2023-08-09 12:26:13 +00:00
align: 'center',
sortable: true,
2023-08-10 05:49:57 +00:00
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,
2023-08-09 12:26:13 +00:00
align: 'left',
sortable: true,
},
{
name: 'shipped',
label: t('route.cmr.list.shipped'),
field: (row) => toDate(row.shipped),
2023-08-09 12:26:13 +00:00
align: 'center',
sortable: true,
2023-08-10 05:49:57 +00:00
headerStyle: 'padding-left: 33px',
},
2023-08-30 10:53:18 +00:00
{
name: 'icons',
align: 'center',
field: (row) => row.cmrFk,
},
]);
2023-08-10 05:49:57 +00:00
function getProjectUrl() {
2023-08-10 12:10:57 +00:00
return new URL(window.location).origin;
}
2023-08-30 10:53:18 +00:00
function getCmrLink(cmrFk) {
return `${getProjectUrl()}/api/Routes/${cmrFk}/cmr?access_token=${token}`;
}
</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
2023-08-10 05:49:57 +00:00
:columns="columns"
:rows="rows"
:dense="$q.screen.lt.md"
:pagination="{ rowsPerPage: null }"
hide-pagination
:grid="$q.screen.lt.md"
auto-load
>
2023-08-10 12:10:57 +00:00
<template #top>
2023-08-11 05:45:54 +00:00
{{ `${t('route.cmr.list.total')}: ${rows.length}` }}
2023-08-10 12:10:57 +00:00
</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>
2023-08-30 10:53:18 +00:00
<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="getCmrLink(value)" target="_blank">
<QIcon
name="visibility"
color="primary"
size="2em"
class="q-mr-sm q-ml-sm"
/>
<QTooltip>
{{ t('route.cmr.list.viewCmr') }}
</QTooltip>
</a>
<a :href="getCmrLink(value)" download>
<QIcon
name="cloud_download"
color="primary"
size="2em"
class="q-mr-sm q-ml-sm"
/>
<QTooltip>
{{ t('route.cmr.list.downloadCmr') }}
</QTooltip>
</a>
</QTd>
</template>
</QTable>
</template>
</VnPaginate>
</div>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
2023-08-10 12:10:57 +00:00
<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 {
2023-08-09 10:02:15 +00:00
background-color: $positive;
}
#false {
2023-08-09 10:02:15 +00:00
background-color: $negative;
}
2023-08-10 12:10:57 +00:00
</style>