Centralize roadmap add stop form

src/pages/Route/Roadmap/RoadmapAddStopDialog.vue

@@ -4,10 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { reactive, ref } from 'vue';
 import axios from 'axios';
 import FetchData from 'components/FetchData.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
-import VnInputTime from 'components/common/VnInputTime.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
-import VnInput from 'components/common/VnInput.vue';
+import RoadmapAddStopForm from 'pages/Route/Roadmap/RoadmapAddStopForm.vue';
 
 const emit = defineEmits([...useDialogPluginComponent.emits]);
 const { dialogRef, onDialogHide } = useDialogPluginComponent();
@@ -21,7 +18,6 @@ const props = defineProps({
 });
 
 const isLoading = ref(false);
-const warehouseList = ref([]);
 const roadmapStopForm = reactive({
     roadmapFk: Number(props.roadmapFk) || 0,
     warehouseFk: null,
@@ -53,50 +49,17 @@ const onSave = async () => {
         :filter="{ fields: ['etd'] }"
         @on-fetch="updateDefaultStop"
     />
-    <FetchData
-        url="Warehouses"
-        auto-load
-        :filter="{ fields: ['id', 'name'] }"
-        sort-by="name"
-        limit="30"
-        @on-fetch="(data) => (warehouseList = data)"
-    />
     <QDialog ref="dialogRef" @hide="onDialogHide">
         <QCard class="q-pa-lg">
             <QCardSection class="row absolute absolute-top z-fullscreen">
                 <QSpace />
                 <QBtn icon="close" flat round dense v-close-popup />
             </QCardSection>
-            <QCardSection class="card-section q-px-none">
-                <VnSelectFilter
-                    v-model.number="roadmapStopForm.warehouseFk"
-                    :label="t('Warehouse')"
-                    :options="warehouseList"
-                    option-value="id"
-                    option-label="name"
-                    emit-value
-                    map-options
-                    use-input
-                    hide-selected
-                    :input-debounce="0"
-                />
-            </QCardSection>
-            <QCardSection class="card-section row q-px-none">
-                <div class="col">
-                    <VnInputDate v-model="roadmapStopForm.eta" :label="t('ETA date')" />
-                </div>
-                <div class="col">
-                    <VnInputTime v-model="roadmapStopForm.eta" :label="t('ETA time')" />
-                </div>
-            </QCardSection>
-            <QCardSection class="card-section q-px-none">
-                <VnInput
-                    v-model="roadmapStopForm.description"
-                    :label="t('Description')"
-                    type="textarea"
-                    :rows="1"
-                />
-            </QCardSection>
+            <RoadmapAddStopForm
+                :roadmap-fk="roadmapFk"
+                :form-data="roadmapStopForm"
+                layout="dialog"
+            />
             <QCardActions align="right">
                 <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
                 <QBtn

src/pages/Route/Roadmap/RoadmapAddStopForm.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FetchData from 'components/FetchData.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';
+
+const props = defineProps({
+    formData: {
+        type: Object,
+        default: () => ({}),
+    },
+    roadmapFk: {
+        type: [Number, String],
+        required: true,
+    },
+    layout: {
+        type: String,
+        default: 'row',
+    },
+});
+
+const { t } = useI18n();
+const warehouseList = ref([]);
+const form = computed(() => props.formData);
+const isDialog = computed(() => props.layout === 'dialog');
+</script>
+<template>
+    <FetchData
+        url="Warehouses"
+        auto-load
+        :filter="{ fields: ['id', 'name'] }"
+        sort-by="name"
+        limit="30"
+        @on-fetch="(data) => (warehouseList = data)"
+    />
+    <div :class="[isDialog ? 'column' : 'form-gap', 'full-width flex']">
+        <QCardSection class="flex-grow q-px-none flex-1">
+            <VnSelectFilter
+                v-model.number="form.warehouseFk"
+                class="full-width"
+                :label="t('Warehouse')"
+                :options="warehouseList"
+                option-value="id"
+                option-label="name"
+                emit-value
+                map-options
+                use-input
+                hide-selected
+                autofocus
+                :input-debounce="0"
+            />
+        </QCardSection>
+        <div :class="[!isDialog ? 'flex-2' : null, 'form-gap flex no-wrap']">
+            <QCardSection class="row q-px-none flex-1">
+                <VnInputDate
+                    v-model="form.eta"
+                    class="full-width"
+                    :label="t('ETA date')"
+                />
+            </QCardSection>
+            <QCardSection class="row q-px-none flex-1">
+                <VnInputTime
+                    v-model="form.eta"
+                    class="full-width"
+                    :label="t('ETA hour')"
+                />
+            </QCardSection>
+        </div>
+        <QCardSection class="q-px-none flex-1">
+            <VnInput
+                v-model="form.description"
+                class="full-width"
+                :label="t('Description')"
+                type="textarea"
+                :rows="1"
+            />
+        </QCardSection>
+    </div>
+</template>
+<style lang="scss" scoped>
+.form-gap {
+    gap: 16px;
+}
+
+.flex-1 {
+    flex: 1;
+}
+
+.flex-2 {
+    flex: 2;
+}
+</style>
+<i18n>
+es:
+    Warehouse: Almacén
+    ETA date: Fecha ETA
+    ETA hour: Hora ETA
+    Description: Descripción
+    Remove stop: Eliminar parada
+    Add stop: Añadir parada
+</i18n>

src/pages/Route/Roadmap/RoadmapStops.vue

@@ -4,16 +4,11 @@ import { useRoute } from 'vue-router';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import FetchData from 'components/FetchData.vue';
 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 VnRow from 'components/ui/VnRow.vue';
 import CrudModel from 'components/CrudModel.vue';
+import RoadmapAddStopForm from "pages/Route/Roadmap/RoadmapAddStopForm.vue";
 
 const { t } = useI18n();
 const route = useRoute();
-const warehouseList = ref([]);
 const roadmapStopsCrudRef = ref(null);
 
 const defaultStop = ref({
@@ -39,14 +34,6 @@ onMounted(() => {
         :filter="{ fields: ['etd'] }"
         @on-fetch="updateDefaultStop"
     />
-    <FetchData
-        url="Warehouses"
-        auto-load
-        :filter="{ fields: ['id', 'name'] }"
-        sort-by="name"
-        limit="30"
-        @on-fetch="(data) => (warehouseList = data)"
-    />
     <div class="q-pa-lg">
         <CrudModel
             ref="roadmapStopsCrudRef"
@@ -59,40 +46,12 @@ onMounted(() => {
         >
             <template #body="{ rows }">
                 <QCard class="q-pa-md">
-                    <VnRow
+                    <QCardSection
                         v-for="(row, index) in rows"
                         :key="index"
-                        class="row q-gutter-md q-mb-md"
+                        class="row no-wrap"
                     >
-                        <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
-                                autofocus
-                                :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 hour')" />
-                        </div>
-                        <div class="col">
-                            <VnInput
-                                v-model="row.description"
-                                :label="t('Description')"
-                                type="textarea"
-                                :rows="1"
-                            />
-                        </div>
+                        <RoadmapAddStopForm :roadmap-fk="route.params?.id" :form-data="row" />
                         <div class="col-1 row justify-center items-center">
                             <QIcon
                                 name="delete"
@@ -106,8 +65,8 @@ onMounted(() => {
                                 </QTooltip>
                             </QIcon>
                         </div>
-                    </VnRow>
-                    <VnRow>
+                    </QCardSection>
+                    <QCardSection>
                         <QIcon
                             name="add"
                             size="sm"
@@ -119,7 +78,7 @@ onMounted(() => {
                                 {{ t('Add stop') }}
                             </QTooltip>
                         </QIcon>
-                    </VnRow>
+                    </QCardSection>
                 </QCard>
             </template>
         </CrudModel>