LT-67: Refactoring schema validation

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

@@ -12,62 +12,13 @@ OHIF.mixins.form = new OHIF.Mixin({
             const instance = Template.instance();
             const component = instance.component;
 
-            // Run this computation every time the schema property is changed
-            instance.autorun(() => {
-                let schema;
+            // Set the form identifier flag
+            component.isForm = true;
 
-                // Check if the schema is reactive
-                if (instance.data.schema instanceof ReactiveVar) {
-                    // Register a dependency on schema property
-                    schema = instance.data.schema.get();
-                }
-
-                // Set the form's data schema
-                component.schema = schema && schema.newContext();
-            });
-
-            // Get a registered item in form by its key
-            component.item = itemKey => {
-                let found;
-
-                // Iterate over each registered form item
-                component.registeredItems.forEach(child => {
-                    const key = child.templateInstance.data.key;
-
-                    // Change the found item if current key is the same as given
-                    if (key === itemKey) {
-                        found = child;
-                    }
-                });
-
-                // Return the found item or undefined if it was not found
-                return found;
-            };
-
-            // Check if the form data is valid in its schema
-            component.validate = () => {
-                // Assume validation result as true
-                let result = true;
-
-                // Return true if there's no data schema defined
-                if (!component.schema) {
-                    return result;
-                }
-
-                // 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()) {
-                        result = false;
-                    }
-                });
-
-                // Return the validation result
-                return result;
-            };
+            // Reset the pathKey
+            instance.data.pathKey = '';
         },
+
         onRendered() {
             const instance = Template.instance();
             const component = instance.component;

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

@@ -73,16 +73,27 @@ OHIF.mixins.formItem = new OHIF.Mixin({
                 }
             };
 
+            // Search for the parent form component
+            component.getForm = () => {
+                let currentComponent = component;
+                while (currentComponent) {
+                    currentComponent = currentComponent.parent;
+                    if (currentComponent && currentComponent.isForm) {
+                        return currentComponent;
+                    }
+                }
+            };
+
             // Check if the component value is valid in its form's schema
             component.validate = () => {
                 // Get the component's form
-                const form = component.parent;
+                const form = component.getForm();
 
                 // Get the form's data schema
                 const schema = form && form.schema;
 
                 // Get the current component's key
-                const key = instance.data.key;
+                const key = instance.data.pathKey;
 
                 // Return true if validation is not needed
                 if (!key || !schema || !component.$wrapper.is(':visible')) {
@@ -156,11 +167,13 @@ OHIF.mixins.formItem = new OHIF.Mixin({
 
             // TODO: [design] remove log, show error box/hint over the wrapper
             errorin(event, instance) {
+                event.stopPropagation();
                 console.log('ERROR when validating component', instance.component);
             },
 
             // TODO: [design] hide error box/hint
             errorout(event, instance) {
+                event.stopPropagation();
             }
 
         }

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

@@ -12,6 +12,20 @@ OHIF.mixins.group = new OHIF.Mixin({
             const instance = Template.instance();
             const component = instance.component;
 
+            // Run this computation every time the schema property is changed
+            instance.autorun(() => {
+                let schema = instance.data.schema;
+
+                // Check if the schema is reactive
+                if (schema instanceof ReactiveVar) {
+                    // Register a dependency on schema property
+                    schema = schema.get();
+                }
+
+                // Set the form's data schema
+                component.schema = schema && schema.newContext();
+            });
+
             // Get or set the child components values
             component.value = value => {
                 const isGet = _.isUndefined(value);
@@ -35,6 +49,48 @@ OHIF.mixins.group = new OHIF.Mixin({
                 component.$element.trigger('change');
             };
 
+            // Get a registered item in form by its key
+            component.item = itemKey => {
+                let found;
+
+                // Iterate over each registered form item
+                component.registeredItems.forEach(child => {
+                    const key = child.templateInstance.data.key;
+
+                    // Change the found item if current key is the same as given
+                    if (key === itemKey) {
+                        found = child;
+                    }
+                });
+
+                // Return the found item or undefined if it was not found
+                return found;
+            };
+
+            // Check if the form data is valid in its schema
+            component.validate = () => {
+                // Assume validation result as true
+                let result = true;
+
+                // Return true if there's no data schema defined
+                if (!component.schema) {
+                    return result;
+                }
+
+                // 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()) {
+                        result = false;
+                    }
+                });
+
+                // Return the validation result
+                return result;
+            };
+
             // Disable or enable the component
             component.disable = isDisable => {
                 component.registeredItems.forEach(child => child.disable(isDisable));

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

@@ -7,7 +7,13 @@ 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;
+    let schema = parentComponent && parentComponent.schema;
+
+    // Try to get the form schema if it was not found
+    if (parentComponent && !schema) {
+        const form = parentComponent.getForm();
+        schema = form && form.schema;
+    }
 
     // Stop here if there's no key or schema defined
     if (!key || !schema) {
@@ -45,8 +51,18 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
             // Get the parent component
             const parent = OHIF.blaze.getParentComponent(Blaze.currentView);
 
+            // Get he parent component key
+            let parentKey = parent && parent.templateInstance.data.pathKey;
+
+            // Set the path key for this component
+            data.pathKey = data.key || '';
+            if (data.pathKey && typeof parentKey === 'string') {
+                const prefix = parentKey ? `${parentKey}.` : '';
+                data.pathKey = `${prefix}${data.pathKey}`;
+            }
+
             // Get the current schema data using component's key
-            const currentSchema = getCurrentSchema(parent, data.key);
+            const currentSchema = getCurrentSchema(parent, data.pathKey);
 
             // Stop here if there's no schema data for current key
             if (!currentSchema) {