feat: added suggestions

medblocks · Jul 13, 2022 · 62fd3cd · 62fd3cd
1 parent 3aa9528
commit 62fd3cd
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 6 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -25,7 +25,7 @@
   </head>
 
   <body>
-    <mb-form id="form">
+    <mb-form id="form" style="display: flex; gap:15px; flex-direction: column">
       <mb-checkbox-any
         id="checkbox"
         path="aarthy.refraction.v0/refraction_assessment/any_event:0/dilatation:0"
@@ -35,9 +35,10 @@
       </mb-checkbox-any>
       <mb-input label="Input"></mb-input>
       <mb-duration day label="Duration"></mb-duration>
-      <mb-quantity label="Quantity" default="[diop]">
-        <mb-unit unit="[diop]" label="[diop]" />
-      </mb-quantity>
+      <mb-suggest>
+        <mb-input-multiple label="Text" default="[diop]" path="quantity/path">
+        </mb-input-multiple>
+      </mb-suggest>
       <div>
         <mb-submit type="primary">
           <sl-button>Save</sl-button>

diff --git a/medblocks.ts b/medblocks.ts
@@ -28,4 +28,4 @@ import './src/medblocks/duration/duration';
 import './src/medblocks/proportion/proportion';
 import './src/medblocks/count/count';
 import './src/medblocks/multimedia/multimedia';
-
+import './src/medblocks/SuggestWrapper'
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/medblocks/SuggestWrapper.ts b/src/medblocks/SuggestWrapper.ts
@@ -0,0 +1,58 @@
+import { css, customElement, html, LitElement, property } from 'lit-element';
+import '@shoelace-style/shoelace/dist/components/tag/tag';
+import { event, EventEmitter } from '../internal/decorators';
+
+export interface Suggestion {
+  id: string | number;
+  data: any;
+  label: string;
+  op: 'replace' | 'add' | 'remove';
+}
+
+@customElement('mb-suggest')
+export default class SuggestWrapper extends LitElement {
+  /** @ignore */
+  static styles = css`
+    .suggestions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--sl-spacing-xx-small);
+      margin-top: var(--sl-spacing-x-small);
+    }
+
+    sl-tag {
+      cursor: pointer;
+    }
+  `;
+  @event('mb-suggestion') _suggestionEvent: EventEmitter<{
+    suggestion: Suggestion;
+    path: string;
+  }>;
+
+  _handleSuggestion(suggestion: Suggestion) {
+    console.log({ suggestion });
+    this._suggestionEvent.emit({ detail: { suggestion, path: this.path } });
+    this.suggestions = this.suggestions.filter(s => s.id !== suggestion.id);
+  }
+
+  @property({ type: String }) path: string;
+
+  @property({ type: Array }) suggestions: Suggestion[] = [];
+
+  render() {
+    return html`<slot></slot>
+      <div class="suggestions">
+        ${this.suggestions.map(
+          suggestion => html`
+            <sl-button
+              @click=${() => this._handleSuggestion(suggestion)}
+              size="small"
+              pill
+              removable
+              >${suggestion.label}</sl-button
+            >
+          `
+        )}
+      </div> `;
+  }
+}
diff --git a/src/medblocks/form/form.ts b/src/medblocks/form/form.ts
@@ -15,6 +15,7 @@ import { AxiosInstance } from 'axios';
 import { unflattenComposition, openEHRFlatPlugin } from './plugins/openEHRFlat';
 import { MbPlugin } from './plugins/plugins';
 import MbSubmit from '../submit/submit';
+import SuggestWrapper, { Suggestion } from '../SuggestWrapper';
 
 /**
  * Reactive form that responds to changes in custom elements nested inside.
@@ -203,8 +204,13 @@ export default class MedblockForm extends LitElement {
     }
   }
 
+  @property({ type: Boolean }) iframeCds: boolean = true;
+
   handleInput(e: CustomEvent) {
     e.stopPropagation();
+    if (window.top && this.iframeCds) {
+      window.top.postMessage({ type: 'mb-input', data: this.data }, '*');
+    }
     this.input.emit();
   }
 
@@ -239,6 +245,45 @@ export default class MedblockForm extends LitElement {
     e.detail.value = dependencies[e.detail.key];
   }
 
+  addSuggestion(data: any) {
+    const suggestElements = Object.keys(data)
+      .map(key => {
+        return {
+          key,
+          suggest: this.mbElements[key]?.parentElement as SuggestWrapper,
+        };
+      })
+      .filter(({ suggest }) => suggest?.nodeName === 'MB-SUGGEST');
+    suggestElements.forEach(({ key, suggest }) => {
+      const suggestions = data[key];
+      suggest.suggestions = suggestions;
+      suggest.path = key;
+    });
+  }
+
+  handleSuggestion(e: CustomEvent<{ suggestion: Suggestion; path: string }>) {
+    const { suggestion, path } = e.detail;
+    console.log('Handling suggestion', path, suggestion);
+    const element = this.mbElements[path];
+    const oldData = element.data;
+    console.log({ oldData, element });
+    if (suggestion.op === 'replace') {
+      element.data = suggestion.data;
+    } else if (suggestion.op === 'add') {
+      if (Array.isArray(element.data)) {
+        element.data = [...oldData, suggestion.data];
+      } else if (element.data == null) {
+        element.data = [suggestion.data];
+      } else {
+        // replace if it's not array
+        element.data = suggestion.data;
+      }
+    } else {
+      // default to replace
+      element.data = suggestion.data;
+    }
+  }
+
   @state() observer: MutationObserver;
 
   async connectedCallback() {
@@ -289,6 +334,7 @@ export default class MedblockForm extends LitElement {
     this.addEventListener('mb-connect', this.handleChildConnect);
     this.addEventListener('mb-dependency', this.handleDependency);
     this.addEventListener('mb-path-change', this.handleChildPathChange);
+    this.addEventListener('mb-suggestion', this.handleSuggestion);
     this.load.emit();
   }
 
@@ -297,6 +343,7 @@ export default class MedblockForm extends LitElement {
     this.removeEventListener('mb-connect', this.handleChildConnect);
     this.removeEventListener('mb-dependency', this.handleDependency);
     this.removeEventListener('mb-path-change', this.handleChildPathChange);
+    this.removeEventListener('mb-suggestion', this.handleSuggestion);
     this.observer.disconnect();
   }