From e1ac98cf3e54d698da695d9d6d9dc33546510115 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Wed, 17 Jan 2024 07:34:43 -0400
Subject: [PATCH] Add route list filter

---
 src/pages/Route/Card/RouteFilter.vue    | 234 ++++++++++++++++++++++++
 src/pages/Route/Card/RouteSearchbar.vue |  20 ++
 src/pages/Route/RouteList.vue           | 114 ++++++------
 3 files changed, 308 insertions(+), 60 deletions(-)
 create mode 100644 src/pages/Route/Card/RouteFilter.vue
 create mode 100644 src/pages/Route/Card/RouteSearchbar.vue

diff --git a/src/pages/Route/Card/RouteFilter.vue b/src/pages/Route/Card/RouteFilter.vue
new file mode 100644
index 000000000..45580d913
--- /dev/null
+++ b/src/pages/Route/Card/RouteFilter.vue
@@ -0,0 +1,234 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnInput from 'components/common/VnInput.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const emit = defineEmits(['search']);
+
+const workerList = ref([]);
+const agencyList = ref([]);
+const vehicleList = ref([]);
+const warehouseList = ref([]);
+</script>
+
+<template>
+    <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
+    />
+    <FetchData url="Warehouses" @on-fetch="(data) => (warehouseList = data)" auto-load />
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :search-button="true"
+        @search="emit('search')"
+    >
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params }">
+            <QList dense>
+                <QItem class="q-my-sm">
+                    <QItemSection v-if="workerList">
+                        <VnSelectFilter
+                            :label="t('Worker')"
+                            v-model="params.workerFk"
+                            :options="workerList"
+                            option-value="id"
+                            option-label="nickname"
+                            dense
+                            outlined
+                            rounded
+                            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>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-my-sm">
+                    <QItemSection v-if="agencyList">
+                        <VnSelectFilter
+                            :label="t('Agency')"
+                            v-model="params.agencyModeFk"
+                            :options="agencyList"
+                            option-value="id"
+                            option-label="name"
+                            dense
+                            outlined
+                            rounded
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-my-sm">
+                    <QItemSection>
+                        <VnInputDate
+                            v-model="params.from"
+                            :label="t('From')"
+                            is-outlined
+                            :disable="Boolean(params.scopeDays)"
+                            @update:model-value="params.scopeDays = null"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-my-sm">
+                    <QItemSection>
+                        <VnInputDate
+                            v-model="params.to"
+                            :label="t('To')"
+                            is-outlined
+                            :disable="Boolean(params.scopeDays)"
+                            @update:model-value="params.scopeDays = null"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-my-sm">
+                    <QItemSection>
+                        <VnInput
+                            v-model="params.scopeDays"
+                            type="number"
+                            :label="t('Days Onward')"
+                            is-outlined
+                            clearable
+                            :disable="Boolean(params.from || params.to)"
+                            @update:model-value="
+                                params.to = null;
+                                params.from = null;
+                            "
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-my-sm">
+                    <QItemSection v-if="vehicleList">
+                        <VnSelectFilter
+                            :label="t('Vehicle')"
+                            v-model="params.vehicleFk"
+                            :options="vehicleList"
+                            option-value="id"
+                            option-label="numberPlate"
+                            dense
+                            outlined
+                            rounded
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-my-sm">
+                    <QItemSection>
+                        <VnInput v-model="params.m3" label="m³" is-outlined clearable />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-my-sm">
+                    <QItemSection v-if="vehicleList">
+                        <VnSelectFilter
+                            :label="t('Warehouse')"
+                            v-model="params.warehouseFk"
+                            :options="warehouseList"
+                            option-value="id"
+                            option-label="name"
+                            dense
+                            outlined
+                            rounded
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-my-sm">
+                    <QItemSection>
+                        <VnInput
+                            v-model="params.description"
+                            :label="t('Description')"
+                            is-outlined
+                            clearable
+                        />
+                    </QItemSection>
+                </QItem>
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        warehouseFk: Warehouse
+        description: Description
+        m3: m³
+        vehicleFk: Vehicle
+        agencyModeFk: Agency
+        workerFk: Worker
+        from: From
+        to: To
+es:
+    params:
+        warehouseFk: Almacén
+        description: Descripción
+        m3: m³
+        vehicleFk: Vehículo
+        agencyModeFk: Agencia
+        workerFk: Trabajador
+        from: Desde
+        to: Hasta
+    Warehouse: Almacén
+    Description: Descripción
+    Vehicle: Vehículo
+    Agency: Agencia
+    Worker: Trabajador
+    From: Desde
+    To: Hasta
+</i18n>
diff --git a/src/pages/Route/Card/RouteSearchbar.vue b/src/pages/Route/Card/RouteSearchbar.vue
new file mode 100644
index 000000000..9ee4a602f
--- /dev/null
+++ b/src/pages/Route/Card/RouteSearchbar.vue
@@ -0,0 +1,20 @@
+<script setup>
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import {useI18n} from "vue-i18n";
+const { t } = useI18n();
+</script>
+
+<template>
+    <VnSearchbar
+        data-key="RouteList"
+        :label="t('Search route')"
+        :info="t('You can search by route reference')"
+    />
+</template>
+
+<style scoped lang="scss"></style>
+<i18n>
+es:
+    Search route: Buscar rutas
+    You can search by route reference: Puedes buscar por referencia de la ruta
+</i18n>
diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index 408119751..ddf3e1a12 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -3,14 +3,16 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
-import {dashIfEmpty, toDate, toHour} from 'src/filters';
+import { dashIfEmpty, toDate, toHour } from 'src/filters';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
 import FetchData from 'components/FetchData.vue';
 import { useValidator } from 'composables/useValidator';
-import VnInputDate from "components/common/VnInputDate.vue";
-import VnInput from "components/common/VnInput.vue";
-import VnInputTime from "components/common/VnInputTime.vue";
-import axios from "axios";
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnInput from 'components/common/VnInput.vue';
+import VnInputTime from 'components/common/VnInputTime.vue';
+import axios from 'axios';
+import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
+import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
 
 const stateStore = useStateStore();
 // const router = useRouter();
@@ -98,7 +100,7 @@ const columns = computed(() => [
     },
 ]);
 
-const refreshKey = ref(0)
+const refreshKey = ref(0);
 const workers = ref([]);
 const agencyList = ref([]);
 const vehicleList = ref([]);
@@ -108,76 +110,63 @@ const updateRoute = async (route) => {
     } catch (err) {
         return err;
     }
-}
+};
 
 const updateVehicle = (row, vehicle) => {
-    row.vehicleFk = vehicle.id
-    row.vehiclePlateNumber = vehicle.numberPlate
-    updateRoute(row)
-}
+    row.vehicleFk = vehicle.id;
+    row.vehiclePlateNumber = vehicle.numberPlate;
+    updateRoute(row);
+};
 
 const updateAgency = (row, agency) => {
-    row.agencyModeFk = agency.id
-    row.agencyName = agency.name
-    updateRoute(row)
-}
+    row.agencyModeFk = agency.id;
+    row.agencyName = agency.name;
+    updateRoute(row);
+};
 
 const updateWorker = (row, worker) => {
-    row.workerFk = worker.id
-    row.workerUserName = worker.name
-    updateRoute(row)
-}
+    row.workerFk = worker.id;
+    row.workerUserName = worker.name;
+    updateRoute(row);
+};
 </script>
 
 <template>
     <template v-if="stateStore.isHeaderMounted()">
-        <!--        <Teleport to="#searchbar">-->
-        <!--            <ShelvingSearchbar />-->
-        <!--        </Teleport>-->
-        <!--        <Teleport to="#actions-append">-->
-        <!--            <div class="row q-gutter-x-sm">-->
-        <!--                <QBtn-->
-        <!--                    flat-->
-        <!--                    @click="stateStore.toggleRightDrawer()"-->
-        <!--                    round-->
-        <!--                    dense-->
-        <!--                    icon="menu"-->
-        <!--                >-->
-        <!--                    <QTooltip bottom anchor="bottom right">-->
-        <!--                        {{ t('globals.collapseMenu') }}-->
-        <!--                    </QTooltip>-->
-        <!--                </QBtn>-->
-        <!--            </div>-->
-        <!--        </Teleport>-->
+        <Teleport to="#searchbar">
+            <RouteSearchbar />
+        </Teleport>
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
     </template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <!--        <QScrollArea class="fit text-grey-8">-->
-        <!--            <ShelvingFilter data-key="ShelvingList" />-->
-        <!--        </QScrollArea>-->
+        <QScrollArea class="fit text-grey-8">
+            <RouteFilter data-key="RouteList" />
+        </QScrollArea>
     </QDrawer>
     <FetchData
         url="Workers/activeWithInheritedRole"
         @on-fetch="(data) => (workers = data)"
         auto-load
     />
-    <FetchData
-        url="AgencyModes"
-        @on-fetch="(data) => (agencyList = data)"
-        auto-load
-    />
-    <FetchData
-        url="Vehicles"
-        @on-fetch="(data) => (vehicleList = data)"
-        auto-load
-    />
+    <FetchData url="AgencyModes" @on-fetch="(data) => (agencyList = data)" auto-load />
+    <FetchData url="Vehicles" @on-fetch="(data) => (vehicleList = data)" auto-load />
     <QPage class="column items-center q-pa-md">
         <QToolbar class="q-pa-none q-mb-sm justify-end">
-            <QBtn
-                icon="refresh"
-                color="primary"
-                class="q-mr-sm"
-                @click="refreshKey++"
-            />
+            <QBtn icon="refresh" color="primary" class="q-mr-sm" @click="refreshKey++" />
         </QToolbar>
         <VnPaginate
             :key="refreshKey"
@@ -185,7 +174,6 @@ const updateWorker = (row, worker) => {
             url="Routes/filter"
             :order="['created DESC', 'id DESC']"
             :limit="20"
-            :user-params="params"
             auto-load
         >
             <template #body="{ rows }">
@@ -205,7 +193,9 @@ const updateWorker = (row, worker) => {
                                 :model-value="props.row.workerFk"
                                 v-slot="scope"
                                 buttons
-                                @update:model-value="(worker) => updateWorker(props.row, worker)"
+                                @update:model-value="
+                                    (worker) => updateWorker(props.row, worker)
+                                "
                             >
                                 <VnSelectFilter
                                     :label="t('Worker')"
@@ -245,7 +235,9 @@ const updateWorker = (row, worker) => {
                                 :model-value="props.row.agencyModeFk"
                                 v-slot="scope"
                                 buttons
-                                @update:model-value="(agency) => updateAgency(props.row, agency)"
+                                @update:model-value="
+                                    (agency) => updateAgency(props.row, agency)
+                                "
                             >
                                 <VnSelectFilter
                                     :label="t('Agency')"
@@ -271,7 +263,9 @@ const updateWorker = (row, worker) => {
                                 :model-value="props.row.vehicleFk"
                                 v-slot="scope"
                                 buttons
-                                @update:model-value="(vehicle) => updateVehicle(props.row, vehicle)"
+                                @update:model-value="
+                                    (vehicle) => updateVehicle(props.row, vehicle)
+                                "
                             >
                                 <VnSelectFilter
                                     :label="t('Vehicle')"