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