94 lines
3.0 KiB
Vue
94 lines
3.0 KiB
Vue
<script setup>
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRoute } from 'vue-router';
|
|
import FetchData from 'components/FetchData.vue';
|
|
import { ref } from 'vue';
|
|
import CrudModel from 'components/CrudModel.vue';
|
|
import RoadmapAddStopForm from 'pages/Route/Roadmap/RoadmapAddStopForm.vue';
|
|
|
|
const { t } = useI18n();
|
|
const route = useRoute();
|
|
const roadmapStopsCrudRef = ref(null);
|
|
|
|
const defaultStop = ref({
|
|
roadmapFk: Number(route.params?.id) || 0,
|
|
eta: new Date().toISOString(),
|
|
});
|
|
|
|
const updateDefaultStop = (data) => {
|
|
const eta = new Date(data.etd);
|
|
eta.setDate(eta.getDate() + 1);
|
|
defaultStop.value.eta = eta.toISOString();
|
|
};
|
|
</script>
|
|
<template>
|
|
<FetchData
|
|
:url="`Roadmaps/${route.params?.id}`"
|
|
auto-load
|
|
:filter="{ fields: ['etd'] }"
|
|
@on-fetch="updateDefaultStop"
|
|
/>
|
|
<div class="q-pa-lg">
|
|
<CrudModel
|
|
ref="roadmapStopsCrudRef"
|
|
data-key="RoadmapStops"
|
|
url="RoadmapStops"
|
|
model="RoadmapStops"
|
|
:filter="{ where: { roadmapFk: route.params?.id } }"
|
|
:default-remove="false"
|
|
:data-required="defaultStop"
|
|
auto-load
|
|
>
|
|
<template #body="{ rows }">
|
|
<QCard class="q-pa-md">
|
|
<QCardSection
|
|
v-for="(row, index) in rows"
|
|
:key="index"
|
|
class="row no-wrap"
|
|
>
|
|
<RoadmapAddStopForm
|
|
:roadmap-fk="route.params?.id"
|
|
:form-data="row"
|
|
/>
|
|
<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>
|
|
</QCardSection>
|
|
<QCardSection>
|
|
<QIcon
|
|
name="add"
|
|
size="sm"
|
|
class="cursor-pointer"
|
|
color="primary"
|
|
@click="roadmapStopsCrudRef.insert()"
|
|
>
|
|
<QTooltip>
|
|
{{ t('Add stop') }}
|
|
</QTooltip>
|
|
</QIcon>
|
|
</QCardSection>
|
|
</QCard>
|
|
</template>
|
|
</CrudModel>
|
|
</div>
|
|
</template>
|
|
<i18n>
|
|
es:
|
|
Address: Consignatario
|
|
ETA date: Fecha ETA
|
|
ETA hour: Hora ETA
|
|
Description: Descripción
|
|
Remove stop: Eliminar parada
|
|
Add stop: Añadir parada
|
|
</i18n>
|