LT-253: Creating radio group component

2016-07-14 11:25:39 -03:00 · 2016-07-14 11:25:39 -03:00 · 9d31b49997
commit 9d31b49997
parent cb875b1913
19 changed files with 180 additions and 88 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,6 +2,7 @@
 docs/
 .meteor/local
 .meteor/meteorite
+.meteor/dev_bundle
 node_modules
 Packages/active-entry/helloworld/
-LesionTracker/tests/nightwatch/reports/
+LesionTracker/tests/nightwatch/reports/
--- a/Packages/design/package.js
+++ b/Packages/design/package.js
@ -29,6 +29,11 @@ Package.onUse(function(api) {
        'styles/common/spacings.styl'
    ], 'client');

+    // Component styles
+    api.addFiles([
+        'styles/components/radio.styl'
+    ], 'client');
+
    // Rounded Button Group
    api.addFiles([
        'components/roundedButtonGroup/roundedButtonGroup.html',
--- a/Packages/design/styles/components/radio.styl
+++ b/Packages/design/styles/components/radio.styl
@ -0,0 +1,36 @@
+@import "{design}/app"
+
+.group-radio
+  label
+    cursor: pointer
+    input
+      height: 0
+      width: 0
+    span
+      padding-left: 23px
+      position: relative
+      &:before
+        background: white
+        border-radius: 8px
+        content: ''
+        display: block
+        height: 16px
+        left: 0
+        position: absolute
+        top: 50%
+        transform(translateY(-50%))
+        width: 16px
+    input:focus + span:before
+      // TODO: [design] define a outline for the design
+      outline: none
+      box-shadow: 0 0 2px 2px $textSecondaryColor
+    input:checked + span:after
+      background: $uiBorderColorDark
+      border-radius: 5px
+      content: ''
+      height: 10px
+      left: 3px
+      position: absolute
+      top: 50%
+      transform(translateY(-50%))
+      width: 10px
--- a/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.html
+++ b/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.html
@ -1,70 +1,51 @@
 <template name="additionalFindings">
    <div class="additionalFindings">
        <div class="scrollArea">
-            <div class="row">
-                <div class="header">
-                    Additional Findings: Baseline
+            {{#form schema=currentSchema}}
+                <div class="row">
+                    <div class="header">Additional Findings: Baseline</div>
+                    {{>groupRadio labelClass='form-group' key='measurableDisease'}}
                </div>
-                {{>radioOptionGroup (stateDataWithKey "measurableDisease")}}
-            </div>
-
-            <!-- <h4>Testing dynamic components</h4>
-            {{#form id="testForm" schema=currentSchema}}
-                {{>inputText key='test' label='testing'}}
-                {{>groupRadio mixins='schemaData' key='acceptableImageQuality'}}
-            {{/form}} -->
-
-            <div class="row">
-                <div class="header">
-                    Supplementary Measurements
+                <div class="row">
+                    <div class="header">Supplementary Measurements</div>
+                    {{>selectInput (stateDataWithKey "numberOfBoneLesions")}}
+                    {{>select2Input
+                        key="regionsOfMetastaticDisease"
+                        select2Options=regionsOfMetastaticDiseaseSelect2Options
+                        state=state
+                        currentSchema=currentSchema
+                    }}
+                    {{>groupRadio labelClass='form-group' key='tracerRelatedToMetastaticDisease'}}
                </div>
-                {{>selectInput (stateDataWithKey "numberOfBoneLesions")}}
-                {{>select2Input
-                    key="regionsOfMetastaticDisease"
-                    select2Options=regionsOfMetastaticDiseaseSelect2Options
-                    state=state
-                    currentSchema=currentSchema
-                }}
-                {{>radioOptionGroup (stateDataWithKey "tracerRelatedToMetastaticDisease")}}
-            </div>
-            <div class="row">
-                <div class="header">
-                    Image Quality
+                <div class="row">
+                    <div class="header">Image Quality</div>
+                    {{>groupRadio labelClass='form-group' key='acceptableImageQuality'}}
+                    {{>groupRadio labelClass='form-group' key='adequateAnatomicalCoverage'}}
+                    {{>groupRadio labelClass='form-group' key='presenceOfContrast'}}
                </div>
-                {{>radioOptionGroup (stateDataWithKey "acceptableImageQuality")}}
-                {{>radioOptionGroup (stateDataWithKey "adequateAnatomicalCoverage")}}
-                {{>radioOptionGroup (stateDataWithKey "presenceOfContrast")}}
-            </div>
-            <div class="row">
-                <div class="header">
-                    Additional Screen Captures
-                </div>
-                <div class="entrySection buttonSection">
-                    <div class="svgContainer">
-                        <svg>
-                            <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-create-screen-capture"></use>
-                        </svg>
-                    </div>
-                    <div class="buttonLabel noselect">
-                        Add new screen capture
+                <div class="row">
+                    <div class="header">Additional Screen Captures</div>
+                    <div class="entrySection buttonSection">
+                        <div class="svgContainer">
+                            <svg>
+                                <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-create-screen-capture"></use>
+                            </svg>
+                        </div>
+                        <div class="buttonLabel noselect">Add new screen capture</div>
                    </div>
                </div>
-            </div>
-            <div class="row">
-                <div class="header">
-                    Comments
-                </div>
-                <div class="entrySection buttonSection">
-                    <div class="svgContainer">
-                        <svg>
-                            <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-create-comment"></use>
-                        </svg>
-                    </div>
-                    <div class="buttonLabel noselect">
-                        Add a comment
+                <div class="row">
+                    <div class="header">Comments</div>
+                    <div class="entrySection buttonSection">
+                        <div class="svgContainer">
+                            <svg>
+                                <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-create-comment"></use>
+                            </svg>
+                        </div>
+                        <div class="buttonLabel noselect">Add a comment</div>
                    </div>
                </div>
-            </div>
+            {{/form}}
        </div>
    </div>
 </template>
--- a/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl
+++ b/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl
@ -38,6 +38,13 @@
      &:not(:last-child)
        border-bottom: $uiBorderThickness solid $uiBorderColorDark

+      & > .wrapperText
+        display: block
+        font-weight: bold
+        line-height: 15px
+        margin: 10px 0 8px
+
+      // TODO: remove
      h5
        font-weight: bold
        margin-bottom: 8px
@ -48,10 +55,11 @@
        display: inline-block
        padding: 5px

-      .radio-group
+      // TODO: remove radio-group
+      .radio-group, .group-radio
        height: 30px

-        .radio-option
+        label
          display: inline-block
          float: left
          font-size: 14px
--- a/Packages/ohif-core/components/base/mixins/form.js
+++ b/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');
        }
    }
 });
--- a/Packages/ohif-core/components/base/mixins/formItem.js
+++ b/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;
--- a/Packages/ohif-core/components/base/mixins/group.js
+++ b/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');
        }
    }
 });
--- a/Packages/ohif-core/components/base/mixins/groupRadio.js
+++ b/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();
                }
--- a/Packages/ohif-core/components/base/mixins/schemaData.js
+++ b/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);
+            }
        }

    }
--- a/Packages/ohif-core/components/base/template.js
+++ b/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
--- a/Packages/ohif-core/components/base/wrappers/label.html
+++ b/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}}
--- a/Packages/ohif-core/components/base/wrappers/title.html
+++ b/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}}
--- a/Packages/ohif-core/components/bootstrap/form/group.html
+++ b/Packages/ohif-core/components/bootstrap/form/group.html
@ -1,5 +1,6 @@
 <template name="group">
    {{#baseComponent (extend this
+        class=(concat 'component-group ' this.class)
        base="baseDiv"
        mixins=(concat "group " this.mixins)
    )}}
--- a/Packages/ohif-core/components/bootstrap/input/groupRadio.html
+++ b/Packages/ohif-core/components/bootstrap/input/groupRadio.html
@ -1,9 +1,10 @@
 <template name="groupRadio">
    {{#group (extend this
-        class=(concat 'form-group ' this.class)
+        class=(concat 'group-radio ' this.class)
+        mixins=(concat "groupRadio " this.mixins)
        wrappers=(concat ''
-            this.wrappers
            (valueIf reactive this.label 'wrapperTitle ' '')
+            this.wrappers
        )
    )}}
        {{>UI.contentBlock}}
--- a/Packages/ohif-core/components/bootstrap/input/radio.html
+++ b/Packages/ohif-core/components/bootstrap/input/radio.html
@ -1,12 +1,13 @@
 <template name="inputRadio">
    {{#baseComponent (extend this
        base='baseInput'
+        type='radio'
        mixins=(concat 'input ' this.mixins)
        labelAfter=(valueIf (isDefined this.labelAfter) this.labelAfter true)
        labelClass=(concat 'checkboxLabel' this.labelClass)
        wrappers=(concat ''
-            this.wrappers
            (valueIf reactive this.label 'wrapperLabel ' '')
+            this.wrappers
        )
    )}}
        {{>UI.contentBlock}}
--- a/Packages/ohif-core/components/bootstrap/input/select.html
+++ b/Packages/ohif-core/components/bootstrap/input/select.html
@ -4,8 +4,8 @@
        class=(concat 'form-control ' this.class)
        mixins=(concat 'select ' this.mixins)
        wrappers=(concat ''
-            this.wrappers
            (valueIf reactive this.label 'wrapperLabel ' '')
+            this.wrappers
        )
    )}}
        {{>UI.contentBlock}}
--- a/Packages/ohif-core/components/bootstrap/input/text.html
+++ b/Packages/ohif-core/components/bootstrap/input/text.html
@ -4,8 +4,8 @@
        class=(concat 'form-control ' this.class)
        mixins=(concat 'input ' this.mixins)
        wrappers=(concat ''
-            this.wrappers
            (valueIf reactive this.label 'wrapperLabel ' '')
+            this.wrappers
        )
    )}}
        {{>UI.contentBlock}}
--- a/Packages/ohif-core/helpers/logical.js
+++ b/Packages/ohif-core/helpers/logical.js
@ -62,7 +62,13 @@ Template.registerHelper('or', (...values) => {
 // Choose the first truthy value in the given values
 Template.registerHelper('choose', (...values) => {
    let result;
-    _.each(_.initial(values, 1), value => value && (result = value));
+    _.each(_.initial(values, 1), value => {
+        if (result) {
+            return;
+        } else if (value) {
+            result = value;
+        }
+    });
    return result;
 });