Modulo de rutas #195

Merged
jsegarra merged 49 commits from :feature/route-module into dev 2024-03-14 12:44:43 +00:00
1 changed files with 95 additions and 129 deletions
Showing only changes of commit 022ef24289 - Show all commits

View File

@ -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

Hecho en falta el autofocus cuando es nuevo registro

Hecho en falta el autofocus cuando es nuevo registro

Corregido 7974725da0.

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

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.

Aca se crea un nuevo componente para el formulario 1ab9bfefed.
: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
Review

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
Review

Corregido 7974725da0.

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>