From 7e22a2924e4024d259f39ccaf735ee15d7e891ce Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 27 Nov 2023 12:49:19 -0300
Subject: [PATCH] create travel filters and integrate

---
 src/composables/inputSelectFilterFn.js  |   9 +-
 src/pages/Travel/Card/TravelSummary.vue |  14 +-
 src/pages/Travel/TravelFilter.vue       | 380 ++++++++++++++++++++++++
 src/pages/Travel/TravelList.vue         |  17 +-
 4 files changed, 415 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/Travel/TravelFilter.vue

diff --git a/src/composables/inputSelectFilterFn.js b/src/composables/inputSelectFilterFn.js
index f038e7a7d..778d78a2a 100644
--- a/src/composables/inputSelectFilterFn.js
+++ b/src/composables/inputSelectFilterFn.js
@@ -7,6 +7,13 @@
  * @param {Object} optionsToFilter - Objeto que contiene las opciones originales y filtradas.
  */
 
+function normalizeString(text) {
+    return text
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '');
+}
+
 export function inputSelectFilter(val, update, abort, optionsToFilter) {
     if (val === '') {
         update(() => {
@@ -20,7 +27,7 @@ export function inputSelectFilter(val, update, abort, optionsToFilter) {
     update(() => {
         const searchQuery = val.toLowerCase();
         optionsToFilter.filtered = optionsToFilter.original.filter((option) =>
-            option.label.toLowerCase().includes(searchQuery)
+            normalizeString(option.label).includes(normalizeString(searchQuery))
         );
     });
 }
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index 172b7a9dc..9fe4b8902 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -41,8 +41,8 @@ const cloneTravel = () => {
 
 const headerMenuOptions = [
     { name: t('travel.summary.cloneShipping'), action: cloneTravel },
-    { name: t('travel.summary.CloneTravelAndEntries'), action: cloneTravel },
-    { name: t('travel.summary.AddEntry'), action: cloneTravel },
+    { name: t('travel.summary.CloneTravelAndEntries'), action: null },
+    { name: t('travel.summary.AddEntry'), action: null },
 ];
 
 const tableColumnComponents = {
@@ -56,34 +56,42 @@ const tableColumnComponents = {
     id: {
         component: () => 'span',
         props: () => {},
+        event: () => openEntryDescriptor(),
     },
     supplierName: {
         component: () => 'span',
         props: () => {},
+        event: () => {},
     },
     reference: {
         component: () => 'span',
         props: () => {},
+        event: () => {},
     },
     freightValue: {
         component: () => 'span',
         props: () => {},
+        event: () => {},
     },
     packageValue: {
         component: () => 'span',
         props: () => {},
+        event: () => {},
     },
     cc: {
         component: () => 'span',
         props: () => {},
+        event: () => {},
     },
     pallet: {
         component: () => 'span',
         props: () => {},
+        event: () => {},
     },
     m3: {
         component: () => 'span',
         props: () => {},
+        event: () => {},
     },
     observation: {
         component: (props) => (props.value ? QIcon : null),
@@ -164,6 +172,8 @@ async function setTravelData(data) {
 const redirectToCreateView = (queryParams) => {
     router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
 };
+
+const openEntryDescriptor = () => {};
 </script>
 
 <template>
diff --git a/src/pages/Travel/TravelFilter.vue b/src/pages/Travel/TravelFilter.vue
new file mode 100644
index 000000000..117b770e9
--- /dev/null
+++ b/src/pages/Travel/TravelFilter.vue
@@ -0,0 +1,380 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import { inputSelectFilter } from 'src/composables/inputSelectFilterFn.js';
+import FetchData from 'components/FetchData.vue';
+import { toDate } from 'src/filters';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const warehousesOptions = reactive({
+    original: [],
+    filtered: [],
+});
+
+const continentsOptions = reactive({
+    original: [],
+    filtered: [],
+});
+
+const agenciesOptions = reactive({
+    original: [],
+    filtered: [],
+});
+
+const onFetchWarehouses = (warehouses) => {
+    warehousesOptions.original = warehouses.map((warehouse) => {
+        return { value: warehouse.id, label: warehouse.name };
+    });
+};
+
+const onFetchContinents = (continents) => {
+    continentsOptions.original = continents.map((continent) => {
+        return { value: continent.code, label: continent.name };
+    });
+};
+
+const onFetchAgencies = (agencies) => {
+    agenciesOptions.original = agencies.map((agency) => {
+        return { value: agency.agencyFk, label: agency.name };
+    });
+};
+
+const add = (paramsObj, key) => {
+    if (paramsObj[key] === undefined) {
+        paramsObj[key] = 1;
+    } else {
+        paramsObj[key]++;
+    }
+};
+
+const decrement = (paramsObj, key) => {
+    if (paramsObj[key] === 0) return;
+
+    paramsObj[key]--;
+};
+</script>
+
+<template>
+    <FetchData url="Warehouses" @on-fetch="(data) => onFetchWarehouses(data)" auto-load />
+    <FetchData url="Continents" @on-fetch="(data) => onFetchContinents(data)" auto-load />
+    <FetchData url="AgencyModes" @on-fetch="(data) => onFetchAgencies(data)" auto-load />
+
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <!-- searchFn -->
+        <template #body="{ params }">
+            <QList dense>
+                <QItem class="q-my-sm">
+                    <QItemSection>
+                        <QInput
+                            :label="t('params.search')"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            v-model="params.search"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QSelect
+                            :label="t('params.agencyModeFk')"
+                            :options="agenciesOptions.filtered"
+                            use-input
+                            option-value="value"
+                            option-label="label"
+                            emit-value
+                            map-options
+                            transition-show="jump-up"
+                            transition-hide="jump-up"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            @filter="
+                                (val, update, abort) =>
+                                    inputSelectFilter(val, update, abort, agenciesOptions)
+                            "
+                            v-model="params.agencyModeFk"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QSelect
+                            :label="t('travel.shared.wareHouseOut')"
+                            :options="warehousesOptions.filtered"
+                            use-input
+                            option-value="value"
+                            option-label="label"
+                            emit-value
+                            map-options
+                            transition-show="jump-up"
+                            transition-hide="jump-up"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            @filter="
+                                (val, update, abort) =>
+                                    inputSelectFilter(
+                                        val,
+                                        update,
+                                        abort,
+                                        warehousesOptions
+                                    )
+                            "
+                            v-model="params.warehouseOutFk"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QSelect
+                            :label="t('params.wareHouseIn')"
+                            :options="warehousesOptions.filtered"
+                            use-input
+                            option-value="value"
+                            option-label="label"
+                            emit-value
+                            map-options
+                            transition-show="jump-up"
+                            transition-hide="jump-up"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            @filter="
+                                (val, update, abort) =>
+                                    inputSelectFilter(
+                                        val,
+                                        update,
+                                        abort,
+                                        warehousesOptions
+                                    )
+                            "
+                            v-model="params.warehouseInFk"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            v-model="params.scopeDays"
+                            type="number"
+                            :label="t('params.scopeDays')"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            class="input-number"
+                        >
+                            <template #append>
+                                <QBtn
+                                    icon="add"
+                                    flat
+                                    dense
+                                    size="12px"
+                                    @click="add(params, 'scopeDays')"
+                                />
+                                <QBtn
+                                    icon="remove"
+                                    flat
+                                    dense
+                                    size="12px"
+                                    @click="decrement(params, 'scopeDays')"
+                                />
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            placeholder="dd-mm-aaa"
+                            :label="t('params.landedFrom')"
+                            :model-value="toDate(params.landedFrom)"
+                        >
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="params.landedFrom">
+                                            <div class="row items-center justify-end">
+                                                <QBtn
+                                                    v-close-popup
+                                                    label="Close"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            placeholder="dd-mm-aaa"
+                            :model-value="toDate(params.landedTo)"
+                            :label="t('params.landedTo')"
+                        >
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="params.landedTo">
+                                            <div class="row items-center justify-end">
+                                                <QBtn
+                                                    v-close-popup
+                                                    label="Close"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QSelect
+                            :label="t('params.continent')"
+                            :options="continentsOptions.filtered"
+                            use-input
+                            option-value="value"
+                            option-label="label"
+                            emit-value
+                            map-options
+                            transition-show="jump-up"
+                            transition-hide="jump-up"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            @filter="
+                                (val, update, abort) =>
+                                    inputSelectFilter(
+                                        val,
+                                        update,
+                                        abort,
+                                        continentsOptions
+                                    )
+                            "
+                            v-model="params.continent"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            v-model="params.totalEntries"
+                            type="number"
+                            :label="t('params.totalEntries')"
+                            dense
+                            lazy-rules
+                            outlined
+                            rounded
+                            min="0"
+                            class="input-number"
+                        >
+                            <template #append>
+                                <QBtn
+                                    icon="add"
+                                    flat
+                                    dense
+                                    size="12px"
+                                    @click="add(params, 'totalEntries')"
+                                />
+                                <QBtn
+                                    icon="remove"
+                                    flat
+                                    dense
+                                    size="12px"
+                                    @click="decrement(params, 'totalEntries')"
+                                />
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<style scoped>
+.input-number >>> input[type='number'] {
+    -moz-appearance: textfield;
+}
+.input-number >>> input::-webkit-outer-spin-button,
+.input-number >>> input::-webkit-inner-spin-button {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+</style>
+
+<i18n>
+   {
+        "en": {
+            "params": {
+                "search": "Id/Reference",
+                "agencyModeFk": "Agency",
+                "wareHouseIn": "Warehouse In",
+                "wareHouseOut": "Warehouse Out",
+                "scopeDays": "Days onward",
+                "landedFrom": "Landed from",
+                "landedTo": "Landed to",
+                "continent": "Continent out",
+                "totalEntries": "Total entries"
+            },
+        },
+        "es": {
+            "params":{
+                "search": "Id/Referencia",
+                "agencyModeFk": "Agencia",
+                "wareHouseIn": "Alm. entrada",
+                "wareHouseOut": "Alm. salida",
+                "scopeDays": "Días adelante",
+                "landedFrom": "Llegada desde",
+                "landedTo": "Llegada hasta",
+                "continent": "Cont. Salida",
+                "totalEntries": "Ent. totales"
+            },
+        }
+    }
+</i18n>
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index 8074bfd54..2a4f312a1 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -10,11 +10,14 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import TravelSummaryDialog from './Card/TravelSummaryDialog.vue';
 import { useTravelStore } from 'src/stores/travel.js';
 import { useQuasar } from 'quasar';
+import { useStateStore } from 'stores/useStateStore';
+import TravelFilter from './TravelFilter.vue';
 
 const router = useRouter();
 const travelStore = useTravelStore();
 const quasar = useQuasar();
 const { t } = useI18n();
+const stateStore = useStateStore();
 
 const navigateToTravelId = (id) => {
     router.push({ path: `/travel/${id}` });
@@ -22,7 +25,6 @@ const navigateToTravelId = (id) => {
 
 const cloneTravel = (travelData) => {
     const stringifiedTravelData = JSON.stringify(travelData);
-    console.log('clone data:: ', stringifiedTravelData);
     redirectToCreateView(stringifiedTravelData);
 };
 
@@ -41,13 +43,24 @@ const viewSummary = (id) => {
 
 onMounted(async () => {
     await travelStore.init();
+    stateStore.rightDrawer = true;
 });
 </script>
 
 <template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <TravelFilter data-key="TravelList" />
+        </QScrollArea>
+    </QDrawer>
     <QPage class="column items-center q-pa-md">
         <div class="card-list">
-            <VnPaginate data-key="SuppliersList" url="Travels/filter" auto-load>
+            <VnPaginate
+                data-key="TravelList"
+                url="Travels/filter"
+                auto-load
+                order="shipped DESC, landed DESC"
+            >
                 <template #body="{ rows }">
                     <CardList2
                         v-for="row of rows"