Change flow when adding properties/data types

This commit is contained in:
Mads Rasmussen
2015-05-27 16:33:02 +02:00
parent 7a53af95e4
commit 6221dd206c
6 changed files with 123 additions and 147 deletions

View File

@@ -8,57 +8,15 @@
*/
function EditDataTypeController($scope, dataTypeResource) {
getDataType($scope.model.property.dataTypeId);
editDataType($scope.model.property.dataType.id);
function editDataType(dataTypeId) {
function getDataType(dataTypeId) {
dataTypeResource.getById(dataTypeId)
.then(function(data) {
console.log(data);
//$scope.loaded = true;
//$scope.preValuesLoaded = true;
//$scope.content = data;
$scope.model.property.dataType.preValues = data.preValues;
createPreValueProps($scope.model.property.dataType.preValues);
//share state
//editorState.set($scope.content);
//in one particular special case, after we've created a new item we redirect back to the edit
// route but there might be server validation errors in the collection which we need to display
// after the redirect, so we will bind all subscriptions which will show the server validation errors
// if there are any and then clear them so the collection no longer persists them.
//serverValidationManager.executeAndClearAllSubscriptions();
/*
navigationService.syncTree({ tree: "datatype", path: [String(data.id)] }).then(function (syncArgs) {
$scope.currentNode = syncArgs.node;
});
*/
.then(function(dataType) {
$scope.model.dataType = dataType;
});
}
function createPreValueProps(preVals) {
$scope.preValues = [];
for (var i = 0; i < preVals.length; i++) {
$scope.preValues.push({
hideLabel: preVals[i].hideLabel,
alias: preVals[i].key,
description: preVals[i].description,
label: preVals[i].label,
view: preVals[i].view,
value: preVals[i].value
});
}
}
}
angular.module("umbraco").controller("Umbraco.Editors.DocumentType.EditDataTypeController", EditDataTypeController);

View File

@@ -1,16 +1,19 @@
<div ng-controller="Umbraco.Editors.DocumentType.EditDataTypeController">
<div class="umb-overlay-body">
<div>Change configuration for data types here</div>
<umb-property
property="preValue"
ng-repeat="preValue in preValues">
<h5>Details</h5>
<label>Name</label>
<input type="text" ng-model="model.dataType.name" />
<h5>Configuration</h5>
<umb-property property="preValue" ng-repeat="preValue in model.dataType.preValues">
<umb-editor model="preValue" is-pre-value="true"></umb-editor>
</umb-property>
<pre>{{ model.dataType | json }}</pre>
<pre>{{ model | json }}</pre>
</div>
</div>

View File

@@ -8,60 +8,6 @@
*/
function EditPropertySettingsController($scope, contentTypeResource) {
$scope.changePropertyEditor = function(property){
$scope.dialogModel = {};
$scope.dialogModel.title = "Change property type";
$scope.dialogModel.dataTypes = $scope.model.dataTypes;
$scope.dialogModel.view = "views/documentType/dialogs/property.html";
$scope.showDialog = true;
$scope.dialogModel.submit = function(dt){
contentTypeResource.getPropertyTypeScaffold(dt.id)
.then(function(pt){
// save data to property
property.config = pt.config;
property.editor = pt.editor;
property.view = pt.view;
property.dataType = dt;
// close dialog
$scope.dialogModel = null;
$scope.showDialog = false;
});
};
$scope.dialogModel.close = function(model){
$scope.showDialog = false;
$scope.dialogModel = null;
};
};
$scope.editDataType = function(property) {
$scope.dialogModel = {};
$scope.dialogModel.title = "Edit data type";
$scope.dialogModel.property = property;
$scope.dialogModel.view = "views/documentType/dialogs/editDataType/editDataType.html";
$scope.showDialog = true;
$scope.dialogModel.submit = function(dt){
alert("submit from edit data type");
$scope.showDialog = false;
$scope.dialogModel = null;
};
$scope.dialogModel.close = function(model){
$scope.showDialog = false;
$scope.dialogModel = null;
};
}
}

View File

@@ -32,12 +32,18 @@
<h5>Property type</h5>
<div class="" ng-click="changePropertyEditor(model.property)">
<i class="icon" ng-class="model.property.dataType.icon"></i>
<span>{{ model.property.dataType.name }}</span>
<span>{{ model.property.view }}</span>
</div>
<button class="btn" ng-click="editDataType(model.property)">Change editor settings</button>
<label>Icon</label>
<i class="{{ model.property.dataType.icon }}" ng-class="{'icon-autofill': model.property.dataType.icon == null}"></i>
<label>Data type</label>
<div>{{ model.property.dataTypeName }}</div>
<label>Editor</label>
<div>{{ model.property.editor }}</div>
<button class="btn" ng-click="model.changePropertyEditor(model.property)">Change property editor</button>
<button class="btn" ng-click="model.editDataType(model.property)">Change editor settings</button>
<pre>{{ model | json }}</pre>
@@ -45,15 +51,5 @@
</div>
<!-- overlay for change data type -->
<umb-overlay
ng-style="{'width': '500px'}"
ng-if="showDialog"
model="dialogModel"
animation="slide-in-right"
position="right"
view="dialogModel.view">
</umb-overlay>
</div>

View File

@@ -8,18 +8,6 @@
*/
function DocumentTypePropertyController($scope, dataTypeResource) {
/*
$scope.selectDataType = function(dataType, model){
contentTypeResource.getPropertyTypeScaffold(dataType.id)
.then(function(pt){
model.property.config = pt.config;
model.property.editor = pt.config;
model.property.view = pt.view;
$scope.closeOverLay();
});
};
*/
$scope.dataTypes = {
"userConfigured": [],
"userPropertyEditors": [],

View File

@@ -66,9 +66,6 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
var groupsArrayLength = $scope.contentType.groups.length;
var positionToPush = groupsArrayLength - 1;
//console.log(groupsArrayLength);
//console.log(positionToPush);
angular.forEach(compositeContentType.contentType.groups, function(compositionGroup){
// set inherited state on tab
@@ -238,6 +235,31 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
}
function addInitPropertyOnActiveTab() {
var addInitProperty = true;
angular.forEach($scope.contentType.groups, function(group){
if(group.tabState === 'active') {
angular.forEach(group.properties, function(property){
if(property.propertyState === "init") {
addInitProperty = false;
}
});
if(addInitProperty) {
group.properties.push({
propertyState: "init"
});
}
}
});
}
/* ---------- PROPERTIES ---------- */
@@ -267,19 +289,24 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
$scope.dialogModel = {};
$scope.dialogModel.title = "Edit property type settings";
$scope.dialogModel.property = property;
$scope.dialogModel.dataTypes = $scope.dataTypes;
$scope.dialogModel.view = "views/documentType/dialogs/editPropertySettings/editPropertySettings.html";
$scope.showDialog = true;
// set indicator on property to tell the dialog is open - is used to set focus on the element
property.dialogIsOpen = true;
$scope.dialogModel.submit = function(dt){
$scope.dialogModel.changePropertyEditor = function(property) {
$scope.choosePropertyType(property);
};
$scope.dialogModel.editDataType = function(property) {
$scope.configDataType(property);
};
$scope.dialogModel.submit = function(model){
property.dialogIsOpen = false;
$scope.showDialog = false;
$scope.dialogModel = null;
};
$scope.dialogModel.close = function(model){
@@ -289,12 +316,11 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
};
$scope.choosePropertyType = function(property, tab) {
$scope.choosePropertyType = function(property) {
$scope.showDialog = true;
$scope.dialogModel = {};
$scope.dialogModel.title = "Choose property type";
$scope.dialogModel.dataTypes = $scope.dataTypes;
$scope.dialogModel.view = "views/documentType/dialogs/property.html";
property.dialogIsOpen = true;
@@ -306,15 +332,14 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
property.config = propertyType.config;
property.editor = propertyType.editor;
property.view = propertyType.view;
property.dataType = selectedDataType;
property.dataTypeId = selectedDataType.id;
property.dataTypeIcon = selectedDataType.icon;
property.dataTypeName = selectedDataType.name;
property.propertyState = "active";
// open settings dialog
$scope.editPropertyTypeSettings(property);
// push new init property to scope
addInitProperty(tab);
// open data type configuration
$scope.configDataType(property);
// push new init tab to scope
addInitTab();
@@ -330,6 +355,66 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
};
$scope.configDataType = function(property) {
$scope.dialogModel = {};
$scope.dialogModel.title = "Edit data type";
$scope.dialogModel.dataType = {};
$scope.dialogModel.property = property;
$scope.dialogModel.view = "views/documentType/dialogs/editDataType/editDataType.html";
$scope.showDialog = true;
$scope.dialogModel.submit = function(model) {
var dataType = model.dataType;
var preValues = createPreValueProps(model.dataType.preValues);
var isNew = false;
dataTypeResource.save(dataType, preValues, isNew).then(function(dataType) {
contentTypeResource.getPropertyTypeScaffold(dataType.id).then(function(propertyType){
property.config = propertyType.config;
property.editor = propertyType.editor;
property.view = propertyType.view;
property.dataTypeId = dataType.id;
property.dataTypeIcon = dataType.icon;
property.dataTypeName = dataType.name;
// open settings dialog
$scope.editPropertyTypeSettings(property);
// push new init property to scope
addInitPropertyOnActiveTab();
});
});
};
$scope.dialogModel.close = function(model){
$scope.showDialog = false;
$scope.dialogModel = null;
};
};
function createPreValueProps(preVals) {
var preValues = [];
for (var i = 0; i < preVals.length; i++) {
preValues.push({
hideLabel: preVals[i].hideLabel,
alias: preVals[i].key,
description: preVals[i].description,
label: preVals[i].label,
view: preVals[i].view,
value: preVals[i].value
});
}
return preValues;
}
$scope.addItems = function(tab){
$scope.showDialog = true;