From 76b793b5591eafc886e71926c0a23d43a71a4b59 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 18 Mar 2025 10:15:46 +0100
Subject: [PATCH 1/9] feat: refs #8193 added filter in client notes

---
 src/components/ui/VnNotes.vue | 124 +++++++++++++++++++++++++++++++++-
 1 file changed, 122 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index 6ce28254d..e0c14466c 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -1,9 +1,10 @@
 <script setup>
 import axios from 'axios';
-import { ref, reactive, useAttrs, computed } from 'vue';
-import { onBeforeRouteLeave } from 'vue-router';
+import { ref, reactive, useAttrs, computed, onMounted, onUnmounted } from 'vue';
+import { onBeforeRouteLeave, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
+import { useStateStore } from 'stores/useStateStore';
 
 import { toDateHourMin } from 'src/filters';
 
@@ -15,10 +16,13 @@ import VnRow from 'components/ui/VnRow.vue';
 import VnSelect from 'components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInput from 'components/common/VnInput.vue';
+import RightMenu from '../common/RightMenu.vue';
 
 const emit = defineEmits(['onFetch']);
 
 const $attrs = useAttrs();
+const stateStore = useStateStore();
+const route = useRoute();
 
 const isRequired = computed(() => {
     return Object.keys($attrs).includes('required');
@@ -41,6 +45,10 @@ const newNote = reactive({ text: null, observationTypeFk: null });
 const observationTypes = ref([]);
 const vnPaginateRef = ref();
 let originalText;
+const observationTypeFk = ref([]);
+const selectedFilters = ref({});
+const userSelect = ref();
+const filteredWorkers = ref([]);
 
 function handleClick(e) {
     if (e.shiftKey && e.key === 'Enter') return;
@@ -111,6 +119,63 @@ function fetchData([data]) {
     originalText = data?.notes;
     emit('onFetch', data);
 }
+
+const setWorkerObservations = (data) => {
+    const seen = new Set();
+    filteredWorkers.value = data;
+    filteredWorkers.value = data.filter((worker) => {
+        if (!seen.has(worker.workerFk)) {
+            seen.add(worker.workerFk);
+            return true;
+        }
+        return false;
+    });
+};
+
+function selectFilter(type) {
+    let filter = {};
+    let reload = true;
+
+    if (type === 'userSelect') {
+        selectedFilters.value.workerFk =
+            userSelect.value !== null ? userSelect.value : undefined;
+    }
+    if (type === 'observationTypeFk') {
+        selectedFilters.value.observationTypeFk =
+            observationTypeFk.value !== null ? observationTypeFk.value : undefined;
+    }
+
+    const hasValidFilter = Object.values(selectedFilters.value).some(
+        (value) => value !== undefined,
+    );
+
+    if (hasValidFilter) {
+        Object.keys(selectedFilters.value).forEach((key) => {
+            if (selectedFilters.value[key]) filter[key] = selectedFilters.value[key];
+        });
+    }
+    if (reload) applyFilter(filter);
+}
+
+async function applyFilter(selectFilter) {
+    const filter = {
+        where: {
+            clientFk: route.params.id,
+        },
+    };
+    if (Object.keys(selectFilter).length) {
+        filter.where.and = [];
+        filter.where.and.push(selectFilter);
+    }
+    vnPaginateRef.value.fetch({ filter });
+}
+
+onMounted(() => {
+    stateStore.rightDrawer = true;
+});
+onUnmounted(() => {
+    stateStore.rightDrawer = false;
+});
 </script>
 <template>
     <FetchData
@@ -127,6 +192,61 @@ function fetchData([data]) {
         @on-fetch="fetchData"
         auto-load
     />
+    <FetchData
+        url="ClientObservations"
+        :filter="{ fields: ['id', 'workerFk'] }"
+        :where="{ clientFk: route.params.id }"
+        auto-load
+        @on-fetch="setWorkerObservations"
+    />
+    <RightMenu v-if="route.path.includes('customer')">
+        <template #right-panel>
+            <QList dense>
+                <QSeparator />
+                <QItem>
+                    <QItemSection>
+                        <VnSelect
+                            :label="t('Observation type')"
+                            url="ObservationTypes"
+                            v-model="observationTypeFk"
+                            option-label="description"
+                            option-value="id"
+                            @update:model-value="selectFilter('observationTypeFk')"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnSelect
+                            :label="t('globals.user')"
+                            v-model="userSelect"
+                            option-label="workerFk"
+                            option-value="workerFk"
+                            :options="filteredWorkers"
+                            @update:model-value="selectFilter('userSelect')"
+                            hide-selected
+                        >
+                            <template #option="{ opt, itemProps }">
+                                <QItem v-bind="itemProps">
+                                    <QItemSection class="col-3 items-center">
+                                        <VnAvatar :worker-id="opt.workerFk" />
+                                    </QItemSection>
+                                    <QItemSection class="col-9 justify-center">
+                                        <QItemLabel>
+                                            {{ opt.worker?.user?.name }}
+                                        </QItemLabel>
+                                        <QItemLabel caption>
+                                            {{ `#${opt.workerFk}` }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                    </QItemSection>
+                </QItem>
+            </QList>
+        </template>
+    </RightMenu>
     <QCard
         class="q-pa-xs q-mb-lg full-width"
         :class="{ 'just-input': $props.justInput }"
-- 
2.40.1


From 9bf1f74061a1a885dea5fb17f8be2b69e3998fc1 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 18 Mar 2025 10:40:41 +0100
Subject: [PATCH 2/9] feat: refs #8193 added notes e2e

---
 src/components/ui/VnNotes.vue                 |  4 ++++
 .../integration/vnComponent/VnNotes.spec.js   | 23 +++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 test/cypress/integration/vnComponent/VnNotes.spec.js

diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index e0c14466c..056b8fa95 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -212,6 +212,7 @@ onUnmounted(() => {
                             option-label="description"
                             option-value="id"
                             @update:model-value="selectFilter('observationTypeFk')"
+                            data-cy="VnNotes-observation-type-filter"
                         />
                     </QItemSection>
                 </QItem>
@@ -266,6 +267,7 @@ onUnmounted(() => {
                     style="flex: 0.15"
                     :required="isRequired"
                     @keyup.enter.stop="insert"
+                    data-cy="VnNotes-observation-type"
                 />
                 <VnInput
                     v-model.trim="newNote.text"
@@ -277,6 +279,7 @@ onUnmounted(() => {
                     @keyup.enter.stop="handleClick"
                     :required="isRequired"
                     clearable
+                    data-cy="VnNotes-text-input"
                 >
                     <template #append>
                         <QBtn
@@ -337,6 +340,7 @@ onUnmounted(() => {
                                     outline
                                     color="grey"
                                     v-if="selectType && note.observationTypeFk"
+                                    data-cy="VnNotes-observation-type-badge"
                                 >
                                     {{
                                         observationTypes.find(
diff --git a/test/cypress/integration/vnComponent/VnNotes.spec.js b/test/cypress/integration/vnComponent/VnNotes.spec.js
new file mode 100644
index 000000000..35dcd17eb
--- /dev/null
+++ b/test/cypress/integration/vnComponent/VnNotes.spec.js
@@ -0,0 +1,23 @@
+/// <reference types="cypress" />
+describe('VnNotes', () => {
+    const obervationType = 'Packager';
+    beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.login('developer');
+        cy.visit('#/customer/1101/notes');
+    });
+
+    it('should add and filter notes', () => {
+        cy.selectOption("[data-cy='VnNotes-observation-type']", obervationType);
+        cy.dataCy('VnNotes-text-input').type('Test note {enter}');
+
+        cy.selectOption("[data-cy='VnNotes-observation-type-filter']", obervationType);
+        cy.get('.column.full-width')
+            .children()
+            .each(($el) => {
+                cy.wrap($el)
+                    .find('[data-cy="VnNotes-observation-type-badge"]')
+                    .should('include.text', obervationType);
+            });
+    });
+});
-- 
2.40.1


From c1964dc16e20c1d44ff61e4123e66c4586660a88 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 18 Mar 2025 13:48:44 +0100
Subject: [PATCH 3/9] perf: refs #8193 e2e

---
 test/cypress/integration/vnComponent/VnNotes.spec.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/test/cypress/integration/vnComponent/VnNotes.spec.js b/test/cypress/integration/vnComponent/VnNotes.spec.js
index 35dcd17eb..e197a9622 100644
--- a/test/cypress/integration/vnComponent/VnNotes.spec.js
+++ b/test/cypress/integration/vnComponent/VnNotes.spec.js
@@ -4,7 +4,7 @@ describe('VnNotes', () => {
     beforeEach(() => {
         cy.viewport(1920, 1080);
         cy.login('developer');
-        cy.visit('#/customer/1101/notes');
+        cy.visit('#/customer/1102/notes');
     });
 
     it('should add and filter notes', () => {
@@ -15,9 +15,10 @@ describe('VnNotes', () => {
         cy.get('.column.full-width')
             .children()
             .each(($el) => {
-                cy.wrap($el)
-                    .find('[data-cy="VnNotes-observation-type-badge"]')
-                    .should('include.text', obervationType);
+                cy.dataCy('VnNotes-observation-type-badge').should(
+                    'include.text',
+                    obervationType,
+                );
             });
     });
 });
-- 
2.40.1


From 0d0433bec491a21e5e7a73a1ffc1c2337beb7f43 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 4 Apr 2025 12:01:03 +0200
Subject: [PATCH 4/9] feat: refs #8193 make VnNotes use VnNotesFilter

---
 src/components/ui/VnNotes.vue       | 125 +++-------------------------
 src/components/ui/VnNotesFilter.vue | 103 +++++++++++++++++++++++
 2 files changed, 116 insertions(+), 112 deletions(-)
 create mode 100644 src/components/ui/VnNotesFilter.vue

diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index f31e2314a..194a9b574 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -1,7 +1,7 @@
 <script setup>
 import axios from 'axios';
 import { ref, reactive, useAttrs, computed, onMounted, onUnmounted } from 'vue';
-import { onBeforeRouteLeave, useRoute } from 'vue-router';
+import { onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
@@ -17,6 +17,7 @@ import VnSelect from 'components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInput from 'components/common/VnInput.vue';
 import RightMenu from '../common/RightMenu.vue';
+import VnNotesFilter from './VnNotesFilter.vue';
 
 const emit = defineEmits(['onFetch']);
 
@@ -25,9 +26,6 @@ const $attrs = computed(() => {
     const { required, deletable, ...rest } = originalAttrs;
     return rest;
 });
-const stateStore = useStateStore();
-const route = useRoute();
-
 const $props = defineProps({
     url: { type: String, default: null },
     saveUrl: { type: String, default: null },
@@ -38,7 +36,7 @@ const $props = defineProps({
     selectType: { type: Boolean, default: false },
     justInput: { type: Boolean, default: false },
 });
-
+const stateStore = useStateStore();
 const { t } = useI18n();
 const quasar = useQuasar();
 const newNote = reactive({ text: null, observationTypeFk: null });
@@ -50,10 +48,6 @@ const defaultObservationType = computed(
 );
 
 let originalText;
-const observationTypeFk = ref([]);
-const selectedFilters = ref({});
-const userSelect = ref();
-const filteredWorkers = ref([]);
 
 function handleClick(e) {
     if (e.shiftKey && e.key === 'Enter') return;
@@ -137,58 +131,16 @@ const handleObservationTypes = (data) => {
     }
 };
 
-const setWorkerObservations = (data) => {
-    const seen = new Set();
-    filteredWorkers.value = data;
-    filteredWorkers.value = data.filter((worker) => {
-        if (!seen.has(worker.workerFk)) {
-            seen.add(worker.workerFk);
-            return true;
-        }
-        return false;
-    });
-};
-
-function selectFilter(type) {
-    let filter = {};
-    let reload = true;
-
-    if (type === 'userSelect') {
-        selectedFilters.value.workerFk =
-            userSelect.value !== null ? userSelect.value : undefined;
+function exprBuilder(param, value) {
+    switch (param) {
+        case 'observationTypeFk':
+        case 'workerFk':
+            return { [param]: value };
     }
-    if (type === 'observationTypeFk') {
-        selectedFilters.value.observationTypeFk =
-            observationTypeFk.value !== null ? observationTypeFk.value : undefined;
-    }
-
-    const hasValidFilter = Object.values(selectedFilters.value).some(
-        (value) => value !== undefined,
-    );
-
-    if (hasValidFilter) {
-        Object.keys(selectedFilters.value).forEach((key) => {
-            if (selectedFilters.value[key]) filter[key] = selectedFilters.value[key];
-        });
-    }
-    if (reload) applyFilter(filter);
-}
-
-async function applyFilter(selectFilter) {
-    const filter = {
-        where: {
-            clientFk: route.params.id,
-        },
-    };
-    if (Object.keys(selectFilter).length) {
-        filter.where.and = [];
-        filter.where.and.push(selectFilter);
-    }
-    vnPaginateRef.value.fetch({ filter });
 }
 
 onMounted(() => {
-    stateStore.rightDrawer = true;
+    stateStore.rightDrawerChangeValue(true);
 });
 onUnmounted(() => {
     stateStore.rightDrawer = false;
@@ -209,60 +161,9 @@ onUnmounted(() => {
         @on-fetch="fetchData"
         auto-load
     />
-    <FetchData
-        url="ClientObservations"
-        :filter="{ fields: ['id', 'workerFk'] }"
-        :where="{ clientFk: route.params.id }"
-        auto-load
-        @on-fetch="setWorkerObservations"
-    />
-    <RightMenu v-if="route.path.includes('customer')">
+    <RightMenu>
         <template #right-panel>
-            <QList dense>
-                <QSeparator />
-                <QItem>
-                    <QItemSection>
-                        <VnSelect
-                            :label="t('Observation type')"
-                            url="ObservationTypes"
-                            v-model="observationTypeFk"
-                            option-label="description"
-                            option-value="id"
-                            @update:model-value="selectFilter('observationTypeFk')"
-                            data-cy="VnNotes-observation-type-filter"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnSelect
-                            :label="t('globals.user')"
-                            v-model="userSelect"
-                            option-label="workerFk"
-                            option-value="workerFk"
-                            :options="filteredWorkers"
-                            @update:model-value="selectFilter('userSelect')"
-                            hide-selected
-                        >
-                            <template #option="{ opt, itemProps }">
-                                <QItem v-bind="itemProps">
-                                    <QItemSection class="col-3 items-center">
-                                        <VnAvatar :worker-id="opt.workerFk" />
-                                    </QItemSection>
-                                    <QItemSection class="col-9 justify-center">
-                                        <QItemLabel>
-                                            {{ opt.worker?.user?.name }}
-                                        </QItemLabel>
-                                        <QItemLabel caption>
-                                            {{ `#${opt.workerFk}` }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                    </QItemSection>
-                </QItem>
-            </QList>
+            <VnNotesFilter :data-key="$props.url" :url="$props.url" />
         </template>
     </RightMenu>
     <QCard
@@ -292,7 +193,6 @@ onUnmounted(() => {
                     :label="$props.justInput && newNote.text ? '' : t('Add note here...')"
                     filled
                     autogrow
-                    autofocus
                     @keyup.enter.stop="handleClick"
                     :required="'required' in originalAttrs"
                     clearable
@@ -326,8 +226,9 @@ onUnmounted(() => {
         ref="vnPaginateRef"
         class="show"
         v-bind="$attrs"
-        :search-url="false"
+        :search-url="$props.url"
         @on-fetch="newNote.text = ''"
+        :exprBuilder
     >
         <template #body="{ rows }">
             <TransitionGroup name="list" tag="div" class="column items-center full-width">
diff --git a/src/components/ui/VnNotesFilter.vue b/src/components/ui/VnNotesFilter.vue
new file mode 100644
index 000000000..84ba6fbdd
--- /dev/null
+++ b/src/components/ui/VnNotesFilter.vue
@@ -0,0 +1,103 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import VnAvatar from 'components/ui/VnAvatar.vue';
+import VnSelect from 'components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+
+import VnTableFilter from '../VnTable/VnTableFilter.vue';
+
+const emit = defineEmits(['onFetch']);
+const { t } = useI18n();
+const route = useRoute();
+const $props = defineProps({
+    dataKey: {
+        type: String,
+        default: null,
+    },
+});
+const filteredWorkers = ref([]);
+const columns = computed(() => [
+    {
+        name: 'observationTypeFk',
+    },
+    {
+        name: 'workerFk',
+    },
+]);
+
+const setWorkerObservations = (data) => {
+    const seen = new Set();
+    filteredWorkers.value = data;
+    filteredWorkers.value = data.filter((worker) => {
+        if (!seen.has(worker.workerFk)) {
+            seen.add(worker.workerFk);
+            return true;
+        }
+        return false;
+    });
+};
+</script>
+
+<template>
+    <FetchData
+        url="ClientObservations"
+        :filter="{ fields: ['id', 'workerFk'] }"
+        :where="{ clientFk: route.params.id }"
+        auto-load
+        @on-fetch="setWorkerObservations"
+    />
+    <VnTableFilter
+        v-if="dataKey"
+        :data-key
+        :columns="columns"
+        :redirect="false"
+        :exprBuilder
+        :search-url="$props.dataKey"
+        :showTagChips="false"
+    >
+        <template #filter-observationTypeFk="{ params, columnName, searchFn }">
+            <VnSelect
+                :label="t('Observation type')"
+                url="ObservationTypes"
+                v-model="params[columnName]"
+                option-label="description"
+                option-value="id"
+                @keyup.enter="searchFn"
+                @update:modelValue="() => searchFn()"
+                dense
+                filled
+                data-cy="VnNotes-observation-type-filter"
+            />
+        </template>
+        <template #filter-workerFk="{ params, columnName, searchFn }">
+            <VnSelect
+                :label="t('globals.user')"
+                v-model="params[columnName]"
+                option-label="workerFk"
+                option-value="workerFk"
+                :options="filteredWorkers"
+                @update:modelValue="() => searchFn()"
+                hide-selected
+                dense
+                filled
+            >
+                <template #option="{ opt, itemProps }">
+                    <QItem v-bind="itemProps" class="q-pa-xs row items-center">
+                        <QItemSection class="col-3 items-center">
+                            <VnAvatar :worker-id="opt.id" />
+                        </QItemSection>
+                        <QItemSection class="col-9 justify-center">
+                            <span>{{ opt.worker?.user?.name }}</span>
+                            <span class="text-grey">
+                                {{ `#${opt.worker?.user?.id}` }}
+                            </span>
+                        </QItemSection>
+                    </QItem>
+                </template>
+            </VnSelect>
+        </template>
+    </VnTableFilter>
+</template>
-- 
2.40.1


From 94a66098c628d4bca00c1dead4d482def64645d0 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 4 Apr 2025 12:05:50 +0200
Subject: [PATCH 5/9] feat: refs #8193 added user filter e2e in VnNotes

---
 src/components/ui/VnNotesFilter.vue               |  2 ++
 .../integration/vnComponent/VnNotes.spec.js       | 15 ++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/VnNotesFilter.vue b/src/components/ui/VnNotesFilter.vue
index 84ba6fbdd..b4af977cd 100644
--- a/src/components/ui/VnNotesFilter.vue
+++ b/src/components/ui/VnNotesFilter.vue
@@ -79,10 +79,12 @@ const setWorkerObservations = (data) => {
                 option-label="workerFk"
                 option-value="workerFk"
                 :options="filteredWorkers"
+                @keyup.enter="searchFn"
                 @update:modelValue="() => searchFn()"
                 hide-selected
                 dense
                 filled
+                data-cy="VnNotes-user-filter"
             >
                 <template #option="{ opt, itemProps }">
                     <QItem v-bind="itemProps" class="q-pa-xs row items-center">
diff --git a/test/cypress/integration/vnComponent/VnNotes.spec.js b/test/cypress/integration/vnComponent/VnNotes.spec.js
index e197a9622..922f117bb 100644
--- a/test/cypress/integration/vnComponent/VnNotes.spec.js
+++ b/test/cypress/integration/vnComponent/VnNotes.spec.js
@@ -1,13 +1,14 @@
 /// <reference types="cypress" />
 describe('VnNotes', () => {
     const obervationType = 'Packager';
+    const user = 'developer';
     beforeEach(() => {
         cy.viewport(1920, 1080);
         cy.login('developer');
         cy.visit('#/customer/1102/notes');
     });
 
-    it('should add and filter notes', () => {
+    it('should add and filter notes by observation type', () => {
         cy.selectOption("[data-cy='VnNotes-observation-type']", obervationType);
         cy.dataCy('VnNotes-text-input').type('Test note {enter}');
 
@@ -21,4 +22,16 @@ describe('VnNotes', () => {
                 );
             });
     });
+
+    it('should filter notes by user', () => {
+        cy.selectOption("[data-cy='VnNotes-user-filter']", user);
+        cy.get('.column.full-width')
+            .children()
+            .each(($el) => {
+                cy.dataCy('VnNotes-observation-type-badge').should(
+                    'include.text',
+                    obervationType,
+                );
+            });
+    });
 });
-- 
2.40.1


From db021194c2ad457d56a1bc44c06ba4abd2c2cf06 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 14 Apr 2025 11:56:20 +0200
Subject: [PATCH 6/9] refactor: refs #8193 modified default observation type to
 adapt it to user

---
 src/components/ui/VnNotes.vue | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index 194a9b574..f2cf8e27b 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -5,7 +5,7 @@ import { onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
-
+import { useState } from 'src/composables/useState';
 import { toDateHourMin } from 'src/filters';
 
 import VnPaginate from 'components/ui/VnPaginate.vue';
@@ -42,7 +42,9 @@ const quasar = useQuasar();
 const newNote = reactive({ text: null, observationTypeFk: null });
 const observationTypes = ref([]);
 const vnPaginateRef = ref();
-
+const state = useState();
+const user = state.getUser();
+const userRole = ref();
 const defaultObservationType = computed(
     () => observationTypes.value.find((ot) => ot.code === 'salesPerson')?.id,
 );
@@ -124,11 +126,13 @@ function fetchData([data]) {
     emit('onFetch', data);
 }
 
-const handleObservationTypes = (data) => {
+const handleObservationTypes = async (data) => {
     observationTypes.value = data;
-    if (defaultObservationType.value) {
-        newNote.observationTypeFk = defaultObservationType.value;
-    }
+    const { data: res } = await axios.get(`VnRoles/${userRole?.value[0]?.roleFk}`);
+    const hasObservationType = observationTypes.value.find((ot) => ot.code === res.name);
+    newNote.observationTypeFk = hasObservationType
+        ? hasObservationType.code
+        : defaultObservationType.value;
 };
 
 function exprBuilder(param, value) {
@@ -147,6 +151,14 @@ onUnmounted(() => {
 });
 </script>
 <template>
+    <FetchData
+        v-if="selectType"
+        url="VnUsers/preview"
+        :filter="{ fields: ['id', 'roleFk', 'username'] }"
+        :where="{ id: user.id }"
+        auto-load
+        @on-fetch="(data) => (userRole = data)"
+    />
     <FetchData
         v-if="selectType"
         url="ObservationTypes"
-- 
2.40.1


From b548f34c81daaa6cfd5befaf34b450dac947bcf7 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 14 Apr 2025 15:48:53 +0200
Subject: [PATCH 7/9] feat: refs #8193 filtering working except worker module

---
 src/components/ui/VnNotes.vue                 |  9 ++++-
 src/components/ui/VnNotesFilter.vue           | 33 ++++++++++---------
 src/pages/Claim/Card/ClaimNotes.vue           |  2 ++
 src/pages/Customer/Card/CustomerNotes.vue     |  2 ++
 src/pages/Route/Vehicle/Card/VehicleNotes.vue | 11 ++-----
 src/pages/Worker/Card/WorkerNotes.vue         |  2 ++
 6 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index f2cf8e27b..95f33e2f9 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -28,6 +28,7 @@ const $attrs = computed(() => {
 });
 const $props = defineProps({
     url: { type: String, default: null },
+    dataKey: { type: String, default: null },
     saveUrl: { type: String, default: null },
     userFilter: { type: Object, default: () => {} },
     filter: { type: Object, default: () => {} },
@@ -35,6 +36,7 @@ const $props = defineProps({
     addNote: { type: Boolean, default: false },
     selectType: { type: Boolean, default: false },
     justInput: { type: Boolean, default: false },
+    filterColumns: { type: Array, default: () => [] },
 });
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -175,7 +177,12 @@ onUnmounted(() => {
     />
     <RightMenu>
         <template #right-panel>
-            <VnNotesFilter :data-key="$props.url" :url="$props.url" />
+            <VnNotesFilter
+                :data-key="$props.dataKey"
+                :url="$props.url"
+                :columns="$props.filterColumns"
+                :body="$props.body"
+            />
         </template>
     </RightMenu>
     <QCard
diff --git a/src/components/ui/VnNotesFilter.vue b/src/components/ui/VnNotesFilter.vue
index b4af977cd..097fa321b 100644
--- a/src/components/ui/VnNotesFilter.vue
+++ b/src/components/ui/VnNotesFilter.vue
@@ -1,6 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import VnAvatar from 'components/ui/VnAvatar.vue';
@@ -11,23 +10,27 @@ import VnTableFilter from '../VnTable/VnTableFilter.vue';
 
 const emit = defineEmits(['onFetch']);
 const { t } = useI18n();
-const route = useRoute();
 const $props = defineProps({
     dataKey: {
         type: String,
         default: null,
     },
+    url: {
+        type: String,
+        default: null,
+    },
+    columns: {
+        type: Array,
+        default: null,
+    },
+    body: {
+        type: Object,
+        default: null,
+    },
 });
+const where = { [Object.keys($props.body)[0]]: $props.body[Object.keys($props.body)[0]] };
+const columns = $props.columns.map((col) => ({ name: col }));
 const filteredWorkers = ref([]);
-const columns = computed(() => [
-    {
-        name: 'observationTypeFk',
-    },
-    {
-        name: 'workerFk',
-    },
-]);
-
 const setWorkerObservations = (data) => {
     const seen = new Set();
     filteredWorkers.value = data;
@@ -43,9 +46,9 @@ const setWorkerObservations = (data) => {
 
 <template>
     <FetchData
-        url="ClientObservations"
+        :url="$props.url"
         :filter="{ fields: ['id', 'workerFk'] }"
-        :where="{ clientFk: route.params.id }"
+        :where="where"
         auto-load
         @on-fetch="setWorkerObservations"
     />
@@ -89,7 +92,7 @@ const setWorkerObservations = (data) => {
                 <template #option="{ opt, itemProps }">
                     <QItem v-bind="itemProps" class="q-pa-xs row items-center">
                         <QItemSection class="col-3 items-center">
-                            <VnAvatar :worker-id="opt.id" />
+                            <VnAvatar :worker-id="opt.worker.id" />
                         </QItemSection>
                         <QItemSection class="col-9 justify-center">
                             <span>{{ opt.worker?.user?.name }}</span>
diff --git a/src/pages/Claim/Card/ClaimNotes.vue b/src/pages/Claim/Card/ClaimNotes.vue
index 68cb220ee..877d982cd 100644
--- a/src/pages/Claim/Card/ClaimNotes.vue
+++ b/src/pages/Claim/Card/ClaimNotes.vue
@@ -38,11 +38,13 @@ const body = {
 <template>
     <VnNotes
         url="claimObservations"
+        data-key="claimObservations"
         :add-note="$props.addNote"
         :user-filter="claimFilter"
         :filter="{ where: { claimFk: claimId } }"
         :body="body"
         v-bind="$attrs"
+        :filter-columns="['workerFk']"
         style="overflow-y: auto"
     />
 </template>
diff --git a/src/pages/Customer/Card/CustomerNotes.vue b/src/pages/Customer/Card/CustomerNotes.vue
index 5a078b0cb..3bce985ca 100644
--- a/src/pages/Customer/Card/CustomerNotes.vue
+++ b/src/pages/Customer/Card/CustomerNotes.vue
@@ -4,11 +4,13 @@ import VnNotes from 'src/components/ui/VnNotes.vue';
 <template>
     <VnNotes
         url="clientObservations"
+        :data-key="'clientObservations'"
         :add-note="true"
         :filter="{ where: { clientFk: $route.params.id } }"
         :body="{ clientFk: $route.params.id }"
         style="overflow-y: auto"
         :select-type="true"
+        :filter-columns="['workerFk', 'observationTypeFk']"
         required
         order="created DESC"
     />
diff --git a/src/pages/Route/Vehicle/Card/VehicleNotes.vue b/src/pages/Route/Vehicle/Card/VehicleNotes.vue
index 0afc3c3ed..3d39c12b6 100644
--- a/src/pages/Route/Vehicle/Card/VehicleNotes.vue
+++ b/src/pages/Route/Vehicle/Card/VehicleNotes.vue
@@ -9,13 +9,6 @@ const state = useState();
 const user = state.getUser();
 const vehicleId = computed(() => route.params.id);
 
-const noteFilter = computed(() => {
-    return {
-        order: 'created DESC',
-        where: { vehicleFk: vehicleId.value },
-    };
-});
-
 const body = {
     vehicleFk: vehicleId.value,
     workerFk: user.value.id,
@@ -25,9 +18,11 @@ const body = {
 <template>
     <VnNotes
         url="vehicleObservations"
+        data-key="vehicleObservations"
         :add-note="true"
-        :filter="noteFilter"
+        :filter="{ where: { vehicleFk: $route.params.id } }"
         :body="body"
+        :filter-columns="['workerFk']"
         style="overflow-y: auto"
         required
         deletable
diff --git a/src/pages/Worker/Card/WorkerNotes.vue b/src/pages/Worker/Card/WorkerNotes.vue
index da274f3fa..eedc47f55 100644
--- a/src/pages/Worker/Card/WorkerNotes.vue
+++ b/src/pages/Worker/Card/WorkerNotes.vue
@@ -29,8 +29,10 @@ const body = { workerFk: route.params.id };
     <VnNotes
         :add-note="true"
         url="WorkerObservations"
+        data-key="WorkerObservations"
         :user-filter="userFilter"
         :filter="{ where: { workerFk: $route.params.id } }"
+        :filter-columns="['workerFk']"
         :body="body"
     />
 </template>
-- 
2.40.1


From d3828fc0682ef033304809f06d8526acf42423fb Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 14 Apr 2025 15:52:10 +0200
Subject: [PATCH 8/9] refactor: refs #8193 noteFilter

---
 src/pages/Route/Vehicle/Card/VehicleNotes.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/pages/Route/Vehicle/Card/VehicleNotes.vue b/src/pages/Route/Vehicle/Card/VehicleNotes.vue
index 3d39c12b6..c246648f9 100644
--- a/src/pages/Route/Vehicle/Card/VehicleNotes.vue
+++ b/src/pages/Route/Vehicle/Card/VehicleNotes.vue
@@ -9,6 +9,13 @@ const state = useState();
 const user = state.getUser();
 const vehicleId = computed(() => route.params.id);
 
+const noteFilter = computed(() => {
+    return {
+        order: 'created DESC',
+        where: { vehicleFk: vehicleId.value },
+    };
+});
+
 const body = {
     vehicleFk: vehicleId.value,
     workerFk: user.value.id,
@@ -20,7 +27,7 @@ const body = {
         url="vehicleObservations"
         data-key="vehicleObservations"
         :add-note="true"
-        :filter="{ where: { vehicleFk: $route.params.id } }"
+        :filter="noteFilter"
         :body="body"
         :filter-columns="['workerFk']"
         style="overflow-y: auto"
-- 
2.40.1


From ad3edab6174d50623220b0536216b5206aeae6bb Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 14 Apr 2025 16:09:01 +0200
Subject: [PATCH 9/9] feat: refs #8193 wip use arrayData in notes filter

---
 src/components/ui/VnNotesFilter.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/ui/VnNotesFilter.vue b/src/components/ui/VnNotesFilter.vue
index 097fa321b..45584ebd3 100644
--- a/src/components/ui/VnNotesFilter.vue
+++ b/src/components/ui/VnNotesFilter.vue
@@ -7,6 +7,7 @@ import VnSelect from 'components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 
 import VnTableFilter from '../VnTable/VnTableFilter.vue';
+// import { useArrayData } from 'src/composables/useArrayData';
 
 const emit = defineEmits(['onFetch']);
 const { t } = useI18n();
@@ -28,6 +29,14 @@ const $props = defineProps({
         default: null,
     },
 });
+// const arrayData = useArrayData($props.url);
+// const store = arrayData.store;
+// console.log('store: ', store);
+// const users = store.data;
+// console.log('users: ', users);
+// const workers = $props.users.map((user) => user.worker);
+// console.log('workers: ', workers);
+
 const where = { [Object.keys($props.body)[0]]: $props.body[Object.keys($props.body)[0]] };
 const columns = $props.columns.map((col) => ({ name: col }));
 const filteredWorkers = ref([]);
-- 
2.40.1