feat: implemented internal mtb form logic and state management

packages/core/src/components/utility/form-tab/DFormTabGroups.vue

@@ -80,7 +80,12 @@ export default defineComponent({
         };
 
         const handleUpdated = (data: Record<string, any>) => {
-            items.value[currentIndex.value] = { ...data };
+            if (currentIndex.value === -1) {
+                items.value.push({ ...data });
+                currentIndex.value = 0;
+            } else {
+                items.value[currentIndex.value] = { ...data };
+            }
 
             emit('update:modelValue', items.value);
         };
@@ -98,10 +103,7 @@ export default defineComponent({
 </script>
 <template>
     <div class="d-flex flex-row">
-        <div
-            v-if="items.length > 0"
-            class="w-100"
-        >
+        <div class="w-100">
             <slot
                 :item="items[currentIndex]"
                 :updated="handleUpdated"

packages/core/src/domains/codesystem/api.ts

@@ -1,12 +1,14 @@
 import { BaseAPI } from '../api';
+import type { CollectionResponse } from '../types';
+import type { CodeSystem } from './types';
 
 export class CodeSystemAPI extends BaseAPI {
-    async getMany() {
+    async getMany() : Promise<CollectionResponse<CodeSystem>> {
         const response = await this.client.get('coding/codesystems');
         return response.data;
     }
 
-    async getOne(id: string) {
+    async getOne(id: string) : Promise<CodeSystem> {
         const response = await this.client.get(`coding/codesystems?uri=${id}`);
         return response.data;
     }

packages/core/src/domains/codesystem/index.ts

@@ -1,2 +1,3 @@
 export * from './api';
 export * from './types';
+export * from './utils';

packages/core/src/domains/codesystem/utils.ts

@@ -0,0 +1,21 @@
+import type { CodeSystemConcept } from './types';
+
+type FormSelectOption = {
+    id: string | number,
+    value: any
+};
+
+export function transformConceptToFormSelectOption(
+    input: CodeSystemConcept,
+) : FormSelectOption {
+    let value : any;
+    if (typeof input.properties.name !== 'undefined') {
+        value = `${input.display}: ${input.properties.name}`;
+    } else {
+        value = `${input.code}: ${input.display}`;
+    }
+    return {
+        id: input.code,
+        value,
+    };
+}

packages/core/src/domains/coding/utils.ts

@@ -5,3 +5,74 @@ export function isCoding(input: unknown) : input is Coding {
     return isObject(input) &&
         typeof input.code === 'string';
 }
+
+type FormSelectOption = {
+    id: string | number,
+    value: any
+};
+
+export function transformCodingsToFormSelectOptions(
+    input: Coding[],
+): FormSelectOption[] {
+    const output : FormSelectOption[] = [];
+
+    for (let i = 0; i < input.length; i++) {
+        output.push({
+            id: input[i].code,
+            value: input[i].display || input[i].code,
+        });
+    }
+
+    return output;
+}
+
+export function transformFormSelectOptionsToCodings(
+    input: FormSelectOption[],
+): Coding[] {
+    const output : Coding[] = [];
+
+    for (let i = 0; i < input.length; i++) {
+        output.push({
+            code: `${input[i].id}`,
+        });
+    }
+
+    return output;
+}
+
+export function extractCodeFromCodingsRecord(
+    input: Record<string, Coding | Coding[]>,
+): Record<string, any> {
+    const output : Record<string, any> = {};
+
+    const keys = Object.keys(input);
+    for (let i = 0; i < keys.length; i++) {
+        const value = input[keys[i]];
+        if (Array.isArray(value)) {
+            output[keys[i]] = value.map((v) => v.code);
+        } else {
+            output[keys[i]] = value.code;
+        }
+    }
+
+    return output;
+}
+
+export function buildCodingsRecord(input: Record<string, any>) : Record<string, any> {
+    const output : Record<string, any> = {};
+    const keys = Object.keys(input);
+    for (let i = 0; i < keys.length; i++) {
+        const value = input[keys[i]];
+
+        if (Array.isArray(value)) {
+            output[keys[i]] = value.map((v) => ({
+                code: v,
+            } satisfies Coding));
+        } else if (value.length > 0) {
+            output[keys[i]] = {
+                code: value,
+            } satisfies Coding;
+        }
+    }
+    return output;
+}

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

@@ -1,45 +1,16 @@
 <script lang="ts">
+import { DFormSelectSearch } from '@dnpm-dip/core';
 import type { FormSelectOption } from '@vuecs/form-controls';
-import { defineComponent, markRaw, ref } from 'vue';
-import type {
-    PropType,
-    Ref,
+import {
+    type PropType, type Ref, computed, watch,
 } from 'vue';
-import { DFormSelectSearch } from '@dnpm-dip/core';
-import type { QueryCNVCriteria, QueryFusionCriteria, QuerySNVCriteria } from '../../domains';
+import {
+    defineComponent, markRaw, ref, toRef,
+} from 'vue';
+import { FormMutationType, type MutationDefinition } from '../../domains';
 import MSearchCNVForm from './MSearchCNVForm.vue';
-import MSearchSNVForm from './MSearchSNVForm.vue';
 import MSearchFusionForm from './MSearchFusionForm.vue';
-
-enum MutationType {
-    SNV = 'snv',
-    CNV = 'cnv',
-    DNA_FUSION = 'dnaFusion',
-    RNA_FUSION = 'rnaFusion',
-}
-
-type MutationSNVDefinition = {
-    type: MutationType.SNV,
-    data: QuerySNVCriteria<string>
-};
-
-type MutationCNVDefinition = {
-    type: MutationType.CNV,
-    data: QueryCNVCriteria<string>
-};
-
-type MutationDNAFusionDefinition = {
-    type: MutationType.DNA_FUSION,
-    data: QueryFusionCriteria<string>
-};
-
-type MutationRNAFusionDefinition = {
-    type: MutationType.RNA_FUSION,
-    data: QueryFusionCriteria<string>
-};
-
-type MutationDefinition = MutationSNVDefinition | MutationCNVDefinition |
-MutationDNAFusionDefinition | MutationRNAFusionDefinition;
+import MSearchSNVForm from './MSearchSNVForm.vue';
 
 export default defineComponent({
     components: { DFormSelectSearch },
@@ -50,27 +21,28 @@ export default defineComponent({
         },
     },
     setup(props, { emit }) {
+        const entityRef = toRef(props, 'entity');
+
         const options : FormSelectOption[] = [
-            { id: MutationType.CNV, value: 'CNV' },
-            { id: MutationType.SNV, value: 'SNV' },
-            { id: MutationType.DNA_FUSION, value: 'DNA Fusion' },
-            { id: MutationType.RNA_FUSION, value: 'RNA Fusion' },
+            { id: FormMutationType.CNV, value: 'CNV' },
+            { id: FormMutationType.SNV, value: 'SNV' },
+            { id: FormMutationType.DNA_FUSION, value: 'DNA Fusion' },
+            { id: FormMutationType.RNA_FUSION, value: 'RNA Fusion' },
         ];
 
         const comp = ref(null) as Ref<null | Record<string, any>>;
-        const compType = ref(null);
-        const changeComp = (type: MutationType) => {
+        const changeComp = (type: FormMutationType) => {
             switch (type) {
-                case MutationType.CNV: {
+                case FormMutationType.CNV: {
                     comp.value = markRaw(MSearchCNVForm);
                     break;
                 }
-                case MutationType.SNV: {
+                case FormMutationType.SNV: {
                     comp.value = markRaw(MSearchSNVForm);
                     break;
                 }
-                case MutationType.RNA_FUSION:
-                case MutationType.DNA_FUSION: {
+                case FormMutationType.RNA_FUSION:
+                case FormMutationType.DNA_FUSION: {
                     comp.value = markRaw(MSearchFusionForm);
                     break;
                 }
@@ -88,18 +60,52 @@ export default defineComponent({
             changeComp((event.target as Record<string, any>).value);
         };
 
+        const compData = ref(null);
+        const compType = ref(null);
+
         const init = () => {
-            if (!props.entity) return;
+            if (props.entity) {
+                changeComp(props.entity.type);
+
+                compType.value = props.entity.type;
+                compData.value = props.entity.data;
+                return;
+            }
+
+            compType.value = null;
+            compData.value = null;
+        };
 
-            changeComp(props.entity.type);
+        init();
+
+        watch(entityRef, () => {
+            init();
+        }, { deep: true });
+
+        const isEditing = computed(() => !!props.entity &&
+                !!props.entity.type &&
+                !!props.entity.data);
+
+        const handleUpdated = (data: Record<string, any>) => {
+            compData.value = data;
+
+            emit('updated', {
+                type: compType.value,
+                data: compData.value,
+            });
         };
 
         return {
             changeCompByEvent,
             comp,
+            compData,
             compType,
 
             options,
+
+            handleUpdated,
+
+            isEditing,
         };
     },
 });
@@ -112,12 +118,17 @@ export default defineComponent({
         <template #default>
             <VCFormSelect
                 v-model="compType"
+                :disabled="isEditing"
                 :options="options"
                 @change="changeCompByEvent"
             />
         </template>
     </VCFormGroup>
-    <template v-if="comp">
-        <component :is="comp" />
+    <template v-if="comp && compType">
+        <component
+            :is="comp"
+            :entity="compData"
+            @updated="handleUpdated"
+        />
     </template>
 </template>