From cbe44c97f6ad844cf0a9d43e78f294cbd0311499 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 14 May 2024 12:03:43 -0300
Subject: [PATCH] Upcoming deliveries

---
 src/components/ui/VnSearchbar.vue      | 13 ++--
 src/pages/Zone/Card/ZoneCard.vue       |  2 +-
 src/pages/Zone/Card/ZoneDescriptor.vue |  1 -
 src/pages/Zone/ZoneList.vue            | 54 +---------------
 src/pages/Zone/ZoneMain.vue            | 61 ++++++++++++++++++
 src/pages/Zone/ZoneUpcoming.vue        | 87 +++++++++++++++++---------
 src/pages/Zone/locale/en.yml           | 14 +++--
 src/pages/Zone/locale/es.yml           | 16 ++---
 src/router/modules/zone.js             | 87 +++-----------------------
 9 files changed, 155 insertions(+), 180 deletions(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index aaf197d74..568a35c61 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -91,12 +91,6 @@ async function search() {
 
     if (!props.redirect) return;
 
-    if (props.customRouteRedirectName)
-        return router.push({
-            name: props.customRouteRedirectName,
-            params: { id: searchText.value },
-        });
-
     const { matched: matches } = router.currentRoute.value;
     const { path } = matches.at(-1);
     const [, moduleName] = path.split('/');
@@ -105,6 +99,13 @@ async function search() {
         return router.push({ path: `/${moduleName}/list` });
 
     const targetId = store.data[0].id;
+
+    if (props.customRouteRedirectName && targetId)
+        return router.push({
+            name: props.customRouteRedirectName,
+            params: { id: targetId },
+        });
+
     let targetUrl;
 
     if (path.endsWith('/list')) targetUrl = path.replace('/list', `/${targetId}/summary`);
diff --git a/src/pages/Zone/Card/ZoneCard.vue b/src/pages/Zone/Card/ZoneCard.vue
index 9d6895f36..d8c51afe7 100644
--- a/src/pages/Zone/Card/ZoneCard.vue
+++ b/src/pages/Zone/Card/ZoneCard.vue
@@ -8,7 +8,7 @@ import ZoneDescriptor from './ZoneDescriptor.vue';
         base-url="Zones"
         :descriptor="ZoneDescriptor"
         searchbar-data-key="ZoneList"
-        searchbar-url="Zones/filter"
+        searchbar-url="Zones"
         searchbar-label="Search zones"
         searchbar-info="You can search by zone reference"
     />
diff --git a/src/pages/Zone/Card/ZoneDescriptor.vue b/src/pages/Zone/Card/ZoneDescriptor.vue
index 8f0aa9e07..aee6174a3 100644
--- a/src/pages/Zone/Card/ZoneDescriptor.vue
+++ b/src/pages/Zone/Card/ZoneDescriptor.vue
@@ -73,7 +73,6 @@ const setData = (entity) => {
             <ZoneDescriptorMenuItems :zone="entity" />
         </template> -->
         <template #body="{ entity }">
-            {{ console.log('entity', entity) }}
             <VnLv :label="t('summary.agency')" :value="entity.agencyMode.name" />
             <VnLv :label="t('summary.closeHour')" :value="toTimeFormat(entity.hour)" />
             <VnLv :label="t('summary.travelingDays')" :value="entity.travelingDays" />
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index 3806a519e..718671038 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -2,14 +2,10 @@
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { onMounted, computed } from 'vue';
-import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
+import { toCurrency } from 'src/filters';
 
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import CardList from 'components/ui/CardList.vue';
-import VnLv from 'components/ui/VnLv.vue';
 import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import ZoneFilterPanel from './ZoneFilterPanel.vue';
 
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toTimeFormat } from 'src/filters/date';
@@ -76,35 +72,6 @@ const columns = computed(() => [
     },
 ]);
 
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'name':
-            return {
-                name: { like: `%${value}%` },
-            };
-        case 'code':
-            return {
-                code: { like: `%${value}%` },
-            };
-        case 'agencyModeFk':
-            return {
-                agencyModeFk: value,
-            };
-        case 'search':
-            if (value) {
-                if (!isNaN(value)) {
-                    return { id: value };
-                } else {
-                    return {
-                        name: {
-                            like: `%${value}%`,
-                        },
-                    };
-                }
-            }
-    }
-};
-
 async function clone(id) {
     const { data } = await axios.post(`Zones/${id}/clone`);
     notify(t('globals.dataSaved'), 'positive');
@@ -123,25 +90,6 @@ onMounted(async () => {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="ZoneList"
-                url="Zones"
-                :filter="{
-                    include: { relation: 'agencyMode', scope: { fields: ['name'] } },
-                }"
-                :expr-builder="exprBuilder"
-                :label="t('list.searchZone')"
-                :info="t('list.searchInfo')"
-            />
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
-        </QScrollArea>
-    </QDrawer>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
diff --git a/src/pages/Zone/ZoneMain.vue b/src/pages/Zone/ZoneMain.vue
index 66ce78f23..a96cf72a0 100644
--- a/src/pages/Zone/ZoneMain.vue
+++ b/src/pages/Zone/ZoneMain.vue
@@ -1,11 +1,72 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'src/components/LeftMenu.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import ZoneFilterPanel from './ZoneFilterPanel.vue';
 
+const { t } = useI18n();
 const stateStore = useStateStore();
+const route = useRoute();
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'name':
+            return {
+                name: { like: `%${value}%` },
+            };
+        case 'code':
+            return {
+                code: { like: `%${value}%` },
+            };
+        case 'agencyModeFk':
+            return {
+                agencyModeFk: value,
+            };
+        case 'search':
+            if (value) {
+                if (!isNaN(value)) {
+                    return { id: value };
+                } else {
+                    return {
+                        name: {
+                            like: `%${value}%`,
+                        },
+                    };
+                }
+            }
+    }
+};
 </script>
 
 <template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="ZoneList"
+                url="Zones"
+                :filter="{
+                    include: { relation: 'agencyMode', scope: { fields: ['name'] } },
+                }"
+                :expr-builder="exprBuilder"
+                :label="t('list.searchZone')"
+                :info="t('list.searchInfo')"
+                custom-route-redirect-name="ZoneSummary"
+            />
+        </Teleport>
+    </template>
+    <QDrawer
+        v-if="route.name === 'ZoneList'"
+        v-model="stateStore.rightDrawer"
+        side="right"
+        :width="256"
+        show-if-above
+    >
+        <QScrollArea class="fit text-grey-8">
+            <ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
+        </QScrollArea>
+    </QDrawer>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit text-grey-8">
             <LeftMenu />
diff --git a/src/pages/Zone/ZoneUpcoming.vue b/src/pages/Zone/ZoneUpcoming.vue
index d405c95f6..7af72b683 100644
--- a/src/pages/Zone/ZoneUpcoming.vue
+++ b/src/pages/Zone/ZoneUpcoming.vue
@@ -1,53 +1,84 @@
 <script setup>
-import { ref, computed } from 'vue';
-import ZoneFilterPanel from 'components/InvoiceOutNegativeFilter.vue';
-import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
+import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
+import FetchData from 'components/FetchData.vue';
+
+import { toDateFormat } from 'src/filters/date.js';
+import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+
 const { t } = useI18n();
-const arrayData = ref(null);
-const rows = computed(() => arrayData.value.store.data);
+const weekdayStore = useWeekdayStore();
+
+const details = ref([]);
 
 const columns = computed(() => [
     {
-        label: t('Province'),
-        //field: '',
-        //name: '',
+        label: t('upcomingDeliveries.province'),
+        name: 'province',
+        field: 'name',
         align: 'left',
     },
     {
-        label: t('Closing'),
-        //field: '',
-        //name: '',
+        label: t('upcomingDeliveries.closing'),
+        name: 'closing',
+        field: 'hour',
         align: 'left',
     },
     {
-        label: t('Id'),
-        //field: '',
-        //name: '',
+        label: t('upcomingDeliveries.id'),
+        name: 'id',
+        field: 'zoneFk',
         align: 'left',
     },
 ]);
 
-function getWeekDay(jsonDate) {
-    const weekDay = new Date(jsonDate).getDay();
+const getWeekDayName = (date) => {
+    const weekDay = new Date(date).getDay();
+    return t(`weekdays.${weekdayStore.weekdays[weekDay].code}`);
+};
 
-    return this.days[weekDay].locale;
-}
+const getHeaderTitle = (date) => {
+    return `${getWeekDayName(date)} - ${toDateFormat(date)}`;
+};
+
+onMounted(() => weekdayStore.initStore());
 </script>
 
 <template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <ZoneFilterPanel data-key="ZoneUpcoming" />
-        </QScrollArea>
-    </QDrawer>
+    <FetchData
+        url="Zones/getUpcomingDeliveries"
+        @on-fetch="(data) => (details = data)"
+        auto-load
+    />
     <VnSubToolbar />
     <QPage class="column items-center q-pa-md">
-        <span>
-            {{ t(`${getWeekDay(/*detail.shipped*/)}`) }} -
-            {{ t /*'detail.shipped'*/() }}
-        </span>
-        <QTable :columns="columns" :rows="rows" class="full-width q-mt-md"> </QTable>
+        <QCard class="full-width">
+            <div
+                v-for="(detail, index) in details"
+                :key="index"
+                class="full-width flex q-mb-lg"
+            >
+                <span class="header">
+                    {{ getHeaderTitle(detail.shipped) }}
+                </span>
+                <QTable :columns="columns" :rows="detail.lines" class="full-width" />
+            </div>
+        </QCard>
     </QPage>
 </template>
+
+<style scoped lang="scss">
+.header {
+    min-width: 100% !important;
+    display: flex;
+    align-items: center;
+    padding-left: 8px;
+    height: 35px;
+    border-bottom: 1px solid $primary;
+    background-color: black;
+    font-size: 19px;
+    font-weight: bold;
+}
+</style>
diff --git a/src/pages/Zone/locale/en.yml b/src/pages/Zone/locale/en.yml
index d0a22ebcd..414c6cda0 100644
--- a/src/pages/Zone/locale/en.yml
+++ b/src/pages/Zone/locale/en.yml
@@ -2,8 +2,9 @@ zone:
     pageTitles:
         zones: Zone
         zonesList: Zones
+        zoneCreate: Create zone
         deliveryList: Delivery days
-        upcomingList: Upcoming deliveries
+        upcomingDeliveries: Upcoming deliveries
 list:
     clone: Clone
     id: Id
@@ -13,18 +14,15 @@ list:
     price: Price
     create: Create zone
     openSummary: Details
-    confirmCloneTitle: All it's properties will be copied
-    confirmCloneSubtitle: Do you want to clone this zone?
     searchZone: Search zones
     searchInfo: Search zone by id or name
+    confirmCloneTitle: All it's properties will be copied
+    confirmCloneSubtitle: Do you want to clone this zone?
 create:
     name: Name
     agency: Agency
     close: Close
     price: Price
-type:
-    submit: Save
-    reset: Reset
 summary:
     agency: Agency
     price: Price
@@ -38,3 +36,7 @@ summary:
 filterPanel:
     name: Name
     agencyModeFk: Agency
+upcomingDeliveries:
+    province: Province
+    closing: Closing
+    id: Id
diff --git a/src/pages/Zone/locale/es.yml b/src/pages/Zone/locale/es.yml
index ad740d5f7..5c19e155c 100644
--- a/src/pages/Zone/locale/es.yml
+++ b/src/pages/Zone/locale/es.yml
@@ -2,8 +2,9 @@ zone:
     pageTitles:
         zones: Zonas
         zonesList: Zonas
+        zoneCreate: Nueva zona
         deliveryList: Días de entrega
-        upcomingList: Próximos repartos
+        upcomingDeliveries: Próximos repartos
 list:
     clone: Clonar
     id: Id
@@ -13,18 +14,15 @@ list:
     price: Precio
     create: Crear zona
     openSummary: Detalles
-    confirmCloneTitle: Todas sus propiedades serán copiadas
-    confirmCloneSubtitle: ¿Seguro que quieres clonar esta zona?
     searchZone: Buscar zonas
     searchInfo: Buscar zonas por identificador o nombre
+    confirmCloneTitle: Todas sus propiedades serán copiadas
+    confirmCloneSubtitle: ¿Seguro que quieres clonar esta zona?
 create:
     name: Nombre
     agency: Agencia
     close: Cierre
     price: Precio
-type:
-    submit: Guardar
-    reset: Reiniciar
 summary:
     agency: Agencia
     price: Precio
@@ -38,5 +36,7 @@ summary:
 filterPanel:
     name: Nombre
     agencyModeFk: Agencia
-Search zones: Buscar zonas
-You can search by zone reference: Puedes buscar por referencia de la zona
+upcomingDeliveries:
+    province: Provincia
+    closing: Cierre
+    id: Id
diff --git a/src/router/modules/zone.js b/src/router/modules/zone.js
index d39ed82d0..2ff5715c9 100644
--- a/src/router/modules/zone.js
+++ b/src/router/modules/zone.js
@@ -11,7 +11,7 @@ export default {
     component: RouterView,
     redirect: { name: 'ZoneMain' },
     menus: {
-        main: ['ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingList'],
+        main: ['ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingDeliveries'],
         card: ['ZoneBasicData'],
     },
     children: [
@@ -57,6 +57,15 @@ export default {
                     },
                     component: () => import('src/pages/Zone/ZoneCounter.vue'),
                 },
+                {
+                    name: 'ZoneUpcomingDeliveries',
+                    path: 'upcoming-deliveries',
+                    meta: {
+                        title: 'upcomingDeliveries',
+                        icon: 'vn:calendar',
+                    },
+                    component: () => import('src/pages/Zone/ZoneUpcoming.vue'),
+                },
             ],
         },
         {
@@ -83,82 +92,6 @@ export default {
                     },
                     component: () => import('src/pages/Zone/Card/ZoneBasicData.vue'),
                 },
-                // {
-                //     path: '/zone/delivery',
-                //     name: 'ZoneDeliveryMain',
-                //     component: () => import('src/pages/Zone/ZoneMain.vue'),
-                //     redirect: { name: 'ZoneDeliveryList' },
-                //     children: [
-                //         {
-                //             path: 'list',
-                //             name: 'ZoneDeliveryList',
-                //             meta: {
-                //                 title: 'deliveryList',
-                //                 icon: 'today',
-                //             },
-                //             component: () =>
-                //                 import('src/pages/Zone/Delivery/ZoneDeliveryList.vue'),
-                //         },
-                //         {
-                //             path: 'create',
-                //             name: 'ZoneDeliveryCreate',
-                //             meta: {
-                //                 title: 'deliveryCreate',
-                //                 icon: 'create',
-                //             },
-                //             component: () =>
-                //                 import('src/pages/Zone/Delivery/ZoneDeliveryCreate.vue'),
-                //         },
-                //         {
-                //             path: ':id/edit',
-                //             name: 'ZoneDeliveryEdit',
-                //             meta: {
-                //                 title: 'deliveryEdit',
-                //                 icon: 'edit',
-                //             },
-                //             component: () =>
-                //                 import('src/pages/Zone/Delivery/ZoneDeliveryCreate.vue'),
-                //         },
-                //     ],
-                // },
-                // {
-                //     path: '/zone/upcoming',
-                //     name: 'ZoneUpcomingMain',
-                //     component: () => import('src/pages/Zone/ZoneMain.vue'),
-                //     redirect: { name: 'ZoneUpcomingList' },
-                //     children: [
-                //         {
-                //             path: 'list',
-                //             name: 'ZoneUpcomingList',
-                //             meta: {
-                //                 title: 'upcomingList',
-                //                 icon: 'today',
-                //             },
-                //             component: () =>
-                //                 import('src/pages/Zone/Upcoming/ZoneUpcomingList.vue'),
-                //         },
-                //         {
-                //             path: 'create',
-                //             name: 'ZoneUpcomingCreate',
-                //             meta: {
-                //                 title: 'upcomingCreate',
-                //                 icon: 'create',
-                //             },
-                //             component: () =>
-                //                 import('src/pages/Zone/Upcoming/ZoneUpcomingCreate.vue'),
-                //         },
-                //         {
-                //             path: ':id/edit',
-                //             name: 'ZoneUpcomingEdit',
-                //             meta: {
-                //                 title: 'upcomingEdit',
-                //                 icon: 'edit',
-                //             },
-                //             component: () =>
-                //                 import('src/pages/Zone/Upcoming/ZoneUpcomingCreate.vue'),
-                //         },
-                //     ],
-                // },
             ],
         },
     ],