Finished Inspector validation, some minor Inspector fixes.

This commit is contained in:
alekseybobkov 2015-10-09 23:01:47 -07:00
parent 6095303b54
commit 409c40c248
6 changed files with 100 additions and 21 deletions

View File

@ -7,12 +7,30 @@
BaseProto = Base.prototype
var DictionaryEditor = function(inspector, propertyDefinition, containerCell, group) {
this.keyValidationSet = null
this.valueValidationSet = null
Base.call(this, inspector, propertyDefinition, containerCell, group)
}
DictionaryEditor.prototype = Object.create(BaseProto)
DictionaryEditor.prototype.constructor = Base
DictionaryEditor.prototype.dispose = function() {
this.disposeValidators()
this.keyValidationSet = null
this.valueValidationSet = null
BaseProto.dispose.call(this)
}
DictionaryEditor.prototype.init = function() {
this.initValidators()
BaseProto.init.call(this)
}
//
// Popup editor methods
//
@ -108,7 +126,6 @@
DictionaryEditor.prototype.handleSubmit = function($form) {
return this.applyValues()
// TODO: validate here
}
//
@ -253,6 +270,18 @@
this.focusAndMakeActive(keyInput)
return false
}
var validationResult = this.keyValidationSet.validate(key)
if (validationResult !== null) {
$.oc.flashMsg({text: validationResult, 'class': 'error', 'interval': 5})
return false
}
validationResult = this.valueValidationSet.validate(value)
if (validationResult !== null) {
$.oc.flashMsg({text: validationResult, 'class': 'error', 'interval': 5})
return false
}
result[key] = value
}
@ -351,6 +380,25 @@
this.focusAndMakeActive(newActiveEditor)
}
//
// Validation
//
DictionaryEditor.prototype.initValidators = function() {
this.keyValidationSet = new $.oc.inspector.validationSet({
validation: this.propertyDefinition.validationKey
}, this.propertyDefinition.property+'.validationKey')
this.valueValidationSet = new $.oc.inspector.validationSet({
validation: this.propertyDefinition.validationValue
}, this.propertyDefinition.property+'.validationValue')
}
DictionaryEditor.prototype.disposeValidators = function() {
this.keyValidationSet.dispose()
this.valueValidationSet.dispose()
}
//
// Event handlers
//

View File

@ -205,7 +205,7 @@
table.appendChild(tbody)
if (firstRow !== undefined) {
this.selectRow(firstRow)
this.selectRow(firstRow, true)
}
this.updateScrollpads()
@ -250,17 +250,26 @@
// Built-in Inspector management
//
ObjectListEditor.prototype.selectRow = function(row) {
ObjectListEditor.prototype.selectRow = function(row, forceSelect) {
var tbody = row.parentNode,
inspectorContainer = this.getInspectorContainer(),
selectedRow = this.getSelectedRow()
if (selectedRow === row && !forceSelect) {
return
}
if (selectedRow) {
if (!this.validateKeyValue()) {
return
}
// TODO: validation of the currently existing Inspector is required
if (this.currentRowInspector) {
if (!this.currentRowInspector.validate()) {
return
}
}
this.applyDataToRow(selectedRow)
$.oc.foundation.element.removeClass(selectedRow, 'active')
}
@ -291,7 +300,7 @@
}
ObjectListEditor.prototype.disposeInspector = function() {
$.oc.foundation.controlUtils.disposeControls(this.popup)
$.oc.foundation.controlUtils.disposeControls(this.popup.querySelector('[data-inspector-container]'))
this.currentRowInspector = null
}
@ -315,6 +324,15 @@
return
}
value = $.trim(value)
if (value.length === 0) {
value = '[No title]'
$.oc.foundation.element.addClass(selectedRow, 'disabled')
} else {
$.oc.foundation.element.removeClass(selectedRow, 'disabled')
}
selectedRow.firstChild.textContent = value
}
@ -342,7 +360,12 @@
return
}
// TODO: validation of the currently existing Inspector is required
if (this.currentRowInspector) {
if (!this.currentRowInspector.validate()) {
return
}
}
this.applyDataToRow(selectedRow)
$.oc.foundation.element.removeClass(selectedRow, 'active')
}
@ -359,7 +382,7 @@
row.setAttribute('data-inspector-values', JSON.stringify(data))
tbody.appendChild(row)
this.selectRow(row)
this.selectRow(row, true)
this.removeEmptyRow()
this.updateScrollpads()
@ -402,7 +425,12 @@
return
}
// TODO: validation of the currently existing Inspector is required
if (this.currentRowInspector) {
if (!this.currentRowInspector.validate()) {
return
}
}
this.applyDataToRow(selectedRow)
}
@ -611,6 +639,8 @@
$(popup).off('click.inspector', '[data-cmd]', this.proxy(this.onCommand))
this.disposeInspector()
$.oc.foundation.controlUtils.disposeControls(this.popup)
this.popup = null
}

View File

@ -84,7 +84,6 @@
}
PopupBase.prototype.handleSubmit = function($form) {
// TODO: validate here
}
PopupBase.prototype.hidePopup = function() {

View File

@ -283,8 +283,7 @@
Surface.prototype.getRowCssClass = function(property, group) {
var result = property.itemType
// The property.groupedControl flag doesn't allow to collapse the grouped control row itself.
if (property.itemType == 'property' && !property.groupedControl) {
if (property.itemType == 'property') {
// result += ' grouped'
if (group.parentGroup) {
result += this.getGroupManager().isGroupExpanded(group) ? ' expanded' : ' collapsed'
@ -362,8 +361,8 @@
// Field grouping
//
Surface.prototype.applyGroupIndexAttribute = function(property, row, group) {
if (property.itemType == 'group' || property.groupedControl) {
Surface.prototype.applyGroupIndexAttribute = function(property, row, group, isGroupedControl) {
if (property.itemType == 'group' || isGroupedControl) {
row.setAttribute('data-group-index', this.getGroupManager().getGroupIndex(group))
row.setAttribute('data-parent-group-index', this.getGroupManager().getGroupIndex(group.parentGroup))
} else {
@ -472,12 +471,12 @@
var editor = new $.oc.inspector.propertyEditors[type](this, property, cell, group)
if (editor.isGroupedEditor()) {
property.groupedControl = true
// property.groupedControl = true
$.oc.foundation.element.addClass(dataTable, 'has-groups')
$.oc.foundation.element.addClass(row, 'control-group')
this.applyGroupIndexAttribute(property, row, editor.group)
this.applyGroupIndexAttribute(property, row, editor.group, true)
this.buildGroupExpandControl(row.querySelector('span.title-element'), property, true, editor.hasChildSurface(), editor.group)
if (cell.children.length == 0) {

View File

@ -129,6 +129,7 @@
display: block;
padding: 5px 12px 7px 12px;
overflow: hidden;
min-height: 29px;
text-overflow: ellipsis;
color: @color-inspector-text;
text-decoration: none;
@ -237,10 +238,12 @@
}
}
&.dropdown div.external-param-editor-container div.external-editor {
height: 100%;
margin: 0;
bottom: auto;
&.dropdown, &.trigger-cell {
div.external-param-editor-container div.external-editor {
height: 100%;
margin: 0;
bottom: auto;
}
}
}

View File

@ -2445,7 +2445,7 @@ table.table.data tr.list-tree-level-10 td.list-cell-index-1{padding-left:125px}
.inspector-fields td.text input[type=text]:-ms-input-placeholder{font-weight:normal !important;color:#b5babd}
.inspector-fields td.text.active{background:#ffffff;border-left:1px solid #c8cccd}
.inspector-fields td.trigger-cell{padding:0 !important}
.inspector-fields td.trigger-cell a.trigger{display:block;padding:5px 12px 7px 12px;overflow:hidden;text-overflow:ellipsis;color:#333333;text-decoration:none}
.inspector-fields td.trigger-cell a.trigger{display:block;padding:5px 12px 7px 12px;overflow:hidden;min-height:29px;text-overflow:ellipsis;color:#333333;text-decoration:none}
.inspector-fields td.trigger-cell a.trigger.placeholder{color:#b5babd}
.inspector-fields td.trigger-cell a.trigger .loading-indicator{background-color:#f2f2f2}
.inspector-fields td.trigger-cell a.trigger .loading-indicator span{margin-top:-12px;right:10px;left:auto}
@ -2459,7 +2459,7 @@ table.table.data tr.list-tree-level-10 td.list-cell-index-1{padding-left:125px}
.inspector-fields td div.external-param-editor-container div.external-editor div.controls input{position:absolute;display:block;border:none;width:100%;height:100%;left:0;top:0;padding-left:30px;padding-right:12px;background:transparent}
.inspector-fields td div.external-param-editor-container.editor-visible div.external-editor div.controls input{background:#f2f2f2}
.inspector-fields td.active div.external-param-editor-container div.external-editor div.controls input{background:white}
.inspector-fields td.dropdown div.external-param-editor-container div.external-editor{height:100%;margin:0;bottom:auto}
.inspector-fields td.dropdown div.external-param-editor-container div.external-editor,.inspector-fields td.trigger-cell div.external-param-editor-container div.external-editor{height:100%;margin:0;bottom:auto}
.inspector-fields th{font-weight:500}
.inspector-fields th > div{position:relative}
.inspector-fields th > div > div{white-space:nowrap;padding-right:10px;text-overflow:ellipsis;overflow:hidden;width:100%}