feat: refs #8193 filtering working except worker module

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

src/components/ui/VnNotesFilter.vue

@@ -1,6 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
-import { useRoute } from 'vue-router';
 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>

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>

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"
     />

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

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>