LT-253: Creating dynamic form components

Packages/lesiontracker/client/components/additionalFindings/additionalFindings.html

@@ -7,6 +7,13 @@
                 </div>
                 {{>radioOptionGroup (stateDataWithKey "measurableDisease")}}
             </div>
+
+            <!-- <h4>Testing dynamic components</h4>
+            {{#form id="testForm" schema=currentSchema}}
+                {{>inputText key='test' label='testing'}}
+                {{>groupRadio mixins='schemaData' key='acceptableImageQuality'}}
+            {{/form}} -->
+
             <div class="row">
                 <div class="header">
                     Supplementary Measurements

Packages/lesiontracker/client/components/additionalFindings/additionalFindings.js

@@ -1,14 +1,12 @@
 import { Template } from 'meteor/templating';
 import { ReactiveDict } from 'meteor/reactive-dict';
-
-// TODO: Check why I can't use absolute paths for this? Keeps saying module not found
-import { AdditionalFinding } from '../../../both/schema/additionalFinding';
+import { schema as AdditionalFindingsSchema } from 'meteor/lesiontracker/both/schema/additionalFindings';
 
 Template.additionalFindings.onCreated(function additionalFindingsOnCreated() {
     console.log('additionalFindingsOnCreated');
     const instance = Template.instance();
 
-    instance.currentSchema = AdditionalFinding;
+    instance.currentSchema = AdditionalFindingsSchema;
     instance.state = new ReactiveDict();
 
     if (!instance.data.currentTimepointId) {

Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl

@@ -25,21 +25,22 @@
     .header
       height: 33px
       line-height: 33px
-      font-weight: 400
+      font-weight: bold
       font-size: 14px
-      padding: 0 10px
+      padding: 1px 13px 0
       color: $textPrimaryColor
-      background-color: $uiGrayDark
+      background-color: $uiGray
 
     .form-group
-      padding: 10px
+      padding: 7px 11px
       color: $textPrimaryColor
 
       &:not(:last-child)
         border-bottom: $uiBorderThickness solid $uiBorderColorDark
 
       h5
-        font-weight: 300
+        font-weight: bold
+        margin-bottom: 8px
 
       .control-label
         font-size: 14px

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js

@@ -1,3 +1,5 @@
+import { OHIF } from 'meteor/ohif:core';
+
 Template.toolbarSection.helpers({
     // Returns true if the view shall be split in two viewports
     splitView() {

Packages/lesiontracker/client/components/toolbarSectionButton/toolbarSectionButton.js

@@ -1,3 +1,5 @@
+import { OHIF } from 'meteor/ohif:core';
+
 Template.toolbarSectionButton.helpers({
     activeClass() {
         const instance = Template.instance();

Packages/lesiontracker/client/components/viewer/viewer.js

@@ -1,5 +1,8 @@
+import { OHIF } from 'meteor/ohif:core';
 import { TimepointApi } from 'meteor/lesiontracker/lib/api/timepoint';
 
+OHIF.viewer = OHIF.viewer || {};
+
 Session.setDefault('activeViewport', false);
 Session.setDefault('leftSidebar', null);
 Session.setDefault('rightSidebar', null);
@@ -22,10 +25,6 @@ Template.viewer.onCreated(() => {
 
     var contentId = instance.data.contentId;
 
-    OHIF = OHIF || window.OHIF || {
-            viewer: {}
-        };
-
     OHIF.viewer.loadIndicatorDelay = 3000;
     OHIF.viewer.defaultTool = 'wwwc';
     OHIF.viewer.refLinesEnabled = true;