From b583d8b12e433918e56c6ad5fd6a9b607e71780d Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 17 Jan 2023 14:57:12 +0100
Subject: [PATCH] Added searchbar panel

---
 src/components/NavBar.vue             |   4 +-
 src/composables/useArrayData.js       |   9 +-
 src/pages/Customer/CustomerList.vue   |   2 +-
 src/pages/Customer/CustomerMain.vue   | 293 ++++++++++++++++++--------
 src/pages/Customer/CustomerSearch.vue |   3 +
 5 files changed, 221 insertions(+), 90 deletions(-)
 create mode 100644 src/pages/Customer/CustomerSearch.vue

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 30afedb7a..ee95e258c 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -38,7 +38,9 @@ function onToggleDrawer() {
                     </q-tooltip>
                 </q-btn>
             </router-link>
-            <q-toolbar-title shrink class="text-weight-bold">{{ appName }}</q-toolbar-title>
+            <q-toolbar-title shrink class="text-weight-bold" v-if="$q.screen.gt.xs">
+                {{ appName }}
+            </q-toolbar-title>
             <q-space></q-space>
             <div id="searchbar"></div>
             <q-space></q-space>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 5ce4f03fb..049cea116 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -49,8 +49,13 @@ export function useArrayData(key, userOptions) {
 
         store.filter = filter;
 
-        const requestOptions = { params: { filter: filter } };
-        const response = await axios.get(store.url, requestOptions);
+        const params = {
+            filter: filter,
+        };
+
+        Object.assign(params, store.userParams);
+
+        const response = await axios.get(store.url, { params });
 
         const { limit } = filter;
 
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index af0b3ce32..de2a7d7ca 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -25,7 +25,7 @@ function viewSummary(id) {
 
 <template>
     <q-page class="q-pa-md">
-        <paginate url="/Clients" order="id DESC" auto-load>
+        <paginate url="/Clients/filter" order="id DESC" auto-load>
             <template #body="{ rows }">
                 <q-card class="card" v-for="row of rows" :key="row.id">
                     <q-item class="q-pa-none items-start cursor-pointer q-hoverable" v-ripple clickable>
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index bbe456a4a..dfc391418 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -1,114 +1,234 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, reactive, computed } from 'vue';
+import { useSession } from 'src/composables/useSession';
 import { useState } from 'composables/useState';
 import { useArrayData } from 'composables/useArrayData';
 import LeftMenu from 'components/LeftMenu.vue';
+import FetchData from 'components/FetchData.vue';
 import TeleportSlot from 'components/ui/TeleportSlot.vue';
 
 const state = useState();
 const arrayData = useArrayData('customers');
+const session = useSession();
 
-const search = ref('');
-async function doSearch() {
-    let filter = {};
-    if (search.value != '') {
-        filter = {
-            where: {
-                id: search.value,
-            },
-        };
+const token = session.getToken();
+
+const searchBackdrop = ref(false);
+
+const provinces = ref([]);
+const workers = ref([]);
+const workersCopy = ref([]);
+const zones = ref([]);
+
+const searchPanel = ref();
+const userParams = reactive({});
+const tags = computed(() => {
+    const params = [];
+
+    for (const param in userParams) {
+        params.push({
+            label: param,
+            value: userParams[param],
+        });
     }
-    await arrayData.apply({ filter });
+
+    return params;
+});
+
+async function doSearch() {
+    // let filter = {};
+    // if (search.value != '') {
+    //     filter = {
+    //         where: {
+    //             id: search.value,
+    //         },
+    //     };
+    // }
+    const params = userParams;
+
+    await arrayData.apply({ filter: {}, params });
+    searchPanel.value.hide();
 }
 
-const searchRows = ref([])
-async function pre(value) {
-    let filter = {};
-    if (value != '') {
-        filter = {
-            where: {
-                id: value,
-            },
-        };
-    }
-    console.log(filter)
-    const rows = await arrayData.request({ userFilter: filter });
-    searchRows.value = rows
+// const searchRows = ref([])
+// async function pre(value) {
+//     let filter = {};
+//     if (value != '') {
+//         filter = {
+//             where: {
+//                 id: value,
+//             },
+//         };
+//     }
+//     console.log(filter)
+//     const rows = await arrayData.request({ userFilter: filter });
+//     searchRows.value = rows
+// }
+
+function setWorkers(data) {
+    workers.value = data;
+    workersCopy.value = data;
 }
 </script>
 
 <template>
+    <fetch-data url="Provinces" @on-fetch="(data) => (provinces = data)" auto-load />
+    <fetch-data url="Zones" @on-fetch="(data) => (zones = data)" auto-load />
+    <fetch-data
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="setWorkers"
+        auto-load
+    />
     <teleport-slot to="#searchbar">
         <q-form @submit="doSearch">
-            <q-input id="searchbar" v-model="search" label="Search" @update:model-value="pre" dark dense standout>
+            <q-input id="searchbar" v-model="userParams.search" label="Search" dark dense standout autofocus>
                 <template #prepend>
                     <q-icon name="search" />
                 </template>
                 <template #append>
-                    <q-btn icon="filter_alt" flat dense />
+                    <q-btn @click="searchBackdrop = !searchBackdrop" icon="filter_alt" flat dense>
+                        <q-tooltip>Apply search filters</q-tooltip>
+                        <div class="q-dialog__backdrop fixed-full" v-if="searchBackdrop"></div>
+                        <q-popup-proxy
+                            ref="searchPanel"
+                            v-model="searchBackdrop"
+                            target="#searchbar"
+                            no-parent-event
+                            fit
+                        >
+                            <q-card class="q-pa-md">
+                                <q-form @submit="doSearch" class="q-gutter-y-md">
+                                    <div class="row truncate-chip-labels">
+                                        <q-chip
+                                            v-for="chip of tags"
+                                            :key="chip.label"
+                                            @remove="log('Icecream')"
+                                            icon="label"
+                                            color="primary"
+                                            size="sm"
+                                            removable
+                                        >
+                                            <strong>{{ chip.label }}: </strong>
+                                            <span>"{{ chip.value }}"</span>
+                                        </q-chip>
+                                    </div>
+                                    <div class="row q-gutter-x-md">
+                                        <div class="col">
+                                            <q-input
+                                                v-model="userParams.search"
+                                                label="Search"
+                                                hint="Search by id or name"
+                                                lazy-rules
+                                                autofocus
+                                            />
+                                        </div>
+                                    </div>
+                                    <div class="row q-gutter-x-md">
+                                        <div class="col">
+                                            <q-input label="Name" v-model="userParams.name" lazy-rules />
+                                        </div>
+                                        <div class="col">
+                                            <q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules />
+                                        </div>
+                                        <div class="col">
+                                            <q-input label="Phone" v-model="userParams.phone" lazy-rules />
+                                        </div>
+                                    </div>
+
+                                    <div class="row q-gutter-x-md">
+                                        <div class="col">
+                                            <q-input label="Phone" v-model="userParams.phone" lazy-rules />
+                                        </div>
+                                        <div class="col">
+                                            <q-input label="Email" v-model="userParams.email" lazy-rules />
+                                        </div>
+                                    </div>
+
+                                    <div class="row q-gutter-x-md">
+                                        <div class="col">
+                                            <q-select
+                                                label="Province"
+                                                v-model="userParams.provinceFk"
+                                                :options="provinces"
+                                                option-value="id"
+                                                option-label="name"
+                                                emit-value
+                                                map-options
+                                            />
+                                        </div>
+                                        <div class="col">
+                                            <q-input label="City" v-model="userParams.city" lazy-rules />
+                                        </div>
+                                    </div>
+
+                                    <div class="row q-gutter-x-md">
+                                        <div class="col">
+                                            <q-select
+                                                label="Zone"
+                                                v-model="userParams.zoneFk"
+                                                :options="zones"
+                                                option-value="id"
+                                                option-label="name"
+                                                emit-value
+                                                map-options
+                                            />
+                                        </div>
+                                        <div class="col">
+                                            <q-input label="Postcode" v-model="userParams.postcode" lazy-rules />
+                                        </div>
+                                    </div>
+
+                                    <div class="row q-gutter-x-md">
+                                        <div class="col">
+                                            <q-select
+                                                v-model="userParams.salesPersonFk"
+                                                :options="workers"
+                                                option-value="id"
+                                                option-label="name"
+                                                emit-value
+                                                label="Salesperson"
+                                                map-options
+                                                use-input
+                                                :input-debounce="0"
+                                            >
+                                                <template #before>
+                                                    <q-avatar color="orange">
+                                                        <q-img
+                                                            v-if="userParams.salesPersonFk"
+                                                            :src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`"
+                                                            spinner-color="white"
+                                                        />
+                                                    </q-avatar>
+                                                </template>
+                                            </q-select>
+                                        </div>
+                                    </div>
+
+                                    <!-- <q-input
+                                    label="Phone"
+                                    hint="The customer phone"
+                                    lazy-rules
+                                    :rules="[(val) => (val && val.length > 0) || 'Please type something']"
+                                /> -->
+
+                                    <div>
+                                        <q-btn
+                                            label="Search"
+                                            type="submit"
+                                            color="primary"
+                                            class="full-width"
+                                            rounded
+                                        />
+                                    </div>
+                                </q-form>
+                            </q-card>
+                        </q-popup-proxy>
+                    </q-btn>
                 </template>
-                <q-popup-proxy v-if="searchRows.length === 1">
-                    <q-list>
-                        <q-item v-for="row of searchRows" :key="row.id" v-ripple clickable>
-                            <q-item-section avatar>
-                                <q-img src="http://localhost:9000/api/Images/user/160x160/9/download?access_token=qBo7qT6T24FasiG74QTfFZfXstxTVLZdmvHz7uqvhxpAG1G0dIF6RRGVeoS3NGiA" />
-                            </q-item-section>
-                            <q-item-section>
-                                <q-item-label>{{ row.name }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                    </q-list>
-                </q-popup-proxy>
             </q-input>
         </q-form>
     </teleport-slot>
-    <!-- <teleport-slot to="#searchbar">
-        <q-select
-            ref="search"
-            dark
-            dense
-            standout
-            use-input
-            hide-selected
-            color="black"
-            :stack-label="false"
-            label="Search or jump to..."
-            v-model="search"
-            @input-value="doSearch"
-            style="width: 400px"
-        >
-            <template #append>
-                <img src="https://cdn.quasar.dev/img/layout-gallery/img-github-search-key-slash.svg" />
-            </template>
-
-            <template #no-option>
-                <q-item>
-                    <q-item-section>
-                        <div class="text-center">
-                            <q-spinner-pie color="grey-5" size="24px" />
-                        </div>
-                    </q-item-section>
-                </q-item>
-            </template>
-
-            <template #option="scope">
-                <q-item v-bind="scope.itemProps" class="GL__select-GL__menu-link">
-                    <q-item-section side>
-                        <q-icon name="collections_bookmark" />
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label>{{ scope.opt.label }}</q-item-label>
-                    </q-item-section>
-                    <q-item-section side :class="{ 'default-type': !scope.opt.type }">
-                        <q-btn outline dense no-caps text-color="blue-grey-5" size="12px" class="bg-grey-1 q-px-sm">
-                            {{ scope.opt.type || 'Jump to' }}
-                            <q-icon name="subdirectory_arrow_left" size="14px" />
-                        </q-btn>
-                    </q-item-section>
-                </q-item>
-            </template>
-        </q-select>
-    </teleport-slot> -->
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
@@ -120,7 +240,8 @@ async function pre(value) {
 </template>
 
 <style lang="scss">
-#searchbar {
+#searchbar,
+.search-panel {
     width: 400px;
 }
 </style>
diff --git a/src/pages/Customer/CustomerSearch.vue b/src/pages/Customer/CustomerSearch.vue
new file mode 100644
index 000000000..6253f1e1a
--- /dev/null
+++ b/src/pages/Customer/CustomerSearch.vue
@@ -0,0 +1,3 @@
+<template>
+    test
+</template>
\ No newline at end of file