forked from verdnatura/salix-front
Add roadmap stops
This commit is contained in:
Kevin Martinez
parent
819e25de38
commit
185de3c931
|
|
@ -939,6 +939,7 @@ export default {
|
|||
roadmap: 'Roadmap',
|
||||
summary: 'Summary',
|
||||
basicData: 'Basic Data',
|
||||
stops: 'Stops'
|
||||
},
|
||||
},
|
||||
roadmap: {
|
||||
|
|
@ -946,6 +947,7 @@ export default {
|
|||
roadmap: 'Roadmap',
|
||||
summary: 'Summary',
|
||||
basicData: 'Basic Data',
|
||||
stops: 'Stops'
|
||||
},
|
||||
},
|
||||
route: {
|
||||
|
|
|
|||
|
|
@ -939,6 +939,7 @@ export default {
|
|||
roadmap: 'Troncales',
|
||||
summary: 'Resumen',
|
||||
basicData: 'Datos básicos',
|
||||
stops: 'Paradas'
|
||||
},
|
||||
},
|
||||
roadmap: {
|
||||
|
|
@ -946,6 +947,7 @@ export default {
|
|||
roadmap: 'Troncales',
|
||||
summary: 'Resumen',
|
||||
basicData: 'Datos básicos',
|
||||
stops: 'Paradas'
|
||||
},
|
||||
},
|
||||
route: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,169 @@
|
|||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
|
||||
import VnInputDate from 'components/common/VnInputDate.vue';
|
||||
import VnInputTime from 'components/common/VnInputTime.vue';
|
||||
import VnInput from 'components/common/VnInput.vue';
|
||||
import axios from 'axios';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const stateStore = useStateStore();
|
||||
|
||||
const refreshKey = ref(0);
|
||||
const expeditionList = ref([]);
|
||||
const warehouseList = ref([]);
|
||||
|
||||
const stopList = computed(() => expeditionList.value.filter((item) => !item.deleted));
|
||||
|
||||
const addStop = async () => {
|
||||
const response = await axios.get(`Roadmaps/${route.params?.id}`, {
|
||||
params: {
|
||||
filter: JSON.stringify({
|
||||
fields: ['etd'],
|
||||
}),
|
||||
},
|
||||
});
|
||||
const eta = new Date(response.data.etd);
|
||||
eta.setDate(eta.getDate() + 1);
|
||||
expeditionList.value.push({
|
||||
id: expeditionList.value.length * -1,
|
||||
roadmapFk: Number(route.params?.id) || 0,
|
||||
eta: eta.toISOString(),
|
||||
});
|
||||
};
|
||||
|
||||
const updateStop = (stop) => {
|
||||
if (stop.id > 0) {
|
||||
stop.updated = true;
|
||||
}
|
||||
};
|
||||
|
||||
const deleteStop = (stop) => {
|
||||
if (stop.id > 0) {
|
||||
stop.deleted = true;
|
||||
}
|
||||
};
|
||||
|
||||
const onSave = async () => {
|
||||
const body = {
|
||||
creates: expeditionList.value
|
||||
.filter((item) => item.id < 0)
|
||||
.map(({ id, ...data }) => data),
|
||||
deletes: expeditionList.value
|
||||
.filter((item) => item.deleted)
|
||||
.map((item) => item.id),
|
||||
updates: expeditionList.value
|
||||
.filter((item) => item.updated)
|
||||
.map(({ id, updated, ...data }) => ({ data, where: { id } })),
|
||||
};
|
||||
await axios.post(`ExpeditionTrucks/crud`, body);
|
||||
refreshKey.value ++;
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<VnSubToolbar />
|
||||
<FetchData
|
||||
:key="refreshKey"
|
||||
url="ExpeditionTrucks"
|
||||
auto-load
|
||||
:filter="{ where: { roadmapFk: route.params?.id } }"
|
||||
sort-by="eta"
|
||||
limit="30"
|
||||
@on-fetch="(data) => (expeditionList = data)"
|
||||
/>
|
||||
<FetchData
|
||||
url="Warehouses"
|
||||
auto-load
|
||||
:filter="{ fields: ['id', 'name'] }"
|
||||
sort-by="name"
|
||||
limit="30"
|
||||
@on-fetch="(data) => (warehouseList = data)"
|
||||
/>
|
||||
|
||||
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
|
||||
<div class="q-gutter-x-sm">
|
||||
<QBtn
|
||||
:label="t('globals.save')"
|
||||
color="primary"
|
||||
icon="save"
|
||||
@click="onSave"
|
||||
:title="t('globals.save')"
|
||||
/>
|
||||
</div>
|
||||
</Teleport>
|
||||
<QForm class="q-pa-lg">
|
||||
<QCard class="q-pa-md">
|
||||
<div v-for="stop in stopList" :key="stop.id" class="row q-py-md">
|
||||
<div class="col q-pr-lg">
|
||||
<VnSelectFilter
|
||||
v-model="stop.warehouseFk"
|
||||
:label="t('Warehouse')"
|
||||
:options="warehouseList"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
hide-selected
|
||||
:input-debounce="0"
|
||||
@update:model-value="updateStop(stop)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col q-pr-lg">
|
||||
<VnInputDate
|
||||
v-model="stop.eta"
|
||||
:label="t('ETA date')"
|
||||
@update:model-value="updateStop(stop)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col q-pr-lg">
|
||||
<VnInputTime
|
||||
v-model="stop.eta"
|
||||
:label="t('ETA date')"
|
||||
@update:model-value="updateStop(stop)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col q-pr-lg">
|
||||
<VnInput
|
||||
v-model="stop.description"
|
||||
:label="t('Description')"
|
||||
type="textarea"
|
||||
:rows="1"
|
||||
@update:model-value="updateStop(stop)"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-center items-center">
|
||||
<QIcon
|
||||
name="delete"
|
||||
size="sm"
|
||||
color="primary"
|
||||
class="cursor-pointer"
|
||||
@click="deleteStop(stop)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-pt-lg">
|
||||
<QIcon
|
||||
name="add_circle"
|
||||
size="sm"
|
||||
color="primary"
|
||||
class="cursor-pointer"
|
||||
@click="addStop"
|
||||
/>
|
||||
</div>
|
||||
</QCard>
|
||||
</QForm>
|
||||
</template>
|
||||
<i18n>
|
||||
es:
|
||||
Warehouse: Almacén
|
||||
ETA date: Fecha ETA
|
||||
ETA hour: Hora ETA
|
||||
Description: Descripción
|
||||
</i18n>
|
||||
|
|
@ -10,7 +10,7 @@ export default {
|
|||
component: RouterView,
|
||||
redirect: { name: 'RouteMain' },
|
||||
menus: {
|
||||
card: ['RoadmapBasicData'],
|
||||
card: ['RoadmapBasicData', 'RoadmapStops'],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
|
@ -37,6 +37,15 @@ export default {
|
|||
},
|
||||
component: () => import('pages/Route/Roadmap/RoadmapBasicData.vue'),
|
||||
},
|
||||
{
|
||||
name: 'RoadmapStops',
|
||||
path: 'stops',
|
||||
meta: {
|
||||
title: 'stops',
|
||||
icon: 'vn:lines',
|
||||
},
|
||||
component: () => import('pages/Route/Roadmap/RoadmapStops.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue