yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Umb groups builder - move logic to overlays and open sub overlays from overlays

Browse Source
This commit is contained in:
Mads Rasmussen
2015-09-22 14:39:19 +02:00
parent c94ae3b9bd
commit bcdcf441e1
6 changed files with 223 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
View File

@@ -339,6 +339,7 @@
scope.propertySettingsDialogModel = {};
scope.propertySettingsDialogModel.title = "Property settings";
scope.propertySettingsDialogModel.property = property;
scope.propertySettingsDialogModel.contentTypeName = scope.model.name;
scope.propertySettingsDialogModel.view = "views/documentType/dialogs/editPropertySettings/editPropertySettings.html";
scope.propertySettingsDialogModel.show = true;
@@ -348,23 +349,16 @@
// set property states
property.dialogIsOpen = true;
scope.propertySettingsDialogModel.changePropertyEditor = function(property) {
scope.choosePropertyType(property);
};
scope.propertySettingsDialogModel.editDataType = function(property) {
dataTypeResource.getById(property.dataTypeId).then(function(dataType) {
scope.configDataType(property, dataType, false);
});
};
scope.propertySettingsDialogModel.submit = function(model) {
property.inherited = false;
property.dialogIsOpen = false;
// update existing data types
if(model.updateSameDataTypes) {
updateSameDataTypes(property);
}
// remove dialog
scope.propertySettingsDialogModel.show = false;
scope.propertySettingsDialogModel = null;
@@ -407,137 +401,6 @@
}
};
scope.choosePropertyType = function(property) {
scope.propertyEditorDialogModel = {};
scope.propertyEditorDialogModel.title = "Choose editor";
scope.propertyEditorDialogModel.view = "views/documentType/dialogs/property.html";
scope.propertyEditorDialogModel.show = true;
scope.propertyEditorDialogModel.selectDataType = function(editor) {
if( editor.id !== null ) {
dataTypeResource.getById(editor.id).then(function(dataType) {
// open data type settings dialog
scope.configDataType(property, dataType, false);
// remove dialog
//scope.propertyEditorDialogModel.show = false;
//scope.propertyEditorDialogModel = null;
});
} else {
// create new data datype
dataTypeResource.getScaffold().then(function(dataType) {
// set alias
dataType.selectedEditor = editor.alias;
// set name
var nameArray = [];
if(scope.model.name) {
nameArray.push(scope.model.name);
}
if(property.label) {
nameArray.push(property.label);
}
if(editor.name) {
nameArray.push(editor.name);
}
// make name
dataType.name = nameArray.join(" - ");
// get pre values
dataTypeResource.getPreValues(dataType.selectedEditor).then(function(preValues) {
dataType.preValues = preValues;
// open data type settings dialog
scope.configDataType(property, dataType, true);
// remove dialog
//scope.propertyEditorDialogModel.show = false;
//scope.propertyEditorDialogModel = null;
});
});
}
};
scope.propertyEditorDialogModel.close = function(oldModel) {
// remove dialog
scope.propertyEditorDialogModel.show = false;
scope.propertyEditorDialogModel = null;
};
};
scope.configDataType = function(property, dataType, isNew) {
scope.dataTypeSettingsDialogModel = {};
scope.dataTypeSettingsDialogModel.title = "Edit data type";
scope.dataTypeSettingsDialogModel.dataType = dataType;
scope.dataTypeSettingsDialogModel.view = "views/documentType/dialogs/editDataType/editDataType.html";
scope.dataTypeSettingsDialogModel.show = true;
scope.dataTypeSettingsDialogModel.submit = function(model) {
var preValues = dataTypeHelper.createPreValueProps(model.dataType.preValues);
dataTypeResource.save(model.dataType, preValues, isNew).then(function(newDataType) {
contentTypeResource.getPropertyTypeScaffold(newDataType.id).then(function(propertyType) {
property.config = propertyType.config;
property.editor = propertyType.editor;
property.view = propertyType.view;
property.dataTypeId = newDataType.id;
property.dataTypeIcon = newDataType.icon;
property.dataTypeName = newDataType.name;
// change all chosen datatypes to updated config
if(!isNew) {
updateSameDataTypes(property);
}
// remove dialog
scope.dataTypeSettingsDialogModel.show = false;
scope.dataTypeSettingsDialogModel = null;
// remove choose editor picker dialog
if(scope.propertyEditorDialogModel) {
scope.propertyEditorDialogModel.show = false;
scope.propertyEditorDialogModel = null;
}
});
});
};
scope.dataTypeSettingsDialogModel.close = function(oldModel) {
// remove dialog
scope.dataTypeSettingsDialogModel.show = false;
scope.dataTypeSettingsDialogModel = null;
};
};
scope.deleteProperty = function(tab, propertyIndex, group) {
// remove property

14
src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
View File

@@ -163,18 +163,4 @@
view="propertySettingsDialogModel.view">
</umb-overlay>
<umb-overlay
ng-if="propertyEditorDialogModel.show"
model="propertyEditorDialogModel"
position="right"
view="propertyEditorDialogModel.view">
</umb-overlay>
<umb-overlay
ng-if="dataTypeSettingsDialogModel.show"
model="dataTypeSettingsDialogModel"
position="right"
view="dataTypeSettingsDialogModel.view">
</umb-overlay>
</div>

84
src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editpropertysettings/editpropertysettings.controller.js
View File

@@ -10,7 +10,7 @@
(function() {
"use strict";
function EditPropertySettingsController($scope, contentTypeResource) {
function EditPropertySettingsController($scope, contentTypeResource, dataTypeResource, dataTypeHelper) {
var vm = this;
@@ -46,6 +46,8 @@
vm.changeValidationType = changeValidationType;
vm.changeValidationPattern = changeValidationPattern;
vm.openEditorPickerOverlay = openEditorPickerOverlay;
vm.openEditorSettingsOverlay = openEditorSettingsOverlay;
function activate() {
@@ -57,6 +59,86 @@
matchValidationType();
}
function openEditorPickerOverlay(property) {
vm.editorPickerOverlay = {};
vm.editorPickerOverlay.title = "Choose editor";
vm.editorPickerOverlay.property = $scope.model.property;
vm.editorPickerOverlay.contentTypeName = $scope.model.contentTypeName;
vm.editorPickerOverlay.view = "views/documentType/dialogs/property.html";
vm.editorPickerOverlay.show = true;
vm.editorPickerOverlay.submit = function(model) {
$scope.model.updateSameDataTypes = model.updateSameDataTypes;
// update property
property.config = model.property.config;
property.editor = model.property.editor;
property.view = model.property.view;
property.dataTypeId = model.property.dataTypeId;
property.dataTypeIcon = model.property.dataTypeIcon;
property.dataTypeName = model.property.dataTypeName;
vm.editorPickerOverlay.show = false;
vm.editorPickerOverlay = null;
};
vm.editorPickerOverlay.close = function(model) {
vm.editorPickerOverlay.show = false;
vm.editorPickerOverlay = null;
};
}
function openEditorSettingsOverlay(property) {
// get data type
dataTypeResource.getById(property.dataTypeId).then(function(dataType) {
vm.editorSettingsOverlay = {};
vm.editorSettingsOverlay.title = "Editor settings";
vm.editorSettingsOverlay.view = "views/documentType/dialogs/editDataType/editDataType.html";
vm.editorSettingsOverlay.dataType = dataType;
vm.editorSettingsOverlay.show = true;
vm.editorSettingsOverlay.submit = function(model) {
var preValues = dataTypeHelper.createPreValueProps(model.dataType.preValues);
dataTypeResource.save(model.dataType, preValues, false).then(function(newDataType) {
contentTypeResource.getPropertyTypeScaffold(newDataType.id).then(function(propertyType) {
// update editor
property.config = propertyType.config;
property.editor = propertyType.editor;
property.view = propertyType.view;
property.dataTypeId = newDataType.id;
property.dataTypeIcon = newDataType.icon;
property.dataTypeName = newDataType.name;
// set flag to update same data types
$scope.model.updateSameDataTypes = true;
vm.editorSettingsOverlay.show = false;
vm.editorSettingsOverlay = null;
});
});
};
vm.editorSettingsOverlay.close = function(oldModel) {
vm.editorSettingsOverlay.show = false;
vm.editorSettingsOverlay = null;
};
});
}
function matchValidationType() {
if($scope.model.property.validation.pattern !== null && $scope.model.property.validation.pattern !== "" && $scope.model.property.validation.pattern !== undefined) {

26
src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editpropertysettings/editpropertysettings.html
View File

@@ -32,21 +32,21 @@
<div class="editor-wrapper umb-control-group clearfix" ng-model="model.property.editor" val-require-component>
<a href="" ng-if="!model.property.editor" class="editor-placeholder" hotkey="alt+shift+e" ng-click="model.changePropertyEditor(model.property)">Add Editor</a>
<a href="" ng-if="!model.property.editor" class="editor-placeholder" hotkey="alt+shift+e" ng-click="vm.openEditorPickerOverlay(model.property)">Add Editor</a>
<div class="editor clearfix" ng-if="model.property.editor">
<a href="" class="editor-icon-wrapper" ng-click="model.changePropertyEditor(model.property)">
<i class="icon {{ model.property.dataTypeIcon }}" ng-class="{'icon-autofill': model.property.dataType.icon == null}"></i>
<a href="" class="editor-icon-wrapper" ng-click="vm.openEditorPickerOverlay(model.property)">
<i class="icon {{ model.property.dataTypeIcon }}" ng-class="{'icon-autofill': model.property.dataTypeIcon == null}"></i>
</a>
<div class="editor-details">
<a href="" class="editor-name" ng-click="model.changePropertyEditor(model.property)">{{ model.property.dataTypeName }}</a>
<a href="" class="editor-editor" ng-click="model.changePropertyEditor(model.property)">{{ model.property.editor }}</a>
<a href="" class="editor-name" ng-click="vm.openEditorPickerOverlay(model.property)">{{ model.property.dataTypeName }}</a>
<a href="" class="editor-editor" ng-click="vm.openEditorPickerOverlay(model.property)">{{ model.property.editor }}</a>
</div>
<a href class="pull-right" style="padding-top: 15px"
ng-click="model.editDataType(model.property)"
ng-click="vm.openEditorSettingsOverlay(model.property)"
hotkey="alt+shift+d"
ng-if="model.property.editor">
<i class="icon icon-settings" style="font-size: 15px; color: #555"></i>
@@ -79,4 +79,18 @@
</div>
<umb-overlay
ng-if="vm.editorPickerOverlay.show"
model="vm.editorPickerOverlay"
position="right"
view="vm.editorPickerOverlay.view">
</umb-overlay>
<umb-overlay
ng-if="vm.editorSettingsOverlay.show"
model="vm.editorSettingsOverlay"
position="right"
view="vm.editorSettingsOverlay.view">
</umb-overlay>
</div>

106
src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/property.controller.js
View File

@@ -10,7 +10,7 @@
(function() {
"use strict";
function DocumentTypePropertyController($scope, dataTypeResource) {
function DocumentTypePropertyController($scope, dataTypeResource, dataTypeHelper, contentTypeResource) {
var vm = this;
@@ -36,6 +36,7 @@
vm.showDetailsOverlay = showDetailsOverlay;
vm.hideDetailsOverlay = hideDetailsOverlay;
vm.pickEditor = pickEditor;
function activate() {
@@ -84,6 +85,109 @@
$scope.model.itemDetails = null;
}
function pickEditor(editor) {
if(editor.id === null) {
dataTypeResource.getScaffold().then(function(dataType) {
// set alias
dataType.selectedEditor = editor.alias;
// set name
var nameArray = [];
if($scope.model.contentTypeName) {
nameArray.push($scope.model.contentTypeName);
}
if($scope.model.property.label) {
nameArray.push($scope.model.property.label);
}
if(editor.name) {
nameArray.push(editor.name);
}
// make name
dataType.name = nameArray.join(" - ");
// get pre values
dataTypeResource.getPreValues(dataType.selectedEditor).then(function(preValues) {
dataType.preValues = preValues;
openEditorSettingsOverlay(dataType, true);
});
});
} else {
dataTypeResource.getById(editor.id).then(function(dataType) {
contentTypeResource.getPropertyTypeScaffold(dataType.id).then(function(propertyType) {
submitOverlay(dataType, propertyType, false);
});
});
}
}
function openEditorSettingsOverlay(dataType, isNew) {
vm.editorSettingsOverlay = {};
vm.editorSettingsOverlay.title = "Editor settings";
vm.editorSettingsOverlay.dataType = dataType;
vm.editorSettingsOverlay.view = "views/documentType/dialogs/editDataType/editDataType.html";
vm.editorSettingsOverlay.show = true;
vm.editorSettingsOverlay.submit = function(model) {
var preValues = dataTypeHelper.createPreValueProps(model.dataType.preValues);
dataTypeResource.save(model.dataType, preValues, isNew).then(function(newDataType) {
contentTypeResource.getPropertyTypeScaffold(newDataType.id).then(function(propertyType) {
submitOverlay(newDataType, propertyType, true);
vm.editorSettingsOverlay.show = false;
vm.editorSettingsOverlay = null;
});
});
};
vm.editorSettingsOverlay.close = function(oldModel) {
vm.editorSettingsOverlay.show = false;
vm.editorSettingsOverlay = null;
};
}
function submitOverlay(dataType, propertyType, isNew) {
// update property
$scope.model.property.config = propertyType.config;
$scope.model.property.editor = propertyType.editor;
$scope.model.property.view = propertyType.view;
$scope.model.property.dataTypeId = dataType.id;
$scope.model.property.dataTypeIcon = dataType.icon;
$scope.model.property.dataTypeName = dataType.name;
$scope.model.updateSameDataTypes = isNew;
$scope.model.submit($scope.model);
}
activate();
}

11
src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/property.html
View File

@@ -28,7 +28,7 @@
<ul class="umb-card-grid" ng-mouseleave="hideDetailsOverlay()">
<li ng-repeat="systemDataType in value | orderBy:'name' | filter: vm.searchTerm" ng-mouseover="vm.showDetailsOverlay(systemDataType)">
<a href="" ng-click="model.selectDataType(systemDataType)">
<a href="" ng-click="vm.pickEditor(systemDataType)">
<i class="{{ systemDataType.icon }}" ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
{{ systemDataType.name }}
</a>
@@ -44,7 +44,7 @@
<h5>Your configurations</h5>
<ul class="umb-card-grid" ng-mouseleave="vm.hideDetailsOverlay()">
<li ng-repeat="configuredDataType in tab.userConfigured | orderBy:'name' | filter: vm.searchTerm" ng-mouseover="vm.showDetailsOverlay(configuredDataType)">
<a href="" ng-click="model.selectDataType(configuredDataType)">
<a href="" ng-click="vm.pickEditor(configuredDataType)">
<i class="{{ configuredDataType.icon }}" ng-class="{'icon-autofill': configuredDataType.icon == null}"></i>
{{ configuredDataType.name }}
</a>
@@ -58,4 +58,11 @@
</div>
<umb-overlay
ng-if="vm.editorSettingsOverlay.show"
model="vm.editorSettingsOverlay"
position="right"
view="vm.editorSettingsOverlay.view">
</umb-overlay>
</div>