Create roadmap summary page

src/i18n/en/index.js

@@ -880,6 +880,18 @@ export default {
             uncompleteTrays: 'There are incomplete trays',
         },
     },
+    'route/roadmap': {
+        pageTitles: {
+            roadmap: 'Roadmap',
+            summary: 'Summary',
+        },
+    },
+    roadmap: {
+        pageTitles: {
+            roadmap: 'Roadmap',
+            summary: 'Summary',
+        },
+    },
     route: {
         pageTitles: {
             routes: 'Routes',

src/i18n/es/index.js

@@ -934,6 +934,18 @@ export default {
             uncompleteTrays: 'Hay bandejas sin completar',
         },
     },
+    'route/roadmap': {
+        pageTitles: {
+            roadmap: 'Troncales',
+            summary: 'Resumen',
+        },
+    },
+    roadmap: {
+        pageTitles: {
+            roadmap: 'Troncales',
+            summary: 'Resumen',
+        },
+    },
     route: {
         pageTitles: {
             routes: 'Rutas',

src/pages/Route/Roadmap/RoadmapCard.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'components/LeftMenu.vue';
+import RoadmapDescriptor from "pages/Route/Roadmap/RoadmapDescriptor.vue";
+
+const stateStore = useStateStore();
+</script>
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <RoadmapDescriptor />
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage>
+            <RouterView></RouterView>
+        </QPage>
+    </QPageContainer>
+</template>

src/pages/Route/Roadmap/RoadmapDescriptor.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'components/ui/VnLv.vue';
+import useCardDescription from 'composables/useCardDescription';
+import {dashIfEmpty, toDateHour} from 'src/filters';
+import SupplierDescriptorProxy from 'pages/Supplier/Card/SupplierDescriptorProxy.vue';
+import RoadmapDescriptorMenu from "pages/Route/Roadmap/RoadmapDescriptorMenu.vue";
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const filter = { include: [{ relation: 'supplier' }] };
+const data = ref(useCardDescription());
+const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
+</script>
+
+<template>
+    <CardDescriptor
+        module="Roadmap"
+        :url="`Roadmaps/${entityId}`"
+        :filter="filter"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        data-key="Roadmap"
+        @on-fetch="setData"
+    >
+        <template #body="{ entity }">
+            <VnLv :label="t('Roadmap')" :value="entity?.name" />
+            <VnLv :label="t('ETD')" :value="toDateHour(entity?.etd)" />
+            <VnLv :label="t('Carrier')">
+                <template #value>
+                    <span class="link" v-if="entity?.supplier?.id">
+                        {{ dashIfEmpty(entity?.supplier?.nickname) }}
+                        <SupplierDescriptorProxy :id="entity?.supplier?.id" />
+                    </span>
+                </template>
+            </VnLv>
+        </template>
+        <template #menu="{ entity }">
+            <RoadmapDescriptorMenu :route="entity" />
+        </template>
+    </CardDescriptor>
+</template>
+<i18n>
+es:
+    Roadmap: Troncal
+    Carrier: Transportista
+</i18n>

src/pages/Route/Roadmap/RoadmapDescriptorMenu.vue

@@ -0,0 +1,57 @@
+<script setup>
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+
+const props = defineProps({
+    route: {
+        type: Object,
+        required: true,
+    },
+});
+
+const router = useRouter();
+const quasar = useQuasar();
+const { t } = useI18n();
+
+function confirmRemove() {
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('Confirm deletion'),
+                message: t('Are you sure you want to delete this roadmap?'),
+                promise: remove,
+            },
+        })
+        .onOk(async () => await router.push({ name: 'RouteRoadmap' }));
+}
+
+async function remove() {
+    if (!props.route.id) {
+        return;
+    }
+    await axios.delete(`Roadmaps/${props.route.id}`);
+    quasar.notify({
+        message: t('globals.dataDeleted'),
+        type: 'positive',
+    });
+}
+</script>
+<template>
+    <QItem @click="confirmRemove" v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="delete" />
+        </QItemSection>
+        <QItemSection>{{ t('Delete roadmap') }}</QItemSection>
+    </QItem>
+</template>
+
+<i18n>
+es:
+    Confirm deletion: Confirmar eliminación
+    Are you sure you want to delete this roadmap?: ¿Estás seguro de que quieres eliminar esta troncal?
+    Delete roadmap: Eliminar troncal
+</i18n>

src/pages/Route/Roadmap/RoadmapDescriptorProxy.vue

@@ -0,0 +1,15 @@
+<script setup>
+import RoadmapDescriptor from 'pages/Route/Roadmap/RoadmapDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+<template>
+    <QPopupProxy>
+        <RoadmapDescriptor v-if="$props.id" :id="$props.id" />
+    </QPopupProxy>
+</template>

src/pages/Route/Roadmap/RoadmapSummary.vue

@@ -0,0 +1,134 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+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 SupplierDescriptorProxy from 'pages/Supplier/Card/SupplierDescriptorProxy.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+const route = useRoute();
+const stateStore = useStateStore();
+const { t } = useI18n();
+
+const entityId = computed(() => $props.id || route.params.id);
+const isDialog = Boolean($props.id);
+const hideRightDrawer = () => {
+    if (!isDialog) {
+        stateStore.rightDrawer = false;
+    }
+};
+onMounted(hideRightDrawer);
+onUnmounted(hideRightDrawer);
+
+const columns = ref([
+    {
+        name: 'warehouse',
+        label: t('Warehouse'),
+        field: (row) => dashIfEmpty(row?.warehouse?.name),
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'ETA',
+        label: t('ETA'),
+        field: (row) => toDateHour(row?.eta),
+        sortable: false,
+        align: 'left',
+    },
+]);
+const filter = {
+    include: [
+        { relation: 'supplier' },
+        { relation: 'worker' },
+        {
+            relation: 'expeditionTruck',
+            scope: { include: [{ relation: 'warehouse' }] },
+        },
+    ],
+};
+</script>
+
+<template>
+    <div class="q-pa-md full-width">
+        <CardSummary ref="summary" :url="`Roadmaps/${entityId}`" :filter="filter">
+            <template #header-left>
+                <RouterLink :to="{ name: `RoadmapSummary`, params: { id: entityId } }">
+                    <QIcon name="open_in_new" color="white" size="sm" />
+                </RouterLink>
+            </template>
+            <template #header="{ entity }">
+                <span>{{ `${entity?.id} - ${entity?.name}` }}</span>
+            </template>
+            <template #body="{ entity }">
+                <QCard class="vn-one">
+                    <VnLv :label="t('Carrier')">
+                        <template #value>
+                            <span class="link" v-if="entity?.supplier?.id">
+                                {{ dashIfEmpty(entity?.supplier?.nickname) }}
+                                <SupplierDescriptorProxy :id="entity?.supplier?.id" />
+                            </span>
+                        </template>
+                    </VnLv>
+                    <VnLv :label="t('ETD')" :value="toDateHour(entity?.etd)" />
+                    <VnLv
+                        :label="t('Tractor Plate')"
+                        :value="dashIfEmpty(entity?.tractorPlate)"
+                    />
+                    <VnLv
+                        :label="t('Trailer Plate')"
+                        :value="dashIfEmpty(entity?.trailerPlate)"
+                    />
+                </QCard>
+                <QCard class="vn-one">
+                    <VnLv :label="t('Phone')" :value="dashIfEmpty(entity?.phone)" />
+                    <VnLv
+                        :label="t('Worker')"
+                        :value="
+                            entity?.worker?.firstName
+                                ? `${entity?.worker?.firstName} ${entity?.worker?.lastName}`
+                                : '-'
+                        "
+                    />
+                    <VnLv
+                        :label="t('Observations')"
+                        :value="dashIfEmpty(entity?.observations)"
+                    />
+                </QCard>
+                <QCard class="vn-max">
+                    <a class="header" :href="`#/route/roadmap/${entityId}/stops`">
+                        {{ t('Stops') }}
+                        <QIcon name="open_in_new" color="primary" />
+                    </a>
+                    <QTable
+                        :columns="columns"
+                        :rows="entity?.expeditionTruck"
+                        :rows-per-page-options="[0]"
+                        row-key="id"
+                        flat
+                        hide-pagination
+                    />
+                </QCard>
+            </template>
+        </CardSummary>
+    </div>
+</template>
+<i18n>
+es:
+    Carrier: Transportista
+    Tractor Plate: Placa tractor
+    Trailer Plate: Placa trailer
+    Phone: Teléfono
+    Worker: Trabajador
+    Observations: Observaciones
+    Stops: Paradas
+    Warehouse: Almacén
+</i18n>

src/pages/Route/Roadmap/RoadmapSummaryDialog.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import RoadmapSummary from "pages/Route/Roadmap/RoadmapSummary.vue";
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <div class="dialog full-width">
+            <RoadmapSummary v-if="$props.id" :id="$props.id" />
+        </div>
+    </QDialog>
+</template>
+
+<style lang="scss" scoped>
+.dialog {
+    max-width: 1280px;
+}
+</style>

src/pages/Route/RouteRoadmap.vue

@@ -4,9 +4,7 @@ import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { dashIfEmpty, toDateHour } from 'src/filters';
-import { useValidator } from 'composables/useValidator';
 import { useQuasar } from 'quasar';
-import { useSession } from 'composables/useSession';
 import toCurrency from 'filters/toCurrency';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import SupplierDescriptorProxy from 'pages/Supplier/Card/SupplierDescriptorProxy.vue';
@@ -15,12 +13,11 @@ import RoadmapFilter from 'pages/Route/Roadmap/RoadmapFilter.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import axios from 'axios';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import RoadmapSummaryDialog from "pages/Route/Roadmap/RoadmapSummaryDialog.vue";
 
 const stateStore = useStateStore();
 const { t } = useI18n();
-const { validate } = useValidator();
 const quasar = useQuasar();
-const session = useSession();
 
 const to = Date.vnNew();
 to.setDate(to.getDate() + 1);
@@ -30,8 +27,6 @@ const from = Date.vnNew();
 from.setDate(from.getDate());
 from.setHours(0, 0, 0, 0);
 
-const params = ref({ from, to });
-
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
 
@@ -90,7 +85,6 @@ const columns = computed(() => [
 const refreshKey = ref(0);
 const isCloneDialogOpen = ref(false);
 const etdDate = ref(null);
-const workers = ref([]);
 
 const filter = {
     include: { relation: 'supplier', scope: { fields: ['nickname'] } },
@@ -128,6 +122,18 @@ function confirmRemove() {
         })
         .onOk(() => refreshKey.value++);
 }
+
+function previewRoadmap(id) {
+    if (!id) {
+        return;
+    }
+    quasar.dialog({
+        component: RoadmapSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+}
 </script>
 
 <template>
@@ -223,6 +229,7 @@ function confirmRemove() {
                             :rows-per-page-options="[0]"
                             hide-pagination
                             :pagination="{ sortBy: 'ID', descending: true }"
+                            :on-row-click="(evt, row) => console.log(evt, row)"
                         >
                             <template #body-cell-carrier="props">
                                 <QTd :props="props">
@@ -241,7 +248,7 @@ function confirmRemove() {
                                             name="preview"
                                             size="xs"
                                             color="primary"
-                                            @click="previewRoute(props?.row?.id)"
+                                            @click="previewRoadmap(props?.row?.id)"
                                             class="cursor-pointer"
                                         >
                                             <QTooltip>{{ t('Preview') }}</QTooltip>

src/router/modules/index.js

@@ -13,6 +13,7 @@ import Travel from './travel';
 import Order from './order';
 import Department from './department';
 import Entry from './entry';
+import roadmap from "./roadmap";
 
 export default [
     Item,
@@ -30,4 +31,5 @@ export default [
     invoiceIn,
     Department,
     Entry,
+    roadmap
 ];

src/router/modules/roadmap.js

@@ -0,0 +1,34 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/route/roadmap',
+    name: 'Roadmap',
+    meta: {
+        title: 'roadmap',
+        icon: 'vn:troncales',
+    },
+    component: RouterView,
+    redirect: { name: 'RouteMain' },
+    menus: {
+        card: [],
+    },
+    children: [
+        {
+            name: 'RouteRoadmapCard',
+            path: ':id',
+            component: () => import('src/pages/Route/Roadmap/RoadmapCard.vue'),
+            redirect: { name: 'RoadmapSummary' },
+            children: [
+                {
+                    name: 'RoadmapSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                        icon: 'open_in_new',
+                    },
+                    component: () => import('pages/Route/Roadmap/RoadmapSummary.vue'),
+                },
+            ],
+        },
+    ],
+};

src/router/routes.js

@@ -13,6 +13,7 @@ import department from './modules/department';
 import shelving from 'src/router/modules/shelving';
 import order from 'src/router/modules/order';
 import entry from 'src/router/modules/entry';
+import roadmap from "src/router/modules/roadmap";
 
 const routes = [
     {
@@ -66,6 +67,7 @@ const routes = [
             supplier,
             travel,
             department,
+            roadmap,
             entry,
             {
                 path: '/:catchAll(.*)*',