Bug fixes

README.md

@@ -1,105 +1,13 @@
-*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
+# Medblocks UI
+Web Components for rapid development of openEHR systems.
 
----
+# Build your component here:
 
-# svelte app
-
-This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
-
-To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
-
-```bash
-npx degit sveltejs/template svelte-app
-cd svelte-app
-```
-
-*Note that you will need to have [Node.js](https://nodejs.org) installed.*
-
-
-## Get started
-
-Install the dependencies...
-
-```bash
-cd svelte-app
-npm install
-```
-
-...then start [Rollup](https://rollupjs.org):
-
-```bash
-npm run dev
-```
-
-Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
-
-By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
-
-If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
-
-## Building and running in production mode
-
-To create an optimised version of the app:
-
-```bash
-npm run build
-```
-
-You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
-
-
-## Single-page app mode
-
-By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
-
-If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
-
-```js
-"start": "sirv public --single"
-```
-
-## Using TypeScript
-
-This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
-
-```bash
-node scripts/setupTypeScript.js
-```
-
-Or remove the script via:
-
-```bash
-rm scripts/setupTypeScript.js
+Include the script from a CDN
 ```
 
-## Deploying to the web
-
-### With [Vercel](https://vercel.com)
-
-Install `vercel` if you haven't already:
-
-```bash
-npm install -g vercel
-```
-
-Then, from within your project folder:
-
-```bash
-cd public
-vercel deploy --name my-project
-```
-
-### With [surge](https://surge.sh/)
-
-Install `surge` if you haven't already:
-
-```bash
-npm install -g surge
-```
-
-Then, from within your project folder:
-
-```bash
-npm run build
-surge public my-project.surge.sh
 ```
+or install using npm
+```sh
+npm install medblocks
+```

package.json

@@ -54,6 +54,7 @@
     "axios": "^0.21.1",
     "localforage": "^1.9.0",
     "rxjs": "^6.6.3",
+    "serialize-javascript": "^5.0.1",
     "svelte-spa-router": "^3.1.0"
   }
 }

src/composition/Composition.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
     import type {
-CompositionStore,
-        keyValue,
-readableKeyValue,
+                keyValue,
+        readableKeyValue,
                 Template,
         UITemplate,
-        writableKeyValue,
+writableKeyValue,
     } from "../types/types";
     import Leaf from "./Leaf.svelte";
     import Group from "./Group.svelte";
@@ -44,6 +43,9 @@ readableKeyValue,
     }
     $: if (store){
         internalStore = store
+        if (!readOnly){
+            (internalStore as writableKeyValue).update(s=>({...s, ...initialData}))
+        }
     } else {
         if (readOnly) {
         internalStore = readable(initialData, (set)=>{
@@ -84,6 +86,7 @@ readableKeyValue,
         {#if !error}
             <div class={parentClass}>
                 {#each uiTemplate.schema as item}
+                {#key item.path}
                     {#if item.type === 'Group'}
                         <Group
                             {...item}
@@ -101,6 +104,7 @@ readableKeyValue,
                         <p>Type {item.type} not recognized</p>
                         <pre>{JSON.stringify(item, null, 2)}</pre>
                     {/if}
+                {/key}
                 {/each}
             </div>
         {:else}

src/composition/Group.svelte

@@ -108,6 +108,8 @@
     {#if repeatable}
         {#each [...Array(count).keys()] as index}
             <!-- transition:slide="{{duration: 300 }}" -->
+
+
             <div class="field" style="box-sizing: border-box;">
                 <svelte:self
                     path={`${path}:${index}`}

src/rm/Context.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { onDestroy } from "svelte";
+
     import type { keyValue, readableKeyValue, Tree, writableKeyValue } from "../types/types";
     import { triggerDestroy } from "./utils";
     export let tree: Tree;
@@ -31,8 +33,8 @@
         case "setting":
             data = {
                 [path + "|code"]: "238",
-                [path + "|value"]: "other care",
-                [path + "|terminology"]: "local",
+                [path + "|value"]: "Other Care",
+                [path + "|terminology"]: "openehr",
             };
             break;
         case "language":

src/rm/Ordinal/OrdinalWrite.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { Writable } from "svelte/store";
     import type { keyValue, Tree } from "../../types/types";
-    import { onMount } from "svelte";
+    import { onDestroy, onMount } from "svelte";
     import { triggerDestroy } from "../utils";
     // Setup
     export let store: Writable<keyValue>;
@@ -16,7 +16,13 @@
     let selected: number;
     
     // Computed
-    $: internalPath = path.replace("/ordinal_value", "");
+    $: {
+        internalPath = path.replace("/ordinal_value", "");
+        triggerDestroy(
+        ["|ordinal", "|code", "|value"].map((a) => internalPath + a),
+        store
+    );
+    }
     $: selected = $store[internalPath + "|ordinal"];
     $: if (selected) {
         if (tree.inputs && tree.inputs[0].list) {
@@ -35,15 +41,14 @@
     }
 
     //Triggers
-    triggerDestroy(
-        ["|ordinal", "|code", "|value"].map((a) => internalPath + a),
-        store
-    );
     onMount(() => {
         if (defaultOrdinal) {
             $store[internalPath + "|ordinal"] = defaultOrdinal;
         }
     });
+    onDestroy(()=>{
+        console.log("destroying ordinal", path)
+    })
 </script>
 
 <div class={wrapperClass}>

src/rm/utils.ts

@@ -22,6 +22,7 @@ export function destroyAction(paths: string[], store: writableKeyValue){
     store.update((obj) => {
         let newObj = {...obj}
         paths.forEach(path=>{
+            console.log("removing path", {path})
             let { [path]: _, ...excluded } = newObj;
             newObj = excluded
         })

src/views/DataEntry.svelte

@@ -68,6 +68,7 @@
                 template={currentTemplate.template}
                 configuration={currentTemplate.configuration}
                 {store}
+                initialData={{'ctx/language': 'en'}}
                 />
             {:else}
                 {#each allData as data}

src/views/config.ts

@@ -1,7 +1,11 @@
 import * as localForage from "localforage"
 import { writable } from "svelte/store"
 import type { Template } from "../types/types"
+// import * as serialize from 'serialize-javascript'
 
+// console.log(serialize({
+//     'hello': 'world'
+// }))
 export interface TemplateConfig {
     template: Template,
     active: boolean,
@@ -18,17 +22,33 @@ export interface Config {
     demographics?: string
 }
 
+const functionKeys = ['computeFunction', 'displayFunction']
+const serizlizeFn = (name, value)=>{
+    if (functionKeys.includes(name)){
+        return value.toString()
+    } else {
+        return value
+    }
+}
+const parseFn = (name, value)=>{
+    if (functionKeys.includes(name)){
+        return Function('return ' + value)()
+    } else {
+        return value
+    }
+}
+
 export const setConfig = async (config: Config) => {
-    await localForage.setItem("config", config)
+    //Serialize functionKeys 
+    await localForage.setItem("config", JSON.stringify(config, serizlizeFn))
 }
 
 export const getConfig = async () : Promise<Config> => {
-    const config: Config | null = await localForage.getItem("config")
+    const config: string | null = await localForage.getItem("config")
     if (config) {
-        return config
+        return JSON.parse(config, parseFn)
     } else {
         await setConfig(defaultConfig)
         return defaultConfig
     }
-}
-// export const templates = Object.fromEntries(templateList.map(template=>([template.templateId,  template])))
+}