Refactor roadmaps stops with crud model

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 { onMounted, 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';
+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({
-
-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(),
+    eta: new Date().toISOString(),
-    });
+});
+
+const updateDefaultStop = (data) => {
+    const eta = new Date(data.etd);
+    eta.setDate(eta.getDate() + 1);
+    defaultStop.value.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>
 <template>
     <VnSubToolbar />
     <FetchData
-        :key="refreshKey"
+        :url="`Roadmaps/${route.params?.id}`"
-        url="ExpeditionTrucks"
         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
         url="Warehouses"
@@ -85,24 +47,26 @@ const onSave = async () => {
         limit="30"
         @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>
-    <QForm class="q-pa-lg">
                 <QCard class="q-pa-md">
-            <div v-for="stop in stopList" :key="stop.id" class="row q-py-md">
+                    <VnRow
-                <div class="col q-pr-lg">
+                        v-for="(row, index) in rows"
+                        :key="index"
+                        class="row q-gutter-md q-mb-md"
+                    >
+                        <div class="col">
                             <VnSelectFilter
-                        v-model="stop.warehouseFk"
+                                v-model.number="row.warehouseFk"
                                 :label="t('Warehouse')"
                                 :options="warehouseList"
                                 option-value="id"
@@ -112,53 +76,53 @@ const onSave = async () => {
                                 use-input
                                 hide-selected
                                 :input-debounce="0"
-                        @update:model-value="updateStop(stop)"
                             />
                         </div>
-                <div class="col q-pr-lg">
+                        <div class="col">
-                    <VnInputDate
+                            <VnInputDate v-model="row.eta" :label="t('ETA date')" />
-                        v-model="stop.eta"
-                        :label="t('ETA date')"
-                        @update:model-value="updateStop(stop)"
-                    />
                         </div>
-                <div class="col q-pr-lg">
+                        <div class="col">
-                    <VnInputTime
+                            <VnInputTime v-model="row.eta" :label="t('ETA date')" />
-                        v-model="stop.eta"
-                        :label="t('ETA date')"
-                        @update:model-value="updateStop(stop)"
-                    />
                         </div>
-                <div class="col q-pr-lg">
+                        <div class="col">
                             <VnInput
-                        v-model="stop.description"
+                                v-model="row.description"
                                 :label="t('Description')"
                                 type="textarea"
                                 :rows="1"
-                        @update:model-value="updateStop(stop)"
                             />
                         </div>
-                <div class="flex justify-center items-center">
+                        <div class="col-1 row justify-center items-center">
                             <QIcon
                                 name="delete"
                                 size="sm"
-                        color="primary"
                                 class="cursor-pointer"
-                        @click="deleteStop(stop)"
+                                color="primary"
-                    />
+                                @click="roadmapStopsCrudRef.remove([row])"
+                            >
+                                <QTooltip>
+                                    {{ t('Remove stop') }}
+                                </QTooltip>
+                            </QIcon>
                         </div>
-            </div>
+                    </VnRow>
-            <div class="q-pt-lg">
+                    <VnRow>
                         <QIcon
-                    name="add_circle"
+                            name="add"
                             size="sm"
-                    color="primary"
                             class="cursor-pointer"
-                    @click="addStop"
+                            color="primary"
-                />
+                            @click="roadmapStopsCrudRef.insert()"
-            </div>
+                        >
+                            <QTooltip>
+                                {{ t('Add stop') }}
+                            </QTooltip>
+                        </QIcon>
+                    </VnRow>
                 </QCard>
-    </QForm>
+            </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>