Add Aidbox Forms renderer

Author: olimsaidov

components/Questionnaire/EditorAidboxFormsSection.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <template v-if="questionnaire">
+      <aidbox-form-renderer
+        style="width: 100%; height: calc(100vh - 200px); border: 1px solid #efefef; border-radius: 4px; display: block"
+        :questionnaire="JSON.stringify(questionnaire)"
+        :questionnaire-response="JSON.stringify(questionnaireResponse)"
+        @change="handleChange"
+      />
+    </template>
+    <template v-else>
+      <p>No questionnaire provided</p>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, {PropType} from "vue";
+import {Questionnaire, QuestionnaireResponse} from "fhir/r4";
+
+
+function loadScript(src) {
+  return new Promise((resolve, reject) => {
+    const tag = document.createElement('script');
+    tag.setAttribute('src', src);
+    tag.setAttribute('async', false);
+    tag.setAttribute('defer', true);
+    tag.addEventListener('error', reject);
+    tag.addEventListener('load', resolve);
+    document.body.appendChild(tag);
+  });
+}
+
+let loaded = null;
+
+export default Vue.extend({
+  mounted() {
+    if (!loaded) {
+      loaded = loadScript('https://form-builder.aidbox.app/static/aidbox-forms-renderer-webcomponent.js');
+    }
+  },
+  methods: {
+    handleChange(event) {
+      const response = event.detail;
+      if (response.status !== 'in-progress') {
+        this.$emit("response", response);
+      }
+    }
+  },
+  props: {
+    questionnaire: Object as PropType<Questionnaire>,
+    questionnaireResponse: Object as PropType<QuestionnaireResponse>,
+  },
+});
+</script>

nuxt.config.js

@@ -3,6 +3,12 @@ export default {
   target: 'static',
   ssr: false,
 
+  vue: {
+    config: {
+      ignoredElements: ['aidbox-form-renderer']
+    }
+  },
+
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
     title: 'fhirpath-lab',

pages/Questionnaire/tester.vue

@@ -118,6 +118,15 @@
               @highlight-path="highlightPath" />
           </template>
 
+          <template v-slot:Aidbox_Forms>
+            <EditorAidboxFormsSection
+              v-if="raw"
+              v-bind:questionnaire="raw"
+              v-bind:questionnaireResponse="questionnaireResponse"
+              @response="processUpdatedQuestionnaireResponse"
+            />
+          </template>
+
           <template v-slot:CSIRO_Renderer>
             <EditorRendererSection ref="csiroFormsRenderer" v-if="raw" v-bind:questionnaire="raw" :context="contextData"
               :dataServer="dataServerBaseUrl"
@@ -580,6 +589,13 @@ export default Vue.extend({
           show: true,
           enabled: true,
         },
+        {
+          iconName: "mdi-bug-play-outline",
+          tabName: "Aidbox Forms",
+          title: "Aidbox Forms",
+          show: true,
+          enabled: true,
+        },
         {
           iconName: "mdi-clipboard-text-outline",
           tabName: "Response",