From 0a03ef69ea044b1ce1750f6abfbc9476c80b0b76 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Thu, 15 Feb 2024 01:23:31 -0300
Subject: [PATCH] Create roadmap basic data page

---
 src/i18n/en/index.js                         |   2 +
 src/i18n/es/index.js                         |   2 +
 src/pages/Route/Roadmap/RoadmapBasicData.vue | 144 +++++++++++++++++++
 src/router/modules/roadmap.js                |  11 +-
 4 files changed, 158 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Route/Roadmap/RoadmapBasicData.vue

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 5889a1728..8e7e8409a 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -884,12 +884,14 @@ export default {
         pageTitles: {
             roadmap: 'Roadmap',
             summary: 'Summary',
+            basicData: 'Basic Data',
         },
     },
     roadmap: {
         pageTitles: {
             roadmap: 'Roadmap',
             summary: 'Summary',
+            basicData: 'Basic Data',
         },
     },
     route: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 7fd58d82a..1e548362d 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -938,12 +938,14 @@ export default {
         pageTitles: {
             roadmap: 'Troncales',
             summary: 'Resumen',
+            basicData: 'Datos básicos',
         },
     },
     roadmap: {
         pageTitles: {
             roadmap: 'Troncales',
             summary: 'Resumen',
+            basicData: 'Datos básicos',
         },
     },
     route: {
diff --git a/src/pages/Route/Roadmap/RoadmapBasicData.vue b/src/pages/Route/Roadmap/RoadmapBasicData.vue
new file mode 100644
index 000000000..5084eefa7
--- /dev/null
+++ b/src/pages/Route/Roadmap/RoadmapBasicData.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import VnRow from 'components/ui/VnRow.vue';
+import FormModel from 'components/FormModel.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnInput from 'components/common/VnInput.vue';
+import VnInputTime from 'components/common/VnInputTime.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import FetchData from 'components/FetchData.vue';
+import {ref} from "vue";
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const entityId = route.params?.id || null;
+
+const supplierList = ref([]);
+const filter = { include: [{ relation: 'supplier' }] };
+const onSave = (data, response) => {
+    router.push({ name: 'RoadmapSummary', params: { id: response?.id } });
+};
+</script>
+<template>
+    <VnSubToolbar />
+    <FetchData
+        url="Suppliers"
+        auto-load
+        :filter="{ fields: ['id', 'nickname'] }"
+        sort-by="nickname"
+        limit="30"
+        @on-fetch="(data) => (supplierList = data)"
+    />
+    <FormModel
+        :url="`Roadmaps/${entityId}`"
+        observe-form-changes
+        :filter="filter"
+        model="roadmap"
+        auto-load
+        @on-data-saved="onSave"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput v-model="data.name" :label="t('Roadmap')" clearable />
+                </div>
+                <div class="col">
+                    <VnInputDate v-model="data.etd" :label="t('ETD date')" />
+                </div>
+                <div class="col">
+                    <VnInputTime v-model="data.etd" :label="t('ETD hour')" />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.tractorPlate"
+                        :label="t('Tractor plate')"
+                        clearable
+                    />
+                </div>
+                <div class="col">
+                    <VnInput
+                        v-model="data.trailerPlate"
+                        :label="t('Trailer plate')"
+                        clearable
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Carrier')"
+                        v-model="data.supplierFk"
+                        :options="supplierList"
+                        option-value="id"
+                        option-label="nickname"
+                        emit-value
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    >
+                        <template #option="{ itemProps, opt }">
+                            <QItem v-bind="itemProps">
+                                <QItemSection>
+                                    <QItemLabel
+                                        >{{ opt.id }} - {{ opt.nickname }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+                <div class="col">
+                    <VnInput
+                        v-model="data.price"
+                        :label="t('Price')"
+                        type="number"
+                        clearable
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.driverName"
+                        :label="t('Driver name')"
+                        clearable
+                    />
+                </div>
+                <div class="col">
+                    <VnInput
+                        v-model="data.phone"
+                        :label="t('Phone')"
+                        clearable
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.observations"
+                        :label="t('Observations')"
+                        clearable
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+<i18n>
+es:
+    Roadmap: Troncal
+    ETD date: Fecha ETD
+    ETD hour: Hora ETD
+    Tractor plate: Placa tractor
+    Trailer plate: Placa trailer
+    Carrier: Transportista
+    Price: Precio
+    Driver name: Nombre del conductor
+    Phone: Teléfono
+    Observations: Observaciones
+</i18n>
diff --git a/src/router/modules/roadmap.js b/src/router/modules/roadmap.js
index 9b3b8b9ca..fa63dbd44 100644
--- a/src/router/modules/roadmap.js
+++ b/src/router/modules/roadmap.js
@@ -10,7 +10,7 @@ export default {
     component: RouterView,
     redirect: { name: 'RouteMain' },
     menus: {
-        card: [],
+        card: ['RoadmapBasicData'],
     },
     children: [
         {
@@ -28,6 +28,15 @@ export default {
                     },
                     component: () => import('pages/Route/Roadmap/RoadmapSummary.vue'),
                 },
+                {
+                    name: 'RoadmapBasicData',
+                    path: 'basic-data',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () => import('pages/Route/Roadmap/RoadmapBasicData.vue'),
+                },
             ],
         },
     ],