From 08c60b3da066729af5633eb1c7d165e711be0203 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 21 Feb 2023 15:05:57 +0100
Subject: [PATCH] Changes

---
 src/components/ui/VnFilterPanel.vue      |  31 +++--
 src/components/ui/VnSearchbar.vue        |   8 ++
 src/composables/useArrayData.js          |   2 +-
 src/layouts/MainLayout.vue               |   2 +-
 src/pages/Customer/Card/CustomerCard.vue |  15 ++-
 src/pages/Customer/CustomerFilter.vue    | 153 +++++++++++++----------
 src/pages/Customer/CustomerList.vue      |  13 +-
 src/pages/Login/LoginMain.vue            |   1 +
 src/pages/Ticket/TicketFilter.vue        |   3 +-
 9 files changed, 144 insertions(+), 84 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index e1e3c9719..29967d8c7 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -23,12 +23,21 @@ const userParams = ref({});
 onMounted(() => {
     const params = store.userParams;
     if (params) {
-        userParams.value = params;
+        userParams.value = Object.assign({}, params);
     }
 });
 
 async function search() {
     const params = userParams.value;
+    for (const param in params) {
+        if (params[param] === '' || params[param] === null) {
+            delete userParams.value[param];
+            delete store.userParams[param];
+        }
+    }
+
+    // if (Object.keys(params))
+
     await arrayData.addFilter({ params });
 }
 
@@ -64,7 +73,7 @@ async function remove(key) {
             removable
         >
             <slot name="tags" :tag="chip">
-                <div class="q-gutter-md">
+                <div class="q-gutter-x-xs">
                     <strong>{{ chip.label }}:</strong>
                     <span>"{{ chip.value }}"</span>
                 </div>
@@ -97,17 +106,17 @@ async function remove(key) {
             </q-item>
         </div>
         <q-separator />
-        <slot name="body" :params="userParams"></slot>
+        <slot name="body" :params="userParams" :search-fn="search"></slot>
     </q-form>
 </template>
 
 <i18n>
-    {
-        "en": {
-            "appliedFilters": "Applied filters"
-        },
-        "es": {
-            "appliedFilters": "Filtros aplicados"
-        }
+{
+    "en": {
+        "appliedFilters": "Applied filters"
+    },
+    "es": {
+        "appliedFilters": "Filtros aplicados"
     }
-    </i18n>
+}
+</i18n>
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index f380079d5..456fd5917 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -69,6 +69,14 @@ async function search() {
             <template #prepend>
                 <q-icon name="search" />
             </template>
+            <template #append>
+                <q-icon
+                    v-if="searchText !== ''"
+                    name="close"
+                    @click="searchText = ''"
+                    class="cursor-pointer"
+                />
+            </template>
         </q-input>
     </q-form>
 </template>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 37d6febc7..b68a73f5e 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -123,7 +123,7 @@ export function useArrayData(key, userOptions) {
     }
 
     async function refresh() {
-        // TODO: Refresh
+        await fetch({ append: false });
     }
 
     function updateStateParams() {
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 8fc99d166..29fcfc3e9 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -16,7 +16,7 @@ const stateStore = useStateStore();
             v-model="stateStore.rightDrawer"
             side="right"
             :width="256"
-            :breakpoint="800"
+            :breakpoint="1000"
             :persistent="false"
         >
             <q-scroll-area class="fit text-grey-8">
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 8d6288fe5..ebeac4425 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import CustomerDescriptor from './CustomerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
@@ -6,10 +7,11 @@ import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const state = useState();
+const { t } = useI18n();
 </script>
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="CustomerList" />
+        <VnSearchbar data-key="CustomerList" :label="t('searchLabel')" />
     </teleport-slot>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
@@ -24,3 +26,14 @@ const state = useState();
         </q-page>
     </q-page-container>
 </template>
+
+<i18n>
+    {
+        "en": { 
+            "searchLabel": "Search by customer id or name"
+        },
+        "es": { 
+            "searchLabel": "Buscar por id o nombre del cliente"
+        }
+    }
+</i18n>
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index dcc363487..5b44fceb6 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -1,8 +1,10 @@
 <script setup>
 import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 
+const { t } = useI18n();
 const props = defineProps({
     dataKey: {
         type: String,
@@ -10,10 +12,10 @@ const props = defineProps({
     },
 });
 
-const provinces = ref([]);
-const workers = ref([]);
-const workersCopy = ref([]);
-const zones = ref([]);
+const provinces = ref();
+const workers = ref();
+const workersCopy = ref();
+const zones = ref();
 
 function setWorkers(data) {
     workers.value = data;
@@ -30,35 +32,12 @@ function setWorkers(data) {
         @on-fetch="setWorkers"
         auto-load
     />
-    <VnFilterPanel :data-key="props.dataKey">
-        <template #body="{ params }">
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #body="{ params, searchFn }">
             <q-list>
-                <!-- <q-item>
-                        <q-item-section>
-                            <q-input
-                                v-model="params.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="params.fi" lazy-rules>
+                        <q-input :label="t('fi')" v-model="params.fi" lazy-rules>
                             <template #prepend>
                                 <q-icon name="badge" size="sm"></q-icon>
                             </template>
@@ -67,27 +46,30 @@ function setWorkers(data) {
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-input label="Name" v-model="params.name" lazy-rules />
+                        <q-input :label="t('name')" v-model="params.name" lazy-rules />
                     </q-item-section>
                 </q-item>
                 <q-item>
                     <q-item-section>
                         <q-input
-                            label="Social name"
+                            :label="t('socialName')"
                             v-model="params.socialName"
                             lazy-rules
                         />
                     </q-item-section>
                 </q-item>
                 <q-item>
-                    <q-item-section>
+                    <q-item-section v-if="!workers">
+                        <q-skeleton type="QInput" class="full-width" />
+                    </q-item-section>
+                    <q-item-section v-if="workers">
                         <q-select
                             v-model="params.salesPersonFk"
                             :options="workers"
                             option-value="id"
                             option-label="name"
                             emit-value
-                            label="Salesperson"
+                            :label="t('salesPersonFk')"
                             map-options
                             use-input
                             :input-debounce="0"
@@ -105,56 +87,91 @@ function setWorkers(data) {
                     </q-item-section>
                 </q-item>
                 <q-item>
-                    <q-item-section>
-                        <q-input label="Phone" v-model="params.phone" lazy-rules>
-                            <template #prepend>
-                                <q-icon name="phone" size="sm"></q-icon>
-                            </template>
-                        </q-input>
+                    <q-item-section v-if="!provinces">
+                        <q-skeleton type="QInput" class="full-width" />
                     </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input label="Email" v-model="params.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-item-section v-if="provinces">
                         <q-select
                             label="Province"
                             v-model="params.provinceFk"
                             :options="provinces"
+                            @update:model-value="searchFn"
                             option-value="id"
                             option-label="name"
                             emit-value
                             map-options
                         />
                     </q-item-section>
+                </q-item>
+                <q-item class="q-mb-md">
                     <q-item-section>
                         <q-input label="City" v-model="params.city" lazy-rules />
                     </q-item-section>
                 </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-select
-                            label="Zone"
-                            v-model="params.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="params.postcode" lazy-rules />
-                    </q-item-section>
-                </q-item>
+                <q-separator />
+                <q-expansion-item label="More options" expand-separator>
+                    <q-item>
+                        <q-item-section>
+                            <q-input label="Phone" v-model="params.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="params.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 v-if="!zones">
+                            <q-skeleton type="QInput" class="full-width" />
+                        </q-item-section>
+                        <q-item-section v-if="zones">
+                            <q-select
+                                label="Zone"
+                                v-model="params.zoneFk"
+                                :options="zones"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                label="Postcode"
+                                v-model="params.postcode"
+                                lazy-rules
+                            />
+                        </q-item-section>
+                    </q-item>
+                </q-expansion-item>
             </q-list>
         </template>
     </VnFilterPanel>
 </template>
+
+<i18n>
+{
+    "en": {
+        "fi": "FI",
+        "name": "Name",
+        "socialName": "Social Name",
+        "salesPersonFk": "Salesperson"
+    },
+    "es": {
+        "fi": "NIF",
+        "name": "Nombre",
+        "socialName": "Razón social",
+        "salesPersonFk": "Comercial"
+    }
+}
+</i18n>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index ce06b0c9d..898d458b4 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -35,7 +35,7 @@ function viewSummary(id) {
 
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="CustomerList" label="Search by customer id or name" />
+        <VnSearchbar data-key="CustomerList" :label="t('searchLabel')" />
     </teleport-slot>
     <teleport-slot to="#rightPanel">
         <CustomerFilter data-key="CustomerList" />
@@ -126,3 +126,14 @@ function viewSummary(id) {
         </paginate>
     </q-page>
 </template>
+
+<i18n>
+    {
+        "en": { 
+            "searchLabel": "Search by customer id or name"
+        },
+        "es": { 
+            "searchLabel": "Buscar por id o nombre del cliente"
+        }
+    }
+</i18n>
diff --git a/src/pages/Login/LoginMain.vue b/src/pages/Login/LoginMain.vue
index 86d1c3170..11193d31a 100644
--- a/src/pages/Login/LoginMain.vue
+++ b/src/pages/Login/LoginMain.vue
@@ -138,6 +138,7 @@ async function onSubmit() {
                                 color="primary"
                                 class="full-width"
                                 rounded
+                                unelevated
                             />
                         </div>
                     </q-form>
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index 7a4849bbb..26469c286 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -41,7 +41,7 @@ function setWorkers(data) {
                 <span>"{{ tag.value }}"</span>
             </div>
         </template>
-        <template #body="{ params }">
+        <template #body="{ params, searchFn }">
             <q-list dense>
                 <q-item>
                     <q-item-section>
@@ -159,6 +159,7 @@ function setWorkers(data) {
                         <q-checkbox
                             v-model="params.myTeam"
                             label="My team"
+                            @update:model-value="searchFn()"
                             toggle-indeterminate
                         />
                     </q-item-section>