LT-253: Creating radio group component

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

@@ -44,7 +44,7 @@ OHIF.mixins.form = new OHIF.Mixin({
             const component = instance.component;
 
             // Set the component main and style elements
-            component.$style = component.$element = instance.$('form').first();
+            component.$style = component.$element = instance.$('form:first');
         }
     }
 });

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

@@ -8,7 +8,7 @@ import { $ } from 'meteor/jquery';
  * It may be used to manage all components that belong to forms
  */
 OHIF.mixins.formItem = new OHIF.Mixin({
-    dependencies: 'component',
+    dependencies: 'schemaData',
     composition: {
 
         onCreated() {
@@ -113,7 +113,7 @@ OHIF.mixins.formItem = new OHIF.Mixin({
             const component = instance.component;
 
             // Set the element to be controlled
-            component.$element = instance.$(':input:first');
+            component.$element = instance.$(':input').first();
 
             // Set the element to be styled
             component.$style = component.$element;

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

@@ -45,6 +45,14 @@ OHIF.mixins.group = new OHIF.Mixin({
                 component.registeredItems.forEach(child => child.readonly(isReadonly));
             };
 
+        },
+
+        onRendered() {
+            const instance = Template.instance();
+            const component = instance.component;
+
+            // Set the element to be controlled
+            component.$element = instance.$('.component-group:first');
         }
     }
 });

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

@@ -16,8 +16,9 @@ OHIF.mixins.groupRadio = new OHIF.Mixin({
             // Get the selected radio's value or select a radio based on value
             component.value = value => {
                 const isGet = _.isUndefined(value);
-                const $elements = $();
-                component.registeredItems.forEach(child => $elements.add(child.$element));
+                const elements = [];
+                component.registeredItems.forEach(child => elements.push(child.$element[0]));
+                const $elements = $(elements);
                 if (isGet) {
                     return $elements.filter(':checked').val();
                 }

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

@@ -3,31 +3,39 @@ import { Blaze } from 'meteor/blaze';
 import { Template } from 'meteor/templating';
 import { _ } from 'meteor/underscore';
 
+// Helper function to get the component's current schema
+const getCurrentSchema = (parentComponent, key) => {
+    // Get the parent component schema
+    const schema = parentComponent && parentComponent.schema;
+
+    // Stop here if there's no key or schema defined
+    if (!key || !schema) {
+        return;
+    }
+
+    // Get the current schema data using component's key
+    const currentSchema = schema._schema[key];
+
+    // Return the component's schema definitions
+    return currentSchema;
+};
+
 /*
  * schemaData: change the component data based on its form's schema data
  */
 OHIF.mixins.schemaData = new OHIF.Mixin({
-    dependencies: 'formItem',
+    dependencies: 'component',
     composition: {
 
         onData() {
+            // Get the current template data
             const data = Template.currentData();
 
+            // Get the parent component
             const parent = OHIF.blaze.getParentComponent(Blaze.currentView);
 
-            // Get the parent component schema
-            const schema = parent && parent.schema;
-
-            // Get the current component's key
-            const key = data.key;
-
-            // Stop here if there's no key or schema defined
-            if (!key || !schema) {
-                return;
-            }
-
             // Get the current schema data using component's key
-            const currentSchema = schema._schema[key];
+            const currentSchema = getCurrentSchema(parent, data.key);
 
             // Stop here if there's no schema data for current key
             if (!currentSchema) {
@@ -39,7 +47,42 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
                 data.label = new ReactiveVar(currentSchema.label);
             }
 
-            // TODO: [design] convert allowedValues to items and find a way to get key/value pairs
+            // Fill the items if it's an array schema
+            if (!data.items && Array.isArray(currentSchema.allowedValues)) {
+                // Initialize the items array
+                data.items = [];
+
+                // Get the values and labels arrays from schema
+                const values = currentSchema.allowedValues;
+                const labels = currentSchema.valuesLabels || [];
+
+                // Iterate the allowed values array
+                for (let i = 0; i < values.length; i++) {
+                    // Push the current item to the items array
+                    data.items.push({
+                        value: values[i],
+                        label: labels[i] || values[i]
+                    });
+                }
+            }
+        },
+
+        onMixins() {
+            const instance = Template.instance();
+            const component = instance.component;
+
+            // Get the current schema data using component's key
+            const currentSchema = getCurrentSchema(component.parent, instance.data.key);
+
+            // Stop here if there's no schema data for current key
+            if (!currentSchema) {
+                return;
+            }
+
+            // Fill the component with its default value after rendering
+            if (currentSchema.defaultValue) {
+                component.value(currentSchema.defaultValue);
+            }
         }
 
     }

Packages/ohif-core/components/base/template.js

@@ -77,7 +77,7 @@ Template.baseComponent.constructView = function(contentFunc, elseFunc) {
 
         // Throw an error if the wrapper template does not exists
         if (!wrapperTemplate) {
-            throw new Error(`Template ${data.base} not found.`);
+            throw new Error(`Template ${wrapper} not found.`);
         }
 
         // Clone the wrapper template to avoid assigning duplicated handlers

Packages/ohif-core/components/base/wrappers/label.html

@@ -3,7 +3,7 @@
         {{#if this.labelAfter}}
             {{>UI.contentBlock}}
         {{/if}}
-        <span class="wrapperLabelText">{{reactive this.label}}</span>
+        <span class="wrapperText">{{reactive this.label}}</span>
         {{#unless this.labelAfter}}
             {{>UI.contentBlock}}
         {{/unless}}

Packages/ohif-core/components/base/wrappers/title.html

@@ -3,7 +3,7 @@
         {{#if this.labelAfter}}
             {{>UI.contentBlock}}
         {{/if}}
-        <span class="wrapperTitleText">{{reactive this.label}}</span>
+        <span class="wrapperText">{{reactive this.label}}</span>
         {{#unless this.labelAfter}}
             {{>UI.contentBlock}}
         {{/unless}}