LT-67: Creating data parser and styling components with validation error

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

@@ -16,7 +16,7 @@ OHIF.mixins.checkbox = new OHIF.Mixin({
             component.value = value => {
                 const isGet = _.isUndefined(value);
                 if (isGet) {
-                    return component.$element.is(':checked');
+                    return component.parseData(component.$element.is(':checked'));
                 }
 
                 component.$element.prop('checked', value);

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

@@ -31,7 +31,7 @@ OHIF.mixins.formItem = new OHIF.Mixin({
             component.value = value => {
                 const isGet = _.isUndefined(value);
                 if (isGet) {
-                    return component.$element.val();
+                    return component.parseData(component.$element.val());
                 }
 
                 component.$element.val(value).trigger('change');

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

@@ -98,21 +98,27 @@ OHIF.mixins.group = new OHIF.Mixin({
             };
 
             // Check if the form data is valid in its schema
+            const validateSelf = component.validate;
             component.validate = () => {
                 // Assume validation result as true
                 let result = true;
 
                 // Return true if there's no data schema defined
-                if (!component.schema) {
+                if (component.isForm && !component.schema) {
                     return result;
                 }
 
+                // Validate the component itself if it has a key
+                if (instance.data.pathKey && !validateSelf()) {
+                    result = false;
+                }
+
                 // Iterate over each registered form item and validate it
                 component.registeredItems.forEach(child => {
                     const key = child.templateInstance.data.key;
 
                     // Change result to false if any form item is invalid
-                    if (key && !child.validate()) {
+                    if ((key || instance.data.arrayValues) && !child.validate()) {
                         result = false;
                     }
                 });

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

@@ -21,7 +21,7 @@ OHIF.mixins.groupRadio = new OHIF.Mixin({
                 component.registeredItems.forEach(child => elements.push(child.$element[0]));
                 const $elements = $(elements);
                 if (isGet) {
-                    return $elements.filter(':checked').val();
+                    return component.parseData($elements.filter(':checked').val());
                 }
 
                 $elements.filter(`[value='${value}']`).prop('checked', true).trigger('change');

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

@@ -30,6 +30,7 @@ const getCurrentSchema = (parentComponent, key) => {
 
     // Merge the sub-schema properties if it's an array
     if (Array.isArray(currentSchema.type())) {
+        console.warn('>>>>IS ARRAY', currentSchema);
         _.extend(currentSchema, schema._schema[key + '.$']);
     }
 
@@ -105,6 +106,35 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
             }
         },
 
+        onCreated() {
+            const instance = Template.instance();
+            const component = instance.component;
+
+            // Create a data parser according to current schema key
+            component.parseData = value => {
+                // Get the current schema data using component's key
+                const currentSchema = getCurrentSchema(component.parent, instance.data.pathKey);
+
+                // Stop here if there's no schema data for current key
+                if (!currentSchema) {
+                    return;
+                }
+
+                // Check if the schema is a Number
+                if (currentSchema.type === Number) {
+                    return parseFloat(value);
+                }
+
+                // Check if the schema is a Boolean
+                if (currentSchema.type === Boolean) {
+                    return !!value;
+                }
+
+                // Return the original value if none of the checks matched
+                return value;
+            };
+        },
+
         onMixins() {
             const instance = Template.instance();
             const component = instance.component;

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

@@ -30,7 +30,7 @@ OHIF.mixins.selectTree = new OHIF.Mixin({
 
                 // Return the current value
                 if (isGet) {
-                    return rootInstance.currentValue;
+                    return component.parseData(rootInstance.currentValue);
                 }
 
                 // Change the current value

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

@@ -2,6 +2,7 @@
     <div
         id="{{this.id}}"
         class="{{this.class}}"
+        data-key="{{this.pathKey}}"
         {{this.tagAttributes}}
     >
         {{>UI.contentBlock}}

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

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

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

@@ -5,7 +5,7 @@
         name="{{this.name}}"
         multiple="{{#if this.multiple}}multiple{{/if}}"
         disabled="{{#if this.disabled}}disabled{{/if}}"
-        data-key="{{this.key}}"
+        data-key="{{this.pathKey}}"
         {{this.tagAttributes}}
     >
         {{>UI.contentBlock}}