forked from verdnatura/salix-front
Merge branch 'dev' into 6095-add-refFk-null-on-search
This commit is contained in:
commit
4bacc8d836
|
@ -2,6 +2,7 @@
|
|||
import { computed, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import isValidDate from 'filters/isValidDate';
|
||||
import VnInput from 'components/common/VnInput.vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
|
@ -74,7 +75,7 @@ const styleAttrs = computed(() => {
|
|||
@click="isPopupOpen = true"
|
||||
>
|
||||
<template #append>
|
||||
<QIcon name="schedule" class="cursor-pointer">
|
||||
<QIcon name="Schedule" class="cursor-pointer">
|
||||
<QPopupProxy
|
||||
v-model="isPopupOpen"
|
||||
cover
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
<script setup>
|
||||
defineProps({
|
||||
import { computed } from 'vue';
|
||||
|
||||
const $props = defineProps({
|
||||
maxLength: {
|
||||
type: Number,
|
||||
required: true,
|
||||
|
@ -8,53 +10,40 @@ defineProps({
|
|||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
tag: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'tag',
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'value',
|
||||
},
|
||||
});
|
||||
const tags = computed(() => {
|
||||
return Object.keys($props.item)
|
||||
.filter((i) => i.startsWith(`${$props.tag}`))
|
||||
.reduce((acc, tag) => {
|
||||
const n = tag.split(`${$props.tag}`)[1];
|
||||
const key = `${$props.tag}${n}`;
|
||||
const value = `${$props.value}${n}`;
|
||||
acc[$props.item[key] ?? key] = $props.item[value] ?? '';
|
||||
return acc;
|
||||
}, {});
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="fetchedTags">
|
||||
<div class="wrap">
|
||||
<div
|
||||
v-for="(val, key) in tags"
|
||||
:key="key"
|
||||
class="inline-tag"
|
||||
:class="{ empty: !$props.item.value5 }"
|
||||
:title="$props.item.tag5 + ': ' + $props.item.value5"
|
||||
:title="`${key}: ${val}`"
|
||||
:class="{ empty: !val }"
|
||||
>
|
||||
{{ $props.item.value5 }}
|
||||
</div>
|
||||
<div
|
||||
class="inline-tag"
|
||||
:class="{ empty: !$props.item.tag6 }"
|
||||
:title="$props.item.tag6 + ': ' + $props.item.value6"
|
||||
>
|
||||
{{ $props.item.value6 }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="inline-tag"
|
||||
:class="{ empty: !$props.item.value7 }"
|
||||
:title="$props.item.tag7 + ': ' + $props.item.value7"
|
||||
>
|
||||
{{ $props.item.value7 }}
|
||||
</div>
|
||||
<div
|
||||
class="inline-tag"
|
||||
:class="{ empty: !$props.item.value8 }"
|
||||
:title="$props.item.tag8 + ': ' + $props.item.value8"
|
||||
>
|
||||
{{ $props.item.value8 }}
|
||||
</div>
|
||||
<div
|
||||
class="inline-tag"
|
||||
:class="{ empty: !$props.item.value9 }"
|
||||
:title="$props.item.tag9 + ': ' + $props.item.value9"
|
||||
>
|
||||
{{ $props.item.value9 }}
|
||||
</div>
|
||||
<div
|
||||
class="inline-tag"
|
||||
:class="{ empty: !$props.item.value10 }"
|
||||
:title="$props.item.tag10 + ': ' + $props.item.value10"
|
||||
>
|
||||
{{ $props.item.value10 }}
|
||||
{{ val }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -83,9 +72,8 @@ defineProps({
|
|||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
.empty {
|
||||
border: 1px solid $color-spacer-light;
|
||||
border: 1px solid #2b2b2b;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -59,12 +59,10 @@ const containerClasses = computed(() => {
|
|||
// Clases para modificar el color de fecha seleccionada en componente QCalendarMonth
|
||||
.q-dark div .q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
|
||||
background-color: $primary !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
|
||||
background-color: $primary !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.q-calendar-month__head--weekday {
|
||||
|
@ -112,7 +110,6 @@ const containerClasses = computed(() => {
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.q-calendar-month__week--days > div:nth-child(6),
|
||||
.q-calendar-month__week--days > div:nth-child(7) {
|
||||
// Cambia el color de los días sábado y domingo
|
||||
|
|
|
@ -169,6 +169,13 @@ select:-webkit-autofill {
|
|||
|
||||
/* q-notification row items-stretch q-notification--standard bg-negative text-white */
|
||||
|
||||
.q-card,
|
||||
.q-table,
|
||||
.q-table__bottom,
|
||||
.q-drawer {
|
||||
background-color: var(--vn-section-color);
|
||||
}
|
||||
|
||||
input[type='number'] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
|
|
@ -410,7 +410,7 @@ const lockIconType = (groupingMode, mode) => {
|
|||
<span v-if="props.row.item.subName" class="subName">
|
||||
{{ props.row.item.subName }}
|
||||
</span>
|
||||
<fetched-tags :item="props.row.item" :max-length="5" />
|
||||
<FetchedTags :item="props.row.item" :max-length="5" />
|
||||
</QTd>
|
||||
</QTr>
|
||||
<!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
|
||||
|
|
|
@ -338,7 +338,7 @@ const fetchEntryBuys = async () => {
|
|||
<span v-if="row.item.subName" class="subName">
|
||||
{{ row.item.subName }}
|
||||
</span>
|
||||
<fetched-tags :item="row.item" :max-length="5" />
|
||||
<FetchedTags :item="row.item" :max-length="5" />
|
||||
</QTd>
|
||||
</QTr>
|
||||
<!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
|
||||
|
|
|
@ -707,7 +707,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
|
|||
</template>
|
||||
<template #body-cell-tags="{ row }">
|
||||
<QTd>
|
||||
<fetched-tags :item="row" :max-length="6" />
|
||||
<FetchedTags :item="row" :max-length="6" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-entryFk="{ row }">
|
||||
|
|
|
@ -459,7 +459,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
|
|||
{{ row.name }}
|
||||
</span>
|
||||
<ItemDescriptorProxy :id="row.itemFk" />
|
||||
<fetched-tags :item="row" :max-length="6" />
|
||||
<FetchedTags :item="row" :max-length="6" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-groupingPrice="props">
|
||||
|
|
|
@ -521,7 +521,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
|
|||
<template #body-cell-description="{ row }">
|
||||
<QTd class="col">
|
||||
<span>{{ row.name }} {{ row.subName }}</span>
|
||||
<fetched-tags :item="row" :max-length="6" />
|
||||
<FetchedTags :item="row" :max-length="6" />
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-isActive="{ row }">
|
||||
|
|
|
@ -81,3 +81,10 @@ itemTags:
|
|||
searchbar:
|
||||
label: Search item
|
||||
info: Search by item id
|
||||
itemType:
|
||||
shared:
|
||||
code: Code
|
||||
name: Name
|
||||
worker: Worker
|
||||
category: Category
|
||||
temperature: Temperature
|
||||
|
|
|
@ -81,3 +81,10 @@ itemTags:
|
|||
searchbar:
|
||||
label: Buscar artículo
|
||||
info: Buscar por id de artículo
|
||||
itemType:
|
||||
shared:
|
||||
code: Código
|
||||
name: Nombre
|
||||
worker: Trabajador
|
||||
category: Reino
|
||||
temperature: Temperatura
|
||||
|
|
|
@ -176,10 +176,7 @@ const detailsColumns = ref([
|
|||
{{ props.row.item.subName }}
|
||||
</span>
|
||||
</div>
|
||||
<fetched-tags
|
||||
:item="props.row.item"
|
||||
:max-length="5"
|
||||
/>
|
||||
<FetchedTags :item="props.row.item" :max-length="5" />
|
||||
</QTd>
|
||||
<QTd key="quantity" :props="props">
|
||||
{{ props.row.quantity }}
|
||||
|
|
|
@ -160,7 +160,7 @@ async function confirmOrder() {
|
|||
<span class="text-uppercase subname">
|
||||
{{ row.item.subName }}
|
||||
</span>
|
||||
<fetched-tags :item="row.item" :max-length="5" />
|
||||
<FetchedTags :item="row.item" :max-length="5" />
|
||||
</div>
|
||||
<VnLv :label="t('item')" :value="String(row.item.id)" />
|
||||
<VnLv
|
||||
|
|
|
@ -77,7 +77,7 @@ const loadVolumes = async (rows) => {
|
|||
>
|
||||
<template #list-items>
|
||||
<div class="q-mb-sm">
|
||||
<fetched-tags :item="row.item" :max-length="5" />
|
||||
<FetchedTags :item="row.item" :max-length="5" />
|
||||
</div>
|
||||
<VnLv :label="t('item')" :value="row.item.id" />
|
||||
<VnLv :label="t('subName')">
|
||||
|
|
|
@ -12,6 +12,7 @@ import VnInput from 'components/common/VnInput.vue';
|
|||
import VnInputTime from 'components/common/VnInputTime.vue';
|
||||
import axios from 'axios';
|
||||
import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
|
||||
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
|
||||
import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
|
||||
import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
|
@ -19,6 +20,7 @@ import { useSession } from 'composables/useSession';
|
|||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
const { t } = useI18n();
|
||||
|
@ -26,10 +28,7 @@ const { validate } = useValidator();
|
|||
const quasar = useQuasar();
|
||||
const session = useSession();
|
||||
const { viewSummary } = useSummaryDialog();
|
||||
|
||||
onMounted(() => (stateStore.rightDrawer = true));
|
||||
onUnmounted(() => (stateStore.rightDrawer = false));
|
||||
|
||||
const visibleColumns = ref([]);
|
||||
const selectedRows = ref([]);
|
||||
const columns = computed(() => [
|
||||
{
|
||||
|
@ -83,14 +82,14 @@ const columns = computed(() => [
|
|||
},
|
||||
{
|
||||
name: 'started',
|
||||
label: t('Hour started'),
|
||||
label: t('hourStarted'),
|
||||
field: (row) => toHour(row.started),
|
||||
sortable: true,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
name: 'finished',
|
||||
label: t('Hour finished'),
|
||||
label: t('hourFinished'),
|
||||
field: (row) => toHour(row.finished),
|
||||
sortable: true,
|
||||
align: 'left',
|
||||
|
@ -109,7 +108,10 @@ const columns = computed(() => [
|
|||
align: 'right',
|
||||
},
|
||||
]);
|
||||
|
||||
const arrayData = useArrayData('EntryLatestBuys', {
|
||||
url: 'Buys/latestBuysFilter',
|
||||
order: ['itemFk DESC'],
|
||||
});
|
||||
const refreshKey = ref(0);
|
||||
const workers = ref([]);
|
||||
const agencyList = ref([]);
|
||||
|
@ -121,7 +123,7 @@ const updateRoute = async (route) => {
|
|||
return err;
|
||||
}
|
||||
};
|
||||
|
||||
const allColumnNames = ref([]);
|
||||
const confirmationDialog = ref(false);
|
||||
const startingDate = ref(null);
|
||||
|
||||
|
@ -174,6 +176,13 @@ const openTicketsDialog = (id) => {
|
|||
})
|
||||
.onOk(() => refreshKey.value++);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
stateStore.rightDrawer = true;
|
||||
allColumnNames.value = columns.value.map((col) => col.name);
|
||||
await arrayData.fetch({ append: false });
|
||||
});
|
||||
onUnmounted(() => (stateStore.rightDrawer = false));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -231,7 +240,16 @@ const openTicketsDialog = (id) => {
|
|||
<FetchData url="AgencyModes" @on-fetch="(data) => (agencyList = data)" auto-load />
|
||||
<FetchData url="Vehicles" @on-fetch="(data) => (vehicleList = data)" auto-load />
|
||||
<QPage class="column items-center">
|
||||
<VnSubToolbar class="justify-end">
|
||||
<VnSubToolbar>
|
||||
<template #st-data>
|
||||
<TableVisibleColumns
|
||||
class="LeftIcon"
|
||||
:all-columns="allColumnNames"
|
||||
table-code="routesList"
|
||||
labels-traductions-path="globals"
|
||||
@on-config-saved="visibleColumns = [...$event]"
|
||||
/>
|
||||
</template>
|
||||
<template #st-actions>
|
||||
<QBtn
|
||||
icon="vn:clone"
|
||||
|
@ -267,7 +285,7 @@ const openTicketsDialog = (id) => {
|
|||
:key="refreshKey"
|
||||
data-key="RouteList"
|
||||
url="Routes/filter"
|
||||
:order="['created DESC', 'id DESC']"
|
||||
:order="['created ASC', 'started ASC', 'id ASC']"
|
||||
:limit="20"
|
||||
auto-load
|
||||
>
|
||||
|
@ -281,9 +299,10 @@ const openTicketsDialog = (id) => {
|
|||
row-key="id"
|
||||
selection="multiple"
|
||||
:rows-per-page-options="[0]"
|
||||
:visible-columns="visibleColumns"
|
||||
hide-pagination
|
||||
:pagination="{ sortBy: 'ID', descending: true }"
|
||||
:no-data-label="t('globals.noResults')"
|
||||
style="max-height: 82vh"
|
||||
>
|
||||
<template #body-cell-worker="{ row }">
|
||||
<QTd class="table-input-cell">
|
||||
|
@ -336,7 +355,7 @@ const openTicketsDialog = (id) => {
|
|||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-vehicle="{ row }">
|
||||
<QTd class="table-input-cell">
|
||||
<QTd class="table-input-cell small-column">
|
||||
<VnSelect
|
||||
:label="t('Vehicle')"
|
||||
v-model="row.vehicleFk"
|
||||
|
@ -353,7 +372,7 @@ const openTicketsDialog = (id) => {
|
|||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-date="{ row }">
|
||||
<QTd class="table-input-cell">
|
||||
<QTd class="table-input-cell small-column">
|
||||
<VnInputDate
|
||||
v-model="row.created"
|
||||
hide-bottom-space
|
||||
|
@ -378,10 +397,10 @@ const openTicketsDialog = (id) => {
|
|||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-started="{ row }">
|
||||
<QTd class="table-input-cell">
|
||||
<QTd class="table-input-cell small-column">
|
||||
<VnInputTime
|
||||
v-model="row.started"
|
||||
:label="t('Hour started')"
|
||||
:label="t('hourStarted')"
|
||||
:rules="validate('route.started')"
|
||||
:is-clearable="false"
|
||||
hide-bottom-space
|
||||
|
@ -391,11 +410,11 @@ const openTicketsDialog = (id) => {
|
|||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-finished="{ row }">
|
||||
<QTd class="table-input-cell">
|
||||
<QTd class="table-input-cell small-column">
|
||||
<VnInputTime
|
||||
v-model="row.finished"
|
||||
autofocus
|
||||
:label="t('Hour finished')"
|
||||
:label="t('hourFinished')"
|
||||
:rules="validate('route.finished')"
|
||||
:is-clearable="false"
|
||||
hide-bottom-space
|
||||
|
@ -405,7 +424,7 @@ const openTicketsDialog = (id) => {
|
|||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-isServed="props">
|
||||
<QTd>
|
||||
<QTd class="table-input-cell small-column">
|
||||
<QCheckbox v-model="props.value" disable>
|
||||
<QTooltip>
|
||||
{{
|
||||
|
@ -486,15 +505,18 @@ const openTicketsDialog = (id) => {
|
|||
.table-actions {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.lock-icon-cell {
|
||||
text-align: center;
|
||||
margin-left: -20%;
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
background-color: var(--vn-section-color);
|
||||
position: sticky;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
<i18n>
|
||||
en:
|
||||
newRoute: New Route
|
||||
hourStarted: Started hour
|
||||
hourFinished: Finished hour
|
||||
es:
|
||||
ID: ID
|
||||
Worker: Trabajador
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
<script setup>
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import LeftMenu from 'src/components/LeftMenu.vue';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
onMounted(() => (stateStore.leftDrawer = false));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -204,7 +204,7 @@ onMounted(async () => {
|
|||
|
||||
<QTd no-hover>
|
||||
<span>{{ buy.subName }}</span>
|
||||
<fetched-tags :item="buy" :max-length="5" />
|
||||
<FetchedTags :item="buy" :max-length="5" />
|
||||
</QTd>
|
||||
<QTd no-hover> {{ dashIfEmpty(buy.quantity) }}</QTd>
|
||||
<QTd no-hover> {{ dashIfEmpty(buy.price) }}</QTd>
|
||||
|
|
|
@ -82,6 +82,7 @@ const onFetchAbsences = (data) => {
|
|||
type: type.code,
|
||||
absenceId: absence.id,
|
||||
isFestive: false,
|
||||
isHoliday: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
@ -126,7 +126,7 @@ const handleEventSelected = (event, { year, month, day }) => {
|
|||
}
|
||||
|
||||
const date = new Date(year, month - 1, day);
|
||||
if (!event.absenceId) createEvent(date);
|
||||
if (!event?.absenceId) createEvent(date);
|
||||
else if (event.type == props.absenceType.code) deleteEvent(event, date);
|
||||
else editEvent(event);
|
||||
};
|
||||
|
@ -136,24 +136,31 @@ const getEventByTimestamp = ({ year, month, day }) => {
|
|||
return props.events[stamp] || null;
|
||||
};
|
||||
|
||||
const isFestive = (timestamp) => {
|
||||
const event = getEventByTimestamp(timestamp);
|
||||
if (!event) return false;
|
||||
|
||||
const { isFestive } = event;
|
||||
return isFestive;
|
||||
};
|
||||
const getEventAttrs = (timestamp) => {
|
||||
const event = getEventByTimestamp(timestamp);
|
||||
if (!event) return {};
|
||||
|
||||
const { name, color, isFestive } = event;
|
||||
const { name, color, isFestive, type } = event;
|
||||
|
||||
// Atributos a asignar a cada slot que representa un evento en el calendario
|
||||
|
||||
const attrs = {
|
||||
title: name,
|
||||
style: color ? `background-color: ${color};` : '',
|
||||
style: color ? `background-color: ${color};` : ``,
|
||||
label: timestamp.day,
|
||||
};
|
||||
|
||||
if (isFestive) {
|
||||
attrs.class = '--festive';
|
||||
attrs.label = event.absenceId ? timestamp.day : '';
|
||||
}
|
||||
attrs.label = event.absenceId ?? timestamp.day;
|
||||
} else attrs.class = `--${type}`;
|
||||
|
||||
return attrs;
|
||||
};
|
||||
|
@ -162,7 +169,6 @@ const isToday = (timestamp) => {
|
|||
const { year, month, day } = timestamp;
|
||||
return todayTimestamp.value === new Date(year, month - 1, day).getTime();
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
updateSelectedDate(_year.value);
|
||||
});
|
||||
|
@ -203,7 +209,6 @@ watch(_year, (newValue) => {
|
|||
<template #day="{ scope: { timestamp } }">
|
||||
<!-- Este slot representa cada día del calendario y muestra un botón representando el correspondiente evento -->
|
||||
<QBtn
|
||||
v-if="getEventByTimestamp(timestamp)"
|
||||
v-bind="{ ...getEventAttrs(timestamp) }"
|
||||
@click="
|
||||
handleEventSelected(getEventByTimestamp(timestamp), timestamp)
|
||||
|
@ -223,6 +228,11 @@ watch(_year, (newValue) => {
|
|||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.q-calendar-month__day:has(.q-calendar-month__day--content):has(.q-btn.--festive)
|
||||
.q-calendar-month__day--label__wrapper
|
||||
button {
|
||||
color: transparent;
|
||||
}
|
||||
.calendar-event {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
@ -231,14 +241,19 @@ watch(_year, (newValue) => {
|
|||
font-size: 13px;
|
||||
line-height: 1.715em;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
|
||||
&.--today {
|
||||
border: 2px solid $info;
|
||||
}
|
||||
|
||||
&.--festive {
|
||||
border: 2px solid $negative;
|
||||
color: $negative;
|
||||
}
|
||||
|
||||
&.--holiday {
|
||||
& > span:nth-child(2) .block {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
@ -35,7 +35,7 @@ const searchBarDataKeys = {
|
|||
base-url="Zones"
|
||||
:descriptor="ZoneDescriptor"
|
||||
searchbar-data-key="ZoneList"
|
||||
searchbar-url="Zones/filter"
|
||||
searchbar-url="Zones"
|
||||
searchbar-label="Search zones"
|
||||
searchbar-info="You can search by zone reference"
|
||||
/>
|
||||
|
|
|
@ -6,8 +6,6 @@ import { toCurrency } from 'src/filters';
|
|||
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';
|
||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||
import ZoneFilterPanel from './ZoneFilterPanel.vue';
|
||||
|
||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||
import { toTimeFormat } from 'src/filters/date';
|
||||
|
@ -71,35 +69,6 @@ const columns = computed(() => [
|
|||
},
|
||||
]);
|
||||
|
||||
const exprBuilder = (param, value) => {
|
||||
switch (param) {
|
||||
case 'name':
|
||||
return {
|
||||
name: { like: `%${value}%` },
|
||||
};
|
||||
case 'code':
|
||||
return {
|
||||
code: { like: `%${value}%` },
|
||||
};
|
||||
case 'agencyModeFk':
|
||||
return {
|
||||
agencyModeFk: value,
|
||||
};
|
||||
case 'search':
|
||||
if (value) {
|
||||
if (!isNaN(value)) {
|
||||
return { id: value };
|
||||
} else {
|
||||
return {
|
||||
name: {
|
||||
like: `%${value}%`,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
async function clone(id) {
|
||||
const { data } = await axios.post(`Zones/${id}/clone`);
|
||||
notify(t('globals.dataSaved'), 'positive');
|
||||
|
@ -116,25 +85,6 @@ onMounted(() => (stateStore.rightDrawer = true));
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="stateStore.isHeaderMounted()">
|
||||
<Teleport to="#searchbar">
|
||||
<VnSearchbar
|
||||
data-key="ZoneList"
|
||||
url="Zones"
|
||||
:filter="{
|
||||
include: { relation: 'agencyMode', scope: { fields: ['name'] } },
|
||||
}"
|
||||
:expr-builder="exprBuilder"
|
||||
:label="t('list.searchZone')"
|
||||
:info="t('list.searchInfo')"
|
||||
/>
|
||||
</Teleport>
|
||||
</template>
|
||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
|
||||
</QScrollArea>
|
||||
</QDrawer>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<div class="vn-card-list">
|
||||
<VnPaginate
|
||||
|
|
|
@ -1,11 +1,72 @@
|
|||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import LeftMenu from 'src/components/LeftMenu.vue';
|
||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||
import ZoneFilterPanel from './ZoneFilterPanel.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const stateStore = useStateStore();
|
||||
const route = useRoute();
|
||||
|
||||
const exprBuilder = (param, value) => {
|
||||
switch (param) {
|
||||
case 'name':
|
||||
return {
|
||||
name: { like: `%${value}%` },
|
||||
};
|
||||
case 'code':
|
||||
return {
|
||||
code: { like: `%${value}%` },
|
||||
};
|
||||
case 'agencyModeFk':
|
||||
return {
|
||||
agencyModeFk: value,
|
||||
};
|
||||
case 'search':
|
||||
if (value) {
|
||||
if (!isNaN(value)) {
|
||||
return { id: value };
|
||||
} else {
|
||||
return {
|
||||
name: {
|
||||
like: `%${value}%`,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="stateStore.isHeaderMounted()">
|
||||
<Teleport to="#searchbar">
|
||||
<VnSearchbar
|
||||
data-key="ZoneList"
|
||||
url="Zones"
|
||||
:filter="{
|
||||
include: { relation: 'agencyMode', scope: { fields: ['name'] } },
|
||||
}"
|
||||
:expr-builder="exprBuilder"
|
||||
:label="t('list.searchZone')"
|
||||
:info="t('list.searchInfo')"
|
||||
custom-route-redirect-name="ZoneSummary"
|
||||
/>
|
||||
</Teleport>
|
||||
</template>
|
||||
<QDrawer
|
||||
v-if="route.name === 'ZoneList'"
|
||||
v-model="stateStore.rightDrawer"
|
||||
side="right"
|
||||
:width="256"
|
||||
show-if-above
|
||||
>
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
|
||||
</QScrollArea>
|
||||
</QDrawer>
|
||||
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<LeftMenu />
|
||||
|
|
|
@ -1,53 +1,85 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import ZoneFilterPanel from 'components/InvoiceOutNegativeFilter.vue';
|
||||
import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
|
||||
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 arrayData = ref(null);
|
||||
const rows = computed(() => arrayData.value.store.data);
|
||||
const weekdayStore = useWeekdayStore();
|
||||
|
||||
const details = ref([]);
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
label: t('Province'),
|
||||
//field: '',
|
||||
//name: '',
|
||||
label: t('upcomingDeliveries.province'),
|
||||
name: 'province',
|
||||
field: 'name',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: t('Closing'),
|
||||
//field: '',
|
||||
//name: '',
|
||||
label: t('upcomingDeliveries.closing'),
|
||||
name: 'closing',
|
||||
field: 'hour',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: t('Id'),
|
||||
//field: '',
|
||||
//name: '',
|
||||
label: t('upcomingDeliveries.id'),
|
||||
name: 'id',
|
||||
field: 'zoneFk',
|
||||
align: 'left',
|
||||
},
|
||||
]);
|
||||
|
||||
function getWeekDay(jsonDate) {
|
||||
const weekDay = new Date(jsonDate).getDay();
|
||||
const getWeekDayName = (date) => {
|
||||
const weekDay = new Date(date).getDay();
|
||||
return t(`weekdays.${weekdayStore.weekdays[weekDay].code}`);
|
||||
};
|
||||
|
||||
return this.days[weekDay].locale;
|
||||
}
|
||||
const getHeaderTitle = (date) => {
|
||||
return `${getWeekDayName(date)} - ${toDateFormat(date)}`;
|
||||
};
|
||||
|
||||
onMounted(() => weekdayStore.initStore());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<ZoneFilterPanel data-key="ZoneUpcoming" />
|
||||
</QScrollArea>
|
||||
</QDrawer>
|
||||
<FetchData
|
||||
url="Zones/getUpcomingDeliveries"
|
||||
@on-fetch="(data) => (details = data)"
|
||||
auto-load
|
||||
/>
|
||||
<VnSubToolbar />
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<span>
|
||||
{{ t(`${getWeekDay(/*detail.shipped*/)}`) }} -
|
||||
{{ t /*'detail.shipped'*/() }}
|
||||
</span>
|
||||
<QTable :columns="columns" :rows="rows" class="full-width q-mt-md"> </QTable>
|
||||
<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>
|
||||
|
|
|
@ -5,7 +5,7 @@ zone:
|
|||
zoneCreate: Create zone
|
||||
locations: Locations
|
||||
deliveryDays: Delivery days
|
||||
upcomingList: Upcoming deliveries
|
||||
upcomingDeliveries: Upcoming deliveries
|
||||
warehouses: Warehouses
|
||||
list:
|
||||
clone: Clone
|
||||
|
@ -64,3 +64,7 @@ warehouses:
|
|||
deleteSubtitle: Are you sure you want to continue?
|
||||
warehouse: Warehouse
|
||||
add: Add
|
||||
upcomingDeliveries:
|
||||
province: Province
|
||||
closing: Closing
|
||||
id: Id
|
||||
|
|
|
@ -5,7 +5,7 @@ zone:
|
|||
zoneCreate: Nueva zona
|
||||
locations: Localizaciones
|
||||
deliveryDays: Días de entrega
|
||||
upcomingList: Próximos repartos
|
||||
upcomingDeliveries: Próximos repartos
|
||||
warehouses: Almacenes
|
||||
list:
|
||||
clone: Clonar
|
||||
|
@ -66,3 +66,7 @@ warehouses:
|
|||
deleteSubtitle: ¿Seguro que quieres continuar?
|
||||
warehouse: Almacén
|
||||
add: Añadir
|
||||
upcomingDeliveries:
|
||||
province: Provincia
|
||||
closing: Cierre
|
||||
id: Id
|
||||
|
|
|
@ -11,7 +11,7 @@ export default {
|
|||
component: RouterView,
|
||||
redirect: { name: 'ZoneMain' },
|
||||
menus: {
|
||||
main: ['ZoneList', 'ZoneDeliveryDays', 'ZoneUpcomingList'],
|
||||
main: ['ZoneList', 'ZoneDeliveryDays', 'ZoneUpcomingDeliveries'],
|
||||
card: ['ZoneBasicData', 'ZoneWarehouses', 'ZoneHistory', 'ZoneLocations'],
|
||||
},
|
||||
children: [
|
||||
|
@ -57,6 +57,24 @@ export default {
|
|||
},
|
||||
component: () => import('src/pages/Zone/ZoneCreate.vue'),
|
||||
},
|
||||
// {
|
||||
// path: 'counter',
|
||||
// name: 'ZoneCounter',
|
||||
// meta: {
|
||||
// title: 'zoneCounter',
|
||||
// icon: 'add_circle',
|
||||
// },
|
||||
// component: () => import('src/pages/Zone/ZoneCounter.vue'),
|
||||
// },
|
||||
{
|
||||
name: 'ZoneUpcomingDeliveries',
|
||||
path: 'upcoming-deliveries',
|
||||
meta: {
|
||||
title: 'upcomingDeliveries',
|
||||
icon: 'vn:calendar',
|
||||
},
|
||||
component: () => import('src/pages/Zone/ZoneUpcoming.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
Loading…
Reference in New Issue