Upcoming deliveries

2024-05-14 12:03:43 -03:00 · 2024-05-14 12:03:43 -03:00 · cbe44c97f6
parent dcbf2eb837
commit cbe44c97f6
9 changed files with 155 additions and 180 deletions
--- 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`);
--- 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"
    />
--- 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" />
--- 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
--- 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 />
--- 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>
--- 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
--- 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
--- 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'),
-                //         },
-                //     ],
-                // },
            ],
        },
    ],