feat: reorganized query filter store

packages/core/src/components/core/query/QueryFilterBox.vue

@@ -9,7 +9,7 @@ import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
     setup() {
-        const extended = ref(false);
+        const extended = ref(true);
 
         const toggleExtended = () => {
             extended.value = !extended.value;

packages/core/src/stores/query-filter/helper.ts

@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+
+import { serializeCoding } from '../../domains';
+import type { QueryFilterGroup, QueryFilters } from './types';
+
+export function buildQueryFilterURLValue(items: QueryFilterGroup[]) {
+    const output = items
+        .map((group) => group
+            .map((el) => serializeCoding(el))
+            .join('+'));
+
+    if (output.length > 0) {
+        return output.join(',');
+    }
+
+    return undefined;
+}
+
+export function buildQueryFiltersURLRecord(items: QueryFilters) {
+    const output : Record<string, string> = {};
+
+    const keys = Object.keys(items);
+    for (let i = 0; i < keys.length; i++) {
+        const value = buildQueryFilterURLValue(items[keys[i]]);
+        if (value) {
+            output[keys[i]] = value;
+        }
+    }
+
+    return output;
+}

packages/core/src/stores/query-filter/index.ts

@@ -5,6 +5,7 @@
  * view the LICENSE file that was distributed with this source code.
  */
 
+export * from './helper';
 export * from './install';
 export * from './module';
 export * from './singleton';

packages/core/src/stores/query-filter/module.ts

@@ -5,11 +5,13 @@
  * view the LICENSE file that was distributed with this source code.
  */
 
+import { isEqual } from 'smob';
 import { ref } from 'vue';
 import type { Coding } from '../../domains';
-import { serializeCoding } from '../../domains';
 import { QueryEventBusEventName } from '../../services';
 import type { StoreCreateOptions } from '../types';
+import { buildQueryFiltersURLRecord } from './helper';
+import type { QueryFilterGroup, QueryFilterGroupInput, QueryFilters } from './types';
 
 const toCoding = (input: string | Coding) : Coding => {
     if (typeof input === 'string') {
@@ -21,15 +23,31 @@ const toCoding = (input: string | Coding) : Coding => {
     return input;
 };
 
-type FilterGroupInput = string | Coding | string[] | Coding[];
+export function createQueryFilterStore(ctx: StoreCreateOptions) {
+    const items = ref<QueryFilters>({});
 
-type FilterGroup = Coding[];
-type Filters = Record<string, FilterGroup[]>;
+    const hasGroup = (key: string, input: QueryFilterGroupInput) => {
+        if (typeof items.value[key] === 'undefined' || items.value[key].length === 0) {
+            return false;
+        }
 
-export function createQueryFilterStore(ctx: StoreCreateOptions) {
-    const items = ref<Filters>({});
+        let data : Coding[];
+        if (Array.isArray(input)) {
+            data = input.map((el) => toCoding(el));
+        } else {
+            data = [toCoding(input)];
+        }
 
-    const addGroup = (key: string, input: FilterGroupInput) => {
+        for (let i = 0; i < items.value[key].length; i++) {
+            if (isEqual(items.value[key][i], data)) {
+                return true;
+            }
+        }
+
+        return false;
+    };
+
+    const addGroup = (key: string, input: QueryFilterGroupInput) => {
         let data : Coding[];
         if (Array.isArray(input)) {
             data = input.map((el) => toCoding(el));
@@ -48,7 +66,7 @@ export function createQueryFilterStore(ctx: StoreCreateOptions) {
         items.value[key] = [];
     };
 
-    const set = (key: string, input: FilterGroupInput[]) => {
+    const set = (key: string, input: QueryFilterGroupInput[]) => {
         reset(key);
 
         for (let i = 0; i < input.length; i++) {
@@ -58,7 +76,7 @@ export function createQueryFilterStore(ctx: StoreCreateOptions) {
         ctx.queryEventBus.emit(QueryEventBusEventName.FILTER_UPDATED, key);
     };
 
-    const get = (key: string) : FilterGroup[] => items.value[key] || [];
+    const get = (key: string) : QueryFilterGroup[] => items.value[key] || [];
 
     const resetAll = () => {
         items.value = {};
@@ -68,25 +86,12 @@ export function createQueryFilterStore(ctx: StoreCreateOptions) {
         ctx.queryEventBus.emit(QueryEventBusEventName.FILTERS_COMMITED);
     };
 
-    const buildURLRecord = () => {
-        const output : Record<string, string> = {};
-
-        const keys = Object.keys(items.value);
-        for (let i = 0; i < keys.length; i++) {
-            const groups : string[] = items.value[keys[i]]
-                .map((group) => group
-                    .map((el) => serializeCoding(el))
-                    .join('+'));
-
-            if (groups.length > 0) {
-                output[keys[i]] = groups.join(',');
-            }
-        }
-
-        return output;
-    };
+    const buildURLRecord = () => buildQueryFiltersURLRecord(items.value);
 
     return {
+        hasGroup,
+        addGroup,
+
         items,
         buildURLRecord,
 

packages/core/src/stores/query-filter/types.ts

@@ -10,8 +10,10 @@ import type {
     StoreDefinition as BaseStoreDefinition,
     Pinia,
     _ExtractActionsFromSetupStore,
-    _ExtractGettersFromSetupStore, _ExtractStateFromSetupStore,
+    _ExtractGettersFromSetupStore,
+    _ExtractStateFromSetupStore,
 } from 'pinia';
+import type { Coding } from '../../domains';
 
 import type { createQueryFilterStore } from './module';
 
@@ -33,3 +35,7 @@ _ExtractActionsFromSetupStore<StoreData>
 export type QueryFilterStoreInstallOptions = {
     pinia?: Pinia
 };
+
+export type QueryFilterGroupInput = string | Coding | string[] | Coding[];
+export type QueryFilterGroup = Coding[];
+export type QueryFilters = Record<string, QueryFilterGroup[]>;

packages/mtb/src/runtime/components/core/MMutationTabGroup.vue

@@ -8,9 +8,9 @@ import {
     defineComponent, markRaw, ref, toRef,
 } from 'vue';
 import { FormMutationType, type MutationDefinition } from '../../domains';
-import MSearchCNVForm from './MSearchCNVForm.vue';
-import MSearchFusionForm from './MSearchFusionForm.vue';
-import MSearchSNVForm from './MSearchSNVForm.vue';
+import MSearchCNVForm from './search/MSearchCNVForm.vue';
+import MSearchFusionForm from './search/MSearchFusionForm.vue';
+import MSearchSNVForm from './search/MSearchSNVForm.vue';
 
 export default defineComponent({
     components: { VCFormSelect },

packages/mtb/src/runtime/components/core/MQuerySummaryTumorDiagnostics.vue

@@ -1,7 +1,10 @@
 <script lang="ts">
 import {
     type Coding,
-    DKVChartTableSwitch, DQuerySummaryGrouped, DQuerySummaryNested, useQueryFilterStore,
+    DKVChartTableSwitch,
+    DQuerySummaryGrouped,
+    DQuerySummaryNested,
+    useQueryFilterStore,
 } from '@dnpm-dip/core';
 import { type PropType, defineComponent } from 'vue';
 import { navigateTo } from '#imports';
@@ -27,12 +30,9 @@ export default defineComponent({
         const queryFilterStore = useQueryFilterStore();
 
         const handleClick = (keys: Coding[]) => {
-            const old = queryFilterStore.get('diagnosis[code]');
-
             let hasChanged : boolean;
 
-            // todo: check if one group of old is equal to keys
-            if (old.length === 1) {
+            if (queryFilterStore.hasGroup('diagnosis[code]', keys)) {
                 hasChanged = false;
                 queryFilterStore.set('diagnosis[code]', []);
             } else {
@@ -70,7 +70,7 @@ export default defineComponent({
                             <DKVChartTableSwitch
                                 :coding-verbose-label="true"
                                 :data="items"
-                                :clickable="true"
+                                :clickable="false"
                                 @clicked="handleClick"
                             />
                         </template>

packages/mtb/src/runtime/components/core/MQueryCriteriaSummary.vue → packages/mtb/src/runtime/components/core/query-criteria/MQueryCriteriaSummary.vue

@@ -1,13 +1,13 @@
 <!--
-  - Copyright (c) 2024.
+  - Copyright (c) 2024-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 { DCodingText } from '@dnpm-dip/core';
 import { type PropType, defineComponent } from 'vue';
-import type { QueryCriteria } from '../../domains';
+import type { QueryCriteria } from '../../../domains';
 
 export default defineComponent({
     components: { DCodingText },

packages/mtb/src/runtime/components/core/MQueryCriteriaSummaryBox.vue → packages/mtb/src/runtime/components/core/query-criteria/MQueryCriteriaSummaryBox.vue

@@ -1,15 +1,15 @@
 <!--
-  - Copyright (c) 2024.
+  - Copyright (c) 2024-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 { BModal } from 'bootstrap-vue-next';
 import { type PropType, defineComponent, ref } from 'vue';
-import type { QuerySession } from '../../domains';
+import type { QuerySession } from '../../../domains';
 import MQueryCriteriaSummary from './MQueryCriteriaSummary.vue';
-import MSearchForm from './MSearchForm.vue';
+import MSearchForm from '../search/MSearchForm.vue';
 
 export default defineComponent({
     components: { BModal, MQueryCriteriaSummary, MSearchForm },

packages/mtb/src/runtime/components/core/MQueryPatientMatch.vue → packages/mtb/src/runtime/components/core/query-patient/MQueryPatientMatch.vue

@@ -1,8 +1,15 @@
+<!--
+  - 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 { defineComponent, ref } from 'vue';
-import type { PatientMatch } from '../../domains';
-import MQueryCriteriaSummary from './MQueryCriteriaSummary.vue';
+import { computed, defineComponent, ref } from 'vue';
+import type { PatientMatch } from '../../../domains';
+import MQueryCriteriaSummary from '../query-criteria/MQueryCriteriaSummary.vue';
 
 export default defineComponent({
     components: {
@@ -21,14 +28,23 @@ export default defineComponent({
             type: Number,
         },
     },
-    setup() {
-        const extended = ref(true);
+    setup(props) {
+        const extended = ref<boolean>(true);
 
         const toggleExtended = () => {
             extended.value = !extended.value;
         };
 
+        const id = computed(() => {
+            if (Number.isInteger(props.index)) {
+                return props.index + 1;
+            }
+
+            return props.entity.id;
+        });
+
         return {
+            id,
             toggleExtended,
             extended,
         };
@@ -39,7 +55,7 @@ export default defineComponent({
     <div class="entity-card w-100">
         <div class="d-flex flex-row">
             <div>
-                <strong># {{ Number.isInteger(index) ? index + 1 : entity.id }}</strong>
+                <strong># {{ id }}</strong>
             </div>
             <div class="ms-auto">
                 <button

packages/mtb/src/runtime/components/core/MQueryPatientMatches.ts → packages/mtb/src/runtime/components/core/query-patient/MQueryPatientMatches.ts

@@ -1,8 +1,15 @@
+/*
+ * 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.
+ */
+
 import type { ObjectLiteral, PatientMatchBase, ResourceCollectionSlots } from '@dnpm-dip/core';
 import { createResourceCollectionManager } from '@dnpm-dip/core';
 import type { PropType, SlotsType } from 'vue';
 import { defineComponent, toRef } from 'vue';
-import { injectHTTPClient } from '../../core/http-client';
+import { injectHTTPClient } from '../../../core/http-client';
 
 export default defineComponent({
     props: {

packages/mtb/src/runtime/components/core/MSearchCNVForm.vue → packages/mtb/src/runtime/components/core/search/MSearchCNVForm.vue

@@ -1,3 +1,10 @@
+<!--
+  - 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 CodeSystemConcept,
@@ -13,7 +20,7 @@ import type { FormSelectOption } from '@vuecs/form-controls';
 import {
     type PropType, computed, defineComponent, reactive, toRef, watch,
 } from 'vue';
-import type { QueryCNVCriteria } from '../../domains';
+import type { QueryCNVCriteria } from '../../../domains';
 
 export default defineComponent({
     components: {

packages/mtb/src/runtime/components/core/MSearchForm.vue → packages/mtb/src/runtime/components/core/search/MSearchForm.vue

@@ -1,3 +1,10 @@
+<!--
+  - 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 Coding,
@@ -22,16 +29,16 @@ import {
 import type { FormSelectOption } from '@vuecs/form-controls';
 import type { PropType } from 'vue';
 import { defineComponent, ref } from 'vue';
-import { injectHTTPClient } from '../../core/http-client';
+import { injectHTTPClient } from '../../../core/http-client';
 import {
     FormMutationType,
     type MutationDefinition,
     type QueryCNVCriteria,
     type QueryCriteria,
     type QueryFusionCriteria, type QueryMedicationCriteria,
     type QuerySNVCriteria, type QueryVariantCriteria,
-} from '../../domains';
-import MMutationTabGroup from './MMutationTabGroup.vue';
+} from '../../../domains';
+import MMutationTabGroup from '../MMutationTabGroup.vue';
 import MSearchMedicationForm from './MSearchMedicationForm.vue';
 
 export default defineComponent({

packages/mtb/src/runtime/components/core/MSearchFusionForm.vue → packages/mtb/src/runtime/components/core/search/MSearchFusionForm.vue

@@ -1,3 +1,10 @@
+<!--
+  - 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 CodeSystemConcept,
@@ -10,7 +17,7 @@ import { VCFormSelectSearch } from '@vuecs/form-controls';
 import {
     type PropType, computed, defineComponent, reactive, toRef, watch,
 } from 'vue';
-import type { QueryFusionCriteria } from '../../domains';
+import type { QueryFusionCriteria } from '../../../domains';
 
 export default defineComponent({
     components: {