From 45d7b021a623dc2b6ffdfb3d73d0dc769cc81f47 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Wed, 14 Feb 2024 23:32:22 -0300
Subject: [PATCH] Create roadmap create page

---
 src/i18n/en/index.js                      |  1 +
 src/i18n/es/index.js                      |  1 +
 src/pages/Route/Roadmap/RoadmapCreate.vue | 56 +++++++++++++++++++++++
 src/pages/Route/RouteRoadmap.vue          | 19 ++++----
 src/router/modules/route.js               |  9 ++++
 5 files changed, 77 insertions(+), 9 deletions(-)
 create mode 100644 src/pages/Route/Roadmap/RoadmapCreate.vue

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 5bf4be887..000cbf5e8 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -889,6 +889,7 @@ export default {
             basicData: 'Basic Data',
             summary: 'Summary',
             RouteRoadmap: 'Roadmaps',
+            RouteRoadmapCreate: 'Create roadmap',
             tickets: 'Tickets',
             log: 'Log',
             autonomous: 'Autonomous',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index cea9c9a6c..7d43aaa7f 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -943,6 +943,7 @@ export default {
             basicData: 'Datos básicos',
             summary: 'Resumen',
             RouteRoadmap: 'Troncales',
+            RouteRoadmapCreate: 'Crear troncal',
             tickets: 'Tickets',
             log: 'Historial',
             autonomous: 'Autónomos',
diff --git a/src/pages/Route/Roadmap/RoadmapCreate.vue b/src/pages/Route/Roadmap/RoadmapCreate.vue
new file mode 100644
index 000000000..214983dd3
--- /dev/null
+++ b/src/pages/Route/Roadmap/RoadmapCreate.vue
@@ -0,0 +1,56 @@
+<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';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const defaultInitialData = {
+    etd: Date.vnNew().toISOString(),
+};
+const onSave = (data, response) => {
+    router.push({ name: 'RoadmapSummary', params: { id: response?.id } });
+};
+</script>
+<template>
+    <VnSubToolbar />
+    <FormModel
+        :url="null"
+        url-create="Roadmaps"
+        model="roadmap"
+        :observe-form-changes="false"
+        :auto-load="false"
+        :form-initial-data="defaultInitialData"
+        @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>
+        </template>
+    </FormModel>
+</template>
+<i18n>
+es:
+    Roadmap: Troncal
+    ETD date: Fecha ETD
+    ETD hour: Hora ETD
+</i18n>
diff --git a/src/pages/Route/RouteRoadmap.vue b/src/pages/Route/RouteRoadmap.vue
index 6962176e4..fd4d52f62 100644
--- a/src/pages/Route/RouteRoadmap.vue
+++ b/src/pages/Route/RouteRoadmap.vue
@@ -226,7 +226,7 @@ function confirmRemove() {
                         >
                             <template #body-cell-carrier="props">
                                 <QTd :props="props">
-                                    <span class="link">
+                                    <span v-if="props.value" class="link">
                                         {{ props.value }}
                                         <SupplierDescriptorProxy
                                             :id="props.row?.supplier?.id"
@@ -254,14 +254,14 @@ function confirmRemove() {
                 </template>
             </VnPaginate>
         </div>
-        <!--        <QPageSticky :offset="[20, 20]">-->
-        <!--            <RouterLink :to="{ name: 'RouteCreate' }">-->
-        <!--                <QBtn fab icon="add" color="primary" />-->
-        <!--                <QTooltip>-->
-        <!--                    {{ t('newRoute') }}-->
-        <!--                </QTooltip>-->
-        <!--            </RouterLink>-->
-        <!--        </QPageSticky>-->
+        <QPageSticky :offset="[20, 20]">
+            <RouterLink :to="{ name: 'RouteRoadmapCreate' }">
+                <QBtn fab icon="add" color="primary" />
+                <QTooltip>
+                    {{ t('Create roadmap') }}
+                </QTooltip>
+            </RouterLink>
+        </QPageSticky>
     </QPage>
 </template>
 
@@ -283,6 +283,7 @@ es:
     Are you sure you want to continue?: ¿Seguro que quieres continuar?
     The date can't be empty: La fecha no puede estar vacía
     Clone Selected Routes: Clonar rutas seleccionadas
+    Create roadmap: Crear trocal
     Roadmap: Trocal
     Carrier: Transportista
     Plate: Placa
diff --git a/src/router/modules/route.js b/src/router/modules/route.js
index 32e4619ba..f38601a26 100644
--- a/src/router/modules/route.js
+++ b/src/router/modules/route.js
@@ -38,6 +38,15 @@ export default {
                     },
                     component: () => import('src/pages/Route/RouteRoadmap.vue'),
                 },
+                {
+                    path: 'roadmap/create',
+                    name: 'RouteRoadmapCreate',
+                    meta: {
+                        title: 'RouteRoadmapCreate',
+                        icon: 'vn:troncales',
+                    },
+                    component: () => import('src/pages/Route/Roadmap/RoadmapCreate.vue'),
+                },
                 {
                     path: 'create',
                     name: 'RouteCreate',