fixes: U4-10054 Prototype granular permissions on user group
This commit is contained in:
Mads Rasmussen
@@ -103,6 +103,7 @@
|
||||
icon: "=?",
|
||||
name: "=",
|
||||
description: "=?",
|
||||
permissions: "=?",
|
||||
published: "=?",
|
||||
sortable: "=?",
|
||||
allowOpen: "=?",
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
function PermissionDirective() {
|
||||
|
||||
function link(scope, el, attr, ctrl) {
|
||||
|
||||
scope.change = function() {
|
||||
scope.selected = !scope.selected;
|
||||
if(scope.onChange) {
|
||||
scope.onChange({'selected': scope.selected});
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
var directive = {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
templateUrl: 'views/components/users/umb-permission.html',
|
||||
scope: {
|
||||
name: "=",
|
||||
description: "=?",
|
||||
selected: "=",
|
||||
onChange: "&"
|
||||
},
|
||||
link: link
|
||||
};
|
||||
|
||||
return directive;
|
||||
|
||||
}
|
||||
|
||||
angular.module('umbraco.directives').directive('umbPermission', PermissionDirective);
|
||||
|
||||
})();
|
||||
@@ -123,7 +123,6 @@
|
||||
@import "components/umb-badge.less";
|
||||
@import "components/umb-nested-content.less";
|
||||
@import "components/umb-checkmark.less";
|
||||
@import "components/umb-permission.less";
|
||||
|
||||
@import "components/buttons/umb-button.less";
|
||||
@import "components/buttons/umb-button-group.less";
|
||||
@@ -141,6 +140,9 @@
|
||||
@import "components/users/umb-user-preview.less";
|
||||
@import "components/users/umb-user-picker-list.less";
|
||||
@import "components/users/umb-user.less";
|
||||
@import "components/users/umb-permission-group.less";
|
||||
@import "components/users/umb-permission.less";
|
||||
|
||||
|
||||
// Utilities
|
||||
@import "utilities/layout/_display.less";
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
display: flex;
|
||||
border-bottom: 1px solid @gray-9;
|
||||
padding: 7px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.umb-permission:last-of-type {
|
||||
@@ -0,0 +1,111 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function NodePermissionsController($scope) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
function onInit() {
|
||||
|
||||
// fake node permissions
|
||||
$scope.model.node.permissions = [
|
||||
{
|
||||
"groupName": "Group 1",
|
||||
"permissions": [
|
||||
{
|
||||
"name": "Edit content (save)",
|
||||
"description": "Lorem ipsum dolor sit amet",
|
||||
"checked": false
|
||||
},
|
||||
{
|
||||
"name": "Browse content",
|
||||
"description": "Nullam egestas porta mi, quis finibus nisl commodo a",
|
||||
"checked": true
|
||||
},
|
||||
{
|
||||
"name": "Publish",
|
||||
"description": "Aliquam molestie consequat felis",
|
||||
"checked": true
|
||||
},
|
||||
{
|
||||
"name": "Send to publish",
|
||||
"description": "Sed pharetra sodales enim quis molestie",
|
||||
"checked": true
|
||||
},
|
||||
{
|
||||
"name": "Delete",
|
||||
"description": "Vitae porta mauris turpis sit amet ligula",
|
||||
"checked": true
|
||||
},
|
||||
{
|
||||
"name": "Create",
|
||||
"description": "Vestibulum pretium sapien id turpis elementum viverra",
|
||||
"checked": true
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "Group 2",
|
||||
"permissions": [
|
||||
{
|
||||
"name": "Move",
|
||||
"description": "Vestibulum pretium sapien id turpis elementum viverra",
|
||||
"checked": true
|
||||
},
|
||||
{
|
||||
"name": "Copy",
|
||||
"description": "Phasellus sagittis, dolor vel accumsan porttitor",
|
||||
"checked": false
|
||||
},
|
||||
{
|
||||
"name": "Sort",
|
||||
"description": "Aliquam erat volutpat",
|
||||
"checked": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "Group 3",
|
||||
"permissions": [
|
||||
{
|
||||
"name": "Culture and Hostnames",
|
||||
"description": "Lorem ipsum dolor sit amet",
|
||||
"checked": true
|
||||
},
|
||||
{
|
||||
"name": "Audit Trail",
|
||||
"description": "Lorem ipsum dolor sit amet",
|
||||
"checked": true
|
||||
},
|
||||
{
|
||||
"name": "Translate",
|
||||
"description": "Lorem ipsum dolor sit amet",
|
||||
"checked": true
|
||||
},
|
||||
{
|
||||
"name": "Change document type",
|
||||
"description": "Lorem ipsum dolor sit amet",
|
||||
"checked": true
|
||||
},
|
||||
{
|
||||
"name": "Public access",
|
||||
"description": "Lorem ipsum dolor sit amet",
|
||||
"checked": true
|
||||
},
|
||||
{
|
||||
"name": "Rollback",
|
||||
"description": "Lorem ipsum dolor sit amet",
|
||||
"checked": true
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
onInit();
|
||||
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Overlays.NodePermissionsController", NodePermissionsController);
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,13 @@
|
||||
<div class="block-form" ng-controller="Umbraco.Overlays.NodePermissionsController as vm">
|
||||
<p class="abstract" style="margin-bottom: 20px;">Nam tellus purus, malesuada sed purus ut, semper sollicitudin odio.</p>
|
||||
<umb-control-group
|
||||
ng-repeat="group in model.node.permissions"
|
||||
label="{{group.groupName}}">
|
||||
<umb-permission
|
||||
ng-repeat="permission in group.permissions"
|
||||
name="permission.name"
|
||||
description="permission.description"
|
||||
selected="permission.checked">
|
||||
</umb-permission>
|
||||
</umb-control-group>
|
||||
</div>
|
||||
@@ -1,8 +1,16 @@
|
||||
<div class="umb-node-preview" ng-class="{'umb-node-preview--sortable': sortable, 'umb-node-preview--unpublished': published === false }">
|
||||
<i ng-if="icon" class="umb-node-preview__icon {{ icon }}"></i>
|
||||
<div class="umb-node-preview__content">
|
||||
<div class="umb-node-preview__name">{{ name }}</div>
|
||||
<div ng-if="description" class="umb-node-preview__description">{{ description }}</div>
|
||||
<div class="flex items-center">
|
||||
<div class="umb-node-preview__name">{{ name }}</div>
|
||||
<div ng-if="description" class="umb-node-preview__description">{{ description }}</div>
|
||||
</div>
|
||||
<div class="umb-user-group-preview__permission" ng-if="permissions">
|
||||
<span>
|
||||
<span class="bold">Permissions:</span>
|
||||
<span ng-repeat="permission in permissions">{{ permission.name }}<span ng-if="!$last">, </span></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="umb-node-preview__actions">
|
||||
<a class="umb-node-preview__action" title="Open" href="" ng-if="allowOpen" ng-click="onOpen()"><localize key="general_open">Open</localize></a>
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
<div class="umb-permission">
|
||||
<umb-toggle
|
||||
class="umb-permission__toggle"
|
||||
checked="selected"
|
||||
on-click="change(checked)">
|
||||
</umb-toggle>
|
||||
<div ng-click="change(checked)">
|
||||
<div>{{ name }} </div>
|
||||
<div class="umb-permission__description">{{ description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -14,7 +14,6 @@
|
||||
vm.editPermissions = editPermissions;
|
||||
vm.setPermissions = setPermissions;
|
||||
vm.removePermissions = removePermissions;
|
||||
vm.togglePermission = togglePermission;
|
||||
vm.cancelManagePermissions = cancelManagePermissions;
|
||||
|
||||
function onInit() {
|
||||
@@ -126,10 +125,6 @@
|
||||
vm.viewState = state;
|
||||
}
|
||||
|
||||
function togglePermission(permission) {
|
||||
permission.checked = !permission.checked;
|
||||
}
|
||||
|
||||
function editPermissions(group) {
|
||||
vm.selectedUserGroup = group;
|
||||
setViewSate("managePermissions");
|
||||
|
||||
@@ -54,31 +54,20 @@
|
||||
<div ng-show="vm.viewState === 'managePermissions'">
|
||||
|
||||
<div class="umb-dialog-body" ng-cloak>
|
||||
<div class="umb-pane">
|
||||
|
||||
<div class="umb-pane block-form">
|
||||
<h5>Set permissions for {{ vm.selectedUserGroup.name }}</h5>
|
||||
<p class="abstract" style="margin-bottom: 20px;">Nam tellus purus, malesuada sed purus ut, semper sollicitudin odio.</p>
|
||||
|
||||
<div ng-repeat="group in vm.selectedUserGroup.permissions">
|
||||
|
||||
<h5>{{ group.groupName }}</h5>
|
||||
|
||||
<div class="umb-permission" ng-repeat="permission in group.permissions">
|
||||
<umb-toggle
|
||||
class="umb-permission__toggle"
|
||||
checked="permission.checked"
|
||||
on-click="vm.togglePermission(permission)">
|
||||
</umb-toggle>
|
||||
<div>
|
||||
<div>{{ permission.name }} </div>
|
||||
<div class="umb-permission__description">{{ permission.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<umb-control-group
|
||||
ng-repeat="group in vm.selectedUserGroup.permissions"
|
||||
label="{{group.groupName}}">
|
||||
<umb-permission
|
||||
ng-repeat="permission in group.permissions"
|
||||
name="permission.name"
|
||||
description="permission.description"
|
||||
selected="permission.checked">
|
||||
</umb-permission>
|
||||
</umb-control-group>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
vm.getUserStateType = getUserStateType;
|
||||
vm.save = save;
|
||||
vm.togglePermission = togglePermission;
|
||||
vm.openGranularPermissionsPicker = openGranularPermissionsPicker;
|
||||
|
||||
function init() {
|
||||
|
||||
@@ -166,6 +167,66 @@
|
||||
};
|
||||
}
|
||||
|
||||
function openGranularPermissionsPicker() {
|
||||
vm.contentPicker = {
|
||||
title: "Select node",
|
||||
view: "contentpicker",
|
||||
hideSubmitButton: true,
|
||||
show: true,
|
||||
submit: function (model) {
|
||||
if (model.selection) {
|
||||
setPermissionsForNode(model.selection[0]);
|
||||
}
|
||||
},
|
||||
close: function (oldModel) {
|
||||
vm.firstPicker.show = false;
|
||||
vm.firstPicker = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function setPermissionsForNode(node) {
|
||||
vm.nodePermissions = {
|
||||
title: "Set permissions for " + node.name,
|
||||
view: "nodepermissions",
|
||||
node: node,
|
||||
show: true,
|
||||
submit: function (model) {
|
||||
|
||||
if (model && model.node && model.node.permissions) {
|
||||
// clear allowed permissions before we make the list
|
||||
// so we don't have deplicates
|
||||
node.allowedPermissions = [];
|
||||
|
||||
// get list of checked permissions
|
||||
angular.forEach(model.node.permissions, function (permissionGroup) {
|
||||
angular.forEach(permissionGroup.permissions, function (permission) {
|
||||
if (permission.checked) {
|
||||
node.allowedPermissions.push(permission);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if(!vm.userGroup.nodes) {
|
||||
vm.userGroup.nodes = [];
|
||||
}
|
||||
vm.userGroup.nodes.push(node);
|
||||
}
|
||||
|
||||
// close node permisssions overlay
|
||||
vm.nodePermissions.show = false;
|
||||
vm.nodePermissions = null;
|
||||
// close content picker overlay
|
||||
vm.contentPicker.show = false;
|
||||
vm.contentPicker = null;
|
||||
},
|
||||
close: function (oldModel) {
|
||||
vm.nodePermissions.show = false;
|
||||
vm.nodePermissions = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function removeSelectedItem(index, selection) {
|
||||
if (selection && selection.length > 0) {
|
||||
selection.splice(index, 1);
|
||||
|
||||
@@ -89,32 +89,45 @@
|
||||
|
||||
<div class="test-group">
|
||||
<div class="test-group-title">Default permissions</div>
|
||||
|
||||
<div ng-repeat="(category, permissions) in vm.userGroup.permissions">
|
||||
<div class="test-group-sub-header" >
|
||||
{{ category }}
|
||||
</div>
|
||||
|
||||
<div class="test-group-content">
|
||||
<div class="umb-permission" ng-repeat="permission in permissions">
|
||||
<umb-toggle
|
||||
class="umb-permission__toggle"
|
||||
checked="permission.checked"
|
||||
on-click="vm.togglePermission(permission)">
|
||||
</umb-toggle>
|
||||
<div>
|
||||
<div>{{ permission.name }}</div>
|
||||
<div class="umb-permission__description">{{ permission.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="test-group-content block-form">
|
||||
<umb-control-group
|
||||
ng-repeat="(category, permissions) in vm.userGroup.permissions"
|
||||
label="{{ category }}">
|
||||
<umb-permission
|
||||
ng-repeat="permission in permissions"
|
||||
name="permission.name"
|
||||
description="permission.description"
|
||||
selected="permission.checked">
|
||||
</umb-permission>
|
||||
</umb-control-group>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="test-group">
|
||||
<div class="test-group-title">Granular permissions</div>
|
||||
<div class="test-group-content">Some content here</div>
|
||||
<div class="test-group-content block-form">
|
||||
<umb-control-group label="Nodes" description="Donec quis lacinia ligula. Suspendisse ultrices risus ante">
|
||||
|
||||
<umb-node-preview
|
||||
ng-repeat="node in vm.userGroup.nodes"
|
||||
style="max-width: 100%;"
|
||||
icon="node.icon"
|
||||
name="node.name"
|
||||
permissions="node.allowedPermissions"
|
||||
allow-remove="true"
|
||||
on-remove="vm.removeSelectedItem($index, vm.userGroup.nodes)">
|
||||
</umb-node-preview>
|
||||
|
||||
<a href=""
|
||||
style="max-width: 100%;"
|
||||
class="umb-node-preview-add"
|
||||
ng-click="vm.openGranularPermissionsPicker()"
|
||||
prevent-default>
|
||||
<localize key="general_add">Add</localize>
|
||||
</a>
|
||||
</umb-control-group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -219,4 +232,11 @@
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="vm.nodePermissions.show"
|
||||
model="vm.nodePermissions"
|
||||
view="vm.nodePermissions.view"
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user