From 187f84b4da993fcbe42fdf5846b5a52eb827c5ad Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 7 Feb 2023 14:59:59 +0100
Subject: [PATCH] Added Right panel filter

---
 src/layouts/MainLayout.vue                    |  13 ++
 .../Customer/Card/CustomerDescriptor.vue      |  80 ++++---
 src/pages/Customer/Card/CustomerSummary.vue   | 122 +++++------
 src/pages/Customer/CustomerList.vue           | 197 +++++++++++++++++-
 4 files changed, 304 insertions(+), 108 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index a28f6e1d7..298ded9a4 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,14 +1,27 @@
 <script setup>
+import { ref } from 'vue';
 import { useQuasar } from 'quasar';
 import Navbar from 'src/components/NavBar.vue';
 
 const quasar = useQuasar();
+const filterPanel = ref(true);
 </script>
 
 <template>
     <q-layout view="hHh LpR fFf">
         <Navbar />
         <router-view></router-view>
+        <q-drawer
+            v-model="filterPanel"
+            show-if-above
+            side="right"
+            :width="256"
+            :breakpoint="500"
+        >
+            <q-scroll-area class="fit text-grey-8">
+                <div id="rightPanel"></div>
+            </q-scroll-area>
+        </q-drawer>
         <q-footer v-if="quasar.platform.is.mobile"></q-footer>
     </q-layout>
 </template>
diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index f3be46a7c..77a755dad 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -24,50 +24,46 @@ const entityId = computed(() => {
 <template>
     <card-descriptor module="Customer" :url="`Clients/${entityId}/getCard`">
         <template #body="{ entity }">
-            <q-list>
-                <q-item v-if="entity.salesPersonUser">
-                    <q-item-section>
-                        <q-item-label caption>{{
-                            t('customer.card.salesPerson')
-                        }}</q-item-label>
-                        <q-item-label>
-                            {{ entity.salesPersonUser.name }}
-                        </q-item-label>
-                    </q-item-section>
+            <q-list dense>
+                <q-item v-if="entity.salesPersonUser" class="row">
+                    <q-item-label class="col" caption>
+                        {{ t('customer.card.salesPerson') }}
+                    </q-item-label>
+                    <q-item-label class="col text-right q-ma-none">
+                        {{ entity.salesPersonUser.name }}
+                    </q-item-label>
                 </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-item-label caption>
-                            {{ t('customer.card.credit') }}
-                        </q-item-label>
-                        <q-item-label>
-                            {{ toCurrency(entity.credit) }}
-                        </q-item-label>
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label caption>{{
-                            t('customer.card.securedCredit')
-                        }}</q-item-label>
-                        <q-item-label>
-                            {{ toCurrency(entity.creditInsurance) }}
-                        </q-item-label>
-                    </q-item-section>
+                <q-item class="row">
+                    <q-item-label class="col" caption>
+                        {{ t('customer.card.credit') }}
+                    </q-item-label>
+                    <q-item-label class="col text-right q-ma-none">
+                        {{ toCurrency(entity.credit) }}
+                    </q-item-label>
                 </q-item>
-                <q-item>
-                    <q-item-section v-if="entity.payMethod">
-                        <q-item-label caption>{{
-                            t('customer.card.payMethod')
-                        }}</q-item-label>
-                        <q-item-label>
-                            {{ entity.payMethod.name }}
-                        </q-item-label>
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label caption>{{ t('customer.card.debt') }}</q-item-label>
-                        <q-item-label>
-                            {{ toCurrency(entity.debt) }}
-                        </q-item-label>
-                    </q-item-section>
+                <q-item class="row">
+                    <q-item-label class="col" caption>
+                        {{ t('customer.card.securedCredit') }}
+                    </q-item-label>
+                    <q-item-label class="col text-right q-ma-none">
+                        {{ toCurrency(entity.creditInsurance) }}
+                    </q-item-label>
+                </q-item>
+                <q-item v-if="entity.payMethod" class="row">
+                    <q-item-label class="col" caption>
+                        {{ t('customer.card.payMethod') }}
+                    </q-item-label>
+                    <q-item-label class="col text-right q-ma-none">
+                        {{ entity.payMethod.name }}
+                    </q-item-label>
+                </q-item>
+                <q-item class="row">
+                    <q-item-label class="col" caption>
+                        {{ t('customer.card.debt') }}
+                    </q-item-label>
+                    <q-item-label class="col text-right q-ma-none">
+                        {{ toCurrency(entity.debt) }}
+                    </q-item-label>
                 </q-item>
             </q-list>
             <q-card-actions class="q-gutter-md">
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 1e55ed224..f5fca57a9 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -48,10 +48,6 @@ const creditWarning = computed(() => {
 
     return tooMuchInsurance || noCreditInsurance ? 'negative' : '';
 });
-
-const arrayDataStore = useArrayDataStore();
-const d = arrayDataStore.get('test');
-console.log(d);
 </script>
 
 <template>
@@ -59,7 +55,7 @@ console.log(d);
         <template #body="{ entity }">
             <q-card-section class="row q-pa-none q-col-gutter-md">
                 <div class="col">
-                    <q-list>
+                    <q-list dense>
                         <q-item-label header class="text-h6">
                             {{ t('customer.summary.basicData') }}
                             <router-link
@@ -72,57 +68,69 @@ console.log(d);
                                 <q-icon name="open_in_new" />
                             </router-link>
                         </q-item-label>
+                        <q-separator class="q-mb-md" />
 
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
-                                    {{ t('customer.summary.customerId') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.id }}</q-item-label>
-                            </q-item-section>
+                        <q-item class="row col">
+                            <q-item-label class="col" caption>
+                                {{ t('customer.summary.customerId') }}:
+                            </q-item-label>
+                            <q-item-label class="col text-right q-ma-none">
+                                {{ entity.id }}
+                            </q-item-label>
                         </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
-                                    {{ t('customer.summary.name') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.name }}</q-item-label>
-                            </q-item-section>
+                        <q-item class="row col">
+                            <q-item-label class="col" caption>
+                                {{ t('customer.summary.name') }}:
+                            </q-item-label>
+                            <q-item-label class="col text-right q-ma-none">{{
+                                entity.name
+                            }}</q-item-label>
                         </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
-                                    {{ t('customer.summary.contact') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.contact }}</q-item-label>
-                            </q-item-section>
+                        <q-item class="row col">
+                            <q-item-label class="col" caption>
+                                {{ t('customer.summary.contact') }}:
+                            </q-item-label>
+                            <q-item-label class="col text-right q-ma-none">{{
+                                entity.contact
+                            }}</q-item-label>
                         </q-item>
-                        <q-item v-if="entity.salesPersonUser">
-                            <q-item-section>
-                                <q-item-label caption>
-                                    {{ t('customer.summary.salesPerson') }}
-                                </q-item-label>
-                                <q-item-label>{{
-                                    entity.salesPersonUser.name
-                                }}</q-item-label>
-                            </q-item-section>
+
+                        <q-item v-if="entity.salesPersonUser" class="row col">
+                            <q-item-label class="col" caption>
+                                {{ t('customer.summary.salesPerson') }}:
+                            </q-item-label>
+                            <q-item-label class="col text-right q-ma-none">
+                                {{ entity.salesPersonUser.name }}
+                            </q-item-label>
                         </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
-                                    {{ t('customer.summary.phone') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.phone }}</q-item-label>
-                            </q-item-section>
+
+                        <q-item class="row col">
+                            <q-item-label class="col" caption>
+                                {{ t('customer.summary.phone') }}:
+                            </q-item-label>
+                            <q-item-label class="col text-right q-ma-none">{{
+                                entity.phone
+                            }}</q-item-label>
                         </q-item>
-                        <q-item>
-                            <q-item-section>
-                                <q-item-label caption>
-                                    {{ t('customer.summary.mobile') }}
-                                </q-item-label>
-                                <q-item-label>{{ entity.mobile }}</q-item-label>
-                            </q-item-section>
+
+                        <q-item class="row col">
+                            <q-item-label class="col" caption>
+                                {{ t('customer.summary.mobile') }}:
+                            </q-item-label>
+                            <q-item-label class="col text-right q-ma-none">{{
+                                entity.mobile
+                            }}</q-item-label>
                         </q-item>
+
+                        <q-item v-if="entity.contactChannel" class="row col">
+                            <q-item-label class="col" caption>
+                                {{ t('customer.summary.contactChannel') }}
+                            </q-item-label>
+                            <q-item-label class="col text-right q-ma-none">
+                                {{ entity.contactChannel.name }}
+                            </q-item-label>
+                        </q-item>
+
                         <q-item>
                             <q-item-section>
                                 <q-item-label caption>
@@ -131,16 +139,6 @@ console.log(d);
                                 <q-item-label>{{ entity.email }}</q-item-label>
                             </q-item-section>
                         </q-item>
-                        <q-item v-if="entity.contactChannel">
-                            <q-item-section>
-                                <q-item-label caption>
-                                    {{ t('customer.summary.contactChannel') }}
-                                </q-item-label>
-                                <q-item-label>{{
-                                    entity.contactChannel.name
-                                }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
                     </q-list>
                 </div>
                 <div class="col">
@@ -526,3 +524,9 @@ console.log(d);
         </template>
     </card-summary>
 </template>
+
+<style lang="scss">
+.q-item__label + .q-item__label {
+    margin: 0;
+}
+</style>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index de2a7d7ca..97020ca24 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -1,9 +1,14 @@
 <script setup>
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import Paginate from 'src/components/PaginateData.vue';
 import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
+import TeleportSlot from 'components/ui/TeleportSlot.vue';
+import FetchData from 'components/FetchData.vue';
+
+import { useArrayData } from 'composables/useArrayData';
 
 const router = useRouter();
 const quasar = useQuasar();
@@ -21,27 +26,189 @@ function viewSummary(id) {
         },
     });
 }
+
+const arrayData = useArrayData('customers');
+
+const userParams = ref({});
+async function search() {
+    //const params = userParams;
+    const params = userParams.value;
+    await arrayData.apply({ params });
+    // searchPanel.value.hide();
+}
+
+const provinces = ref([]);
+const workers = ref([]);
+const workersCopy = ref([]);
+const zones = ref([]);
+
+function setWorkers(data) {
+    workers.value = data;
+    workersCopy.value = data;
+}
+
+const tags = computed(() => {
+    const params = [];
+
+    for (const param in userParams.value) {
+        params.push({
+            label: param,
+            value: userParams.value[param],
+        });
+    }
+
+    return params;
+});
 </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="#rightPanel">
+        <!-- <q-list>
+            <q-item-label header class="text-uppercase">Filter</q-item-label>
+        </q-list> -->
+        <q-form @submit="search">
+            <div class="row q-pa-md 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="q-pa-md q-gutter-y-md">
+                <q-input
+                    v-model="userParams.search"
+                    label="Search by id or name"
+                    lazy-rules
+                    autofocus
+                />
+
+                <q-btn
+                    label="Search"
+                    type="submit"
+                    color="primary"
+                    class="full-width"
+                    rounded
+                />
+            </div>
+            <q-separator />
+
+            <div class="q-px-md">
+                <q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules />
+            </div>
+
+            <div class="row q-gutter-md q-px-md">
+                <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="q-px-md">
+                <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"
+                >
+                </q-select>
+            </div>
+
+            <div class="row q-gutter-md q-px-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-md q-px-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-md q-px-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-form>
+    </teleport-slot>
     <q-page class="q-pa-md">
         <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>
+                    <q-item
+                        class="q-pa-none items-start cursor-pointer q-hoverable"
+                        v-ripple
+                        clickable
+                    >
                         <q-item-section class="q-pa-md" @click="navigate(row.id)">
                             <div class="text-h6">{{ row.name }}</div>
                             <q-item-label caption>#{{ row.id }}</q-item-label>
+
                             <q-list>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('customer.list.email') }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('customer.list.email') }}
+                                        </q-item-label>
                                         <q-item-label>{{ row.email }}</q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('customer.list.phone') }}</q-item-label>
+                                        <q-item-label caption>{{
+                                            t('customer.list.phone')
+                                        }}</q-item-label>
                                         <q-item-label>{{ row.phone }}</q-item-label>
                                     </q-item-section>
                                 </q-item>
@@ -69,11 +236,27 @@ function viewSummary(id) {
                                 </q-menu>
                             </q-btn> -->
 
-                            <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(row.id)">
-                                <q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
+                            <q-btn
+                                flat
+                                round
+                                color="orange"
+                                icon="arrow_circle_right"
+                                @click="navigate(row.id)"
+                            >
+                                <q-tooltip>{{
+                                    t('components.smartCard.openCard')
+                                }}</q-tooltip>
                             </q-btn>
-                            <q-btn flat round color="grey-7" icon="preview" @click="viewSummary(row.id)">
-                                <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
+                            <q-btn
+                                flat
+                                round
+                                color="grey-7"
+                                icon="preview"
+                                @click="viewSummary(row.id)"
+                            >
+                                <q-tooltip>{{
+                                    t('components.smartCard.openSummary')
+                                }}</q-tooltip>
                             </q-btn>
                             <!-- <q-btn flat round color="grey-7" icon="vn:ticket">
                                 <q-tooltip>{{ t('customer.list.customerOrders') }}</q-tooltip>