Add roadmap add stop dialog

src/pages/Route/Roadmap/RoadmapAddStopDialog.vue

@@ -0,0 +1,125 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+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';
+
+const emit = defineEmits([...useDialogPluginComponent.emits]);
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+
+const { t } = useI18n();
+const props = defineProps({
+    roadmapFk: {
+        type: Number,
+        required: true,
+    },
+});
+
+const isLoading = ref(false);
+const warehouseList = ref([]);
+const roadmapStopForm = reactive({
+    roadmapFk: Number(props.roadmapFk) || 0,
+    warehouseFk: null,
+    eta: new Date().toISOString(),
+    description: '',
+});
+
+const updateDefaultStop = (data) => {
+    const eta = new Date(data.etd);
+    eta.setDate(eta.getDate() + 1);
+    roadmapStopForm.eta = eta.toISOString();
+};
+
+const onSave = async () => {
+    isLoading.value = true;
+    try {
+        await axios.post('ExpeditionTrucks', { ...roadmapStopForm });
+        emit('ok');
+    } finally {
+        isLoading.value = false;
+        emit('hide');
+    }
+};
+</script>
+<template>
+    <FetchData
+        :url="`Roadmaps/${roadmapFk}`"
+        auto-load
+        :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 date')" />
+                </div>
+            </QCardSection>
+            <QCardSection class="card-section q-px-none">
+                <VnInput
+                    v-model="roadmapStopForm.description"
+                    :label="t('Description')"
+                    type="textarea"
+                    :rows="1"
+                />
+            </QCardSection>
+            <QCardActions align="right">
+                <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
+                <QBtn
+                    :label="t('globals.confirm')"
+                    color="primary"
+                    :loading="isLoading"
+                    @click="onSave"
+                    unelevated
+                />
+            </QCardActions>
+        </QCard>
+    </QDialog>
+</template>
+<style lang="scss" scoped>
+.card-section {
+    gap: 16px;
+}
+</style>
+
+<i18n>
+es:
+    Warehouse: Almacén
+    ETA date: Fecha ETA
+    ETA time: Hora ETA
+    Description: Descripción
+</i18n>

src/pages/Route/Roadmap/RoadmapSummary.vue

@@ -2,12 +2,14 @@
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
+import { QIcon, useQuasar } from 'quasar';
-import CardSummary from 'components/ui/CardSummary.vue';
-import VnLv from 'components/ui/VnLv.vue';
-import { QIcon } from 'quasar';
 import { dashIfEmpty, toDateHour } from 'src/filters';
+import { useStateStore } from 'stores/useStateStore';
+import VnLv from 'components/ui/VnLv.vue';
+import CardSummary from 'components/ui/CardSummary.vue';
 import SupplierDescriptorProxy from 'pages/Supplier/Card/SupplierDescriptorProxy.vue';
+import VnLinkPhone from 'components/ui/VnLinkPhone.vue';
+import RoadmapAddStopDialog from 'pages/Route/Roadmap/RoadmapAddStopDialog.vue';
 
 const $props = defineProps({
     id: {
@@ -18,7 +20,9 @@ const $props = defineProps({
 const route = useRoute();
 const stateStore = useStateStore();
 const { t } = useI18n();
+const quasar = useQuasar();
 
+const summary = ref(null);
 const entityId = computed(() => $props.id || route.params.id);
 const isDialog = Boolean($props.id);
 const hideRightDrawer = () => {
@@ -55,6 +59,15 @@ const filter = {
         },
     ],
 };
+
+const openAddStopDialog = () => {
+    quasar
+        .dialog({
+            component: RoadmapAddStopDialog,
+            componentProps: { roadmapFk: entityId.value },
+        })
+        .onOk(() => summary.value.fetch());
+};
 </script>
 
 <template>
@@ -89,7 +102,14 @@ const filter = {
                     />
                 </QCard>
                 <QCard class="vn-one">
-                    <VnLv :label="t('Phone')" :value="dashIfEmpty(entity?.phone)" />
+                    <VnLv :label="t('Phone')" :value="dashIfEmpty(entity?.phone)">
+                        <template #value>
+                            <span>
+                                {{ dashIfEmpty(entity?.phone) }}
+                                <VnLinkPhone :phone-number="entity?.phone" />
+                            </span>
+                        </template>
+                    </VnLv>
                     <VnLv
                         :label="t('Worker')"
                         :value="
@@ -104,10 +124,26 @@ const filter = {
                     />
                 </QCard>
                 <QCard class="vn-max">
-                    <a class="header" :href="`#/route/roadmap/${entityId}/stops`">
+                    <div class="flex items-center">
-                        {{ t('Stops') }}
+                        <a class="header" :href="`#/route/roadmap/${entityId}/stops`">
-                        <QIcon name="open_in_new" color="primary" />
+                            {{ t('Stops') }}
-                    </a>
+                            <QIcon name="open_in_new" color="primary">
+                                <QTooltip>
+                                    {{ t('Go to stops') }}
+                                </QTooltip>
+                            </QIcon>
+                        </a>
+                        <QIcon
+                            name="add_circle"
+                            color="primary"
+                            class="q-ml-lg header cursor-pointer"
+                            @click.stop="openAddStopDialog"
+                        >
+                            <QTooltip>
+                                {{ t('Add stop') }}
+                            </QTooltip>
+                        </QIcon>
+                    </div>
                     <QTable
                         :columns="columns"
                         :rows="entity?.expeditionTruck"
@@ -131,4 +167,6 @@ es:
     Observations: Observaciones
     Stops: Paradas
     Warehouse: Almacén
+    Go to stops: Ir a paradas
+    Add stop: Añadir parada
 </i18n>