From 1b998d453d746f32d3b86d767f8db576a7f610db Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Fri, 27 Jan 2023 09:43:10 +0100
Subject: [PATCH] Changes

---
 src/components/ui/ModuleSearchbar.vue |  88 ++++++++++-
 src/composables/useArrayData.js       |   7 +-
 src/pages/Customer/CustomerSearch.vue | 205 +++++++++++++-------------
 3 files changed, 185 insertions(+), 115 deletions(-)

diff --git a/src/components/ui/ModuleSearchbar.vue b/src/components/ui/ModuleSearchbar.vue
index 7be777bda..138121a86 100644
--- a/src/components/ui/ModuleSearchbar.vue
+++ b/src/components/ui/ModuleSearchbar.vue
@@ -1,6 +1,8 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
+
 // const props = defineProps({
 //     id: {
 //         type: String,
@@ -8,33 +10,103 @@ import { useArrayData } from 'composables/useArrayData';
 //     },
 // });
 
+const { t } = useI18n();
 const arrayData = useArrayData('customers');
-const searchText = ref('');
+
+const searchPanel = ref();
+const searchParams = ref({});
 const searchBackdrop = ref(false);
 
 async function search({ userParams }) {
-    //const params = userParams;
-    const params = userParams.value;
-    await arrayData.apply({ params });
-    // searchPanel.value.hide();
+    if (userParams) Object.assign(searchParams.value, userParams.value);
+
+    await arrayData.apply({ params: searchParams });
+
+    searchPanel.value.hide();
 }
+
+async function remove(param) {
+    delete searchParams.value[param];
+
+    await search({ userParams: {} });
+}
+
+const tags = computed(() => {
+    const params = [];
+
+    for (const param in searchParams.value) {
+        params.push({
+            property: param,
+            label: param,
+            value: searchParams.value[param],
+        });
+    }
+
+    return params;
+});
 </script>
 
 <template>
     <q-form @submit="search">
-        <q-input id="searchbar" v-model="searchText" label="Search" dark dense standout autofocus>
+        <q-input id="searchbar" v-model="searchParams.search" label="Search" dark dense standout autofocus>
             <template #prepend>
                 <q-icon name="search" />
             </template>
             <template #append>
+                <q-btn icon="label" flat dense>
+                    <q-popup-proxy>
+                        <q-card class="q-pa-md" style="max-width: 300px">
+                            <div class="truncate-chip-labels">
+                                <q-chip
+                                    v-for="chip of tags"
+                                    :key="chip.label"
+                                    @remove="remove(chip.property)"
+                                    icon="label"
+                                    color="primary"
+                                    size="sm"
+                                    removable
+                                >
+                                    <strong>{{ t(chip.label) }}: </strong>
+                                    <span>"{{ chip.value }}"</span>
+                                </q-chip>
+                            </div>
+                        </q-card>
+                    </q-popup-proxy>
+                </q-btn>
                 <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>
-                        <slot name="panel" :scope="{ search }" />
+                        <q-card class="q-pa-md">
+                            <div class="row truncate-chip-labels">
+                                <q-chip
+                                    v-for="chip of tags"
+                                    :key="chip.label"
+                                    @remove="remove(chip.property)"
+                                    icon="label"
+                                    color="primary"
+                                    size="sm"
+                                    removable
+                                >
+                                    <strong>{{ t(chip.label) }}: </strong>
+                                    <span>"{{ chip.value }}"</span>
+                                </q-chip>
+                            </div>
+                            <slot name="panel" :scope="{ search }" />
+                        </q-card>
                     </q-popup-proxy>
                 </q-btn>
             </template>
         </q-input>
     </q-form>
 </template>
+<i18n>
+    {
+        "en": {
+            "phone": "Phone"
+        },
+        "es": {
+            "phone": "Teléfono"
+        }
+    }
+</i18n>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 049cea116..221a7d2c5 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -67,9 +67,9 @@ export function useArrayData(key, userOptions) {
 
         if (append === false) {
             store.data = response.data;
-        }
 
-        updateStateParams();
+            updateStateParams();
+        }
     }
 
     async function request({ userFilter }) {
@@ -116,6 +116,9 @@ export function useArrayData(key, userOptions) {
                 order: store.order,
                 limit: store.limit,
                 skip: store.skip,
+                params: [
+                    'a'
+                ],
             },
         });
     }
diff --git a/src/pages/Customer/CustomerSearch.vue b/src/pages/Customer/CustomerSearch.vue
index c820806cf..738da9d89 100644
--- a/src/pages/Customer/CustomerSearch.vue
+++ b/src/pages/Customer/CustomerSearch.vue
@@ -1,7 +1,10 @@
 <script setup>
 import { ref } from 'vue';
+import { useSession } from 'composables/useSession';
 import FetchData from 'components/FetchData.vue';
 
+const session = useSession();
+
 const props = defineProps({
     scope: {
         type: Object,
@@ -9,7 +12,9 @@ const props = defineProps({
     },
 });
 
+const token = session.getToken();
 const userParams = ref({});
+
 async function search() {
     const searchFn = props.scope.search;
 
@@ -35,124 +40,114 @@ function setWorkers(data) {
         @on-fetch="setWorkers"
         auto-load
     />
-    <q-card class="q-pa-md">
-        <q-form @submit="search" 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
+
+    <q-form @submit="search" class="q-gutter-y-md">
+        <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="Fiscal ID" v-model="userParams.fi" lazy-rules />
+            </div>
+            <div class="col">
+                <q-input label="Name" v-model="userParams.name" lazy-rules />
+            </div>
+            <div class="col">
+                <q-input label="Social name" v-model="userParams.socialName" 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"
                 >
-                    <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="Fiscal ID" v-model="userParams.fi" lazy-rules />
-                </div>
-                <div class="col">
-                    <q-input label="Name" v-model="userParams.name" lazy-rules />
-                </div>
-                <div class="col">
-                    <q-input label="Social name" v-model="userParams.socialName" lazy-rules />
-                </div>
+                    <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>
 
-            <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 class="row q-gutter-x-md">
+            <div class="col">
+                <q-input label="Phone" v-model="userParams.phone" lazy-rules />
             </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 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 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="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 class="col">
+                <q-input label="City" v-model="userParams.city" lazy-rules />
             </div>
+        </div>
 
-            <!-- <q-input
+        <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>
+
+        <!-- <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>
+        <div>
+            <q-btn label="Search" type="submit" color="primary" class="full-width" rounded />
+        </div>
+    </q-form>
 </template>
+<i18n>
+    {
+        "en": {
+            "phone": "Phone"
+        },
+        "es": {
+            "phone": "Teléfono"
+        }
+    }
+    </i18n>
+    
\ No newline at end of file