Add roadmap stops

src/i18n/en/index.js

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

src/i18n/es/index.js

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

src/pages/Route/Roadmap/RoadmapStops.vue

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

src/router/modules/roadmap.js

@@ -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'),
+                },
             ],
         },
     ],