From 5fc22995086b2feb3e6ac5cb9d2aa4b547678e3b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 17 Jun 2015 10:44:40 +0200 Subject: [PATCH] Enable/disable list views, create custom list views, remove custom list views. Edit list view data types. --- .../less/components/umb-editor-sub-views.less | 4 + .../src/less/pages/document-type-editor.less | 54 ++++++ .../views/listview/listview.controller.js | 171 ++++++++++++++++++ .../documenttype/views/listview/listview.html | 45 ++++- 4 files changed, 270 insertions(+), 4 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/views/documenttype/views/listview/listview.controller.js diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-sub-views.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-sub-views.less index 33c0161311..a85300c957 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-sub-views.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-sub-views.less @@ -18,6 +18,10 @@ flex: 1; } +.sub-view-column-section { + margin-bottom: 20px; +} + /* ---------- TOOLS ---------- */ .umb-editor-sub-views-tools { diff --git a/src/Umbraco.Web.UI.Client/src/less/pages/document-type-editor.less b/src/Umbraco.Web.UI.Client/src/less/pages/document-type-editor.less index 95c47c1d24..2d18072f66 100644 --- a/src/Umbraco.Web.UI.Client/src/less/pages/document-type-editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/pages/document-type-editor.less @@ -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 { diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/listview/listview.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/listview/listview.controller.js new file mode 100644 index 0000000000..31508cb4b1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/listview/listview.controller.js @@ -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); diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/listview/listview.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/listview/listview.html index 21a70f317d..3a4c8f0844 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/listview/listview.html +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/listview/listview.html @@ -1,13 +1,50 @@ -
+
Enable list view
Configures the content item to show a sortable & searchable list of its children, the children will not be shown in the tree
- + +
+ +
+ +
+ + +
+ +
+ +
+
+
{{ listView.dataType.name }} (default)
+ +
+ Create custom list view + Remove custom list view +
+
+ +
+ + +
+ + + + + + + + +
+ +
+
\ No newline at end of file