init edit user editor
This commit is contained in:
Mads Rasmussen
@@ -21,7 +21,10 @@
|
||||
"lastLogin": "2014-04-25T01:32:21.196Z",
|
||||
"invitedBy": "Edward Flores",
|
||||
"createdBy": "",
|
||||
"state": "active"
|
||||
"state": "active",
|
||||
"userRoles": [],
|
||||
"startNodesContent": [],
|
||||
"startNodesMedia": []
|
||||
};
|
||||
deferred.resolve(user);
|
||||
return deferred.promise;
|
||||
|
||||
@@ -135,6 +135,7 @@
|
||||
@import "components/users/umb-users.less";
|
||||
@import "components/users/umb-user-role-picker-list.less";
|
||||
@import "components/users/umb-user-role-preview.less";
|
||||
@import "components/users/umb-user.less";
|
||||
|
||||
// Utilities
|
||||
@import "utilities/_flexbox.less";
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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-role-preview:last-of-type {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -10,6 +10,14 @@
|
||||
vm.user = {};
|
||||
|
||||
vm.goBack = goBack;
|
||||
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() {
|
||||
|
||||
@@ -30,6 +38,102 @@
|
||||
function goBack() {
|
||||
$location.path("/users/users/overview").search("subview", "users");
|
||||
}
|
||||
|
||||
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");
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
|
||||
@@ -21,6 +21,199 @@
|
||||
</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>
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
|
||||
<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>
|
||||
|
||||
</umb-editor-container>
|
||||
|
||||
<umb-editor-footer>
|
||||
@@ -45,4 +238,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