Changes

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;
+    if (userParams) Object.assign(searchParams.value, userParams.value);
-    const params = userParams.value;
+
-    await arrayData.apply({ params });
+    await arrayData.apply({ params: searchParams });
-    // searchPanel.value.hide();
+
+    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>
+                        <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>

src/composables/useArrayData.js

@@ -67,10 +67,10 @@ export function useArrayData(key, userOptions) {
 
         if (append === false) {
             store.data = response.data;
-        }
 
             updateStateParams();
         }
+    }
 
     async function request({ userFilter }) {
         if (!store.url) return;
@@ -116,6 +116,9 @@ export function useArrayData(key, userOptions) {
                 order: store.order,
                 limit: store.limit,
                 skip: store.skip,
+                params: [
+                    'a'
+                ],
             },
         });
     }

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,31 +40,11 @@ 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
-                >
-                    <strong>{{ chip.label }}: </strong>
-                    <span>"{{ chip.value }}"</span>
-                </q-chip>
-            </div> -->
         <div class="row q-gutter-x-md">
             <div class="col">
-                    <q-input
+                <q-input v-model="userParams.search" label="Search" hint="Search by id or name" lazy-rules autofocus />
-                        v-model="userParams.search"
-                        label="Search"
-                        hint="Search by id or name"
-                        lazy-rules
-                        autofocus
-                    />
             </div>
         </div>
         <div class="row q-gutter-x-md">
@@ -154,5 +139,15 @@ function setWorkers(data) {
             <q-btn label="Search" type="submit" color="primary" class="full-width" rounded />
         </div>
     </q-form>
-    </q-card>
 </template>
+<i18n>
+    {
+        "en": {
+            "phone": "Phone"
+        },
+        "es": {
+            "phone": "Teléfono"
+        }
+    }
+    </i18n>
+