From 6e84a388b64841ea57cbd54eb4025336b741756f Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Wed, 31 Aug 2016 11:59:26 -0300
Subject: [PATCH] LT-67: Creating data parser and styling components with
 validation error

---
 Packages/design/package.js                    |  3 +-
 Packages/design/styles/components/states.styl |  7 +++++
 .../design/styles/imports/theme-tide.styl     |  5 ++++
 .../styles/imports/theme-tigerlilly.styl      |  5 ++++
 .../serverInformationDimse.html               |  2 +-
 .../client/components/base/mixins/checkbox.js |  2 +-
 .../client/components/base/mixins/formItem.js |  2 +-
 .../client/components/base/mixins/group.js    | 10 +++++--
 .../components/base/mixins/groupRadio.js      |  2 +-
 .../components/base/mixins/schemaData.js      | 30 +++++++++++++++++++
 .../components/base/mixins/selectTree.js      |  2 +-
 .../client/components/base/templates/div.html |  1 +
 .../components/base/templates/input.html      |  2 +-
 .../components/base/templates/select.html     |  2 +-
 Packages/worklist/both/schema.js              | 21 ++++++-------
 15 files changed, 76 insertions(+), 20 deletions(-)
 create mode 100644 Packages/design/styles/components/states.styl

diff --git a/Packages/design/package.js b/Packages/design/package.js
index 8b624df74..77f3ee544 100644
--- a/Packages/design/package.js
+++ b/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
diff --git a/Packages/design/styles/components/states.styl b/Packages/design/styles/components/states.styl
new file mode 100644
index 000000000..78582a0b4
--- /dev/null
+++ b/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')
diff --git a/Packages/design/styles/imports/theme-tide.styl b/Packages/design/styles/imports/theme-tide.styl
index ebc64a651..6f7d9d203 100644
--- a/Packages/design/styles/imports/theme-tide.styl
+++ b/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
diff --git a/Packages/design/styles/imports/theme-tigerlilly.styl b/Packages/design/styles/imports/theme-tigerlilly.styl
index 2e796532d..21292a45c 100644
--- a/Packages/design/styles/imports/theme-tigerlilly.styl
+++ b/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
diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationDimse/serverInformationDimse.html b/Packages/lesiontracker/client/components/serverInformation/serverInformationDimse/serverInformationDimse.html
index 34eade647..5b94094f0 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationDimse/serverInformationDimse.html
+++ b/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>
diff --git a/Packages/ohif-core/client/components/base/mixins/checkbox.js b/Packages/ohif-core/client/components/base/mixins/checkbox.js
index 20071c4e0..0b05a65d3 100644
--- a/Packages/ohif-core/client/components/base/mixins/checkbox.js
+++ b/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);
diff --git a/Packages/ohif-core/client/components/base/mixins/formItem.js b/Packages/ohif-core/client/components/base/mixins/formItem.js
index 12f9fc308..118741b11 100644
--- a/Packages/ohif-core/client/components/base/mixins/formItem.js
+++ b/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');
diff --git a/Packages/ohif-core/client/components/base/mixins/group.js b/Packages/ohif-core/client/components/base/mixins/group.js
index f64d3565e..3c5356831 100644
--- a/Packages/ohif-core/client/components/base/mixins/group.js
+++ b/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;
                     }
                 });
diff --git a/Packages/ohif-core/client/components/base/mixins/groupRadio.js b/Packages/ohif-core/client/components/base/mixins/groupRadio.js
index ecedc5fd2..c366d75ce 100644
--- a/Packages/ohif-core/client/components/base/mixins/groupRadio.js
+++ b/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');
diff --git a/Packages/ohif-core/client/components/base/mixins/schemaData.js b/Packages/ohif-core/client/components/base/mixins/schemaData.js
index c7518ee4b..038b31e4f 100644
--- a/Packages/ohif-core/client/components/base/mixins/schemaData.js
+++ b/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;
diff --git a/Packages/ohif-core/client/components/base/mixins/selectTree.js b/Packages/ohif-core/client/components/base/mixins/selectTree.js
index 2e8320964..319800632 100644
--- a/Packages/ohif-core/client/components/base/mixins/selectTree.js
+++ b/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
diff --git a/Packages/ohif-core/client/components/base/templates/div.html b/Packages/ohif-core/client/components/base/templates/div.html
index a39733ce3..b628f9c1e 100644
--- a/Packages/ohif-core/client/components/base/templates/div.html
+++ b/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}}
diff --git a/Packages/ohif-core/client/components/base/templates/input.html b/Packages/ohif-core/client/components/base/templates/input.html
index 2df32a319..1c75a95c2 100644
--- a/Packages/ohif-core/client/components/base/templates/input.html
+++ b/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}}
diff --git a/Packages/ohif-core/client/components/base/templates/select.html b/Packages/ohif-core/client/components/base/templates/select.html
index 3db0c7de0..148827e2b 100644
--- a/Packages/ohif-core/client/components/base/templates/select.html
+++ b/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}}
diff --git a/Packages/worklist/both/schema.js b/Packages/worklist/both/schema.js
index 9ac6846e6..6443e3d7d 100644
--- a/Packages/worklist/both/schema.js
+++ b/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 ],
-        label: 'DIMSE Peers',
+        type: [DIMSEPeer],
+        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
     }