Change flow when adding properties/data types
This commit is contained in:
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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;
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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": [],
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user