LT-67: Migrating the main form and its inputs to components

Packages/ohif-core/client/components/base/mixins/form.js

@@ -1,5 +1,6 @@
 import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
 
 /*
  * form: controls a form and its registered inputs
@@ -11,9 +12,19 @@ OHIF.mixins.form = new OHIF.Mixin({
             const instance = Template.instance();
             const component = instance.component;
 
-            // Define the form's data schema
-            const schema = instance.data.schema;
-            component.schema = schema && schema.newContext();
+            // Run this computation every time the schema property is changed
+            instance.autorun(() => {
+                let schema;
+
+                // Check if the schema is reactive
+                if (instance.data.schema instanceof ReactiveVar) {
+                    // Register a dependency on schema property
+                    schema = instance.data.schema.get();
+                }
+
+                // Set the form's data schema
+                component.schema = schema && schema.newContext();
+            });
 
             // Check if the form data is valid in its schema
             component.validate = () => {

Packages/ohif-core/client/components/base/mixins/schemaData.js

@@ -17,6 +17,11 @@ const getCurrentSchema = (parentComponent, key) => {
     // Get the current schema data using component's key
     const currentSchema = _.clone(schema._schema[key]);
 
+    // Stop here if no schema was found for the given key
+    if (!currentSchema) {
+        return;
+    }
+
     // Merge the sub-schema properties if it's an array
     if (Array.isArray(currentSchema.type())) {
         _.extend(currentSchema, schema._schema[key + '.$']);
@@ -53,6 +58,11 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
                 data.label = new ReactiveVar(currentSchema.label);
             }
 
+            // Set the emptyOption data attribute if given on schema
+            if (currentSchema.emptyOption) {
+                data.emptyOption = currentSchema.emptyOption;
+            }
+
             // Fill the items if it's an array schema
             if (!data.items && Array.isArray(currentSchema.allowedValues)) {
                 // Initialize the items array

Packages/ohif-core/client/components/base/mixins/select.js

@@ -7,6 +7,43 @@ import { Template } from 'meteor/templating';
 OHIF.mixins.select = new OHIF.Mixin({
     dependencies: 'formItem',
     composition: {
+
+        onCreated() {
+            const instance = Template.instance();
+
+            // Check if this select will include an empty option
+            if (instance.data.emptyOption) {
+                // Get the option items
+                let items = instance.data.items;
+
+                // Check if the items are reactive and get them if true
+                const isReactive = items instanceof ReactiveVar;
+                if (isReactive) {
+                    items = items.get();
+                }
+
+                // Check if there is already an empty option on items list
+                const query = {
+                    value: ''
+                };
+                if (!_.findWhere(items, query)) {
+                    // Clone the current items
+                    const newItems = _.clone(items);
+                    newItems.unshift({
+                        label: 'Select',
+                        value: ''
+                    });
+
+                    // Set the new items list including the empty option
+                    if (isReactive) {
+                        instance.data.items.set(newItems);
+                    } else {
+                        instance.data.items = newItems;
+                    }
+                }
+            }
+        },
+
         onRendered() {
             const instance = Template.instance();
             const component = instance.component;
@@ -14,5 +51,6 @@ OHIF.mixins.select = new OHIF.Mixin({
             // Set the element to be controlled
             component.$element = instance.$('select:first');
         }
+
     }
 });

Packages/ohif-core/client/components/base/templates/input.html

@@ -6,6 +6,7 @@
         name="{{this.name}}"
         value="{{reactive this.value}}"
         placeholder="{{this.placeholder}}"
+        data-key="{{this.key}}"
         {{this.tagAttributes}}
     >
     {{>UI.contentBlock}}

Packages/ohif-core/client/components/base/templates/select.html

@@ -4,6 +4,7 @@
         class="{{this.class}}"
         name="{{this.name}}"
         multiple="{{#if this.multiple}}multiple{{/if}}"
+        data-key="{{this.key}}"
         {{this.tagAttributes}}
     >
         {{>UI.contentBlock}}

Packages/ohif-core/client/components/bootstrap/index.js

@@ -1,6 +1,7 @@
 import './form/form.html';
 import './form/group.html';
 
+import './input/hidden.html';
 import './input/groupRadio.html';
 import './input/radio.html';
 import './input/select.html';

Packages/ohif-core/client/components/bootstrap/input/hidden.html

@@ -0,0 +1,7 @@
+<template name="inputHidden">
+    {{>baseComponent (extend this
+        base='baseInput'
+        type='hidden'
+        mixins=(concat 'input ' this.mixins)
+    )}}
+</template>