Commit 99a02d10 authored by julienmege's avatar julienmege Committed by abirembaut

feat(Modal) Display error decorator in whiteboard (#2542)

- Error Guidance when a modal is inside a modal
- works with Fragment/Tab/Forms

closes [BS-18716](https://bonitasoft.atlassian.net/browse/BS-19026)
parent f02d99b7
......@@ -26,6 +26,7 @@
isEmpty: isEmpty,
isChildOf: isChildOf,
isMovable: isMovable,
hasModalContainingModal: hasModalContainingModal,
getVisibleComponents: getVisibleComponents,
isContainer: isContainer,
getResolutionClasses,
......@@ -109,12 +110,14 @@
* @return {Boolean}
*/
function isChildOf(id, container) {
if (container.$$id === id) {
if (container.$$id === id ||
(container.container && container.container.$$id === id)) {
return true;
}
// We normalize container and tabs container into an array of rows
// For tabs, we merge rows of each tabs container
var rows = container.rows || (container.tabs || [])
var rows = container.rows || (container.container && container.container.rows) || (container.tabs || [])
.map(getTabRows)
.reduce(flattenReducer, []);
......@@ -146,6 +149,42 @@
return false;
}
function hasModalContainingModal(container, modalInParents) {
if (modalInParents && container.type === 'modalContainer') {
return true;
}
// We normalize container and tabs container into an array of rows
// For tabs, we merge rows of each tabs container
var rows = container.rows ||
container.container && container.container.rows ||
container.$$widget && container.$$widget.rows ||
(container.tabs || [])
.map(getTabRows)
.reduce(flattenReducer, []);
if (rows.length === 0) {
return false;
}
if (modalInParents === undefined) {
modalInParents = container.type === 'modalContainer';
}
if (container.type === 'modalContainer') {
modalInParents = true;
}
// we reduce rows into an array of widget and iterate over it
// using some to stop when we found the widget
return rows
.reduce(flattenReducer, [])
.some(function(widget) {
return hasModalContainingModal(widget, this);
}, modalInParents);
}
/**
* Returns the CSS column width that must be used by a component in the editor to reflect its width and the currently
* selected resolution.
......
......@@ -105,4 +105,9 @@ angular.module('bonitasoft.designer.editor.whiteboard').controller('ContainerDir
$scope.isRepeated = function(container) {
return container && container.propertyValues && container.propertyValues.repeatedCollection && container.propertyValues.repeatedCollection.value;
};
$scope.hasModalContainingModal = function(container) {
return componentUtils.hasModalContainingModal(container) && container.type === 'modalContainer';
};
});
......@@ -15,7 +15,8 @@
</div>
<div ng-repeat="component in row" class="component" ng-class="editor.componentClasses(component)" bo-draggable bo-draggable-data="component" bo-drop-item="dropItem($data, row, rowIndex)">
<div ng-include="component.$$templateUrl"></div>
<i ng-if="hasModalContainingModal(component)" class="fa fa-times-circle Component-marker" style="color:red;" title="{{ 'A modal container cannot contain another modal container.' | translate }}"></i>
<div ng-include="component.$$templateUrl" ng-class="{'error':hasModalContainingModal(component)}"></div>
</div>
<div ng-if="editor.rowSize(row) < 12"
......
......@@ -117,6 +117,13 @@
margin-bottom: 10px;
}
.error {
.modal-element,
.fragment-element{
border-color: red;
}
}
.component-element--hover {
border-color: @widget-hover-color;
transition: opacity .3s ease;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment