From b8a95bb02fd1d552a03c1d7583fb0e333e5949d5 Mon Sep 17 00:00:00 2001
From: tada5hi <peter.placzek1996@gmail.com>
Date: Thu, 31 Oct 2024 14:49:10 +0100
Subject: [PATCH] feat: refactored query filter components, api, ...

---
 .../core/query/QueryPatientFilters.vue        |  83 ++++++++------
 packages/core/src/domains/coding/utils.ts     |   4 +
 packages/core/src/domains/query/api.ts        |   9 ++
 packages/core/src/domains/query/types.ts      |   2 -
 .../MQueryDiagnosisFilter.vue                 |  58 +++++++---
 packages/mtb/src/runtime/domains/query/api.ts |  22 +++-
 .../mtb/src/runtime/domains/query/types.ts    |  22 ++--
 .../src/runtime/pages/query/[id]/index.vue    |   7 +-
 .../components/core/RQueryDiagnosisFilter.vue |  96 ++++++++---------
 .../components/core/RQueryHPOFilter.vue       | 101 +++++++++---------
 packages/rd/src/runtime/constants.ts          |  11 ++
 packages/rd/src/runtime/domains/query/api.ts  |  13 ++-
 .../rd/src/runtime/domains/query/types.ts     |  11 +-
 .../rd/src/runtime/pages/query/[id]/index.vue |   7 +-
 14 files changed, 261 insertions(+), 185 deletions(-)
 rename packages/mtb/src/runtime/components/core/{ => query-filter}/MQueryDiagnosisFilter.vue (80%)
 create mode 100644 packages/rd/src/runtime/constants.ts

diff --git a/packages/core/src/components/core/query/QueryPatientFilters.vue b/packages/core/src/components/core/query/QueryPatientFilters.vue
index 2e2ee28a..0e95850b 100644
--- a/packages/core/src/components/core/query/QueryPatientFilters.vue
+++ b/packages/core/src/components/core/query/QueryPatientFilters.vue
@@ -1,10 +1,8 @@
 <script lang="ts">
-import type { PropType } from 'vue';
-import {
-    defineComponent, ref,
-} from 'vue';
 import { VCFormRangeMultiSlider } from '@vuecs/form-controls';
+import { defineComponent, ref } from 'vue';
 import { QueryFilterURLKey } from '../../../constants';
+import { injectHTTPClient } from '../../../core';
 import type { PatientFilter } from '../../../domains';
 import { useQueryFilterStore } from '../../../stores';
 import QueryFilterBox from './QueryFilterBox.vue';
@@ -15,8 +13,12 @@ export default defineComponent({
         VCFormRangeMultiSlider,
     },
     props: {
-        available: {
-            type: Object as PropType<PatientFilter>,
+        queryId: {
+            type: String,
+            required: true,
+        },
+        useCase: {
+            type: String,
             required: true,
         },
         busy: {
@@ -27,6 +29,20 @@ export default defineComponent({
     emits: ['submit'],
     async setup(props, { emit }) {
         const store = useQueryFilterStore();
+        const httpClient = injectHTTPClient();
+
+        const available = ref<PatientFilter>({});
+        const availableInitialized = ref<boolean>(false);
+
+        const load = async () => {
+            try {
+                available.value = await httpClient.query.getPatientFilter(props.useCase, props.queryId);
+            } catch (e) {
+                available.value = [];
+            } finally {
+                availableInitialized.value = true;
+            }
+        };
 
         const gender = ref<string[]>([]);
         const vitalStatus = ref<string[]>([]);
@@ -37,40 +53,40 @@ export default defineComponent({
         });
 
         const resetGender = () => {
-            gender.value = props.available.gender ?
-                props.available.gender.map((el) => el.code) :
+            gender.value = available.value.gender ?
+                available.value.gender.map((el) => el.code) :
                 [];
 
             store.set(QueryFilterURLKey.GENDER, []);
         };
 
         const resetVitalStatus = () => {
-            vitalStatus.value = props.available.vitalStatus ?
-                props.available.vitalStatus.map((el) => el.code) :
+            vitalStatus.value = available.value.vitalStatus ?
+                available.value.vitalStatus.map((el) => el.code) :
                 [];
 
             store.set(QueryFilterURLKey.VITAL_STATUS, []);
         };
 
         const resetSite = () => {
-            site.value = props.available.site ?
-                props.available.site.map((el) => el.code) :
+            site.value = available.value.site ?
+                available.value.site.map((el) => el.code) :
                 [];
 
             store.set(QueryFilterURLKey.SITE, []);
         };
 
         const resetAgeMin = () => {
-            age.value.min = props.available.ageRange ?
-                props.available.ageRange.min :
+            age.value.min = available.value.ageRange ?
+                available.value.ageRange.min :
                 0;
 
             store.set(QueryFilterURLKey.AGE_MIN, []);
         };
 
         const resetAgeMax = () => {
-            age.value.max = props.available.ageRange ?
-                props.available.ageRange.max :
+            age.value.max = available.value.ageRange ?
+                available.value.ageRange.max :
                 100;
 
             store.set(QueryFilterURLKey.AGE_MAX, []);
@@ -135,16 +151,18 @@ export default defineComponent({
             }
         };
 
-        init();
+        Promise.resolve()
+            .then(() => load())
+            .then(() => init());
 
         const handleAgeRangeChanged = (ctx: { min: number, max: number}) => {
             age.value.min = Math.round(ctx.min);
             age.value.max = Math.round(ctx.max);
 
-            if (props.available.ageRange) {
+            if (available.value.ageRange) {
                 if (
-                    props.available.ageRange.min &&
-                    props.available.ageRange.min === age.value.min
+                    available.value.ageRange.min &&
+                    available.value.ageRange.min === age.value.min
                 ) {
                     store.set(QueryFilterURLKey.AGE_MIN, []);
                 } else {
@@ -152,8 +170,8 @@ export default defineComponent({
                 }
 
                 if (
-                    props.available.ageRange.max &&
-                    props.available.ageRange.max === age.value.max
+                    available.value.ageRange.max &&
+                    available.value.ageRange.max === age.value.max
                 ) {
                     store.set(QueryFilterURLKey.AGE_MAX, []);
                 } else {
@@ -165,9 +183,9 @@ export default defineComponent({
         const handleGenderChanged = () => {
             const data : string[] = [];
             if (
-                props.available &&
-                props.available.gender &&
-                props.available.gender.length !== gender.value.length
+                available.value &&
+                available.value.gender &&
+                available.value.gender.length !== gender.value.length
             ) {
                 data.push(...gender.value);
             }
@@ -178,9 +196,9 @@ export default defineComponent({
         const handleVitalStatusChanged = () => {
             const data : string[] = [];
             if (
-                props.available &&
-                props.available.vitalStatus &&
-                props.available.vitalStatus.length !== vitalStatus.value.length
+                available.value &&
+                available.value.vitalStatus &&
+                available.value.vitalStatus.length !== vitalStatus.value.length
             ) {
                 data.push(...vitalStatus.value);
             }
@@ -191,9 +209,9 @@ export default defineComponent({
         const handleSiteChanged = () => {
             const data : string[] = [];
             if (
-                props.available &&
-                props.available.site &&
-                props.available.site.length !== site.value.length
+                available.value &&
+                available.value.site &&
+                available.value.site.length !== site.value.length
             ) {
                 data.push(...site.value);
             }
@@ -208,6 +226,9 @@ export default defineComponent({
         };
 
         return {
+            available,
+            availableInitialized,
+
             age,
             gender,
             vitalStatus,
diff --git a/packages/core/src/domains/coding/utils.ts b/packages/core/src/domains/coding/utils.ts
index cf0f4d60..46e8cad7 100644
--- a/packages/core/src/domains/coding/utils.ts
+++ b/packages/core/src/domains/coding/utils.ts
@@ -122,6 +122,10 @@ export function serializeCoding(coding: Coding) {
     parts.push(coding.code);
     if (coding.system) {
         parts.push(coding.system);
+
+        if (coding.version) {
+            parts.push(coding.version);
+        }
     }
 
     return parts.join('|');
diff --git a/packages/core/src/domains/query/api.ts b/packages/core/src/domains/query/api.ts
index 3e04d51b..3f5270ab 100644
--- a/packages/core/src/domains/query/api.ts
+++ b/packages/core/src/domains/query/api.ts
@@ -1,4 +1,5 @@
 import { BaseAPI } from '../api';
+import type { PatientFilter } from '../patient';
 import type { QueryBase } from './types';
 
 export class QueryAPI extends BaseAPI {
@@ -9,4 +10,12 @@ export class QueryAPI extends BaseAPI {
         const response = await this.client.get(`${useCase}/queries/${id}`);
         return response.data;
     }
+
+    async getPatientFilter(
+        useCase: string,
+        id: string,
+    ) : Promise<PatientFilter> {
+        const response = await this.client.get(`${useCase}/queries/${id}/filters/patient`);
+        return response.data;
+    }
 }
diff --git a/packages/core/src/domains/query/types.ts b/packages/core/src/domains/query/types.ts
index 1c10a58b..95a786fa 100644
--- a/packages/core/src/domains/query/types.ts
+++ b/packages/core/src/domains/query/types.ts
@@ -9,14 +9,12 @@ import type { MinMaxRange } from '../utility';
  */
 export type QueryBase<
     CRITERIA extends ObjectLiteral = ObjectLiteral,
-    FILTERS extends ObjectLiteral = ObjectLiteral,
 > = {
     id: string,
     submittedAt: string,
     querier: string,
     mode: Coding,
     criteria?: CRITERIA | null,
-    filters: FILTERS
     /**
      * Validity period (seconds) for the query.
      */
diff --git a/packages/mtb/src/runtime/components/core/MQueryDiagnosisFilter.vue b/packages/mtb/src/runtime/components/core/query-filter/MQueryDiagnosisFilter.vue
similarity index 80%
rename from packages/mtb/src/runtime/components/core/MQueryDiagnosisFilter.vue
rename to packages/mtb/src/runtime/components/core/query-filter/MQueryDiagnosisFilter.vue
index 708c3ae1..cc2358fb 100644
--- a/packages/mtb/src/runtime/components/core/MQueryDiagnosisFilter.vue
+++ b/packages/mtb/src/runtime/components/core/query-filter/MQueryDiagnosisFilter.vue
@@ -1,41 +1,60 @@
+<!--
+  - Copyright (c) 2024.
+  - Author Peter Placzek (tada5hi)
+  - For the full copyright and license information,
+  - view the LICENSE file that was distributed with this source code.
+  -->
+
 <script lang="ts">
-import type { PropType } from 'vue';
 import {
     computed, defineComponent, onUnmounted, ref,
 } from 'vue';
 import {
     type Coding, DQueryFilterBox, QueryEventBusEventName, injectQueryEventBus, useQueryFilterStore,
 } from '@dnpm-dip/core';
-import { QueryFilterURLKey } from '../../constants';
+import { QueryFilterURLKey } from '../../../constants';
+import { injectHTTPClient } from '../../../core/http-client';
 
 export default defineComponent({
     components: {
         DQueryFilterBox,
     },
     props: {
-        available: {
-            type: Object as PropType<Coding[]>,
-        },
         busy: {
             type: Boolean,
             default: false,
         },
+        queryId: {
+            type: String,
+            required: true,
+        },
     },
     emits: ['commited'],
     async setup(props, { emit }) {
         const store = useQueryFilterStore();
         const eventBus = injectQueryEventBus();
+        const httpClient = injectHTTPClient();
 
         const items = ref<string[]>([]);
+        const itemsAvailable = ref<Coding[]>([]);
+        const itemsAvailableInitialized = ref<boolean>(false);
 
-        const itemsAvailable = computed(() => {
-            if (!props.available) {
-                return [];
+        const load = async () => {
+            try {
+                const response = await httpClient.query.getDiagnosisFilter(props.queryId);
+                if (
+                    response &&
+                    response.code
+                ) {
+                    itemsAvailable.value = response.code
+                        .sort((a, b) => a.code.localeCompare(b.code));
+                }
+            } catch (e) {
+                itemsAvailable.value = [];
+            } finally {
+                itemsAvailableInitialized.value = true;
             }
-
-            return [...props.available]
-                .sort((a, b) => a.code.localeCompare(b.code));
-        });
+        };
 
         const offset = ref(0);
         const limit = ref(10);
@@ -59,7 +78,7 @@ export default defineComponent({
                 .slice(startIndex, endIndex);
         });
 
-        const load = (pagination: any) => {
+        const loadPage = (pagination: any) => {
             limit.value = pagination.limit;
             offset.value = pagination.offset;
         };
@@ -131,7 +150,9 @@ export default defineComponent({
             setFilter();
         };
 
-        init();
+        Promise.resolve()
+            .then(() => load())
+            .then(() => init());
 
         const submit = () => {
             store.commit();
@@ -145,6 +166,7 @@ export default defineComponent({
 
         return {
             items,
+            itemsAvailableInitialized,
 
             handleChanged,
             selectAll,
@@ -155,8 +177,7 @@ export default defineComponent({
             total,
             limit,
             offset,
-            load,
-
+            loadPage,
         };
     },
 });
@@ -178,6 +199,7 @@ export default defineComponent({
                     <div class="d-flex flex-row">
                         <div>
                             <button
+                                :disabled="!itemsAvailableInitialized"
                                 type="button"
                                 class="btn btn-xs btn-dark"
                                 @click.prevent="selectAll"
@@ -187,6 +209,7 @@ export default defineComponent({
                         </div>
                         <div class="ms-auto">
                             <button
+                                :disabled="!itemsAvailableInitialized"
                                 type="button"
                                 class="btn btn-xs btn-dark"
                                 @click.prevent="unselectAll"
@@ -218,7 +241,7 @@ export default defineComponent({
                             :total="total"
                             :offset="offset"
                             :limit="limit"
-                            @load="load"
+                            @load="loadPage"
                         />
                     </div>
                 </div>
@@ -226,6 +249,7 @@ export default defineComponent({
                 <div class="row">
                     <div class="form-group">
                         <button
+                            :disabled="!itemsAvailableInitialized"
                             type="button"
                             class="btn btn-xs btn-primary btn-block"
                             @click.prevent="submit"
diff --git a/packages/mtb/src/runtime/domains/query/api.ts b/packages/mtb/src/runtime/domains/query/api.ts
index d1b44c6f..d602cea2 100644
--- a/packages/mtb/src/runtime/domains/query/api.ts
+++ b/packages/mtb/src/runtime/domains/query/api.ts
@@ -1,5 +1,5 @@
 import type {
-    KMSurvivalReport,
+    KMSurvivalReport, PatientFilter,
     QuerySummaryDemographics,
     ResourceCollectionLoadMeta,
     ResourceCollectionResponse,
@@ -8,10 +8,11 @@ import type {
 import { BaseAPI, QueryRequestMode, serializeURLQueryRecord } from '@dnpm-dip/core';
 import type { PatientMatch, PatientRecord } from '../patient';
 import type {
-    QuerySession,
+    QueryDiagnosisFilter, QuerySession,
     QuerySessionCreate,
     QuerySummaryMedication,
-    QuerySummaryTumorDiagnostics,
+    QuerySummaryTumorDiagnostics, QueryTherapyImplementedFilter,
+    QueryTherapyRecommendedFilter,
     QueryTherapyResponse, QueryTherapyResponseByVariant,
 } from './types';
 
@@ -46,6 +47,21 @@ export class QueryAPI extends BaseAPI {
         return response.data;
     }
 
+    async getDiagnosisFilter(id: string) : Promise<QueryDiagnosisFilter> {
+        const response = await this.client.get(`mtb/queries/${id}/filters/diagnosis`);
+        return response.data;
+    }
+
+    async getTherapyImplementedFilter(id: string) : Promise<QueryTherapyImplementedFilter> {
+        const response = await this.client.get(`mtb/queries/${id}/filters/therapy`);
+        return response.data;
+    }
+
+    async getTherapyRecommendedFilter(id: string) : Promise<QueryTherapyRecommendedFilter> {
+        const response = await this.client.get(`mtb/queries/${id}/filters/therapy-recommendation`);
+        return response.data;
+    }
+
     /**
      * Get all patients in the context of a specific query.
      * @param id
diff --git a/packages/mtb/src/runtime/domains/query/types.ts b/packages/mtb/src/runtime/domains/query/types.ts
index 9119ebc6..f3af0af8 100644
--- a/packages/mtb/src/runtime/domains/query/types.ts
+++ b/packages/mtb/src/runtime/domains/query/types.ts
@@ -6,7 +6,6 @@ import type {
     DistributionNested,
     KMSurvivalReport,
     KeyValueRecords,
-    PatientFilter,
     QueryBase,
     QueryRequestMode, QuerySummaryBase,
 } from '@dnpm-dip/core';
@@ -85,17 +84,14 @@ export type QueryCriteria = {
     variants?: QueryVariantCriteria
 };
 
-export type QueryFilters = {
-    patient: PatientFilter,
-    diagnosis?: {
-        code?: Coding<string>[]
-    },
-    recommendation?: {
-        medication?: Coding<string>[]
-    },
-    therapy?: {
-        medication?: Coding<string[]>
-    }
+export type QueryDiagnosisFilter = {
+    code?: Coding<string>[]
+};
+export type QueryTherapyRecommendedFilter = {
+    medication?: Coding<string>[]
+};
+export type QueryTherapyImplementedFilter = {
+    medication?: Coding<string>[]
 };
 
 export type QuerySessionCreate = {
@@ -104,7 +100,7 @@ export type QuerySessionCreate = {
     criteria: QueryCriteria
 };
 
-export type QuerySession = QueryBase<QueryCriteria, QueryFilters>;
+export type QuerySession = QueryBase<QueryCriteria>;
 
 export type QueryTherapyResponse = {
     medicationClasses: Coding[],
diff --git a/packages/mtb/src/runtime/pages/query/[id]/index.vue b/packages/mtb/src/runtime/pages/query/[id]/index.vue
index aab17c90..8fc244fa 100644
--- a/packages/mtb/src/runtime/pages/query/[id]/index.vue
+++ b/packages/mtb/src/runtime/pages/query/[id]/index.vue
@@ -8,7 +8,7 @@ import type { PropType } from 'vue';
 import { defineNuxtComponent, useRoute } from '#imports';
 import MQueryCriteriaSummary from '../../../components/core/query-criteria/MQueryCriteriaSummary.vue';
 import MQueryCriteriaSummaryBox from '../../../components/core/query-criteria/MQueryCriteriaSummaryBox.vue';
-import MQueryDiagnosisFilter from '../../../components/core/MQueryDiagnosisFilter.vue';
+import MQueryDiagnosisFilter from '../../../components/core/query-filter/MQueryDiagnosisFilter.vue';
 import MSearchForm from '../../../components/core/search/MSearchForm.vue';
 import type { QuerySession } from '../../../domains';
 
@@ -116,11 +116,12 @@ export default defineNuxtComponent({
             <div class="col-6 col-md-3 col-lg-2">
                 <div class="d-flex flex-column gap-3">
                     <DQueryPatientFilters
-                        :available="entity.filters.patient"
+                        :use-case="'mtb'"
+                        :query-id="entity.id"
                     />
 
                     <MQueryDiagnosisFilter
-                        :available="entity.filters.diagnosis?.code"
+                        :query-id="entity.id"
                     />
                 </div>
             </div>
diff --git a/packages/rd/src/runtime/components/core/RQueryDiagnosisFilter.vue b/packages/rd/src/runtime/components/core/RQueryDiagnosisFilter.vue
index 81b25d11..fdc53b90 100644
--- a/packages/rd/src/runtime/components/core/RQueryDiagnosisFilter.vue
+++ b/packages/rd/src/runtime/components/core/RQueryDiagnosisFilter.vue
@@ -1,17 +1,18 @@
 <script lang="ts">
-import type { PropType } from 'vue';
 import {
-    computed, defineComponent, ref, watch,
+    defineComponent, ref,
 } from 'vue';
 import {
     type Coding, useQueryFilterStore,
 } from '@dnpm-dip/core';
+import { QueryURLFilterKey } from '../../constants';
+import { injectHTTPClient } from '../../core';
 import type { QueryDiagnosisFilter } from '../../domains';
 
 export default defineComponent({
     props: {
-        availableFilters: {
-            type: Object as PropType<QueryDiagnosisFilter>,
+        queryId: {
+            type: String,
             required: true,
         },
         busy: {
@@ -22,75 +23,68 @@ export default defineComponent({
     emits: ['submit'],
     async setup(props, { emit }) {
         const store = useQueryFilterStore();
-        const category = ref<string[]>([]);
-        const categoryChanged = ref(false);
-
-        const hasChanged = computed(
-            () => categoryChanged.value,
-        );
+        const httpClient = injectHTTPClient();
+
+        const available = ref<QueryDiagnosisFilter>({});
+        const availableInitialized = ref<boolean>(false);
+
+        const load = async () => {
+            try {
+                available.value = await httpClient.query.getDiagnosisFilter(props.queryId);
+            } catch (e) {
+                available.value = {};
+            } finally {
+                availableInitialized.value = true;
+            }
+        };
 
-        const previousSelection = ref<string[] | null>(null);
+        const category = ref<string[]>([]);
 
         const reset = () => {
-            if (props.availableFilters.category) {
-                category.value = props.availableFilters.category.map((el) => el.code);
-                previousSelection.value = [...category.value];
+            if (available.value.category) {
+                category.value = available.value.category.map((el) => el.code);
+                store.set(QueryURLFilterKey.DIAGNOSIS_CATEGORY, []);
             }
-
-            categoryChanged.value = false;
         };
 
-        reset();
+        Promise.resolve()
+            .then(() => load())
+            .then(() => reset());
 
-        watch(category, (value) => {
-            if (!previousSelection.value) {
-                categoryChanged.value = true;
+        const handleChanged = () => {
+            if (!available.value.category) {
                 return;
             }
 
-            if (value.length !== previousSelection.value.length) {
-                categoryChanged.value = true;
+            if (available.value.category.length === category.value.length) {
+                store.set(QueryURLFilterKey.DIAGNOSIS_CATEGORY, []);
                 return;
             }
 
-            let changed : boolean = false;
-            let index : number;
-            for (let i = 0; i < value.length; i++) {
-                index = previousSelection.value.findIndex((el) => el === value[i]);
-                if (index === -1) {
-                    changed = true;
-                    break;
+            const data : Coding[] = [];
+            for (let i = 0; i < category.value.length; i++) {
+                const index = available.value.category.findIndex((el) => el.code === category.value[i]);
+                if (index !== -1) {
+                    data.push(available.value.category[index]);
                 }
             }
 
-            categoryChanged.value = changed;
-        }, { deep: true });
+            store.set(QueryURLFilterKey.DIAGNOSIS_CATEGORY, data);
+        };
 
         const submit = () => {
-            const data : Coding[] = [];
-            if (props.availableFilters.category) {
-                for (let i = 0; i < category.value.length; i++) {
-                    const index = props.availableFilters.category.findIndex((el) => el.code === category.value[i]);
-                    if (index !== -1) {
-                        data.push(props.availableFilters.category[index]);
-                    }
-                }
-            }
-
-            store.set('diagnosis[category]', data);
             store.commit();
 
-            previousSelection.value = [...category.value];
-
             emit('submit');
-
-            categoryChanged.value = false;
         };
 
         return {
+            available,
+            availableInitialized,
+
             category,
 
-            hasChanged,
+            handleChanged,
 
             reset,
             submit,
@@ -106,14 +100,14 @@ export default defineComponent({
             </h5>
         </div>
         <div
-            v-if="availableFilters.category"
+            v-if="available.category"
             class="mb-3"
         >
             <h6><i class="fas fa-tags" /> Kategorie</h6>
 
             <div>
                 <template
-                    v-for="item in availableFilters.category"
+                    v-for="item in available.category"
                     :key="item.code"
                 >
                     <div class="form-check">
@@ -122,6 +116,7 @@ export default defineComponent({
                             :label="true"
                             :label-content="(item.display || item.code)"
                             :value="item.code"
+                            @change="handleChanged"
                         />
                     </div>
                 </template>
@@ -133,7 +128,7 @@ export default defineComponent({
                 <button
                     type="button"
                     class="btn btn-xs btn-primary btn-block"
-                    :disabled="!hasChanged"
+                    :disabled="!availableInitialized"
                     @click.prevent="submit"
                 >
                     Anwenden
@@ -141,6 +136,7 @@ export default defineComponent({
             </div>
             <div>
                 <button
+                    :disabled="!availableInitialized"
                     type="button"
                     class="btn btn-xs btn-secondary btn-block"
                     @click.prevent="reset"
diff --git a/packages/rd/src/runtime/components/core/RQueryHPOFilter.vue b/packages/rd/src/runtime/components/core/RQueryHPOFilter.vue
index fe0209a7..8cb6bcf9 100644
--- a/packages/rd/src/runtime/components/core/RQueryHPOFilter.vue
+++ b/packages/rd/src/runtime/components/core/RQueryHPOFilter.vue
@@ -1,21 +1,16 @@
 <script lang="ts">
-import type { PropType } from 'vue';
 import {
-    computed, defineComponent, ref, watch,
+    defineComponent, ref,
 } from 'vue';
-import { clone, useQueryFilterStore } from '@dnpm-dip/core';
+import { type Coding, useQueryFilterStore } from '@dnpm-dip/core';
+import { QueryURLFilterKey } from '../../constants';
+import { injectHTTPClient } from '../../core';
 import type { QueryHpoFilter } from '../../domains';
 
-type QueryRecord = {
-    hpo: {
-        term: string[]
-    }
-};
-
 export default defineComponent({
     props: {
-        availableFilters: {
-            type: Object as PropType<QueryHpoFilter>,
+        queryId: {
+            type: String,
             required: true,
         },
         busy: {
@@ -26,67 +21,67 @@ export default defineComponent({
     emits: ['submit'],
     async setup(props, { emit }) {
         const store = useQueryFilterStore();
+        const httpClient = injectHTTPClient();
+
+        const available = ref<QueryHpoFilter>({});
+        const availableInitialized = ref<boolean>(false);
+
+        const load = async () => {
+            try {
+                available.value = await httpClient.query.getHpoFilter(props.queryId);
+            } catch (e) {
+                available.value = {};
+            } finally {
+                availableInitialized.value = true;
+            }
+        };
 
-        const form = ref<string[]>([]);
-        const termChanged = ref(false);
-
-        const hasChanged = computed(
-            () => termChanged.value,
-        );
-
-        const previousSelection = ref<string[] | null>(null);
-
+        const items = ref<string[]>([]);
         const reset = () => {
-            if (props.availableFilters.value) {
-                form.value = props.availableFilters.value.map((el) => el.code);
-                previousSelection.value = clone(form.value);
+            if (available.value.value) {
+                items.value = available.value.value.map((el) => el.code);
+                store.set(QueryURLFilterKey.HPO_VALUE, []);
             }
-
-            termChanged.value = false;
         };
 
-        reset();
+        Promise.resolve()
+            .then(() => load())
+            .then(() => reset());
 
-        watch(form, (value) => {
-            if (!previousSelection.value) {
-                termChanged.value = true;
+        const handleChanged = () => {
+            if (!available.value.value) {
                 return;
             }
 
-            if (value.length !== previousSelection.value.length) {
-                termChanged.value = true;
+            if (available.value.value.length === items.value.length) {
+                store.set(QueryURLFilterKey.HPO_VALUE, []);
                 return;
             }
 
-            let changed : boolean = false;
-            let index : number;
-            for (let i = 0; i < value.length; i++) {
-                index = previousSelection.value.findIndex((el) => el === value[i]);
-                if (index === -1) {
-                    changed = true;
-                    break;
+            const data : Coding[] = [];
+            for (let i = 0; i < items.value.length; i++) {
+                const index = available.value.value.findIndex((el) => el.code === items.value[i]);
+                if (index !== -1) {
+                    data.push(available.value.value[index]);
                 }
             }
 
-            termChanged.value = changed;
-        }, { deep: true });
+            store.set(QueryURLFilterKey.HPO_VALUE, data);
+        };
 
         const submit = () => {
-            store.set('hpo[value]', [...form.value]);
             store.commit();
 
-            previousSelection.value = [...form.value];
-
             emit('submit');
-
-            termChanged.value = false;
         };
 
         return {
-            form,
+            available,
+            availableInitialized,
+
+            items,
 
-            hasChanged,
-            termChanged,
+            handleChanged,
 
             reset,
             submit,
@@ -102,22 +97,23 @@ export default defineComponent({
             </h5>
         </div>
         <div
-            v-if="availableFilters.value"
+            v-if="available.value"
             class="mb-3"
         >
             <h6><i class="fas fa-tags" /> Term</h6>
 
             <div>
                 <template
-                    v-for="item in availableFilters.value"
+                    v-for="item in available.value"
                     :key="item.code"
                 >
                     <div class="form-check">
                         <VCFormInputCheckbox
-                            v-model="form"
+                            v-model="items"
                             :label="true"
                             :label-content="(item.display || item.code)"
                             :value="item.code"
+                            @change="handleChanged"
                         />
                     </div>
                 </template>
@@ -129,7 +125,7 @@ export default defineComponent({
                 <button
                     type="button"
                     class="btn btn-xs btn-primary btn-block"
-                    :disabled="!hasChanged"
+                    :disabled="!availableInitialized"
                     @click.prevent="submit"
                 >
                     Anwenden
@@ -137,6 +133,7 @@ export default defineComponent({
             </div>
             <div>
                 <button
+                    :disabled="!availableInitialized"
                     type="button"
                     class="btn btn-xs btn-secondary btn-block"
                     @click.prevent="reset"
diff --git a/packages/rd/src/runtime/constants.ts b/packages/rd/src/runtime/constants.ts
new file mode 100644
index 00000000..5ff3ec0c
--- /dev/null
+++ b/packages/rd/src/runtime/constants.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2024.
+ * Author Peter Placzek (tada5hi)
+ * For the full copyright and license information,
+ * view the LICENSE file that was distributed with this source code.
+ */
+
+export enum QueryURLFilterKey {
+    HPO_VALUE = 'hpo[value]',
+    DIAGNOSIS_CATEGORY = 'diagnosis[category]',
+}
diff --git a/packages/rd/src/runtime/domains/query/api.ts b/packages/rd/src/runtime/domains/query/api.ts
index b85fc047..838a9b73 100644
--- a/packages/rd/src/runtime/domains/query/api.ts
+++ b/packages/rd/src/runtime/domains/query/api.ts
@@ -5,6 +5,7 @@ import type {
 import { BaseAPI, QueryRequestMode, serializeURLQueryRecord } from '@dnpm-dip/core';
 import type { PatientMatch, PatientRecord } from '../patient';
 import type {
+    QueryDiagnosisFilter, QueryHpoFilter,
     QuerySession, QuerySessionCreate, QuerySummary, QuerySummaryDiagnostics,
 } from './types';
 
@@ -35,7 +36,17 @@ export class QueryAPI extends BaseAPI {
      * @param query
      */
     async update(id: string, query?: QuerySessionCreate) : Promise<QuerySession> {
-        const response = await this.client.put(`rd/queries/${id}`, query);
+        const response = await this.client.get(`rd/queries/${id}`, query);
+        return response.data;
+    }
+
+    async getDiagnosisFilter(id: string) : Promise<QueryDiagnosisFilter> {
+        const response = await this.client.get(`rd/queries/${id}/filters/diagnosis`);
+        return response.data;
+    }
+
+    async getHpoFilter(id: string) : Promise<QueryHpoFilter> {
+        const response = await this.client.get(`rd/queries/${id}/filters/hpo`);
         return response.data;
     }
 
diff --git a/packages/rd/src/runtime/domains/query/types.ts b/packages/rd/src/runtime/domains/query/types.ts
index bb8a89ac..209d878b 100644
--- a/packages/rd/src/runtime/domains/query/types.ts
+++ b/packages/rd/src/runtime/domains/query/types.ts
@@ -46,16 +46,7 @@ export type QueryHpoFilter = {
     value?: Coding[]
 };
 
-export type QueryFilters = {
-    diagnosis: QueryDiagnosisFilter,
-    hpo: QueryHpoFilter,
-    patient: PatientFilter,
-};
-
-export type QuerySession = QueryBase<
-QueryCriteria,
-QueryFilters
->;
+export type QuerySession = QueryBase<QueryCriteria>;
 
 export type QuerySummaryDiagnostics = {
     overallDistributions: {
diff --git a/packages/rd/src/runtime/pages/query/[id]/index.vue b/packages/rd/src/runtime/pages/query/[id]/index.vue
index 4cca6877..1fd423c1 100644
--- a/packages/rd/src/runtime/pages/query/[id]/index.vue
+++ b/packages/rd/src/runtime/pages/query/[id]/index.vue
@@ -139,19 +139,20 @@ export default defineNuxtComponent({
             <div class="col-6 col-md-3 col-lg-2">
                 <DQueryPatientFilters
                     class="mb-3"
-                    :available="entity.filters.patient"
+                    :query-id="entity.id"
+                    :use-case="'rd'"
                     @submit="handleSubmit"
                 />
 
                 <QueryDiagnosisFilter
                     class="mb-3"
-                    :available-filters="entity.filters.diagnosis"
+                    :query-id="entity.id"
                     @submit="handleSubmit"
                 />
 
                 <QueryHPOFilter
                     class="mb-3"
-                    :available-filters="entity.filters.hpo"
+                    :query-id="entity.id"
                     @submit="handleSubmit"
                 />
             </div>