Merge branch 'temp-U4-9827' into user-group-permissions
# Conflicts: # src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js # src/Umbraco.Web.UI.Client/src/less/belle.less
This commit is contained in:
Mads Rasmussen
+23
-4
@@ -57,12 +57,13 @@ Use this directive to render an umbraco button. The directive can be used to gen
|
||||
@param {callback} action The button action which should be performed when the button is clicked.
|
||||
@param {string=} href Url/Path to navigato to.
|
||||
@param {string=} type Set the button type ("button" or "submit").
|
||||
@param {string=} buttonStyle Set the style of the button. The directive uses the default bootstrap styles ("primary", "info", "success", "warning", "danger", "inverse", "link").
|
||||
@param {string=} buttonStyle Set the style of the button. The directive uses the default bootstrap styles ("primary", "info", "success", "warning", "danger", "inverse", "link", "block"). Pass in array to add multple styles [success,block].
|
||||
@param {string=} state Set a progress state on the button ("init", "busy", "success", "error").
|
||||
@param {string=} shortcut Set a keyboard shortcut for the button ("ctrl+c").
|
||||
@param {string=} label Set the button label.
|
||||
@param {string=} labelKey Set a localization key to make a multi lingual button ("general_buttonText").
|
||||
@param {string=} icon Set a button icon. Can only be used when buttonStyle is "link".
|
||||
@param {string=} icon Set a button icon.
|
||||
@param {string=} size Set a button icon ("xs", "m", "l", "xl").
|
||||
@param {boolean=} disabled Set to <code>true</code> to disable the button.
|
||||
**/
|
||||
|
||||
@@ -82,7 +83,24 @@ Use this directive to render an umbraco button. The directive can be used to gen
|
||||
}
|
||||
|
||||
if (scope.buttonStyle) {
|
||||
scope.style = "btn-" + scope.buttonStyle;
|
||||
|
||||
// make it possible to pass in multiple styles
|
||||
if(scope.buttonStyle.startsWith("[") && scope.buttonStyle.endsWith("]")) {
|
||||
|
||||
// when using an attr it will always be a string so we need to remove square brackets
|
||||
// and turn it into and array
|
||||
var withoutBrackets = scope.buttonStyle.replace(/[\[\]']+/g,'');
|
||||
// split array by , + make sure to catch whitespaces
|
||||
var array = withoutBrackets.split(/\s?,\s?/g);
|
||||
|
||||
angular.forEach(array, function(item){
|
||||
scope.style = scope.style + " " + "btn-" + item;
|
||||
});
|
||||
|
||||
} else {
|
||||
scope.style = "btn-" + scope.buttonStyle;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -122,7 +140,8 @@ Use this directive to render an umbraco button. The directive can be used to gen
|
||||
label: "@?",
|
||||
labelKey: "@?",
|
||||
icon: "@?",
|
||||
disabled: "="
|
||||
disabled: "=",
|
||||
size: "@?"
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
function UserPreviewDirective() {
|
||||
|
||||
function link(scope, el, attr, ctrl) {
|
||||
|
||||
}
|
||||
|
||||
var directive = {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
templateUrl: 'views/components/users/umb-user-preview.html',
|
||||
scope: {
|
||||
avatar: "=?",
|
||||
name: "=",
|
||||
allowRemove: "=?",
|
||||
onRemove: "&?"
|
||||
},
|
||||
link: link
|
||||
};
|
||||
|
||||
return directive;
|
||||
|
||||
}
|
||||
|
||||
angular.module('umbraco.directives').directive('umbUserPreview', UserPreviewDirective);
|
||||
|
||||
})();
|
||||
@@ -109,7 +109,33 @@
|
||||
"name": "Admin",
|
||||
"alias": "admin",
|
||||
"id": 1,
|
||||
"icon": "icon-medal"
|
||||
"icon": "icon-medal",
|
||||
"users": [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "Angela Stone",
|
||||
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/jina/128.jpg",
|
||||
"state": "active"
|
||||
},
|
||||
{
|
||||
"id": "1",
|
||||
"name": "Beverly Silva",
|
||||
"avatar": "",
|
||||
"state": "disabled"
|
||||
},
|
||||
{
|
||||
"id": "1",
|
||||
"name": "Ruth Turner",
|
||||
"avatar": "",
|
||||
"state": "pending"
|
||||
},
|
||||
{
|
||||
"id": "1",
|
||||
"name": "Arthur Welch",
|
||||
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/ashleyford/128.jpg",
|
||||
"state": "active"
|
||||
}
|
||||
]
|
||||
};
|
||||
deferred.resolve(user);
|
||||
return deferred.promise;
|
||||
|
||||
@@ -135,6 +135,8 @@
|
||||
@import "components/users/umb-users.less";
|
||||
@import "components/users/umb-user-group-picker-list.less";
|
||||
@import "components/users/umb-user-group-preview.less";
|
||||
@import "components/users/umb-user-preview.less";
|
||||
@import "components/users/umb-user.less";
|
||||
|
||||
// Utilities
|
||||
@import "utilities/_flexbox.less";
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.umb-button__icon {
|
||||
@@ -106,3 +107,29 @@
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Sizes */
|
||||
.umb-button--xs {
|
||||
padding: 5px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.umb-button--s {
|
||||
padding: 6px 16px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.umb-button--m {
|
||||
padding: 10px 24px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.umb-button--l {
|
||||
padding: 14px 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.umb-button--xl {
|
||||
padding: 18px 52px;
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -50,6 +50,12 @@
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.umb-avatar--xxl {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Colors */
|
||||
|
||||
.umb-avatar--white {
|
||||
@@ -68,7 +74,7 @@
|
||||
}
|
||||
|
||||
.umb-avatar--secondary {
|
||||
background-color: @purple-l1;
|
||||
background-color: @purple-l3;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
.umb-badge {
|
||||
padding: 6px 8px;
|
||||
margin: 0 5px 0 0;
|
||||
font-weight: 600;
|
||||
color: @black;
|
||||
background-color: @turquoise-washed;
|
||||
border-width: 1px;
|
||||
@@ -10,6 +9,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
// Colors
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
.umb-breadcrumbs__ancestor-link,
|
||||
.umb-breadcrumbs__ancestor-text {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
color: @gray-3;
|
||||
max-width: 150px;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid @gray-9;
|
||||
border-bottom: 1px solid @gray-8;
|
||||
}
|
||||
|
||||
.umb-user-group-preview:last-of-type {
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
.umb-user-preview {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid @gray-8;
|
||||
}
|
||||
|
||||
.umb-user-preview:last-of-type {
|
||||
border-bottom: none;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.umb-user-preview__avatar {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.umb-user-preview__content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.umb-user-preview__name {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: @black;
|
||||
margin-bottom: 3px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.umb-user-preview__actions {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.umb-user-preview__action {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: @gray-5;
|
||||
}
|
||||
|
||||
.umb-user-preview__action:hover {
|
||||
color: @turquoise;
|
||||
text-decoration: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.umb-user-preview__action--red:hover {
|
||||
color: @red;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
.test-group {
|
||||
border: 1px solid @gray-8;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.test-group-title {
|
||||
padding: 10px 20px;
|
||||
margin-bottom: 0;
|
||||
background-color: @gray-10;
|
||||
color: @black;
|
||||
border-bottom: none;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: @black;
|
||||
}
|
||||
|
||||
.test-group-content {
|
||||
padding: 20px;
|
||||
}
|
||||
@@ -87,7 +87,6 @@
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.umb-user__name {
|
||||
|
||||
@@ -8,25 +8,25 @@
|
||||
|
||||
<div ng-if="state !== 'init'" class="umb-button__overlay"></div>
|
||||
|
||||
<a ng-if="type === 'link'" href="{{href}}" class="btn umb-button__button {{style}}" ng-click="action(model)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}">
|
||||
<a ng-if="type === 'link'" href="{{href}}" class="btn umb-button__button {{style}} umb-button--{{size}}" ng-click="action(model)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}">
|
||||
<span class="umb-button__content" ng-class="{'-hidden': state !== 'init'}">
|
||||
<i ng-if="icon && buttonStyle==='link'" class="{{icon}} umb-button__icon"></i>
|
||||
<i ng-if="icon" class="{{icon}} umb-button__icon"></i>
|
||||
<localize ng-if="labelKey" key="{{labelKey}}">{{label}}</localize>
|
||||
<span ng-if="!labelKey">{{label}}</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<button ng-if="type === 'button'" type="button" class="btn umb-button__button {{style}}" ng-click="action(model)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}" ng-disabled="disabled">
|
||||
<button ng-if="type === 'button'" type="button" class="btn umb-button__button {{style}} umb-button--{{size}}" ng-click="action(model)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}" ng-disabled="disabled">
|
||||
<span class="umb-button__content" ng-class="{'-hidden': state !== 'init'}">
|
||||
<i ng-if="icon && buttonStyle==='link'" class="{{icon}} umb-button__icon"></i>
|
||||
<i ng-if="icon" class="{{icon}} umb-button__icon"></i>
|
||||
<localize ng-if="labelKey" key="{{labelKey}}">{{label}}</localize>
|
||||
<span ng-if="!labelKey">{{label}}</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button ng-if="type === 'submit'" type="submit" class="btn umb-button__button {{style}}" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}" ng-disabled="disabled">
|
||||
<button ng-if="type === 'submit'" type="submit" class="btn umb-button__button {{style}} umb-button--{{size}}" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}" ng-disabled="disabled">
|
||||
<span class="umb-button__content" ng-class="{'-hidden': state !== 'init'}">
|
||||
<i ng-if="icon && buttonStyle==='link'" class="{{icon}} umb-button__icon"></i>
|
||||
<i ng-if="icon" class="{{icon}} umb-button__icon"></i>
|
||||
<localize ng-if="labelKey" key="{{labelKey}}">{{label}}</localize>
|
||||
<span ng-if="!labelKey">{{label}}</span>
|
||||
</span>
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
<div class="umb-user-preview">
|
||||
|
||||
<div class="umb-user-preview__avatar">
|
||||
<umb-avatar
|
||||
size="xs"
|
||||
color="secondary"
|
||||
name="{{name}}"
|
||||
img-src="{{avatar}}">
|
||||
</umb-avatar>
|
||||
</div>
|
||||
|
||||
<div class="umb-user-preview__content">
|
||||
<div class="umb-user-preview__name">{{ name }}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-user-preview__actions">
|
||||
<a class="umb-user-preview__action umb-user-preview__action--red" title="Remove" href="" ng-if="allowRemove" ng-click="onRemove()">Remove</i></a>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
@@ -9,7 +9,12 @@
|
||||
vm.page = {};
|
||||
vm.userRole = {};
|
||||
|
||||
vm.goBack = goBack;
|
||||
vm.goToPage = goToPage;
|
||||
vm.openSectionPicker = openSectionPicker;
|
||||
vm.openContentPicker = openContentPicker;
|
||||
vm.openMediaPicker = openMediaPicker;
|
||||
vm.removeSelectedItem = removeSelectedItem;
|
||||
vm.getUserStateType = getUserStateType;
|
||||
|
||||
function init() {
|
||||
|
||||
@@ -18,6 +23,7 @@
|
||||
// get user
|
||||
usersResource.getUserRole().then(function (userRole) {
|
||||
vm.userRole = userRole;
|
||||
makeBreadcrumbs();
|
||||
});
|
||||
|
||||
// fake loading
|
||||
@@ -27,8 +33,83 @@
|
||||
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
$location.path("/users/users/overview").search("subview", "roles");
|
||||
function goToPage(ancestor) {
|
||||
$location.path(ancestor.path).search("subview", ancestor.subView);
|
||||
}
|
||||
|
||||
function openSectionPicker() {
|
||||
alert("open section picker");
|
||||
}
|
||||
|
||||
function openContentPicker() {
|
||||
vm.contentPicker = {
|
||||
title: "Select content start node",
|
||||
view: "contentpicker",
|
||||
multiPicker: true,
|
||||
show: true,
|
||||
submit: function(model) {
|
||||
if(model.selection) {
|
||||
vm.userRole.startNodesContent = model.selection;
|
||||
}
|
||||
vm.contentPicker.show = false;
|
||||
vm.contentPicker = null;
|
||||
},
|
||||
close: function(oldModel) {
|
||||
vm.contentPicker.show = false;
|
||||
vm.contentPicker = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function openMediaPicker() {
|
||||
vm.contentPicker = {
|
||||
title: "Select media start node",
|
||||
view: "treepicker",
|
||||
section: "media",
|
||||
treeAlias: "media",
|
||||
entityType: "media",
|
||||
multiPicker: true,
|
||||
show: true,
|
||||
submit: function(model) {
|
||||
if(model.selection) {
|
||||
vm.userRole.startNodesMedia = model.selection;
|
||||
}
|
||||
vm.contentPicker.show = false;
|
||||
vm.contentPicker = null;
|
||||
},
|
||||
close: function(oldModel) {
|
||||
vm.contentPicker.show = false;
|
||||
vm.contentPicker = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function removeSelectedItem(index, selection) {
|
||||
selection.splice(index, 1);
|
||||
}
|
||||
|
||||
function getUserStateType(state) {
|
||||
switch (state) {
|
||||
case "disabled" || "umbracoDisabled":
|
||||
return "danger";
|
||||
case "pending":
|
||||
return "warning";
|
||||
default:
|
||||
return "success";
|
||||
}
|
||||
}
|
||||
|
||||
function makeBreadcrumbs() {
|
||||
vm.breadcrumbs = [
|
||||
{
|
||||
"name": "Groups",
|
||||
"path": "/users/users/overview",
|
||||
"subView": "roles"
|
||||
},
|
||||
{
|
||||
"name": vm.userRole.name
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
@@ -8,25 +8,149 @@
|
||||
|
||||
<umb-editor-header
|
||||
name="vm.userRole.name"
|
||||
hide-icon="true"
|
||||
icon="vm.userRole.icon"
|
||||
hide-description="true"
|
||||
hide-alias="true">
|
||||
</umb-editor-header>
|
||||
|
||||
<umb-editor-container>
|
||||
|
||||
<umb-editor-sub-header>
|
||||
<umb-editor-sub-header-content-left>
|
||||
<a class="umb-package-details__back-link" href="" ng-click="vm.goBack()">← Back to roles</a>
|
||||
</umb-editor-sub-header-content-left>
|
||||
</umb-editor-sub-header>
|
||||
<div class="umb-packages-view-wrapper" style="padding: 0;">
|
||||
|
||||
<div class="umb-package-details">
|
||||
|
||||
<div class="umb-package-details__main-content">
|
||||
|
||||
<div class="test-group">
|
||||
<div class="test-group-title">Something</div>
|
||||
<div class="test-group-content block-form">
|
||||
|
||||
<umb-control-group label="Sections" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
|
||||
<umb-node-preview
|
||||
style="max-width: 100%;"
|
||||
ng-repeat="section in vm.userRole.sections"
|
||||
icon="section.icon"
|
||||
name="section.name"
|
||||
allow-remove="true"
|
||||
on-remove="vm.removeSelectedItem($index, vm.userRole.sections)">
|
||||
</umb-node-preview>
|
||||
|
||||
<a href=""
|
||||
style="max-width: 100%;"
|
||||
class="umb-node-preview-add"
|
||||
ng-click="vm.openUserRolePicker()"
|
||||
prevent-default>
|
||||
<localize key="general_add">Add</localize>
|
||||
</a>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="Content start nodes" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
|
||||
<umb-node-preview
|
||||
style="max-width: 100%;"
|
||||
ng-repeat="node in vm.userRole.startNodesContent"
|
||||
icon="node.icon"
|
||||
name="node.name"
|
||||
allow-remove="true"
|
||||
on-remove="vm.removeSelectedItem($index, vm.userRole.startNodesContent)">
|
||||
</umb-node-preview>
|
||||
|
||||
<a href=""
|
||||
style="max-width: 100%;"
|
||||
class="umb-node-preview-add"
|
||||
ng-click="vm.openContentPicker()"
|
||||
prevent-default>
|
||||
<localize key="general_add">Add</localize>
|
||||
</a>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="Media start nodes" description="Donec quis lacinia ligula. Suspendisse ultrices risus ante">
|
||||
<umb-node-preview
|
||||
style="max-width: 100%;"
|
||||
ng-repeat="node in vm.userRole.startNodesMedia"
|
||||
icon="node.icon"
|
||||
name="node.name"
|
||||
allow-remove="true"
|
||||
on-remove="vm.removeSelectedItem($index, vm.userRole.startNodesMedia)">
|
||||
</umb-node-preview>
|
||||
|
||||
<a href=""
|
||||
style="max-width: 100%;"
|
||||
class="umb-node-preview-add"
|
||||
ng-click="vm.openMediaPicker()"
|
||||
prevent-default>
|
||||
<localize key="general_add">Add</localize>
|
||||
</a>
|
||||
</umb-control-group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-group">
|
||||
<div class="test-group-title">Default permissions</div>
|
||||
<div class="test-group-content">Some content here</div>
|
||||
</div>
|
||||
|
||||
<div class="test-group">
|
||||
<div class="test-group-title">Granular permissions</div>
|
||||
<div class="test-group-content">Some content here</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__sidebar">
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
|
||||
<div class="umb-package-details__section-title">Users</div>
|
||||
|
||||
<umb-user-preview
|
||||
ng-repeat="user in vm.userRole.users"
|
||||
name="user.name"
|
||||
avatar="user.avatar"
|
||||
allow-remove="true"
|
||||
on-remove="vm.removeSelectedUser($index, vm.userRole.users)">
|
||||
</umb-user-preview>
|
||||
|
||||
<a href=""
|
||||
style="max-width: 100%;"
|
||||
class="umb-node-preview-add"
|
||||
ng-click="vm.openMediaPicker()"
|
||||
prevent-default>
|
||||
<localize key="general_add">Add</localize>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</umb-editor-container>
|
||||
|
||||
<umb-editor-footer>
|
||||
|
||||
<umb-editor-footer-content-left>
|
||||
|
||||
<umb-breadcrumbs
|
||||
ancestors="vm.breadcrumbs"
|
||||
allow-on-open="true"
|
||||
on-open="vm.goToPage(ancestor)">
|
||||
</umb-breadcrumbs>
|
||||
|
||||
</umb-editor-footer-content-left>
|
||||
|
||||
<umb-editor-footer-content-right>
|
||||
|
||||
<umb-button
|
||||
type="button"
|
||||
action="vm.goToPage(vm.breadcrumbs[0])"
|
||||
label="Return to list"
|
||||
label-key="buttons_returnToList">
|
||||
</umb-button>
|
||||
|
||||
<umb-button
|
||||
type="button"
|
||||
action="vm.save()"
|
||||
@@ -45,4 +169,25 @@
|
||||
|
||||
</form>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="vm.sectionPicker.show"
|
||||
model="vm.sectionPicker"
|
||||
view="vm.sectionPicker.view"
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="vm.contentPicker.show"
|
||||
model="vm.contentPicker"
|
||||
view="vm.contentPicker.view"
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="vm.mediaPicker.show"
|
||||
model="vm.mediaPicker"
|
||||
view="vm.mediaPicker.view"
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
|
||||
</div>
|
||||
@@ -8,8 +8,17 @@
|
||||
vm.loading = false;
|
||||
vm.page = {};
|
||||
vm.user = {};
|
||||
vm.breadcrumbs = [];
|
||||
|
||||
vm.goBack = goBack;
|
||||
vm.goToPage = goToPage;
|
||||
vm.openUserRolePicker = openUserRolePicker;
|
||||
vm.openContentPicker = openContentPicker;
|
||||
vm.openMediaPicker = openMediaPicker;
|
||||
vm.removeSelectedItem = removeSelectedItem;
|
||||
vm.disableUser = disableUser;
|
||||
vm.resetPassword = resetPassword;
|
||||
vm.getUserStateType = getUserStateType;
|
||||
vm.changeAvatar = changeAvatar;
|
||||
|
||||
function init() {
|
||||
|
||||
@@ -18,6 +27,7 @@
|
||||
// get user
|
||||
usersResource.getUser($routeParams.id).then(function (user) {
|
||||
vm.user = user;
|
||||
makeBreadcrumbs(vm.user);
|
||||
});
|
||||
|
||||
// fake loading
|
||||
@@ -27,8 +37,117 @@
|
||||
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
$location.path("/users/users/overview").search("subview", "users");
|
||||
function goToPage(ancestor) {
|
||||
$location.path(ancestor.path).search("subview", ancestor.subView);
|
||||
}
|
||||
|
||||
function openUserRolePicker() {
|
||||
vm.userRolePicker = {
|
||||
title: "Select user roles",
|
||||
view: "userrolepicker",
|
||||
selection: vm.user.userRoles,
|
||||
closeButtonLabel: "Cancel",
|
||||
show: true,
|
||||
submit: function(model) {
|
||||
// apply changes
|
||||
if(model.selection) {
|
||||
vm.user.userRoles = model.selection;
|
||||
}
|
||||
vm.userRolePicker.show = false;
|
||||
vm.userRolePicker = null;
|
||||
},
|
||||
close: function(oldModel) {
|
||||
// rollback on close
|
||||
if(oldModel.selection) {
|
||||
vm.user.userRoles = oldModel.selection;
|
||||
}
|
||||
vm.userRolePicker.show = false;
|
||||
vm.userRolePicker = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function openContentPicker() {
|
||||
vm.contentPicker = {
|
||||
title: "Select content start node",
|
||||
view: "contentpicker",
|
||||
multiPicker: true,
|
||||
show: true,
|
||||
submit: function(model) {
|
||||
if(model.selection) {
|
||||
vm.user.startNodesContent = model.selection;
|
||||
}
|
||||
vm.contentPicker.show = false;
|
||||
vm.contentPicker = null;
|
||||
},
|
||||
close: function(oldModel) {
|
||||
vm.contentPicker.show = false;
|
||||
vm.contentPicker = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function openMediaPicker() {
|
||||
vm.contentPicker = {
|
||||
title: "Select media start node",
|
||||
view: "treepicker",
|
||||
section: "media",
|
||||
treeAlias: "media",
|
||||
entityType: "media",
|
||||
multiPicker: true,
|
||||
show: true,
|
||||
submit: function(model) {
|
||||
if(model.selection) {
|
||||
vm.user.startNodesMedia = model.selection;
|
||||
}
|
||||
vm.contentPicker.show = false;
|
||||
vm.contentPicker = null;
|
||||
},
|
||||
close: function(oldModel) {
|
||||
vm.contentPicker.show = false;
|
||||
vm.contentPicker = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function removeSelectedItem(index, selection) {
|
||||
selection.splice(index, 1);
|
||||
}
|
||||
|
||||
function disableUser() {
|
||||
alert("disable user");
|
||||
}
|
||||
|
||||
function resetPassword() {
|
||||
alert("reset password");
|
||||
}
|
||||
|
||||
function getUserStateType(state) {
|
||||
switch (state) {
|
||||
case "disabled" || "umbracoDisabled":
|
||||
return "danger";
|
||||
case "pending":
|
||||
return "warning";
|
||||
default:
|
||||
return "success";
|
||||
}
|
||||
}
|
||||
|
||||
function changeAvatar() {
|
||||
alert("change avatar");
|
||||
}
|
||||
|
||||
function makeBreadcrumbs() {
|
||||
vm.breadcrumbs = [
|
||||
{
|
||||
"name": "Users",
|
||||
"path": "/users/users/overview",
|
||||
"subView": "users"
|
||||
},
|
||||
{
|
||||
"name": vm.user.name
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
@@ -15,18 +15,220 @@
|
||||
|
||||
<umb-editor-container>
|
||||
|
||||
<umb-editor-sub-header>
|
||||
<umb-editor-sub-header-content-left>
|
||||
<a class="umb-package-details__back-link" href="" ng-click="vm.goBack()">← Back to users</a>
|
||||
</umb-editor-sub-header-content-left>
|
||||
</umb-editor-sub-header>
|
||||
<div class="umb-packages-view-wrapper" style="padding: 0;">
|
||||
|
||||
<div class="umb-package-details">
|
||||
|
||||
<div class="umb-package-details__main-content">
|
||||
|
||||
<div class="test-group">
|
||||
<div class="test-group-title">Meta</div>
|
||||
<div class="test-group-content block-form">
|
||||
<umb-control-group label="Email" description="Orci varius natoque penatibus et magnis dis parturient montes">
|
||||
<input type="text"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_entername"
|
||||
class="input-block-level"
|
||||
ng-model="vm.user.email"
|
||||
umb-auto-focus />
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="Language" description="Orci varius natoque penatibus et magnis dis parturient montes">
|
||||
<select class="input-block-level">
|
||||
<option value="">Select language</option>
|
||||
</select>
|
||||
</umb-control-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-group">
|
||||
<div class="test-group-title">Permissions</div>
|
||||
<div class="test-group-content block-form">
|
||||
|
||||
<umb-control-group style="margin-bottom: 25px;" label="Roles" description="Aliquam laoreet metus porta nisi pellentesque">
|
||||
|
||||
<umb-user-role-preview
|
||||
ng-repeat="userRole in vm.user.userRoles"
|
||||
icon="userRole.icon"
|
||||
name="userRole.name"
|
||||
sections="userRole.sections"
|
||||
content-start-nodes="userRole.startNodesContent"
|
||||
media-start-nodes="userRole.startNodesMedia"
|
||||
allow-remove="true"
|
||||
on-remove="vm.removeSelectedItem($index, vm.user.userRoles)">
|
||||
</umb-user-role-preview>
|
||||
|
||||
<a href=""
|
||||
style="max-width: 100%;"
|
||||
class="umb-node-preview-add"
|
||||
ng-click="vm.openUserRolePicker()"
|
||||
prevent-default>
|
||||
<localize key="general_add">Add</localize>
|
||||
</a>
|
||||
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group style="margin-bottom: 25px;" label="Content start nodes" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
|
||||
|
||||
<umb-node-preview
|
||||
style="max-width: 100%;"
|
||||
ng-repeat="node in vm.user.startNodesContent"
|
||||
icon="node.icon"
|
||||
name="node.name"
|
||||
allow-remove="true"
|
||||
on-remove="vm.removeSelectedItem($index, vm.user.startNodesContent)">
|
||||
</umb-node-preview>
|
||||
|
||||
<a href=""
|
||||
style="max-width: 100%;"
|
||||
class="umb-node-preview-add"
|
||||
ng-click="vm.openContentPicker()"
|
||||
prevent-default>
|
||||
<localize key="general_add">Add</localize>
|
||||
</a>
|
||||
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="Media start nodes" description="Donec quis lacinia ligula. Suspendisse ultrices risus ante">
|
||||
|
||||
<umb-node-preview
|
||||
style="max-width: 100%;"
|
||||
ng-repeat="node in vm.user.startNodesMedia"
|
||||
icon="node.icon"
|
||||
name="node.name"
|
||||
allow-remove="true"
|
||||
on-remove="vm.removeSelectedItem($index, vm.user.startNodesMedia)">
|
||||
</umb-node-preview>
|
||||
|
||||
<a href=""
|
||||
style="max-width: 100%;"
|
||||
class="umb-node-preview-add"
|
||||
ng-click="vm.openMediaPicker()"
|
||||
prevent-default>
|
||||
<localize key="general_add">Add</localize>
|
||||
</a>
|
||||
|
||||
</umb-control-group>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__sidebar">
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
|
||||
<div class="flex flex-column justify-center items-center" style="margin-bottom: 20px;">
|
||||
<umb-avatar
|
||||
color="secondary"
|
||||
size="xxl"
|
||||
name="{{vm.user.name}}"
|
||||
img-src="{{vm.user.avatar}}">
|
||||
</umb-avatar>
|
||||
<umb-button
|
||||
type="button"
|
||||
button-style="link"
|
||||
action="vm.changeAvatar()"
|
||||
label="Change avatar">
|
||||
</umb-button>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">Status</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
<umb-badge
|
||||
style="margin-top: 4px;"
|
||||
size="s"
|
||||
ng-if="user.state !== 'active'"
|
||||
color="{{vm.getUserStateType(vm.user.state)}}">
|
||||
{{ vm.user.state }}
|
||||
</umb-badge>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">Last login:</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
<span ng-if="vm.user.lastLogin">{{ vm.user.lastLogin }}</span>
|
||||
<span ng-if="!vm.user.lastLogin">The user has not logged in yet</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.user.invitedBy">
|
||||
<div class="umb-package-details__information-item-label">Invited by:</div>
|
||||
<div class="umb-package-details__information-item-content">{{ vm.user.invitedBy }}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.user.createdBy">
|
||||
<div class="umb-package-details__information-item-label">Created by:</div>
|
||||
<div class="umb-package-details__information-item-content">{{ vm.user.createdBy }}</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px;">
|
||||
<div style="margin-bottom: 10px;">
|
||||
<umb-button
|
||||
ng-if="vm.user.state === 'active'"
|
||||
type="button"
|
||||
button-style="[danger,block]"
|
||||
action="vm.disableUser()"
|
||||
label="Disable user"
|
||||
size="m">
|
||||
</umb-button>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 10px;">
|
||||
<umb-button
|
||||
ng-if="vm.user.state === 'disabled'"
|
||||
type="button"
|
||||
button-style="[success,block]"
|
||||
action="vm.enableUser()"
|
||||
label="Enable user"
|
||||
size="m">
|
||||
</umb-button>
|
||||
</div>
|
||||
|
||||
<umb-button
|
||||
type="button"
|
||||
button-style="[info,block]"
|
||||
action="vm.resetPassword()"
|
||||
label="Reset password"
|
||||
size="m">
|
||||
</umb-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</umb-editor-container>
|
||||
|
||||
<umb-editor-footer>
|
||||
|
||||
<umb-editor-footer-content-left>
|
||||
|
||||
<umb-breadcrumbs
|
||||
ancestors="vm.breadcrumbs"
|
||||
allow-on-open="true"
|
||||
on-open="vm.goToPage(ancestor)">
|
||||
</umb-breadcrumbs>
|
||||
|
||||
</umb-editor-footer-content-left>
|
||||
|
||||
<umb-editor-footer-content-right>
|
||||
|
||||
<umb-button
|
||||
type="button"
|
||||
action="vm.goToPage(vm.breadcrumbs[0])"
|
||||
label="Return to list"
|
||||
label-key="buttons_returnToList">
|
||||
</umb-button>
|
||||
|
||||
<umb-button
|
||||
type="button"
|
||||
action="vm.save()"
|
||||
@@ -45,4 +247,25 @@
|
||||
|
||||
</form>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="vm.userRolePicker.show"
|
||||
model="vm.userRolePicker"
|
||||
view="vm.userRolePicker.view"
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="vm.contentPicker.show"
|
||||
model="vm.contentPicker"
|
||||
view="vm.contentPicker.view"
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="vm.mediaPicker.show"
|
||||
model="vm.mediaPicker"
|
||||
view="vm.mediaPicker.view"
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user