src/pages/Customer/Defaulter/CustomerDefaulter.vue

@@ -22,7 +22,7 @@ const balanceDueTotal = ref(0);
 const selected = ref([]);
 
 const tableColumnComponents = {
-    client: {
+    clientFk: {
         component: QBtn,
         props: () => ({ flat: true, class: 'link', noCaps: true }),
         event: () => {},
@@ -40,7 +40,7 @@ const tableColumnComponents = {
         props: () => ({ flat: true, class: 'link', noCaps: true }),
         event: () => {},
     },
-    department: {
+    departmentName: {
         component: 'span',
         props: () => {},
         event: () => {},
@@ -102,12 +102,12 @@ const columns = computed(() => [
         align: 'left',
         field: 'clientName',
         label: t('Client'),
-        name: 'client',
+        name: 'clientFk',
         sortable: true,
     },
     {
         align: 'left',
-        field: 'isWorker',
+        field: ({ isWorker }) => Boolean(isWorker),
         label: t('Is worker'),
         name: 'isWorker',
     },
@@ -122,7 +122,7 @@ const columns = computed(() => [
         align: 'left',
         field: 'departmentName',
         label: t('Department'),
-        name: 'department',
+        name: 'departmentName',
         sortable: true,
     },
     {
@@ -204,48 +204,24 @@ const viewAddObservation = (rowsSelected) => {
     });
 };
 
-const departments = ref(new Map());
-
 const onFetch = async (data) => {
-    const salesPersonFks = data.map((item) => item.salesPersonFk);
-    const departmentNames = salesPersonFks.map(async (salesPersonFk) => {
-        try {
-            const { data: workerDepartment } = await axios.get(
-                `WorkerDepartments/${salesPersonFk}`
-            );
-            const { data: department } = await axios.get(
-                `Departments/${workerDepartment.departmentFk}`
-            );
-            departments.value.set(salesPersonFk, department.name);
-        } catch (error) {
-            console.error('Err: ', error);
-        }
-    });
     const recoveryData = await axios.get('Recoveries');
-
     const recoveries = recoveryData.data.map(({ clientFk, finished }) => ({
         clientFk,
         finished,
     }));
 
-    await Promise.all(departmentNames);
-
     data.forEach((item) => {
-        item.departmentName = departments.value.get(item.salesPersonFk);
-        item.isWorker = item.businessTypeFk === 'worker';
         const recovery = recoveries.find(({ clientFk }) => clientFk === item.clientFk);
         item.finished = recovery?.finished === null;
     });
-
-    for (const element of data) element.isWorker = element.businessTypeFk === 'worker';
-
     balanceDueTotal.value = data.reduce((acc, { amount = 0 }) => acc + amount, 0);
 };
 
 function exprBuilder(param, value) {
     switch (param) {
         case 'clientFk':
-            return { [`d.${param}`]: value?.id };
+            return { [`d.${param}`]: value };
         case 'creditInsurance':
         case 'amount':
         case 'workerFk':

src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue

@@ -1,7 +1,6 @@
 <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';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -16,14 +15,13 @@ const props = defineProps({
     },
 });
 
-const clients = ref();
 const salespersons = ref();
 const countries = ref();
 const authors = ref();
+const departments = ref();
 </script>
 
 <template>
-    <FetchData @on-fetch="(data) => (clients = data)" auto-load url="Clients" />
     <FetchData
         :filter="{ where: { role: 'salesPerson' } }"
         @on-fetch="(data) => (salespersons = data)"
@@ -36,6 +34,7 @@ const authors = ref();
         auto-load
         url="Workers/activeWithInheritedRole"
     />
+    <FetchData @on-fetch="(data) => (departments = data)" auto-load url="Departments" />
 
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
@@ -47,29 +46,22 @@ const authors = ref();
 
         <template #body="{ params, searchFn }">
             <QItem class="q-mb-sm">
-                <QItemSection v-if="clients">
+                <VnSelect
-                    <VnSelect
+                    :label="t('Client')"
-                        :label="t('Client')"
+                    url="Clients"
-                        :options="clients"
+                    dense
-                        dense
+                    option-label="name"
-                        emit-value
+                    option-value="id"
-                        hide-selected
+                    outlined
-                        map-options
+                    rounded
-                        option-label="name"
+                    emit-value
-                        option-value="id"
+                    hide-selected
-                        outlined
+                    map-options
-                        rounded
+                    v-model="params.clientFk"
-                        use-input
+                    use-input
-                        v-model="params.clientFk"
+                    @update:model-value="searchFn()"
-                        @update:model-value="searchFn()"
+                />
-                        auto-load
-                    />
-                </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton class="full-width" type="QInput" />
-                </QItemSection>
             </QItem>
-
             <QItem class="q-mb-sm">
                 <QItemSection v-if="salespersons">
                     <VnSelect
@@ -93,6 +85,29 @@ const authors = ref();
                     <QSkeleton class="full-width" type="QInput" />
                 </QItemSection>
             </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="departments">
+                    <VnSelect
+                        :input-debounce="0"
+                        :label="t('Departments')"
+                        :options="departments"
+                        dense
+                        emit-value
+                        hide-selected
+                        map-options
+                        option-label="name"
+                        option-value="id"
+                        outlined
+                        rounded
+                        use-input
+                        v-model="params.departmentFk"
+                        @update:model-value="searchFn()"
+                    />
+                </QItemSection>
+                <QItemSection v-else>
+                    <QSkeleton class="full-width" type="QInput" />
+                </QItemSection>
+            </QItem>
 
             <QItem class="q-mb-sm">
                 <QItemSection v-if="countries">

src/pages/Route/Cmr/CmrList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeMount, computed, ref } from 'vue';
+import { onBeforeMount, onMounted, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Notify } from 'quasar';
 import axios from 'axios';
@@ -10,10 +10,12 @@ import CmrFilter from './CmrFilter.vue';
 import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import { useStateStore } from 'src/stores/useStateStore';
 
 const { t } = useI18n();
 const { getTokenMultimedia } = useSession();
 const token = getTokenMultimedia();
+const state = useStateStore();
 const selected = ref([]);
 const warehouses = ref([]);
 
@@ -81,6 +83,9 @@ onBeforeMount(async () => {
     const { data } = await axios.get('Warehouses');
     warehouses.value = data;
 });
+
+onMounted(() => (state.rightDrawer = true));
+
 function getApiUrl() {
     return new URL(window.location).origin;
 }