From 3c15554ab481badc77dfa2b6c9b02dd7aa7fe212 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 9 Feb 2023 07:26:08 +0100
Subject: [PATCH] Side filters

---
 src/components/NavBar.vue                     |  17 +-
 src/components/ui/ModuleSearchbar.vue         |  77 +++-----
 src/composables/useArrayData.js               |   6 +-
 src/css/app.scss                              |   7 +
 src/css/quasar.variables.scss                 |   2 -
 src/layouts/MainLayout.vue                    |  13 +-
 src/pages/Customer/Card/CustomerCard.vue      |   2 +-
 .../Customer/Card/CustomerDescriptor.vue      |  10 +-
 src/pages/Customer/Card/CustomerSummary.vue   |  26 +--
 src/pages/Customer/CustomerList.vue           | 172 +++++++++++++++++-
 src/pages/InvoiceOut/Card/InvoiceOutCard.vue  |   3 +
 11 files changed, 246 insertions(+), 89 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index ee95e258c..e63534d2f 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -13,6 +13,8 @@ const user = state.getUser();
 const token = session.getToken();
 const appName = 'Lilium';
 
+defineEmits(['onToggleRightDrawer']);
+
 onMounted(() => (state.headerMounted.value = true));
 
 function onToggleDrawer() {
@@ -29,9 +31,13 @@ function onToggleDrawer() {
                 </q-tooltip>
             </q-btn>
             <router-link to="/">
-                <q-btn flat round class="q-ml-xs" v-if="$q.screen.gt.xs">
+                <q-btn class="q-ml-xs" color="primary" v-if="$q.screen.gt.xs" flat round>
                     <q-avatar square size="md">
-                        <q-img src="~/assets/logo_icon.svg" alt="Logo" />
+                        <q-img
+                            src="~/assets/logo_icon.svg"
+                            alt="Logo"
+                            spinner-color="primary"
+                        />
                     </q-avatar>
                     <q-tooltip bottom>
                         {{ t('globals.backToDashboard') }}
@@ -52,11 +58,16 @@ function onToggleDrawer() {
                     </q-tooltip>
                     <PinnedModules />
                 </q-btn>
+                <q-btn flat @click="$emit('onToggleRightDrawer')" round dense icon="menu">
+                    <q-tooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </q-tooltip>
+                </q-btn>
                 <q-btn rounded dense flat no-wrap id="user">
                     <q-avatar size="lg">
                         <q-img
                             :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
-                            spinner-color="white"
+                            spinner-color="primary"
                         >
                         </q-img>
                     </q-avatar>
diff --git a/src/components/ui/ModuleSearchbar.vue b/src/components/ui/ModuleSearchbar.vue
index 138121a86..6382f8710 100644
--- a/src/components/ui/ModuleSearchbar.vue
+++ b/src/components/ui/ModuleSearchbar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
 
@@ -17,66 +17,45 @@ const searchPanel = ref();
 const searchParams = ref({});
 const searchBackdrop = ref(false);
 
-async function search({ userParams }) {
-    if (userParams) Object.assign(searchParams.value, userParams.value);
-
-    await arrayData.apply({ params: searchParams });
+async function search() {
+    await arrayData.apply({ params: searchParams.value });
 
     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="searchParams.search" label="Search" dark dense standout autofocus>
+        <q-input
+            id="searchbar"
+            v-model="searchParams.search"
+            label="Search"
+            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-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>
+                    <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
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 221a7d2c5..bef50b0bf 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -91,7 +91,7 @@ export function useArrayData(key, userOptions) {
 
     async function apply({ filter, params }) {
         if (filter) store.userFilter = filter;
-        if (params) store.userParams = params;
+        if (params) store.userParams = Object.assign({}, params);
 
         await fetch({ append: false });
     }
@@ -116,9 +116,7 @@ export function useArrayData(key, userOptions) {
                 order: store.order,
                 limit: store.limit,
                 skip: store.skip,
-                params: [
-                    'a'
-                ],
+                params: JSON.stringify(store.userParams),
             },
         });
     }
diff --git a/src/css/app.scss b/src/css/app.scss
index 2e6008b1e..b929f5880 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -23,3 +23,10 @@ select:-webkit-autofill {
     -webkit-background-clip: text !important;
     background-clip: text !important;
 }
+
+body.body--light {
+    .q-toolbar {
+        background-color: white;
+        color: #555;
+    }
+}
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 237450e48..6ebf7a7a7 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -16,8 +16,6 @@ $primary: #ff9800;
 $secondary: #26a69a;
 $accent: #9c27b0;
 
-$dark: #1d1d1d;
-
 $positive: #21ba45;
 $negative: #c10015;
 $info: #31ccec;
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 298ded9a4..5be496980 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -4,19 +4,24 @@ import { useQuasar } from 'quasar';
 import Navbar from 'src/components/NavBar.vue';
 
 const quasar = useQuasar();
-const filterPanel = ref(true);
+
+const rightDrawer = ref(false);
+
+function toggleRightDrawer() {
+    rightDrawer.value = !rightDrawer.value;
+}
 </script>
 
 <template>
     <q-layout view="hHh LpR fFf">
-        <Navbar />
+        <Navbar @on-toggle-right-drawer="toggleRightDrawer" />
         <router-view></router-view>
         <q-drawer
-            v-model="filterPanel"
+            v-model="rightDrawer"
             show-if-above
             side="right"
             :width="256"
-            :breakpoint="500"
+            :breakpoint="800"
         >
             <q-scroll-area class="fit text-grey-8">
                 <div id="rightPanel"></div>
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 73a436a69..37b57bb70 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -8,7 +8,7 @@ const state = useState();
 <template>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
-            <customer-descriptor />
+            <CustomerDescriptor />
             <q-separator />
             <left-menu source="card" />
         </q-scroll-area>
diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index 77a755dad..6cbba9d2f 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -29,7 +29,7 @@ const entityId = computed(() => {
                     <q-item-label class="col" caption>
                         {{ t('customer.card.salesPerson') }}
                     </q-item-label>
-                    <q-item-label class="col text-right q-ma-none">
+                    <q-item-label class="col q-ma-none">
                         {{ entity.salesPersonUser.name }}
                     </q-item-label>
                 </q-item>
@@ -37,7 +37,7 @@ const entityId = computed(() => {
                     <q-item-label class="col" caption>
                         {{ t('customer.card.credit') }}
                     </q-item-label>
-                    <q-item-label class="col text-right q-ma-none">
+                    <q-item-label class="col q-ma-none">
                         {{ toCurrency(entity.credit) }}
                     </q-item-label>
                 </q-item>
@@ -45,7 +45,7 @@ const entityId = computed(() => {
                     <q-item-label class="col" caption>
                         {{ t('customer.card.securedCredit') }}
                     </q-item-label>
-                    <q-item-label class="col text-right q-ma-none">
+                    <q-item-label class="col q-ma-none">
                         {{ toCurrency(entity.creditInsurance) }}
                     </q-item-label>
                 </q-item>
@@ -53,7 +53,7 @@ const entityId = computed(() => {
                     <q-item-label class="col" caption>
                         {{ t('customer.card.payMethod') }}
                     </q-item-label>
-                    <q-item-label class="col text-right q-ma-none">
+                    <q-item-label class="col q-ma-none">
                         {{ entity.payMethod.name }}
                     </q-item-label>
                 </q-item>
@@ -61,7 +61,7 @@ const entityId = computed(() => {
                     <q-item-label class="col" caption>
                         {{ t('customer.card.debt') }}
                     </q-item-label>
-                    <q-item-label class="col text-right q-ma-none">
+                    <q-item-label class="col q-ma-none">
                         {{ toCurrency(entity.debt) }}
                     </q-item-label>
                 </q-item>
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index f5fca57a9..c7f5f60dd 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -72,52 +72,52 @@ const creditWarning = computed(() => {
 
                         <q-item class="row col">
                             <q-item-label class="col" caption>
-                                {{ t('customer.summary.customerId') }}:
+                                {{ t('customer.summary.customerId') }}
                             </q-item-label>
-                            <q-item-label class="col text-right q-ma-none">
+                            <q-item-label class="col q-ma-none">
                                 {{ entity.id }}
                             </q-item-label>
                         </q-item>
                         <q-item class="row col">
                             <q-item-label class="col" caption>
-                                {{ t('customer.summary.name') }}:
+                                {{ t('customer.summary.name') }}
                             </q-item-label>
-                            <q-item-label class="col text-right q-ma-none">{{
+                            <q-item-label class="col q-ma-none">{{
                                 entity.name
                             }}</q-item-label>
                         </q-item>
                         <q-item class="row col">
                             <q-item-label class="col" caption>
-                                {{ t('customer.summary.contact') }}:
+                                {{ t('customer.summary.contact') }}
                             </q-item-label>
-                            <q-item-label class="col text-right q-ma-none">{{
+                            <q-item-label class="col q-ma-none">{{
                                 entity.contact
                             }}</q-item-label>
                         </q-item>
 
                         <q-item v-if="entity.salesPersonUser" class="row col">
                             <q-item-label class="col" caption>
-                                {{ t('customer.summary.salesPerson') }}:
+                                {{ t('customer.summary.salesPerson') }}
                             </q-item-label>
-                            <q-item-label class="col text-right q-ma-none">
+                            <q-item-label class="col q-ma-none">
                                 {{ entity.salesPersonUser.name }}
                             </q-item-label>
                         </q-item>
 
                         <q-item class="row col">
                             <q-item-label class="col" caption>
-                                {{ t('customer.summary.phone') }}:
+                                {{ t('customer.summary.phone') }}
                             </q-item-label>
-                            <q-item-label class="col text-right q-ma-none">{{
+                            <q-item-label class="col q-ma-none">{{
                                 entity.phone
                             }}</q-item-label>
                         </q-item>
 
                         <q-item class="row col">
                             <q-item-label class="col" caption>
-                                {{ t('customer.summary.mobile') }}:
+                                {{ t('customer.summary.mobile') }}
                             </q-item-label>
-                            <q-item-label class="col text-right q-ma-none">{{
+                            <q-item-label class="col q-ma-none">{{
                                 entity.mobile
                             }}</q-item-label>
                         </q-item>
@@ -126,7 +126,7 @@ const creditWarning = computed(() => {
                             <q-item-label class="col" caption>
                                 {{ t('customer.summary.contactChannel') }}
                             </q-item-label>
-                            <q-item-label class="col text-right q-ma-none">
+                            <q-item-label class="col q-ma-none">
                                 {{ entity.contactChannel.name }}
                             </q-item-label>
                         </q-item>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 97020ca24..c8221e7b2 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -9,11 +9,15 @@ import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import FetchData from 'components/FetchData.vue';
 
 import { useArrayData } from 'composables/useArrayData';
+import { useSession } from 'src/composables/useSession';
 
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
+const session = useSession();
+const token = session.getToken();
+
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
 }
@@ -28,13 +32,12 @@ function viewSummary(id) {
 }
 
 const arrayData = useArrayData('customers');
+const store = arrayData.store;
 
 const userParams = ref({});
 async function search() {
-    //const params = userParams;
     const params = userParams.value;
     await arrayData.apply({ params });
-    // searchPanel.value.hide();
 }
 
 const provinces = ref([]);
@@ -47,13 +50,18 @@ function setWorkers(data) {
     workersCopy.value = data;
 }
 
+async function remove(key) {
+    delete userParams.value[key];
+    await search();
+}
+
 const tags = computed(() => {
     const params = [];
 
-    for (const param in userParams.value) {
+    for (const param in store.userParams) {
         params.push({
             label: param,
-            value: userParams.value[param],
+            value: store.userParams[param],
         });
     }
 
@@ -71,10 +79,158 @@ const tags = computed(() => {
         auto-load
     />
     <teleport-slot to="#rightPanel">
-        <!-- <q-list>
-            <q-item-label header class="text-uppercase">Filter</q-item-label>
-        </q-list> -->
+        <q-list>
+            <q-item-label header class="text-uppercase" dense
+                >Applied filters</q-item-label
+            >
+        </q-list>
+        <q-separator />
+        <div class="q-pa-sm truncate-chip-labels">
+            <span v-if="tags.length === 0">You didn't enter any filter</span>
+            <q-chip
+                v-for="chip of tags"
+                :key="chip.label"
+                @remove="remove(chip.label)"
+                icon="label"
+                color="primary"
+                size="sm"
+                removable
+            >
+                <strong>{{ chip.label }}: </strong>
+                <span>"{{ chip.value }}"</span>
+            </q-chip>
+        </div>
+        <q-separator />
         <q-form @submit="search">
+            <q-list>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            v-model="userParams.search"
+                            label="Search by id or name"
+                            class="full-width"
+                            lazy-rules
+                            autofocus
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-btn
+                            label="Search"
+                            type="submit"
+                            color="primary"
+                            class="full-width"
+                            rounded
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-item>
+                    <q-item-section>
+                        <q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules>
+                            <template #prepend>
+                                <q-icon name="badge" size="sm"></q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input label="Name" v-model="userParams.name" lazy-rules />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            label="Social name"
+                            v-model="userParams.socialName"
+                            lazy-rules
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <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 #prepend>
+                                <q-avatar color="orange" size="xs">
+                                    <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>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input label="Phone" v-model="userParams.phone" lazy-rules>
+                            <template #prepend>
+                                <q-icon name="phone" size="sm"></q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-input label="Email" v-model="userParams.email" lazy-rules>
+                            <template #prepend>
+                                <q-icon name="email" size="sm"></q-icon>
+                            </template>
+                        </q-input>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-select
+                            label="Province"
+                            v-model="userParams.provinceFk"
+                            :options="provinces"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                        />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-input label="City" v-model="userParams.city" lazy-rules />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-select
+                            label="Zone"
+                            v-model="userParams.zoneFk"
+                            :options="zones"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                        />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-input
+                            label="Postcode"
+                            v-model="userParams.postcode"
+                            lazy-rules
+                        />
+                    </q-item-section>
+                </q-item>
+            </q-list>
+        </q-form>
+        <!-- <q-form @submit="search">
             <div class="row q-pa-md truncate-chip-labels">
                 <q-chip
                     v-for="chip of tags"
@@ -180,7 +336,7 @@ const tags = computed(() => {
                     <q-input label="Postcode" v-model="userParams.postcode" lazy-rules />
                 </div>
             </div>
-        </q-form>
+        </q-form> -->
     </teleport-slot>
     <q-page class="q-pa-md">
         <paginate url="/Clients/filter" order="id DESC" auto-load>
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index 00e603d20..9820cb21b 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { useState } from 'src/composables/useState';
 import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
+import LeftMenu from 'components/LeftMenu.vue';
 
 const state = useState();
 </script>
@@ -8,6 +9,8 @@ const state = useState();
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
             <InvoiceOutDescriptor />
+            <q-separator />
+            <left-menu source="card" />
         </q-scroll-area>
     </q-drawer>
     <q-page-container>