From 62fd3cd3b794fffb0d09df2290f39a38a37b63e6 Mon Sep 17 00:00:00 2001 From: Sidharth Ramesh Date: Wed, 13 Jul 2022 11:12:34 +0530 Subject: [PATCH] feat: added suggestions --- demo/index.html | 9 ++--- medblocks.ts | 2 +- package-lock.json | 2 +- src/medblocks/SuggestWrapper.ts | 58 +++++++++++++++++++++++++++++++++ src/medblocks/form/form.ts | 47 ++++++++++++++++++++++++++ 5 files changed, 112 insertions(+), 6 deletions(-) create mode 100644 src/medblocks/SuggestWrapper.ts diff --git a/demo/index.html b/demo/index.html index 79e8b14..30b19ba 100644 --- a/demo/index.html +++ b/demo/index.html @@ -25,7 +25,7 @@ - + - - - + + + +
Save diff --git a/medblocks.ts b/medblocks.ts index 7355f62..9c2fe09 100644 --- 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' \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 0f7e1be..c44eba4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "medblocks-ui", - "version": "0.0.101", + "version": "0.0.112", "license": "Apache-2.0", "dependencies": { "@shoelace-style/shoelace": "2.0.0-beta.50", diff --git a/src/medblocks/SuggestWrapper.ts b/src/medblocks/SuggestWrapper.ts new file mode 100644 index 0000000..17a86d5 --- /dev/null +++ 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` +
+ ${this.suggestions.map( + suggestion => html` + this._handleSuggestion(suggestion)} + size="small" + pill + removable + >${suggestion.label} + ` + )} +
`; + } +} \ No newline at end of file diff --git a/src/medblocks/form/form.ts b/src/medblocks/form/form.ts index b81cc06..f757865 100644 --- 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(); }