LT-67: Refactoring schema validation

This commit is contained in:
Bruno Alves de Faria 2016-08-30 14:04:32 -03:00
parent 9e2ab2d21a
commit 2a119a5464
12 changed files with 156 additions and 176 deletions

View File

@ -29,25 +29,25 @@
</div>
<hr>
<h4>Request options</h4>
<div class="row">
{{#group class='row' key='requestOptions'}}
<div class="col-lg-6">
{{>inputText labelClass='form-group' key='requestOptions.auth'}}
{{>inputText labelClass='form-group' key='auth'}}
</div>
<div class="col-lg-6">
<strong>Logging options</strong>
<div class="form-group">
<div class="form-control clearfix">
<div class="checkbox pull-left">
{{>inputCheckbox key='requestOptions.logRequests'}}
{{>inputCheckbox key='logRequests'}}
</div>
<div class="checkbox pull-left">
{{>inputCheckbox key='requestOptions.logResponses'}}
{{>inputCheckbox key='logResponses'}}
</div>
<div class="checkbox pull-left">
{{>inputCheckbox key='requestOptions.logTiming'}}
{{>inputCheckbox key='logTiming'}}
</div>
</div>
</div>
</div>
</div>
{{/group}}
</template>

View File

@ -53,7 +53,7 @@ Template.serverInformationForm.onRendered(() => {
Template.serverInformationForm.events({
submit(event, instance) {
event.preventDefault();
var formData = FormUtils.getFormData(instance.data.$form);
var formData = instance.data.form.value();
Meteor.call('serverSave', formData, function(error) {
if (error) {
// TODO: check for errors: not-authorized, data-write

View File

@ -1,105 +0,0 @@
class Form {
// Identify the element's type and get its value
static getElementValue($element) {
var type = $element.attr('type');
var value;
switch (type) {
case 'checkbox':
value = $element.is(':checked');
break;
default:
value = $element.val();
}
return value;
};
// Identify the element's type and get its value
static setElementValue($element, value) {
if (!$element.length) {
return;
}
var type = $element.attr('type');
switch (type) {
case 'checkbox':
$element.prop('checked', !!value);
break;
default:
$element.val(value);
}
$element.trigger('change');
};
// Transforms a shallow object with keys separated by "." into a nested object
static getNestedObject(shallowObject) {
var nestedObject = {};
for (var key in shallowObject) {
var value = shallowObject[key];
var propertyArray = key.split('.');
var currentObject = nestedObject;
while (propertyArray.length) {
var currentProperty = propertyArray.shift();
if (!propertyArray.length) {
currentObject[currentProperty] = value;
} else {
if (!currentObject[currentProperty]) {
currentObject[currentProperty] = {};
}
currentObject = currentObject[currentProperty];
}
}
}
return nestedObject;
};
// Transforms a nested object into a shallowObject merging its keys with "." character
static getShallowObject(nestedObject) {
var shallowObject = {};
var putValues = function(baseKey, nestedObject, resultObject) {
for (var key in nestedObject) {
var currentKey = baseKey ? baseKey + '.' + key : key;
var currentValue = nestedObject[key];
if (typeof currentValue === 'object') {
if (currentValue instanceof Array) {
currentKey += '[]';
}
putValues(currentKey, currentValue, resultObject);
} else {
resultObject[currentKey] = currentValue;
}
}
};
putValues('', nestedObject, shallowObject);
return shallowObject;
}
// Gets the nested data for the given form
static getFormData($form) {
var data = {};
$form.find(':input[name]').each((index, element) => {
var $element = $(element);
var value = this.getElementValue($element);
var name = $element.attr('name');
data[name] = value;
});
return this.getNestedObject(data);
}
// Sets the nested data in the given form
static setFormData($form, data) {
var shallowData = this.getShallowObject(data);
for (var key in shallowData) {
var value = shallowData[key];
var $element = $form.find(':input[name="' + key + '"]');
this.setElementValue($element, value);
}
}
}
FormUtils = Form;

View File

@ -58,9 +58,6 @@ Package.onUse(function(api) {
api.addFiles('client/tools.js', 'client');
// Utility classes
api.addFiles('client/utils/form.js', 'client');
// UI Components
api.addFiles('client/components/viewer/viewer.html', 'client');
api.addFiles('client/components/viewer/viewer.styl', 'client');

View File

@ -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;

View File

@ -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();
}
}

View File

@ -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));

View File

@ -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) {

View File

@ -31,7 +31,7 @@ OHIF.blaze.getParentView = (view, parentViewName) => {
};
// Search for the parent component of the given view
OHIF.blaze.getParentComponent = (view) => {
OHIF.blaze.getParentComponent = view => {
let currentView = view;
while (currentView) {
currentView = currentView.originalParentView || currentView.parentView;

View File

@ -1,3 +1,4 @@
import './blaze.js';
import './object.js';
import './string.js';
import './user.js';

View File

@ -0,0 +1,50 @@
import { OHIF } from 'meteor/ohif:core';
OHIF.object = {};
// Transforms a shallow object with keys separated by "." into a nested object
OHIF.blaze.getNestedObject = shallowObject => {
var nestedObject = {};
for (var key in shallowObject) {
var value = shallowObject[key];
var propertyArray = key.split('.');
var currentObject = nestedObject;
while (propertyArray.length) {
var currentProperty = propertyArray.shift();
if (!propertyArray.length) {
currentObject[currentProperty] = value;
} else {
if (!currentObject[currentProperty]) {
currentObject[currentProperty] = {};
}
currentObject = currentObject[currentProperty];
}
}
}
return nestedObject;
};
// Transforms a nested object into a shallowObject merging its keys with "." character
OHIF.blaze.getShallowObject = nestedObject => {
var shallowObject = {};
var putValues = function(baseKey, nestedObject, resultObject) {
for (var key in nestedObject) {
var currentKey = baseKey ? baseKey + '.' + key : key;
var currentValue = nestedObject[key];
if (typeof currentValue === 'object') {
if (currentValue instanceof Array) {
currentKey += '[]';
}
putValues(currentKey, currentValue, resultObject);
} else {
resultObject[currentKey] = currentValue;
}
}
};
putValues('', nestedObject, shallowObject);
return shallowObject;
};

View File

@ -230,7 +230,8 @@ var dialogPolyfill = (function() {
// TODO: Only install when any dialogs are open.
document.addEventListener('submit', function(ev) {
var method = ev.target.getAttribute('method').toLowerCase();
var method = ev.target.getAttribute('method');
method = method ? method.toLowerCase() : '';
if (method != 'dialog') { return; }
ev.preventDefault();
@ -408,4 +409,4 @@ var dialogPolyfill = (function() {
dialogPolyfill.dm.handleKey.bind(dialogPolyfill.dm));
return dialogPolyfill;
})();
})();