AWV-3: Transforming the CINE inputs in form components

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

@@ -3,6 +3,10 @@ import './component.js';
 import './mixin.js';
 import './template.js';
 
+// Section
+import './section/section.html';
+import './section/section.js';
+
 // Mixins
 import './mixins/component.js';
 import './mixins/form.js';

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

@@ -2,15 +2,9 @@ import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
 
 /*
- * component: create the base structure to aplly specific component mixins
+ * component: base component structure
  */
 OHIF.mixins.component = new OHIF.Mixin({
     composition: {
-        onCreated() {
-            const instance = Template.instance();
-
-            // Declare a property that will be shared among all dependent mixins
-            instance.component = new OHIF.Component(this);
-        }
     }
 });

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

@@ -77,6 +77,16 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
                 data.label = new ReactiveVar(currentSchema.label);
             }
 
+            // Set the min value
+            if (_.isUndefined(data.min) && currentSchema.min) {
+                data.min = currentSchema.min;
+            }
+
+            // Set the max value
+            if (_.isUndefined(data.max) && currentSchema.max) {
+                data.max = currentSchema.max;
+            }
+
             // Set the emptyOption data attribute if given on schema
             if (currentSchema.emptyOption) {
                 data.emptyOption = currentSchema.emptyOption;

Packages/ohif-core/client/components/base/section/section.html

@@ -0,0 +1,3 @@
+<template name="section">
+    {{>instance.renderFunction.get instance.sectionData.get}}
+</template>

Packages/ohif-core/client/components/base/section/section.js

@@ -0,0 +1,62 @@
+import { OHIF } from 'meteor/ohif:core';
+
+Template.section.onCreated(() => {
+    const instance = Template.instance();
+
+    // Create the render function and section data as reactive objects
+    instance.renderFunction = new ReactiveVar(null);
+    instance.sectionData = new ReactiveVar(null);
+
+    // Get the section name
+    const sectionName = instance.data;
+
+    // Stop here if no section name was defined
+    if (!sectionName) {
+        return;
+    }
+
+    // Get the content block
+    const templateContentBlock = instance.view.templateContentBlock;
+
+    // Check if it is defining or printing the section content
+    if (templateContentBlock) {
+        // Get the parent component of this section
+        const component = OHIF.blaze.getParentComponent(instance.view, '_wrapperComponent');
+
+        // Stop here if this section is not inside a component
+        if (!component) {
+            return;
+        }
+
+        // Define the content
+        component.templateInstance.sections[sectionName] = {
+            data: component.templateInstance.data,
+            renderFunction: templateContentBlock.renderFunction
+        };
+    } else {
+        // Wait for re-rendering and print the section content
+        Tracker.afterFlush(() => {
+            // Get the parent component of this section
+            const component = OHIF.blaze.getParentComponent(instance.view, '_wrapperComponent');
+
+            // Stop here if this section is not inside a component
+            if (!component) {
+                return;
+            }
+
+            // Get the defined section content
+            const section = component.templateInstance.sections[sectionName];
+
+            // Stop here if the section content is not defined yet
+            if (!section) {
+                return;
+            }
+
+            // Set the section data on its respective reactive object
+            instance.sectionData.set(section.data);
+
+            // Set the render function on its respective reactive object
+            instance.renderFunction.set(new Template(section.renderFunction));
+        });
+    }
+});

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

@@ -50,23 +50,27 @@ Template.baseComponent.constructView = function(contentFunc, elseFunc) {
     let contentFunction = () => {
         // Create the most inner content function
         const innerContentFunction = () => {
-            // Assign properties to all wrappers after template's creation
-            template.onCreated(() => {
-                const instance = Template.instance();
-
-                // Assign the template most outer wrapper
-                instance.wrapper = wrapperInstances[0] || instance;
-
-                // Iterate over all wrappers and assign the component to them
-                wrapperInstances.forEach(wrappeInstance => {
-                    wrappeInstance.component = instance.component;
-                });
-            });
-
             // Return the view instance
             return template.constructView(contentFunc, elseFunc);
         };
 
+        // Assign properties to all wrappers after template's creation
+        template.onCreated(() => {
+            const instance = Template.instance();
+
+            // create the base structure to aplly specific component mixins
+            instance.component = new OHIF.Component(instance);
+
+            // Assign the template most outer wrapper
+            instance.wrapper = wrapperInstances[0] || instance;
+
+            // Iterate over all wrappers and assign the component to them
+            wrapperInstances.forEach(wrapperInstance => {
+                wrapperInstance.view._wrapperComponent = instance.component;
+                wrapperInstance.component = instance.component;
+            });
+        });
+
         // Apply the mixins to the component
         OHIF.Mixin.initAll(template, data);
 

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

@@ -6,6 +6,10 @@
         name="{{this.name}}"
         value="{{reactive this.value}}"
         placeholder="{{this.placeholder}}"
+        checked="{{#if this.checked}}checked{{/if}}"
+        min="{{this.min}}"
+        max="{{this.max}}"
+        maxlength="{{choose this.maxlength this.max}}"
         {{this.tagAttributes}}
     >
     {{>UI.contentBlock}}

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

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

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

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

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

@@ -5,6 +5,7 @@ import './input/checkbox.html';
 import './input/hidden.html';
 import './input/groupRadio.html';
 import './input/radio.html';
+import './input/range.html';
 import './input/select.html';
 import './input/text.html';
 import './input/selectTree.html';

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

@@ -0,0 +1,13 @@
+<template name="inputRange">
+    {{#baseComponent (extend this
+        base='baseInput'
+        type='range'
+        mixins=(concat 'input ' this.mixins)
+        wrappers=(concat ''
+            (valueIf reactive this.label 'wrapperLabel ' '')
+            this.wrappers
+        )
+    )}}
+        {{>UI.contentBlock}}
+    {{/baseComponent}}
+</template>