full import and export

frontend/src/components/ModulePatientEditor.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-  import { ref, onMounted, watch } from 'vue'
+  import { ref, onMounted, watch, computed } from 'vue'
   import { createEditor as createPatientEditor } from '@/rete/editor'
   import PatientInfoForm from '@/components/componentsPatientEditor/PatientInfoForm.vue'
   import PatientStateForm from '@/components/componentsPatientEditor/PatientStateForm.vue'
   import 'antd/dist/reset.css'
   import { Editor } from '@/rete/types'
-  import { loadPatientInfo } from '@/components/componentsPatientEditor/PatientInfoForm.vue'
+  import data from '@/rete/data/data.json'
 
   const patientModule = ref("" as string)
   const transitionModules = ref([] as string[])
@@ -26,14 +26,22 @@
     }
 
     loadPatientInfo()
+    loadPatientStates()
   })
 
+  function loadPatientInfo() {
+    info.value = data.info
+  }
+
+  function loadPatientStates() {
+    states.value = data.states
+  }
+
   function openPatient() {
     editor.value?.openModule('', 'patient').then(() => {
       editor.value?.layout()
     })
     patientInfoFormIsVisible.value = true
-    loadPatientInfo()
   }
 
 watch(editor, (newEditor) => {
@@ -78,16 +86,36 @@ function restoreModule() {
 }
 
 function exportData() {
-  editor.value?.exportData()
+  saveModule()
+  const data = {
+    info: info.value,
+    flow: editor.value?.getModules().patientModuleData,
+    states: states.value,
+    transitions: editor.value?.getModules().transitionModulesData,
+    components: editor.value?.getModules().componentModulesData
+  }
+  const json = JSON.stringify(data)
+  const blob = new Blob([json], { type: 'text/json' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = 'patient.json'
+  a.click()
+  URL.revokeObjectURL(url)
 }
 </script>
 
 <script lang="ts">
   const patientInfoFormIsVisible = ref(true)
 
-  export function showPatientStateForm() {
+  export function openPatientState(stateId: string) {
     patientInfoFormIsVisible.value = false
+    currentStateId.value = stateId
   }
+  export const info = ref({} as any)
+  export const states = ref([] as any)
+  export const currentStateId = ref('')
+  export const currentState = ref(computed(() => states.value.find((state) => state.id === currentStateId.value)))
 </script>
 
 <template>
@@ -132,7 +160,7 @@ function exportData() {
 		</button>
 	</div>
 	<div ref="editorContainer" class="rete" />
-	<div v-if="patientInfoFormIsVisible" class="right-sidebar overlay">
+	<div v-show="patientInfoFormIsVisible" class="right-sidebar overlay">
 		<PatientInfoForm />
 	</div>
 	<div class="right-sidebar">

frontend/src/components/componentsPatientEditor/PatientInfoForm.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
 	import { getNode } from '@formkit/core'
-	import data from '@/rete/data/data.json'
-</script>
-
-<script lang="ts">
-	export function loadPatientInfo() {
-		const patientInfo = data.static
-        const patientInfoFormNode = getNode('patientInfoForm')
-        patientInfoFormNode?.input(patientInfo)
-    }
+	import { info } from '@/components/ModulePatientEditor.vue'
+	import { watch } from 'vue'
+	
+	watch(
+		info,
+		(newVal) => {
+			const patientInfoFormNode = getNode('patientInfoForm')
+			patientInfoFormNode?.input(newVal)
+		}
+	)
 </script>
 
 <template>
 	<h1>Patient</h1>
 	<FormKit
 		id="patientInfoForm"
-		v-slot="{ value }"
 		type="form"
 	>
 		<FormKit

frontend/src/components/componentsPatientEditor/PatientStateForm.vue

@@ -1,27 +1,23 @@
 <script setup lang="ts">
     import { getNode } from '@formkit/core'
-	import data from '@/rete/data/data.json'
-</script>
-
-<script lang="ts">
-	import { ref } from 'vue'
-	const patientStateId = ref('')
+	import { currentState } from '@/components/ModulePatientEditor.vue'
+	import { watch } from 'vue'
 
-    export function loadPatientState(stateId: string) {
-		const  patientState = data.states.find(state => state.id === stateId)
-        const patientStateFormNode = getNode('patientStateForm')
-        patientStateFormNode?.input(patientState)
-		patientStateId.value = patientState?.id || ''
-    }
+	watch(
+		currentState,
+		(newVal) => {
+			const patientStateFormNode = getNode('patientStateForm')
+			patientStateFormNode?.input(newVal)
+		}
+	)
 </script>
 
 <template>
 	<!-- eslint-disable max-len -->
 	<!-- eslint-disable vue/max-len -->
-	<h1>Zustand {{ patientStateId }}</h1>
+	<h1>Zustand {{ currentState?.id }}</h1>
 	<FormKit
 		id="patientStateForm"
-		v-slot="{ value }"
 		type="form"
 	>
 		<FormKit
@@ -583,7 +579,5 @@
 				{ value: 826, label: '23' }
 			]"
 		/>
-
-		<pre wrap>{{ value }}</pre>
 	</FormKit>
 </template>

frontend/src/rete/data/data.json

@@ -1,5 +1,5 @@
 {
-    "static": {
+    "info": {
         "triage": "rot",
         "sex": "männlich",
         "age": "21",

frontend/src/rete/editor.ts

@@ -9,9 +9,7 @@ import {
 } from 'rete-auto-arrange-plugin'
 import { ContextMenuPlugin, Presets as ContextMenuPresets } from 'rete-context-menu-plugin'
 import { ClassicFlow, getSourceTarget } from 'rete-connection-plugin'
-
-import { loadPatientState } from '@/components/componentsPatientEditor/PatientStateForm.vue'
-import { showPatientStateForm } from '@/components/ModulePatientEditor.vue'
+import { openPatientState } from '@/components/ModulePatientEditor.vue'
 import { Modules } from "./modules.js"
 import { clearEditor } from "./utils.js"
 import { createNode, exportEditor, importEditor } from "./import.js"
@@ -68,8 +66,7 @@ export async function createEditor(container: HTMLElement) {
     if (context.type === 'nodepicked') {
       const node = editor.getNode(context.data.id)
       if (node instanceof StateNode) {
-        showPatientStateForm()
-        loadPatientState(node.id)
+        openPatientState(node.id)
       }
     }
     return context
@@ -264,31 +261,12 @@ export async function createEditor(container: HTMLElement) {
     openModule,
     layout: async () => {
       await arrange.layout()
-      console.log("Layout arranged")
       AreaExtensions.zoomAt(area, editor.getNodes())
     },
     destroy: () => {
       console.log("area.destroy1", area.nodeViews.size)
 
       area.destroy()
-    },
-    exportData: () => {
-      saveModule()
-      const data = {
-        static: {},
-        flow: getModules().patientModuleData,
-        states: [],
-        transitions: getModules().transitionModulesData,
-        components: getModules().componentModulesData
-      }
-      const json = JSON.stringify(data)
-      const blob = new Blob([json], { type: 'text/json' })
-      const url = URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = url
-      a.download = 'patient.json'
-      a.click()
-      URL.revokeObjectURL(url)
     }
   }
 }

frontend/src/rete/import.ts

@@ -11,7 +11,7 @@ import {
 } from "./nodes/index"
 import { removeConnections } from "./utils"
 import { ActionIDs } from "./constants"
-import { DropdownOption } from "./nodes/action"
+import { DropdownOption } from "./dropdown"
 
 export async function createNode(
   { editor, area, dataflow, modules, process }: Context,
@@ -130,4 +130,4 @@ export function exportEditor(context: Context) {
   }
 
   return nodes
-}
+}

frontend/src/rete/types.ts

@@ -50,5 +50,4 @@ export interface Editor {
     openModule(id: string, type: string): Promise<void>;
     layout(): Promise<void>;
     destroy(): void;
-    exportData(): void;
   }