From a1f7fdfb37b9998b769f2378c12028cc123b691b Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Mon, 27 Feb 2023 15:04:30 +0100
Subject: [PATCH] Added claim filters

---
 src/pages/Claim/ClaimFilter.vue     | 259 ++++++++++++++++++++++++++++
 src/pages/Claim/ClaimList.vue       |  11 +-
 src/pages/Customer/CustomerList.vue |   3 +-
 3 files changed, 270 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/Claim/ClaimFilter.vue

diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
new file mode 100644
index 000000000..b6d6f0d29
--- /dev/null
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -0,0 +1,259 @@
+<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,
+        required: true,
+    },
+});
+
+const workers = ref();
+const workersCopy = ref();
+const states = ref();
+
+function setWorkers(data) {
+    workers.value = data;
+    workersCopy.value = data;
+}
+</script>
+
+<template>
+    <fetch-data url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
+    <fetch-data
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="setWorkers"
+        auto-load
+    />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <q-list>
+                <q-item>
+                    <q-item-section>
+                        <q-input
+                            :label="t('Customer ID')"
+                            v-model="params.clientFk"
+                            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="t('Name')" v-model="params.name" lazy-rules />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section v-if="!workers">
+                        <q-skeleton type="QInput" class="full-width" />
+                    </q-item-section>
+                    <q-item-section v-if="workers">
+                        <q-select
+                            :label="t('Salesperson')"
+                            v-model="params.salesPersonFk"
+                            @update:model-value="searchFn()"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        >
+                            <template #prepend>
+                                <q-avatar color="orange" size="xs">
+                                    <q-img
+                                        v-if="params.salesPersonFk"
+                                        :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
+                                        spinner-color="white"
+                                    />
+                                </q-avatar>
+                            </template>
+                        </q-select>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section v-if="!workers">
+                        <q-skeleton type="QInput" class="full-width" />
+                    </q-item-section>
+                    <q-item-section v-if="workers">
+                        <q-select
+                            :label="t('Attender')"
+                            v-model="params.attenderFk"
+                            @update:model-value="searchFn()"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-select
+                            :label="t('State')"
+                            v-model="params.stateFk"
+                            @update:model-value="searchFn()"
+                            :options="states"
+                            option-value="id"
+                            option-label="description"
+                            emit-value
+                            map-options
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-select
+                            :label="t('Item')"
+                            v-model="params.itemFk"
+                            :options="items"
+                            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="t('City')" v-model="params.city" lazy-rules />
+                    </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-expansion-item :label="t('More options')" expand-separator>
+                    <q-item>
+                        <q-item-section>
+                            <q-input
+                                :label="t('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="t('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="t('Zone')"
+                                v-model="params.zoneFk"
+                                @update:model-value="searchFn()"
+                                :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="t('Postcode')"
+                                v-model="params.postcode"
+                                lazy-rules
+                            />
+                        </q-item-section>
+                    </q-item>
+                </q-expansion-item>
+            </q-list>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        search: Contains
+        fi: FI
+        name: Name
+        socialName: Social Name
+        salesPersonFk: Salesperson
+        provinceFk: Province
+        city: City
+        phone: Phone
+        email: Email
+        zoneFk: Zone
+        postcode: Postcode
+es:
+    params:
+        search: Contiene
+        fi: NIF
+        name: Nombre
+        socialName: Razón Social
+        salesPersonFk: Comercial
+        provinceFk: Provincia
+        city: Ciudad
+        phone: Teléfono
+        email: Email
+        zoneFk: Zona
+        postcode: CP
+    FI: NIF
+    Name: Nombre
+    Social Name: Razón social
+    Salesperson: Comercial
+    Province: Provincia
+    City: Ciudad
+    More options: Más opciones
+    Phone: Teléfono
+    Email: Email
+    Zone: Zona
+    Postcode: Código postal
+</i18n>
+
+<!-- <i18n>
+{
+    "en": {
+        "fi": "Fiscal ID",
+        "name": "Name",
+        "socialName": "Social Name",
+        "salesPersonFk": "Salesperson",
+        "provinceFk": "Province",
+        "city": "City",
+        "zoneFk": "Zone",
+        "postcode": "Postcode"
+    },
+    "es": {
+        "fi": "NIF",
+        "name": "Nombre",
+        "socialName": "Razón social",
+        "salesPersonFk": "Comercial"
+    }
+}
+</i18n> -->
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 6001e02d0..07628b906 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -1,19 +1,25 @@
 <script setup>
+import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
+import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
-
 import Paginate from 'src/components/PaginateData.vue';
 import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
 import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
 import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import ClaimFilter from './ClaimFilter.vue';
 
+const state = useStateStore();
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
+onMounted(() => state.toggleRightDrawer());
+onUnmounted(() => state.toggleRightDrawer());
+
 function stateColor(code) {
     if (code === 'pending') return 'green';
     if (code === 'managed') return 'orange';
@@ -38,6 +44,9 @@ function viewSummary(id) {
     <teleport-slot to="#searchbar">
         <VnSearchbar data-key="ClaimList" :label="t('Search by claim id or name')" />
     </teleport-slot>
+    <teleport-slot to="#rightPanel">
+        <ClaimFilter data-key="ClaimList" />
+    </teleport-slot>
     <q-page class="q-pa-md">
         <paginate data-key="ClaimList" url="Claims/filter" sort-by="id DESC" auto-load>
             <template #body="{ rows }">
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index d7ace041c..a7cd90996 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -4,11 +4,10 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
-
 import Paginate from 'src/components/PaginateData.vue';
 import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import TeleportSlot from 'components/ui/TeleportSlot.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import CustomerFilter from './CustomerFilter.vue';
 
 const state = useStateStore();