From a68f53d9f7f867e50dee5b946d3d9370f9e4ace7 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Wed, 17 Jan 2024 09:04:10 -0400
Subject: [PATCH] Add route form

---
 src/components/FormModel.vue       |   7 +-
 src/i18n/en/index.js               |   4 +-
 src/i18n/es/index.js               |   4 +-
 src/pages/Route/Card/RouteCard.vue |  21 +++
 src/pages/Route/Card/RouteForm.vue | 215 +++++++++++++++++++++++++++++
 src/pages/Route/RouteList.vue      |  19 +--
 src/router/modules/route.js        |  26 ++++
 7 files changed, 283 insertions(+), 13 deletions(-)
 create mode 100644 src/pages/Route/Card/RouteCard.vue
 create mode 100644 src/pages/Route/Card/RouteForm.vue

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index a5560dfc0..4ad566bf8 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -128,13 +128,14 @@ async function save() {
 
     try {
         const body = $props.mapper ? $props.mapper(formData.value) : formData.value;
+        let response
         if ($props.urlCreate) {
-            await axios.post($props.urlCreate, body);
+            response = await axios.post($props.urlCreate, body);
             notify('globals.dataCreated', 'positive');
         } else {
-            await axios.patch($props.urlUpdate || $props.url, body);
+            response = await axios.patch($props.urlUpdate || $props.url, body);
         }
-        emit('onDataSaved', formData.value);
+        emit('onDataSaved', formData.value, response);
         originalData.value = JSON.parse(JSON.stringify(formData.value));
         hasChanges.value = false;
     } catch (err) {
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 72ed1cba8..2056f1907 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -807,7 +807,9 @@ export default {
         pageTitles: {
             routes: 'Routes',
             cmrsList: 'External CMRs list',
-            RouteList: 'List'
+            RouteList: 'List',
+            create: 'Create',
+            basicData: 'Basic Data'
         },
         cmr: {
             list: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index f5a7483f4..970f23231 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -806,7 +806,9 @@ export default {
         pageTitles: {
             routes: 'Rutas',
             cmrsList: 'Listado de CMRs externos',
-            RouteList: 'Listado'
+            RouteList: 'Listado',
+            create: 'Crear',
+            basicData: 'Datos básicos',
         },
         cmr: {
             list: {
diff --git a/src/pages/Route/Card/RouteCard.vue b/src/pages/Route/Card/RouteCard.vue
new file mode 100644
index 000000000..2082b67df
--- /dev/null
+++ b/src/pages/Route/Card/RouteCard.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'components/LeftMenu.vue';
+// import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
+
+const stateStore = useStateStore();
+</script>
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <!--            <ShelvingDescriptor />-->
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage>
+            <RouterView></RouterView>
+        </QPage>
+    </QPageContainer>
+</template>
diff --git a/src/pages/Route/Card/RouteForm.vue b/src/pages/Route/Card/RouteForm.vue
new file mode 100644
index 000000000..00ea18f4f
--- /dev/null
+++ b/src/pages/Route/Card/RouteForm.vue
@@ -0,0 +1,215 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnInput from 'components/common/VnInput.vue';
+import axios from 'axios';
+import VnInputTime from 'components/common/VnInputTime.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const shelvingId = route.params?.id || null;
+const isNew = Boolean(!shelvingId);
+const defaultInitialData = {
+    agencyModeFk: null,
+    created: null,
+    description: '',
+    vehicleFk: null,
+    workerFk: null,
+};
+
+const workerList = ref([]);
+const agencyList = ref([]);
+const vehicleList = ref([]);
+
+const routeFilter = {
+    fields: [
+        'id',
+        'workerFk',
+        'agencyModeFk',
+        'created',
+        'm3',
+        'warehouseFk',
+        'description',
+        'vehicleFk',
+        'kmStart',
+        'kmEnd',
+        'started',
+        'finished',
+        'cost',
+        'zoneFk',
+        'isOk',
+    ],
+    include: [
+        { relation: 'agencyMode', scope: { fields: ['id', 'name'] } },
+        {
+            relation: 'vehicle',
+            scope: { fields: ['id', 'm3'] },
+        },
+        { relation: 'zone', scope: { fields: ['id', 'name'] } },
+        {
+            relation: 'worker',
+            scope: {
+                fields: ['id'],
+                include: {
+                    relation: 'user',
+                    scope: {
+                        fields: ['id'],
+                        include: { relation: 'emailUser', scope: { fields: ['email'] } },
+                    },
+                },
+            },
+        },
+    ],
+};
+const onSave = (data, response) => {
+    if (isNew) {
+        axios.post(`Routes/${response.data?.id}/updateWorkCenter`);
+        // TODO: Add summary
+        // router.push({ name: 'RouteSummary', params: { id: response.data?.id } });
+    }
+};
+</script>
+<template>
+    <VnSubToolbar />
+    <FetchData
+        url="Workers/search"
+        :filter="{ fields: ['id', 'nickname'] }"
+        sort-by="nickname ASC"
+        limit="30"
+        @on-fetch="(data) => (workerList = data)"
+        auto-load
+    />
+    <FetchData
+        url="AgencyModes/isActive"
+        :filter="{ fields: ['id', 'name'] }"
+        sort-by="name ASC"
+        limit="30"
+        @on-fetch="(data) => (agencyList = data)"
+        auto-load
+    />
+    <FetchData
+        url="Vehicles"
+        :filter="{ fields: ['id', 'numberPlate'] }"
+        sort-by="numberPlate ASC"
+        limit="30"
+        @on-fetch="(data) => (vehicleList = data)"
+        auto-load
+    />
+    <FormModel
+        :url="isNew ? null : `Routes/${shelvingId}`"
+        :url-create="isNew ? 'Routes' : null"
+        :observe-form-changes="!isNew"
+        :filter="routeFilter"
+        model="route"
+        :auto-load="!isNew"
+        :form-initial-data="defaultInitialData"
+        @on-data-saved="onSave"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Worker')"
+                        v-model="data.workerFk"
+                        :options="workerList"
+                        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.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ opt.nickname }},{{ opt.code }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Vehicle')"
+                        v-model="data.vehicleFk"
+                        :options="vehicleList"
+                        option-value="id"
+                        option-label="numberPlate"
+                        emit-value
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Agency')"
+                        v-model="data.agencyModeFk"
+                        :options="agencyList"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    />
+                </div>
+                <div class="col">
+                    <VnInputDate v-model="data.created" :label="t('Created')" />
+                </div>
+            </VnRow>
+            <template v-if="!isNew">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            v-model="data.kmStart"
+                            :label="t('Km Start')"
+                            clearable
+                        />
+                    </div>
+                    <div class="col">
+                        <VnInput v-model="data.kmEnd" :label="t('Km End')" clearable />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInputTime
+                            v-model="data.started"
+                            :label="t('Hour started')"
+                            clearable
+                        />
+                    </div>
+                    <div class="col">
+                        <VnInputTime
+                            v-model="data.finished"
+                            :label="t('Hour finished')"
+                            clearable
+                        />
+                    </div>
+                </VnRow>
+            </template>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.description"
+                        :label="t('Description')"
+                        clearable
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index ddf3e1a12..3dcc0af37 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -371,14 +371,14 @@ const updateWorker = (row, worker) => {
                 </QTable>
             </template>
         </VnPaginate>
-        <!--        <QPageSticky :offset="[20, 20]">-->
-        <!--            <RouterLink :to="{ name: 'ShelvingCreate' }">-->
-        <!--                <QBtn fab icon="add" color="primary" />-->
-        <!--                <QTooltip>-->
-        <!--                    {{ t('shelving.list.newShelving') }}-->
-        <!--                </QTooltip>-->
-        <!--            </RouterLink>-->
-        <!--        </QPageSticky>-->
+        <QPageSticky :offset="[20, 20]">
+            <RouterLink :to="{ name: 'RouteCreate' }">
+                <QBtn fab icon="add" color="primary" />
+                <QTooltip>
+                    {{ t('newRoute') }}
+                </QTooltip>
+            </RouterLink>
+        </QPageSticky>
     </QPage>
 </template>
 
@@ -389,6 +389,8 @@ const updateWorker = (row, worker) => {
 }
 </style>
 <i18n>
+en:
+    newRoute: New Route
 es:
     ID: ID
     Worker: Trabajador
@@ -398,4 +400,5 @@ es:
     Description: Descripción
     Hour started: Hora inicio
     Hour finished: Hora fin
+    newRoute: Nueva Ruta
 </i18n>
diff --git a/src/router/modules/route.js b/src/router/modules/route.js
index 70c92f84b..f6553a4f1 100644
--- a/src/router/modules/route.js
+++ b/src/router/modules/route.js
@@ -38,6 +38,32 @@ export default {
                     },
                     component: () => import('src/pages/Route/RouteList.vue'),
                 },
+                {
+                    path: 'create',
+                    name: 'RouteCreate',
+                    meta: {
+                        title: 'create',
+                    },
+                    component: () => import('src/pages/Route/Card/RouteForm.vue'),
+                },
+            ],
+        },
+        {
+            name: 'RouteCard',
+            path: ':id',
+            component: () => import('src/pages/Route/Card/RouteCard.vue'),
+            // TODO: Add summary
+            redirect: { name: 'RouteBasicData' },
+            children: [
+                {
+                    name: 'RouteBasicData',
+                    path: 'basic-data',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () => import('pages/Route/Card/RouteForm.vue'),
+                },
             ],
         },
     ],