LT-253: Creating select2 component

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

@@ -1,19 +1,23 @@
 <template name="additionalFindings">
     <div class="additionalFindings">
         <div class="scrollArea">
-            {{#form schema=currentSchema}}
+            {{#form schema=instance.currentSchema}}
                 <div class="row">
                     <div class="header">Additional Findings: Baseline</div>
                     {{>groupRadio labelClass='form-group' key='measurableDisease'}}
                 </div>
                 <div class="row">
                     <div class="header">Supplementary Measurements</div>
-                    {{>selectInput (stateDataWithKey "numberOfBoneLesions")}}
-                    {{>select2Input
-                        key="regionsOfMetastaticDisease"
-                        select2Options=regionsOfMetastaticDiseaseSelect2Options
-                        state=state
-                        currentSchema=currentSchema
+                    {{>inputSelect class="bone-lesions" labelClass='form-group' key='numberOfBoneLesions' hideSearch=true}}
+                    {{>inputSelect
+                        class="disease-regions"
+                        labelClass='form-group'
+                        key='regionsOfMetastaticDisease'
+                        multiple=true
+                        options=(clone
+                            placeholder='Search Regions'
+                            allowClear=true
+                        )
                     }}
                     {{>groupRadio labelClass='form-group' key='tracerRelatedToMetastaticDisease'}}
                 </div>

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

@@ -2,79 +2,58 @@ import { Template } from 'meteor/templating';
 import { ReactiveDict } from 'meteor/reactive-dict';
 import { schema as AdditionalFindingsSchema } from 'meteor/lesiontracker/both/schema/additionalFindings';
 
-Template.additionalFindings.onCreated(function additionalFindingsOnCreated() {
-    console.log('additionalFindingsOnCreated');
+Template.additionalFindings.onCreated(() => {
     const instance = Template.instance();
 
     instance.currentSchema = AdditionalFindingsSchema;
-    instance.state = new ReactiveDict();
+});
 
-    if (!instance.data.currentTimepointId) {
+Template.additionalFindings.onRendered(() => {
+    const instance = Template.instance();
+
+    // Get the form component
+    const form = instance.$('form:first').data('component');
+
+    const currentTimepointId = instance.data.currentTimepointId;
+    if (!currentTimepointId) {
         console.warn('Case has no timepointId');
         return;
     }
 
-    const currentTimepointId = instance.data.currentTimepointId;
-    if (!currentTimepointId) {
-        console.warn('No currentTimepointId');
-    }
-
-    console.log(AdditionalFindings.find().fetch());
     const additionalFindings = AdditionalFindings.findOne({
         timepointId: currentTimepointId
     });
 
     if (additionalFindings) {
         instance.id = additionalFindings._id;
-
-        // Don't store the MongoDB Id in the ReactiveDict
-        delete additionalFindings._id;
-
-        instance.state.set(additionalFindings);
+        form.value(additionalFindings);
     } else {
         const defaultData = instance.currentSchema.clean({});
-        instance.state.set(defaultData);
+        form.value(defaultData);
 
         // Include patientId and timepointId
         defaultData.patientId = Session.get('patientId');
         defaultData.timepointId = currentTimepointId;
 
-        // TODO: Turn this into a Meteor Call to insert it on the server
+        // TODO: [design] Turn this into a Meteor Call to insert it on the server
         instance.id = AdditionalFindings.insert(defaultData);
     }
-});
 
-Template.additionalFindings.onRendered(function additionalFindingsOnRendered() {
-    const instance = Template.instance();
+    instance.autorun(computation => {
+        // Run this computation everytime the form data is changed
+        form.depend();
 
-    instance.autorun(() => {
-        console.log('Updating AdditionalFindings Collection');
-        console.log(instance.state.all());
+        // Stop here if it's the computation's first run
+        if (computation.firstRun) {
+            return;
+        }
 
-        // TODO: Turn this into a Meteor Call to update it on the server
-        let update = instance.state.all();
+        // Get the form data for AdditionalFindings
+        let formData = form.value();
+
+        // TODO: [design] Turn this into a Meteor Call to update it on the server
         AdditionalFindings.update(instance.id, {
-            $set: update
+            $set: formData
         });
     });
 });
-
-Template.additionalFindings.helpers({
-    // We need these helper methods
-    // since we assign them into instance object instead of instance.data
-    currentSchema() {
-        return Template.instance().currentSchema;
-    },
-
-    state() {
-        return Template.instance().state;
-    },
-
-    regionsOfMetastaticDiseaseSelect2Options() {
-        return {
-            placeholder: 'Search Regions',
-            allowClear: true,
-            multiple: true
-        };
-    }
-});

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

@@ -32,8 +32,9 @@
       background-color: $uiGray
 
     .form-group
-      padding: 7px 11px
       color: $textPrimaryColor
+      padding: 7px 11px
+      width: 100%
 
       &:not(:last-child)
         border-bottom: $uiBorderThickness solid $uiBorderColorDark
@@ -44,19 +45,13 @@
         line-height: 15px
         margin: 10px 0 8px
 
-      // TODO: remove
-      h5
-        font-weight: bold
-        margin-bottom: 8px
-
       .control-label
         font-size: 14px
         font-weight: 100
         display: inline-block
         padding: 5px
 
-      // TODO: remove radio-group
-      .radio-group, .group-radio
+      .group-radio
         height: 30px
 
         label
@@ -68,13 +63,11 @@
           line-height: 30px
           width: 50%
 
-      #regionsOfMetastaticDisease
-        width: 285px
-        height: 30px
-        border-radius: 2px
-        background-color: #b6b6b6
-        color: #3e3e3e
-        font-size: 14px
+      .disease-regions + .select2
+        width: 100% !important
+
+      .bone-lesions + .select2
+        width: auto !important
 
     .buttonSection
       cursor: pointer