Modulo de rutas #195
|
@ -3,79 +3,41 @@ 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 { onMounted, ref } from 'vue';
|
||||
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';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import CrudModel from 'components/CrudModel.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const stateStore = useStateStore();
|
||||
|
||||
const refreshKey = ref(0);
|
||||
const expeditionList = ref([]);
|
||||
const warehouseList = ref([]);
|
||||
const roadmapStopsCrudRef = ref(null);
|
||||
|
||||
const stopList = computed(() => expeditionList.value.filter((item) => !item.deleted));
|
||||
const defaultStop = ref({
|
||||
roadmapFk: Number(route.params?.id) || 0,
|
||||
eta: new Date().toISOString(),
|
||||
});
|
||||
|
||||
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);
|
||||
const updateDefaultStop = (data) => {
|
||||
const eta = new Date(data.etd);
|
||||
eta.setDate(eta.getDate() + 1);
|
||||
expeditionList.value.push({
|
||||
id: expeditionList.value.length * -1,
|
||||
roadmapFk: Number(route.params?.id) || 0,
|
||||
eta: eta.toISOString(),
|
||||
});
|
||||
defaultStop.value.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 ++;
|
||||
};
|
||||
onMounted(() => {
|
||||
if (roadmapStopsCrudRef.value) roadmapStopsCrudRef.value.reload();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<VnSubToolbar />
|
||||
<FetchData
|
||||
:key="refreshKey"
|
||||
url="ExpeditionTrucks"
|
||||
:url="`Roadmaps/${route.params?.id}`"
|
||||
auto-load
|
||||
:filter="{ where: { roadmapFk: route.params?.id } }"
|
||||
sort-by="eta"
|
||||
limit="30"
|
||||
@on-fetch="(data) => (expeditionList = data)"
|
||||
:filter="{ fields: ['etd'] }"
|
||||
@on-fetch="updateDefaultStop"
|
||||
/>
|
||||
<FetchData
|
||||
url="Warehouses"
|
||||
|
@ -85,80 +47,82 @@ const onSave = async () => {
|
|||
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>
|
||||
<div class="q-pa-lg">
|
||||
<CrudModel
|
||||
ref="roadmapStopsCrudRef"
|
||||
data-key="ExpeditionTrucks"
|
||||
url="ExpeditionTrucks"
|
||||
model="ExpeditionTrucks"
|
||||
:filter="{ where: { roadmapFk: route.params?.id } }"
|
||||
:default-remove="false"
|
||||
:data-required="defaultStop"
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QCard class="q-pa-md">
|
||||
<VnRow
|
||||
v-for="(row, index) in rows"
|
||||
:key="index"
|
||||
class="row q-gutter-md q-mb-md"
|
||||
>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
v-model.number="row.warehouseFk"
|
||||
jsegarra marked this conversation as resolved
Outdated
|
||||
:label="t('Warehouse')"
|
||||
:options="warehouseList"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
hide-selected
|
||||
:input-debounce="0"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInputDate v-model="row.eta" :label="t('ETA date')" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInputTime v-model="row.eta" :label="t('ETA date')" />
|
||||
jsegarra marked this conversation as resolved
jsegarra
commented
Tenemos definida una traducción para ETA hour pero no la estamos usando Tenemos definida una traducción para ETA hour pero no la estamos usando
kmartinez
commented
Corregido Corregido 7974725da0.
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="row.description"
|
||||
:label="t('Description')"
|
||||
type="textarea"
|
||||
:rows="1"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-1 row justify-center items-center">
|
||||
<QIcon
|
||||
name="delete"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
@click="roadmapStopsCrudRef.remove([row])"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Remove stop') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<QIcon
|
||||
name="add"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
@click="roadmapStopsCrudRef.insert()"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Add stop') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</VnRow>
|
||||
</QCard>
|
||||
</template>
|
||||
</CrudModel>
|
||||
</div>
|
||||
</template>
|
||||
<i18n>
|
||||
es:
|
||||
|
@ -166,4 +130,6 @@ es:
|
|||
ETA date: Fecha ETA
|
||||
ETA hour: Hora ETA
|
||||
Description: Descripción
|
||||
Remove stop: Eliminar parada
|
||||
Add stop: Añadir parada
|
||||
</i18n>
|
||||
|
|
Loading…
Reference in New Issue
Hecho en falta el autofocus cuando es nuevo registro
Corregido
7974725da0
.Uff...un ejemplo de, mala practica, tener código duplicado. Has añadido autofocus 1 vez pero ese formulario lo tenemos duplicado.
Lo del formulario duplicado lo comentamos en post-daily, pero entiendo que no te ha dado tiempo a todo
Aca se crea un nuevo componente para el formulario
1ab9bfefed
.