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

Packages/design/package.js

@@ -37,7 +37,8 @@ Package.onUse(function(api) {
     api.addFiles([
         'styles/components/radio.styl',
         'styles/components/select2.styl',
-        'styles/components/selectTree.styl'
+        'styles/components/selectTree.styl',
+        'styles/components/states.styl'
     ], 'client');
 
     // Rounded Button Group

Packages/design/styles/components/states.styl

@@ -0,0 +1,7 @@
+@import "{design}/app"
+
+.state-error:not(.component-group)
+    &.form-control, .form-control
+        theme('background-color', '$uiStateError')
+        theme('border-color', '$uiStateErrorBorder')
+        theme('color', '$uiStateErrorText')

Packages/design/styles/imports/theme-tide.styl

@@ -3,6 +3,11 @@ $themes['tide'] = {
   $uiYellow: #E29E4A
   $uiSkyBlue: #6FBDE2
 
+  // State pallete
+  $uiStateError: #FFCCCC
+  $uiStateErrorBorder: #993333
+  $uiStateErrorText: #661111
+
   $uiLightGray: #516873
   $uiGray: #263340
   $uiGrayDark: #16202B

Packages/design/styles/imports/theme-tigerlilly.styl

@@ -3,6 +3,11 @@ $themes['tigerlilly'] = {
   $uiYellow: #E29E4A
   $uiSkyBlue: #6FBDE2
 
+  // State pallete
+  $uiStateError: #FFCCCC
+  $uiStateErrorBorder: #CC6666
+  $uiStateErrorText: #661111
+
   $uiLightGray: #516873
   $uiGray: #263340
   $uiGrayDark: #16202B

Packages/lesiontracker/client/components/serverInformation/serverInformationDimse/serverInformationDimse.html

@@ -1,7 +1,7 @@
 <template name="serverInformationDimse">
     <div class="panel panel-default panel-body">
         <div class="clearfix">
-            <h4 class="pull-left">Peer list</h4>
+            <h4 class="pull-left">Peer List</h4>
             <button class="btn btn-primary pull-right js-new-peer">New peer</button>
         </div>
         <hr>

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}}

Packages/worklist/both/schema.js

@@ -23,18 +23,18 @@ export const DICOMWebRequestOptions = new SimpleSchema({
     logRequests: {
         type: Boolean,
         defaultValue: true,
-        label: 'Requests',
+        label: 'Requests'
     },
     logResponses: {
         type: Boolean,
         defaultValue: false,
-        label: 'Responses',
+        label: 'Responses'
     },
     logTiming: {
         type: Boolean,
         defaultValue: true,
-        label: 'Timing',
+        label: 'Timing'
-    },
+    }
 });
 
 export const DICOMWebServer = new SimpleSchema({
@@ -81,7 +81,7 @@ export const DICOMWebServer = new SimpleSchema({
 export const DIMSEPeer = new SimpleSchema({
     aeTitle: {
         type: String,
-        label: 'AE Title',
+        label: 'AE Title'
     },
     hostAE: {
         type: String,
@@ -90,7 +90,7 @@ export const DIMSEPeer = new SimpleSchema({
     },
     host: {
         type: String,
-        label: 'Host Domain/IP',
+        label: 'Host Domain/IP'
     },
     port: {
         type: Number,
@@ -120,8 +120,9 @@ export const DIMSEServer = new SimpleSchema({
     name: serverNameDefinitions,
     type: serverTypeDefinitions,
     peers: {
-        type: [ DIMSEPeer ],
+        type: [DIMSEPeer],
-        label: 'DIMSE Peers',
+        label: 'Peer List',
+        minCount: 1
     }
 });
 
@@ -147,12 +148,12 @@ export const PublicServerConfig = new SimpleSchema({
 
 export const Servers = new SimpleSchema({
     dicomWeb: {
-        type: [ DICOMWebServer ],
+        type: [DICOMWebServer],
         label: 'DICOMWeb Servers',
         optional: true
     },
     dimse: {
-        type: [ DIMSEServer ],
+        type: [DIMSEServer],
         label: 'DIMSE Servers',
         optional: true
     }