86 lines
2.1 KiB
Vue
86 lines
2.1 KiB
Vue
<script setup>
|
|
import { ref, computed, onMounted } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
|
|
import FetchData from 'components/FetchData.vue';
|
|
|
|
import { toDateFormat } from 'src/filters/date.js';
|
|
import { useWeekdayStore } from 'src/stores/useWeekdayStore';
|
|
|
|
const { t } = useI18n();
|
|
const weekdayStore = useWeekdayStore();
|
|
|
|
const details = ref([]);
|
|
|
|
const columns = computed(() => [
|
|
{
|
|
label: t('upcomingDeliveries.province'),
|
|
name: 'province',
|
|
field: 'name',
|
|
align: 'left',
|
|
},
|
|
{
|
|
label: t('upcomingDeliveries.closing'),
|
|
name: 'closing',
|
|
field: 'hour',
|
|
align: 'left',
|
|
},
|
|
{
|
|
label: t('upcomingDeliveries.id'),
|
|
name: 'id',
|
|
field: 'zoneFk',
|
|
align: 'left',
|
|
},
|
|
]);
|
|
|
|
const getWeekDayName = (date) => {
|
|
const weekDay = new Date(date).getDay();
|
|
return t(`weekdays.${weekdayStore.weekdays[weekDay].code}`);
|
|
};
|
|
|
|
const getHeaderTitle = (date) => {
|
|
return `${getWeekDayName(date)} - ${toDateFormat(date)}`;
|
|
};
|
|
|
|
onMounted(() => weekdayStore.initStore());
|
|
</script>
|
|
|
|
<template>
|
|
<FetchData
|
|
url="Zones/getUpcomingDeliveries"
|
|
@on-fetch="(data) => (details = data)"
|
|
auto-load
|
|
/>
|
|
<VnSubToolbar />
|
|
<QPage class="column items-center q-pa-md">
|
|
<QCard class="full-width q-pa-md">
|
|
<div
|
|
v-for="(detail, index) in details"
|
|
:key="index"
|
|
class="full-width flex q-mb-lg"
|
|
>
|
|
<span class="header">
|
|
{{ getHeaderTitle(detail.shipped) }}
|
|
</span>
|
|
<QTable flat :columns="columns" :rows="detail.lines" class="full-width" />
|
|
</div>
|
|
</QCard>
|
|
</QPage>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.header {
|
|
min-width: 100% !important;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 8px;
|
|
height: 35px;
|
|
border-bottom: 1px solid $primary;
|
|
background-color: var(--vn-page-color);
|
|
font-size: 19px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
</style>
|