From 97a56008419e4d77eee121a6758bc00350affb18 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 19 Jan 2023 15:01:18 +0100
Subject: [PATCH] Component

---
 src/components/ui/ModuleSearchbar.vue |  40 +++++
 src/pages/Customer/CustomerMain.vue   | 243 +++++---------------------
 src/pages/Customer/CustomerSearch.vue | 159 ++++++++++++++++-
 3 files changed, 238 insertions(+), 204 deletions(-)
 create mode 100644 src/components/ui/ModuleSearchbar.vue

diff --git a/src/components/ui/ModuleSearchbar.vue b/src/components/ui/ModuleSearchbar.vue
new file mode 100644
index 000000000..7be777bda
--- /dev/null
+++ b/src/components/ui/ModuleSearchbar.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from 'vue';
+import { useArrayData } from 'composables/useArrayData';
+// const props = defineProps({
+//     id: {
+//         type: String,
+//         required: true,
+//     },
+// });
+
+const arrayData = useArrayData('customers');
+const searchText = ref('');
+const searchBackdrop = ref(false);
+
+async function search({ userParams }) {
+    //const params = userParams;
+    const params = userParams.value;
+    await arrayData.apply({ params });
+    // searchPanel.value.hide();
+}
+</script>
+
+<template>
+    <q-form @submit="search">
+        <q-input id="searchbar" v-model="searchText" label="Search" dark dense standout autofocus>
+            <template #prepend>
+                <q-icon name="search" />
+            </template>
+            <template #append>
+                <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-popup-proxy>
+                </q-btn>
+            </template>
+        </q-input>
+    </q-form>
+</template>
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index bd36f7454..63512c29c 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -1,54 +1,48 @@
 <script setup>
-import { ref, reactive, computed } from 'vue';
-import { useSession } from 'src/composables/useSession';
+// 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';
+import ModuleSearchbar from 'components/ui/ModuleSearchbar.vue';
+import CustomerSearch from './CustomerSearch.vue';
 
 const state = useState();
-const arrayData = useArrayData('customers');
-const session = useSession();
+// const arrayData = useArrayData('customers');
+// const session = useSession();
 
-const token = session.getToken();
+// const token = session.getToken();
 
-const searchBackdrop = ref(false);
+// 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 = [];
 
-const searchPanel = ref();
-const userParams = reactive({});
-const tags = computed(() => {
-    const params = [];
+//     for (const param in userParams) {
+//         params.push({
+//             label: param,
+//             value: userParams[param],
+//         });
+//     }
 
-    for (const param in userParams) {
-        params.push({
-            label: param,
-            value: userParams[param],
-        });
-    }
+//     return params;
+// });
 
-    return params;
-});
+// async function doSearch() {
+//     // let filter = {};
+//     // if (search.value != '') {
+//     //     filter = {
+//     //         where: {
+//     //             id: search.value,
+//     //         },
+//     //     };
+//     // }
+//     const params = userParams;
 
-async function doSearch() {
-    // let filter = {};
-    // if (search.value != '') {
-    //     filter = {
-    //         where: {
-    //             id: search.value,
-    //         },
-    //     };
-    // }
-    const params = userParams;
-
-    await arrayData.apply({ params });
-    searchPanel.value.hide();
-}
+//     await arrayData.apply({ params });
+//     searchPanel.value.hide();
+// }
 
 // const searchRows = ref([])
 // async function pre(value) {
@@ -65,175 +59,20 @@ async function doSearch() {
 //     searchRows.value = rows
 // }
 
-function searchParams(params) {
-    switch (params) {
-        
-    }
-}
+// function searchParams(params) {
+//     switch (params) {
 
-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="userParams.search" label="Search" dark dense standout autofocus>
-                <template #prepend>
-                    <q-icon name="search" />
-                </template>
-                <template #append>
-                    <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="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"
-                                            >
-                                                <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-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>
-
-                                    <!-- <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-input>
-        </q-form>
+        <module-searchbar data-key="customerList">
+            <template #panel="{ scope }">
+                <customer-search :scope="scope" />
+            </template>
+        </module-searchbar>
     </teleport-slot>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit text-grey-8">
diff --git a/src/pages/Customer/CustomerSearch.vue b/src/pages/Customer/CustomerSearch.vue
index 6253f1e1a..c820806cf 100644
--- a/src/pages/Customer/CustomerSearch.vue
+++ b/src/pages/Customer/CustomerSearch.vue
@@ -1,3 +1,158 @@
+<script setup>
+import { ref } from 'vue';
+import FetchData from 'components/FetchData.vue';
+
+const props = defineProps({
+    scope: {
+        type: Object,
+        required: true,
+    },
+});
+
+const userParams = ref({});
+async function search() {
+    const searchFn = props.scope.search;
+
+    await searchFn({ userParams });
+}
+
+const provinces = ref([]);
+const workers = ref([]);
+const workersCopy = ref([]);
+const zones = ref([]);
+
+function setWorkers(data) {
+    workers.value = data;
+    workersCopy.value = data;
+}
+</script>
 <template>
-    test
-</template>
\ No newline at end of file
+    <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
+    />
+    <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
+                        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"
+                    >
+                        <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-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>
+
+            <!-- <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>
+</template>