othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Bruno Alves de Faria 2016-08-31 11:59:26 -03:00
parent e9ec386e72
commit 6e84a388b6
15 changed files with 76 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Packages/design/package.js
View File

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

7
Packages/design/styles/components/states.styl Normal file
View File

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

5
Packages/design/styles/imports/theme-tide.styl
View File

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

5
Packages/design/styles/imports/theme-tigerlilly.styl
View File

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

2
Packages/lesiontracker/client/components/serverInformation/serverInformationDimse/serverInformationDimse.html
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

21
Packages/worklist/both/schema.js
View File

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