feat: refs #8193 added filter in client notes

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