LT-253: Creating select2 component

Packages/ohif-core/components/base/mixins/formItem.js

@@ -1,5 +1,6 @@
 import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
+import { Tracker } from "meteor/tracker";
 import { _ } from 'meteor/underscore';
 import { $ } from 'meteor/jquery';
 
@@ -15,6 +16,9 @@ OHIF.mixins.formItem = new OHIF.Mixin({
             const instance = Template.instance();
             const component = instance.component;
 
+            // Create a observer to monitor changed values
+            component.changeObserver = new Tracker.Dependency();
+
             // Register the component in the parent component
             component.registerSelf();
 
@@ -106,6 +110,10 @@ OHIF.mixins.formItem = new OHIF.Mixin({
                 return true;
             };
 
+            component.depend = () => {
+                return component.changeObserver.depend();
+            };
+
         },
 
         onRendered() {
@@ -115,9 +123,6 @@ OHIF.mixins.formItem = new OHIF.Mixin({
             // Set the element to be controlled
             component.$element = instance.$(':input').first();
 
-            // Set the element to be styled
-            component.$style = component.$element;
-
             // Set the most outer wrapper element
             component.$wrapper = instance.wrapper.$('*').first();
         },
@@ -133,12 +138,22 @@ OHIF.mixins.formItem = new OHIF.Mixin({
             const instance = Template.instance();
             const component = instance.component;
 
+            // If no style element was defined, set it as the element itself
+            if (!component.$style.length) {
+                component.$style = component.$element;
+            }
+
             // Set the component in jQuery data after all mixins are rendered
             component.$element.data('component', component);
         },
 
         events: {
 
+            // Enable reactivity by changing a Tracker.Dependency observer
+            change(event, instance) {
+                instance.component.changeObserver.changed();
+            },
+
             // TODO: [design] remove log, show error box/hint over the wrapper
             errorin(event, instance) {
                 console.log('ERROR when validating component', instance.component);

Packages/ohif-core/components/base/mixins/groupRadio.js

@@ -1,6 +1,7 @@
 import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
 import { _ } from 'meteor/underscore';
+import { $ } from 'meteor/jquery';
 
 /*
  * groupRadio: controls all the radio inputs inside the group

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

@@ -1,6 +1,7 @@
 import { OHIF } from 'meteor/ohif:core';
 import { Blaze } from 'meteor/blaze';
 import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
 import { _ } from 'meteor/underscore';
 
 // Helper function to get the component's current schema
@@ -14,7 +15,12 @@ const getCurrentSchema = (parentComponent, key) => {
     }
 
     // Get the current schema data using component's key
-    const currentSchema = schema._schema[key];
+    const currentSchema = _.clone(schema._schema[key]);
+
+    // Merge the sub-schema properties if it's an array
+    if (Array.isArray(currentSchema.type())) {
+        _.extend(currentSchema, schema._schema[key + '.$']);
+    }
 
     // Return the component's schema definitions
     return currentSchema;
@@ -50,7 +56,7 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
             // Fill the items if it's an array schema
             if (!data.items && Array.isArray(currentSchema.allowedValues)) {
                 // Initialize the items array
-                data.items = [];
+                const items = [];
 
                 // Get the values and labels arrays from schema
                 const values = currentSchema.allowedValues;
@@ -59,11 +65,14 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
                 // Iterate the allowed values array
                 for (let i = 0; i < values.length; i++) {
                     // Push the current item to the items array
-                    data.items.push({
+                    items.push({
                         value: values[i],
                         label: labels[i] || values[i]
                     });
                 }
+
+                // Add the items to a reactive instance
+                data.items = new ReactiveVar(items);
             }
         },
 

Packages/ohif-core/components/base/mixins/select2.js

@@ -1,5 +1,6 @@
 import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
+import { $ } from 'meteor/jquery';
 
 /*
  * input: controls a select2 component
@@ -11,8 +12,27 @@ OHIF.mixins.select2 = new OHIF.Mixin({
             const instance = Template.instance();
             const component = instance.component;
 
-            // Set the element to be controlled
-            component.$element = instance.$('select:first');
+            // Apply the select2 to the component
+            component.$element.select2(instance.data.options);
+
+            // Store the select2 instance to allow its further destruction
+            component.select2Instance = component.$element.data('select2');
+        },
+
+        onDestroyed() {
+            const instance = Template.instance();
+            const component = instance.component;
+
+            // Destroy the select2 instance to remove unwanted DOM elements
+            component.select2Instance.destroy();
+        },
+
+        events: {
+            'focus .select2-hidden-accessible'(event, instance) {
+                // Redirect the focus to select2 focus control in case of hidden
+                // accessible being focused (e.g. clicking on outer label)
+                $(event.currentTarget).nextAll('.select2:first').find('.select2-selection').focus();
+            }
         }
     }
 });

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

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