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

Enable/disable list views, create custom list views, remove custom list views. Edit list view data types.

Browse Source
This commit is contained in:
Mads Rasmussen
2015-06-17 10:44:40 +02:00
parent 71afa29570
commit 5fc2299508
4 changed files with 270 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/src/less/components/umb-editor-sub-views.less
View File

@@ -18,6 +18,10 @@
flex: 1;
}
.sub-view-column-section {
margin-bottom: 20px;
}
/* ---------- TOOLS ---------- */
.umb-editor-sub-views-tools {

54
src/Umbraco.Web.UI.Client/src/less/pages/document-type-editor.less
View File

@@ -723,6 +723,60 @@
}
/* ---------- LIST VIEW ---------- */
.list-view-container {
background: #f8f8f8;
border: 1px solid #CCCCCC;
display: flex;
border-radius: 5px;
animation: fadeIn 0.5s;
padding: 15px;
position: relative;
z-index: 1;
}
.list-view-container.list-view-settings-open {
border-bottom: transparent;
border-radius: 5px 5px 0 0;
}
.list-view-container .list-view-container-content {
display: flex;
}
.list-view-container .icon-list {
font-size: 20px;
color: #d9d9d9;
margin-right: 10px;
}
.list-view-container .list-view-name {
margin-right: 5px;
font-size: 14px;
font-weight: bold;
float: left;
}
.list-view-container .list-view-create-new {
font-size: 12px;
color: @blue;
}
.list-view-container .list-view-remove-new {
font-size: 12px;
color: @red;
}
.list-view-settings {
border: 1px dashed #d9d9d9;
border-radius: 0 0 5px 5px;
padding: 50px 20px 20px 20px;
position: relative;
top: -20px;
z-index: 0;
}
/* ---------- DIALOG ---------- */
.dialog-grid {

171
src/Umbraco.Web.UI.Client/src/views/documenttype/views/listview/listview.controller.js Normal file
View File

@@ -0,0 +1,171 @@
/**
* @ngdoc controller
* @name Umbraco.Editors.DocumentType.ListViewController
* @function
*
* @description
* The controller for the content type editor list view section
*/
function ListViewController($scope, contentTypeResource, dataTypeResource) {
/* ---------- SCOPE VARIABLES ---------- */
$scope.listView = {};
$scope.listView.dataType = {};
$scope.listView.editDataTypeSettings = false;
$scope.listView.customListViewCreated = false;
/* ---------- INIT ---------- */
init();
function init() {
if($scope.contentType.isContainer) {
contentTypeResource.getAssignedListViewDataType($scope.contentType.id)
.then(function(dataType) {
$scope.listView.dataType = dataType;
$scope.listView.customListViewCreated = checkForCustomListView();
});
}
}
/* ----------- LIST VIEW --------- */
$scope.toggleListView = function() {
if($scope.contentType.isContainer) {
// add list view data type
contentTypeResource.getAssignedListViewDataType($scope.contentType.id)
.then(function(dataType) {
$scope.listView.dataType = dataType;
$scope.listView.customListViewCreated = checkForCustomListView();
});
} else {
$scope.listView.dataType = {};
}
};
/* ----------- LIST VIEW SETTINGS --------- */
$scope.toggleEditListViewDataTypeSettings = function() {
if(!$scope.listView.editDataTypeSettings) {
// get dataType
dataTypeResource.getById($scope.listView.dataType.id)
.then(function(dataType) {
// store data type
$scope.listView.dataType = dataType;
// show edit panel
$scope.listView.editDataTypeSettings = true;
});
} else {
// hide edit panel
$scope.listView.editDataTypeSettings = false;
}
};
$scope.saveListViewDataType = function() {
var preValues = createPreValueProps($scope.listView.dataType.preValues);
dataTypeResource.save($scope.listView.dataType, preValues, false).then(function(dataType) {
// store data type
$scope.listView.dataType = dataType;
// hide settings panel
$scope.listView.editDataTypeSettings = false;
});
};
/* ---------- CUSTOM LIST VIEW ---------- */
$scope.createCustomListViewDataType = function() {
dataTypeResource.createCustomListView($scope.contentType.alias).then(function(dataType) {
// store data type
$scope.listView.dataType = dataType;
// change state to custom list view
$scope.listView.customListViewCreated = true;
// show settings panel
$scope.listView.editDataTypeSettings = true;
});
};
$scope.removeCustomListDataType = function() {
// delete custom list view data type
dataTypeResource.deleteById($scope.listView.dataType.id).then(function(dataType) {
// get default data type
contentTypeResource.getAssignedListViewDataType($scope.contentType.id)
.then(function(dataType) {
// store data type
$scope.listView.dataType = dataType;
// change state to default list view
$scope.listView.customListViewCreated = false;
});
});
};
function checkForCustomListView() {
return $scope.listView.dataType.name === "List View - " + $scope.contentType.alias;
}
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;
}
}
angular.module("umbraco").controller("Umbraco.Editors.DocumentType.ListViewController", ListViewController);

45
src/Umbraco.Web.UI.Client/src/views/documenttype/views/listview/listview.html
View File

@@ -1,13 +1,50 @@
<div class="sub-view-columns">
<div class="sub-view-columns" ng-controller="Umbraco.Editors.DocumentType.ListViewController">
<div class="sub-view-column-left">
<h5>Enable list view</h5>
<small>Configures the content item to show a sortable & searchable list of its children, the children will not be shown in the tree</small>
</div>
<div class="sub-view-column-right">
<label class="checkbox no-indent">
<input type="checkbox" /> Yes
</label>
<div class="sub-view-column-section">
<label class="checkbox no-indent">
<input type="checkbox" ng-model="contentType.isContainer" ng-click="toggleListView()" /> Yes - enable list view
</label>
</div>
<div class="sub-view-column-section">
<!-- list view enabled -->
<div class="list-view-container" ng-if="contentType.isContainer" ng-class="{'list-view-settings-open': listView.editDataTypeSettings}">
<div class="list-view-container-content">
<i class="icon icon-list"></i>
<div>
<div>
<div class="list-view-name">{{ listView.dataType.name }} <em ng-if="!listView.customListViewCreated">(default)</em></div>
<a href="" ng-click="toggleEditListViewDataTypeSettings()"><i class="icon icon-settings"></i></a>
</div>
<a href="" class="list-view-create-new" ng-if="!listView.customListViewCreated" ng-click="createCustomListViewDataType()">Create custom list view</a>
<a href="" class="list-view-remove-new" ng-if="listView.customListViewCreated" ng-click="removeCustomListDataType()">Remove custom list view</a>
</div>
</div>
</div>
<!-- list view settings -->
<div class="list-view-settings form-horizontal" ng-if="listView.editDataTypeSettings" ng-class="{'list-view-settings-open': listView.editDataTypeSettings}">
<umb-property property="preValue" ng-repeat="preValue in listView.dataType.preValues">
<umb-editor model="preValue" is-pre-value="true"></umb-editor>
</umb-property>
<button type="button" class="btn" ng-click="toggleEditListViewDataTypeSettings()">Close</button>
<button type="button" class="btn btn-success" ng-click="saveListViewDataType()">Save list view</button>
</div>
</div>
</div>
</div>