forked from verdnatura/salix-front
Refactor roadmaps stops with crud model
This commit is contained in:
Kevin Martinez
parent
929a094132
commit
022ef24289
|
|
@ -3,79 +3,41 @@ import { useI18n } from 'vue-i18n';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||||
import FetchData from 'components/FetchData.vue';
|
import FetchData from 'components/FetchData.vue';
|
||||||
import { computed, ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
import { useStateStore } from 'stores/useStateStore';
|
|
||||||
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
|
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
|
||||||
import VnInputDate from 'components/common/VnInputDate.vue';
|
import VnInputDate from 'components/common/VnInputDate.vue';
|
||||||
import VnInputTime from 'components/common/VnInputTime.vue';
|
import VnInputTime from 'components/common/VnInputTime.vue';
|
||||||
import VnInput from 'components/common/VnInput.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 { t } = useI18n();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const stateStore = useStateStore();
|
|
||||||
|
|
||||||
const refreshKey = ref(0);
|
|
||||||
const expeditionList = ref([]);
|
|
||||||
const warehouseList = 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 updateDefaultStop = (data) => {
|
||||||
const response = await axios.get(`Roadmaps/${route.params?.id}`, {
|
const eta = new Date(data.etd);
|
||||||
params: {
|
|
||||||
filter: JSON.stringify({
|
|
||||||
fields: ['etd'],
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const eta = new Date(response.data.etd);
|
|
||||||
eta.setDate(eta.getDate() + 1);
|
eta.setDate(eta.getDate() + 1);
|
||||||
expeditionList.value.push({
|
defaultStop.value.eta = eta.toISOString();
|
||||||
id: expeditionList.value.length * -1,
|
|
||||||
roadmapFk: Number(route.params?.id) || 0,
|
|
||||||
eta: eta.toISOString(),
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const updateStop = (stop) => {
|
onMounted(() => {
|
||||||
if (stop.id > 0) {
|
if (roadmapStopsCrudRef.value) roadmapStopsCrudRef.value.reload();
|
||||||
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>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<VnSubToolbar />
|
<VnSubToolbar />
|
||||||
<FetchData
|
<FetchData
|
||||||
:key="refreshKey"
|
:url="`Roadmaps/${route.params?.id}`"
|
||||||
url="ExpeditionTrucks"
|
|
||||||
auto-load
|
auto-load
|
||||||
:filter="{ where: { roadmapFk: route.params?.id } }"
|
:filter="{ fields: ['etd'] }"
|
||||||
sort-by="eta"
|
@on-fetch="updateDefaultStop"
|
||||||
limit="30"
|
|
||||||
@on-fetch="(data) => (expeditionList = data)"
|
|
||||||
/>
|
/>
|
||||||
<FetchData
|
<FetchData
|
||||||
url="Warehouses"
|
url="Warehouses"
|
||||||
|
|
@ -85,80 +47,82 @@ const onSave = async () => {
|
||||||
limit="30"
|
limit="30"
|
||||||
@on-fetch="(data) => (warehouseList = data)"
|
@on-fetch="(data) => (warehouseList = data)"
|
||||||
/>
|
/>
|
||||||
|
<div class="q-pa-lg">
|
||||||
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
|
<CrudModel
|
||||||
<div class="q-gutter-x-sm">
|
ref="roadmapStopsCrudRef"
|
||||||
<QBtn
|
data-key="ExpeditionTrucks"
|
||||||
:label="t('globals.save')"
|
url="ExpeditionTrucks"
|
||||||
color="primary"
|
model="ExpeditionTrucks"
|
||||||
icon="save"
|
:filter="{ where: { roadmapFk: route.params?.id } }"
|
||||||
@click="onSave"
|
:default-remove="false"
|
||||||
:title="t('globals.save')"
|
:data-required="defaultStop"
|
||||||
/>
|
>
|
||||||
</div>
|
<template #body="{ rows }">
|
||||||
</Teleport>
|
<QCard class="q-pa-md">
|
||||||
<QForm class="q-pa-lg">
|
<VnRow
|
||||||
<QCard class="q-pa-md">
|
v-for="(row, index) in rows"
|
||||||
<div v-for="stop in stopList" :key="stop.id" class="row q-py-md">
|
:key="index"
|
||||||
<div class="col q-pr-lg">
|
class="row q-gutter-md q-mb-md"
|
||||||
<VnSelectFilter
|
>
|
||||||
v-model="stop.warehouseFk"
|
<div class="col">
|
||||||
:label="t('Warehouse')"
|
<VnSelectFilter
|
||||||
:options="warehouseList"
|
v-model.number="row.warehouseFk"
|
||||||
option-value="id"
|
:label="t('Warehouse')"
|
||||||
option-label="name"
|
:options="warehouseList"
|
||||||
emit-value
|
option-value="id"
|
||||||
map-options
|
option-label="name"
|
||||||
use-input
|
emit-value
|
||||||
hide-selected
|
map-options
|
||||||
:input-debounce="0"
|
use-input
|
||||||
@update:model-value="updateStop(stop)"
|
hide-selected
|
||||||
/>
|
:input-debounce="0"
|
||||||
</div>
|
/>
|
||||||
<div class="col q-pr-lg">
|
</div>
|
||||||
<VnInputDate
|
<div class="col">
|
||||||
v-model="stop.eta"
|
<VnInputDate v-model="row.eta" :label="t('ETA date')" />
|
||||||
:label="t('ETA date')"
|
</div>
|
||||||
@update:model-value="updateStop(stop)"
|
<div class="col">
|
||||||
/>
|
<VnInputTime v-model="row.eta" :label="t('ETA date')" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col q-pr-lg">
|
<div class="col">
|
||||||
<VnInputTime
|
<VnInput
|
||||||
v-model="stop.eta"
|
v-model="row.description"
|
||||||
:label="t('ETA date')"
|
:label="t('Description')"
|
||||||
@update:model-value="updateStop(stop)"
|
type="textarea"
|
||||||
/>
|
:rows="1"
|
||||||
</div>
|
/>
|
||||||
<div class="col q-pr-lg">
|
</div>
|
||||||
<VnInput
|
<div class="col-1 row justify-center items-center">
|
||||||
v-model="stop.description"
|
<QIcon
|
||||||
:label="t('Description')"
|
name="delete"
|
||||||
type="textarea"
|
size="sm"
|
||||||
:rows="1"
|
class="cursor-pointer"
|
||||||
@update:model-value="updateStop(stop)"
|
color="primary"
|
||||||
/>
|
@click="roadmapStopsCrudRef.remove([row])"
|
||||||
</div>
|
>
|
||||||
<div class="flex justify-center items-center">
|
<QTooltip>
|
||||||
<QIcon
|
{{ t('Remove stop') }}
|
||||||
name="delete"
|
</QTooltip>
|
||||||
size="sm"
|
</QIcon>
|
||||||
color="primary"
|
</div>
|
||||||
class="cursor-pointer"
|
</VnRow>
|
||||||
@click="deleteStop(stop)"
|
<VnRow>
|
||||||
/>
|
<QIcon
|
||||||
</div>
|
name="add"
|
||||||
</div>
|
size="sm"
|
||||||
<div class="q-pt-lg">
|
class="cursor-pointer"
|
||||||
<QIcon
|
color="primary"
|
||||||
name="add_circle"
|
@click="roadmapStopsCrudRef.insert()"
|
||||||
size="sm"
|
>
|
||||||
color="primary"
|
<QTooltip>
|
||||||
class="cursor-pointer"
|
{{ t('Add stop') }}
|
||||||
@click="addStop"
|
</QTooltip>
|
||||||
/>
|
</QIcon>
|
||||||
</div>
|
</VnRow>
|
||||||
</QCard>
|
</QCard>
|
||||||
</QForm>
|
</template>
|
||||||
|
</CrudModel>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<i18n>
|
<i18n>
|
||||||
es:
|
es:
|
||||||
|
|
@ -166,4 +130,6 @@ es:
|
||||||
ETA date: Fecha ETA
|
ETA date: Fecha ETA
|
||||||
ETA hour: Hora ETA
|
ETA hour: Hora ETA
|
||||||
Description: Descripción
|
Description: Descripción
|
||||||
|
Remove stop: Eliminar parada
|
||||||
|
Add stop: Añadir parada
|
||||||
</i18n>
|
</i18n>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue