From 022ef2428927a12b57c58430eb7fb7f7c76b8952 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Mon, 26 Feb 2024 07:53:52 -0300
Subject: [PATCH] Refactor roadmaps stops with crud model

---
 src/pages/Route/Roadmap/RoadmapStops.vue | 224 ++++++++++-------------
 1 file changed, 95 insertions(+), 129 deletions(-)

diff --git a/src/pages/Route/Roadmap/RoadmapStops.vue b/src/pages/Route/Roadmap/RoadmapStops.vue
index 5aba86062..6dc21563f 100644
--- a/src/pages/Route/Roadmap/RoadmapStops.vue
+++ b/src/pages/Route/Roadmap/RoadmapStops.vue
@@ -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"
+                                :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')" />
+                        </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>