feat: refs #8193 customer filter

src/components/ui/VnNotes.vue

@@ -1,10 +1,9 @@
 <script setup>
 import axios from 'axios';
-import { ref, reactive, useAttrs, computed, onMounted, onUnmounted } from 'vue';
+import { ref, reactive, useAttrs, computed, onMounted } from 'vue';
 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';
 
@@ -16,8 +15,6 @@ 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';
-import VnNotesFilter from './VnNotesFilter.vue';
 
 const emit = defineEmits(['onFetch']);
 
@@ -38,7 +35,6 @@ const $props = defineProps({
     justInput: { type: Boolean, default: false },
     filterColumns: { type: Array, default: () => [] },
 });
-const stateStore = useStateStore();
 const { t } = useI18n();
 const quasar = useQuasar();
 const newNote = reactive({ text: null, observationTypeFk: null });
@@ -128,15 +124,6 @@ function fetchData([data]) {
     emit('onFetch', data);
 }
 
-const handleObservationTypes = async (data) => {
-    observationTypes.value = data;
-    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) {
     switch (param) {
         case 'observationTypeFk':
@@ -145,11 +132,17 @@ function exprBuilder(param, value) {
     }
 }
 
-onMounted(() => {
+onMounted(async () => {
-    stateStore.rightDrawerChangeValue(true);
+    const { data: obervations } = await axios.get('ObservationTypes');
-});
+    observationTypes.value = obervations;
-onUnmounted(() => {
+    console.log('observationTypes.value: ', observationTypes.value);
-    stateStore.rightDrawer = false;
+    const { data: res } = await axios.get(`VnRoles/${userRole?.value[0]?.roleFk}`);
+    console.log('res: ', res);
+    const hasObservationType = observationTypes.value.find((ot) => ot.code === res.name);
+    console.log('hasObservationType: ', hasObservationType);
+    newNote.observationTypeFk = hasObservationType
+        ? hasObservationType.code
+        : defaultObservationType.value;
 });
 </script>
 <template>
@@ -161,13 +154,6 @@ onUnmounted(() => {
         auto-load
         @on-fetch="(data) => (userRole = data)"
     />
-    <FetchData
-        v-if="selectType"
-        url="ObservationTypes"
-        :filter="{ fields: ['id', 'description', 'code'] }"
-        auto-load
-        @on-fetch="handleObservationTypes"
-    />
     <FetchData
         v-if="justInput"
         :url="url"
@@ -175,16 +161,6 @@ onUnmounted(() => {
         @on-fetch="fetchData"
         auto-load
     />
-    <RightMenu>
-        <template #right-panel>
-            <VnNotesFilter
-                :data-key="$props.dataKey"
-                :url="$props.url"
-                :columns="$props.filterColumns"
-                :body="$props.body"
-            />
-        </template>
-    </RightMenu>
     <QCard
         class="q-pa-xs q-mb-lg full-width"
         :class="{ 'just-input': $props.justInput }"

src/components/ui/VnNotesFilter.vue

@@ -1,117 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-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';
-// import { useArrayData } from 'src/composables/useArrayData';
-
-const emit = defineEmits(['onFetch']);
-const { t } = useI18n();
-const $props = defineProps({
-    dataKey: {
-        type: String,
-        default: null,
-    },
-    url: {
-        type: String,
-        default: null,
-    },
-    columns: {
-        type: Array,
-        default: null,
-    },
-    body: {
-        type: Object,
-        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([]);
-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="$props.url"
-        :filter="{ fields: ['id', 'workerFk'] }"
-        :where="where"
-        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"
-                @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">
-                        <QItemSection class="col-3 items-center">
-                            <VnAvatar :worker-id="opt.worker.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>

src/pages/Customer/Card/CustomerNotes.vue

@@ -1,10 +1,121 @@
 <script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'src/components/FetchData.vue';
 import VnNotes from 'src/components/ui/VnNotes.vue';
+import VnTableFilter from 'src/components/VnTable/VnTableFilter.vue';
+import { useStateStore } from 'stores/useStateStore';
+import { useI18n } from 'vue-i18n';
+import VnAvatar from 'src/components/ui/VnAvatar.vue';
+
+const { t } = useI18n();
+const url = 'clientObservations';
+const stateStore = useStateStore();
+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;
+    });
+};
+function exprBuilder(param, value) {
+    switch (param) {
+        case 'observationTypeFk':
+        case 'workerFk':
+            return { [param]: value };
+    }
+}
+
+onMounted(() => {
+    stateStore.rightDrawerChangeValue(true);
+});
+onUnmounted(() => {
+    stateStore.rightDrawer = false;
+});
 </script>
 <template>
+    <FetchData
+        :url="url"
+        :filter="{ fields: ['id', 'workerFk'] }"
+        :where="{ clientFk: $route.params.id }"
+        auto-load
+        @on-fetch="setWorkerObservations"
+    />
+    <RightMenu>
+        <template #right-panel>
+            <VnTableFilter
+                data-key="clientObservations"
+                :data-key
+                :columns="columns"
+                :redirect="false"
+                :exprBuilder
+                :search-url="url"
+                :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"
+                        @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">
+                                <QItemSection class="col-3 items-center">
+                                    <VnAvatar :worker-id="opt.worker.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>
+    </RightMenu>
     <VnNotes
-        url="clientObservations"
+        :url="url"
-        :data-key="'clientObservations'"
+        data-key="clientObservations"
         :add-note="true"
         :filter="{ where: { clientFk: $route.params.id } }"
         :body="{ clientFk: $route.params.id }"