restructure so we can use subviews for users and user roles
This commit is contained in:
Mads Rasmussen
@@ -1,230 +1,30 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function UsersOverviewController($scope, $timeout, $location, usersResource) {
|
||||
function UsersOverviewController($scope) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
vm.page = {};
|
||||
vm.page.name = "Users";
|
||||
vm.users = [];
|
||||
vm.userGroups = [];
|
||||
vm.userStates = [];
|
||||
vm.selection = [];
|
||||
vm.newUser = {};
|
||||
vm.newUser.userGroups = [];
|
||||
vm.usersViewState = 'overview';
|
||||
|
||||
vm.usersPagination = {
|
||||
"pageNumber": 1,
|
||||
"totalPages": 5
|
||||
}
|
||||
|
||||
vm.layouts = [
|
||||
vm.page.navigation = [
|
||||
{
|
||||
"icon": "icon-thumbnails-small",
|
||||
"path": "1",
|
||||
"selected": true
|
||||
"name": "Users",
|
||||
"icon": "icon-user",
|
||||
"view": "views/usersV2/views/users/users.html",
|
||||
"active": true
|
||||
},
|
||||
{
|
||||
"icon": "icon-list",
|
||||
"path": "2",
|
||||
"selected": true
|
||||
"name": "Roles",
|
||||
"icon": "icon-users",
|
||||
"view": "views/usersV2/views/roles/roles.html"
|
||||
}
|
||||
];
|
||||
|
||||
vm.activeLayout = {
|
||||
"icon": "icon-thumbnails-small",
|
||||
"path": "1",
|
||||
"selected": true
|
||||
};
|
||||
|
||||
vm.defaultButton = {
|
||||
labelKey:"users_inviteUser",
|
||||
handler: function() {
|
||||
vm.setUsersViewState('inviteUser');
|
||||
}
|
||||
};
|
||||
|
||||
vm.subButtons = [
|
||||
{
|
||||
labelKey: "users_createUser",
|
||||
handler: function () {
|
||||
vm.setUsersViewState('createUser');
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
vm.setUsersViewState = setUsersViewState;
|
||||
vm.getUserStateType = getUserStateType;
|
||||
vm.selectLayout = selectLayout;
|
||||
vm.selectUser = selectUser;
|
||||
vm.clearSelection = clearSelection;
|
||||
vm.goToUser = goToUser;
|
||||
vm.disableUser = disableUser;
|
||||
vm.openUserGroupPicker = openUserGroupPicker;
|
||||
vm.removeSelectedUserGroup = removeSelectedUserGroup;
|
||||
vm.selectAll = selectAll;
|
||||
vm.areAllSelected = areAllSelected;
|
||||
|
||||
function init() {
|
||||
|
||||
vm.loading = true;
|
||||
|
||||
// Get users
|
||||
usersResource.getUsers().then(function (users) {
|
||||
vm.users = users;
|
||||
vm.userStates = getUserStates(vm.users);
|
||||
formatDates(vm.users);
|
||||
});
|
||||
|
||||
// Get user groups
|
||||
usersResource.getUserGroups().then(function (userGroups) {
|
||||
vm.userGroups = userGroups;
|
||||
});
|
||||
|
||||
// fake loading
|
||||
$timeout(function () {
|
||||
vm.loading = false;
|
||||
}, 500);
|
||||
|
||||
}
|
||||
|
||||
function setUsersViewState(state) {
|
||||
vm.usersViewState = state;
|
||||
}
|
||||
|
||||
function getUserStateType(state) {
|
||||
switch (state) {
|
||||
case "disabled" || "umbracoDisabled":
|
||||
return "danger";
|
||||
case "pending":
|
||||
return "warning";
|
||||
default:
|
||||
return "success";
|
||||
}
|
||||
}
|
||||
|
||||
function selectLayout(selectedLayout) {
|
||||
|
||||
angular.forEach(vm.layouts, function(layout){
|
||||
layout.active = false;
|
||||
});
|
||||
|
||||
selectedLayout.active = true;
|
||||
vm.activeLayout = selectedLayout;
|
||||
}
|
||||
|
||||
function selectUser(user, selection) {
|
||||
if(user.selected) {
|
||||
var index = selection.indexOf(user.id);
|
||||
selection.splice(index, 1);
|
||||
user.selected = false;
|
||||
} else {
|
||||
user.selected = true;
|
||||
vm.selection.push(user.id);
|
||||
}
|
||||
}
|
||||
|
||||
function clearSelection() {
|
||||
angular.forEach(vm.users, function(user){
|
||||
user.selected = false;
|
||||
});
|
||||
vm.selection = [];
|
||||
}
|
||||
|
||||
function goToUser(user, event) {
|
||||
$location.path('users/usersV2/edit/' + user.id);
|
||||
}
|
||||
|
||||
function disableUser() {
|
||||
alert("disable users");
|
||||
}
|
||||
|
||||
function openUserGroupPicker(event) {
|
||||
vm.userGroupPicker = {
|
||||
title: "Select user groups",
|
||||
view: "itempicker",
|
||||
event: event,
|
||||
availableItems: vm.userGroups,
|
||||
selectedItems: vm.newUser.userGroups,
|
||||
show: true,
|
||||
submit: function(model) {
|
||||
|
||||
if(model.selectedItem) {
|
||||
vm.newUser.userGroups.push(model.selectedItem);
|
||||
}
|
||||
|
||||
vm.userGroupPicker.show = false;
|
||||
vm.userGroupPicker = null;
|
||||
},
|
||||
close: function(oldModel) {
|
||||
vm.userGroupPicker.show = false;
|
||||
vm.userGroupPicker = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function removeSelectedUserGroup(index, selection) {
|
||||
selection.splice(index, 1);
|
||||
}
|
||||
|
||||
function selectAll() {
|
||||
if(areAllSelected()) {
|
||||
vm.selection = [];
|
||||
angular.forEach(vm.users, function(user){
|
||||
user.selected = false;
|
||||
});
|
||||
} else {
|
||||
// clear selection so we don't add the same user twice
|
||||
vm.selection = [];
|
||||
// select all users
|
||||
angular.forEach(vm.users, function(user){
|
||||
user.selected = true;
|
||||
vm.selection.push(user.id);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function areAllSelected() {
|
||||
if(vm.selection.length === vm.users.length) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// helpers
|
||||
function getUserStates(users) {
|
||||
var userStates = [];
|
||||
|
||||
angular.forEach(users, function(user) {
|
||||
|
||||
var newUserState = {"name": user.state, "count": 1};
|
||||
var userStateExists = false;
|
||||
|
||||
angular.forEach(userStates, function(userState){
|
||||
if(newUserState.name === userState.name) {
|
||||
userState.count = userState.count + 1;
|
||||
userStateExists = true;
|
||||
}
|
||||
});
|
||||
|
||||
if(userStateExists === false) {
|
||||
userStates.push(newUserState);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
return userStates;
|
||||
}
|
||||
|
||||
function formatDates(users) {
|
||||
angular.forEach(users, function(user){
|
||||
if(user.lastLogin) {
|
||||
user.formattedLastLogin = moment(user.lastLogin).format("MMMM Do YYYY, HH:mm");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
init();
|
||||
|
||||
}
|
||||
|
||||
@@ -11,320 +11,15 @@
|
||||
name-locked="true"
|
||||
hide-icon="true"
|
||||
hide-description="true"
|
||||
navigation="vm.page.navigation"
|
||||
hide-alias="true">
|
||||
</umb-editor-header>
|
||||
|
||||
<umb-editor-container>
|
||||
|
||||
<!-- Users Overview -->
|
||||
<div ng-if="vm.usersViewState === 'overview'">
|
||||
|
||||
<umb-editor-sub-header>
|
||||
|
||||
<!-- No selection -->
|
||||
<umb-editor-sub-header-content-left ng-if="vm.selection.length === 0">
|
||||
<umb-button-group
|
||||
ng-if="vm.defaultButton"
|
||||
default-button="vm.defaultButton"
|
||||
sub-buttons="vm.subButtons">
|
||||
</umb-button-group>
|
||||
</umb-editor-sub-header-content-left>
|
||||
|
||||
<umb-editor-sub-header-content-right ng-if="vm.selection.length === 0">
|
||||
<umb-editor-sub-header-section>
|
||||
<umb-layout-selector
|
||||
ng-if="vm.layouts"
|
||||
layouts="vm.layouts"
|
||||
active-layout="vm.activeLayout"
|
||||
on-layout-select="vm.selectLayout">
|
||||
</umb-layout-selector>
|
||||
</umb-editor-sub-header-section>
|
||||
<umb-editor-sub-header-section>
|
||||
<ng-form class="form-search -no-margin-bottom pull-right" novalidate>
|
||||
<div class="inner-addon left-addon">
|
||||
<i class="icon icon-search" ng-click="enterSearch($event)"></i>
|
||||
<input
|
||||
class="form-control search-input"
|
||||
type="text"
|
||||
localize="placeholder"
|
||||
placeholder="@general_typeToSearch"
|
||||
ng-model="options.filter"
|
||||
ng-change="enterSearch()"
|
||||
ng-keydown="forceSearch($event)"
|
||||
prevent-enter-submit
|
||||
no-dirty-check>
|
||||
</div>
|
||||
</ng-form>
|
||||
</umb-editor-sub-header-section>
|
||||
</umb-editor-sub-header-content-right>
|
||||
|
||||
<!-- With selection -->
|
||||
<umb-editor-sub-header-content-left ng-if="vm.selection.length > 0">
|
||||
<umb-editor-sub-header-section>
|
||||
<umb-button
|
||||
type="button"
|
||||
label="Clear selection"
|
||||
label-key="buttons_clearSelection"
|
||||
action="vm.clearSelection()"
|
||||
disabled="actionInProgress">
|
||||
</umb-button>
|
||||
</umb-editor-sub-header-section>
|
||||
<umb-editor-sub-header-section>
|
||||
<strong>{{ vm.selection.length }} <localize key="general_of">of</localize> {{ vm.users.length }} <localize key="general_selected">selected</localize></strong>
|
||||
</umb-editor-sub-header-section>
|
||||
</umb-editor-sub-header-content-left>
|
||||
|
||||
<umb-editor-sub-header-content-right ng-if="vm.selection.length > 0">
|
||||
<umb-button
|
||||
type="button"
|
||||
button-style="link"
|
||||
label="Set group"
|
||||
icon="icon-users"
|
||||
action="vm.disableUser()">
|
||||
</umb-button>
|
||||
<umb-button
|
||||
type="button"
|
||||
button-style="link"
|
||||
label="Disable"
|
||||
icon="icon-block"
|
||||
action="vm.disableUser()">
|
||||
</umb-button>
|
||||
</umb-editor-sub-header-content-right>
|
||||
|
||||
</umb-editor-sub-header>
|
||||
|
||||
<!-- Filters
|
||||
<div class="flex justify-end">
|
||||
|
||||
<div class="dropdown pull-right">
|
||||
<a style="text-decoration: none;" class="btn btn-link dropdown-toggle" href="" ng-click="vm.showFilter = !vm.showFilter">
|
||||
Show:
|
||||
<span class="bold" style="text-decoration: underline; margin-left: 2px;">All</span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul ng-if="vm.showFilter" on-outside-click="vm.showFilter = false;" style="display: block;" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li style="padding: 5px 10px;">
|
||||
<div class="flex items-center">
|
||||
<input style="margin-right: 7px; margin-top: 2px;" type="checkbox" />All
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li ng-repeat="userGroup in vm.userGroups" style="padding: 5px 10px;">
|
||||
<div class="flex items-center">
|
||||
<input style="margin-right: 7px; margin-top: 2px;" type="checkbox" />
|
||||
{{ userGroup.name }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li ng-repeat="userState in vm.userStates" style="padding: 5px 10px;">
|
||||
<div class="flex items-center">
|
||||
<input style="margin-right: 7px; margin-top: 2px;" type="checkbox" />
|
||||
{{ userState.name }} ({{userState.count}})
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown pull-right">
|
||||
<a style="text-decoration: none;" class="btn btn-link dropdown-toggle" href="" data-toggle="dropdown">
|
||||
Order by:
|
||||
<span class="bold" style="text-decoration: underline; margin-left: 2px;">Last login</span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#" prevent-default>Last login</a></li>
|
||||
<li><a tabindex="-1" href="#" prevent-default>Name</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- Layout: Cards -->
|
||||
<div class="umb-users" ng-if="vm.activeLayout.path === '1'">
|
||||
<div class="umb-user" ng-repeat="user in vm.users" ng-class="{'umb-user--selected': user.selected}" ng-click="vm.selectUser(user, vm.selection)">
|
||||
<div class="umb-user__avatar">
|
||||
<umb-avatar
|
||||
size="l"
|
||||
color="secondary"
|
||||
name="{{user.name}}"
|
||||
img-src="{{user.avatar}}">
|
||||
</umb-avatar>
|
||||
<umb-badge
|
||||
class="umb-user__badge"
|
||||
size="xs"
|
||||
ng-if="user.state !== 'active'"
|
||||
color="{{vm.getUserStateType(user.state)}}">
|
||||
{{ user.state }}
|
||||
</umb-badge>
|
||||
</div>
|
||||
<div class="umb-user__checkmark" ng-if="user.selected"><umb-checkmark checked="user.selected" size="s"></umb-checkmark></div>
|
||||
<a class="umb-user__name" href="" ng-click="vm.goToUser(user)">{{user.name}}</a>
|
||||
<div class="umb-user__group">
|
||||
<span ng-repeat="group in user.userGroups">{{ group.name }}<span ng-if="!$last">, </span></span>
|
||||
</div>
|
||||
<div class="umb-user__divider"></div>
|
||||
<div class="umb-user__last-login">
|
||||
<div ng-if="user.formattedLastLogin">
|
||||
<div>Last login on</div>
|
||||
{{ user.formattedLastLogin }}
|
||||
</div>
|
||||
<div ng-if="!user.formattedLastLogin">
|
||||
<div>{{ user.name | umbWordLimit:1 }} has</div>
|
||||
not logged in yet
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Layout: Table -->
|
||||
<div ng-if="vm.activeLayout.path === '2'">
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="padding-left: 20px; width: 10px;">
|
||||
<a href="" style="text-decoration: none;" ng-click="vm.selectAll()"><umb-checkmark checked="vm.areAllSelected()" size="xs"></umb-checkmark></a>
|
||||
</th>
|
||||
<th style="width: 70px;"></th>
|
||||
<th>Name</th>
|
||||
<th>User group</th>
|
||||
<th>Last Login</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="user in vm.users" ng-click="vm.selectUser(user, vm.selection)" style="cursor: pointer;">
|
||||
<td style="padding-left: 20px;">
|
||||
<umb-checkmark
|
||||
checked="user.selected"
|
||||
size="xs">
|
||||
</umb-checkmark>
|
||||
</td>
|
||||
<td scope="row" style="padding-left: 20px;">
|
||||
<umb-avatar
|
||||
size="xs"
|
||||
color="secondary"
|
||||
name="{{user.name}}"
|
||||
img-src="{{user.avatar}}">
|
||||
</umb-avatar>
|
||||
</td>
|
||||
<td class="bold"><a href="" ng-click="vm.goToUser(user)">{{user.name}}</a></td>
|
||||
<td><span ng-repeat="group in user.userGroups">{{group.name}}<span ng-if="!$last">, </span></span></td>
|
||||
<td>{{ user.formattedLastLogin }}</td>
|
||||
<td style="text-transform: capitalize;">
|
||||
<umb-badge
|
||||
size="xs"
|
||||
ng-if="user.state !== 'active'"
|
||||
color="{{vm.getUserStateType(user.state)}}">
|
||||
{{ user.state }}
|
||||
</umb-badge>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="flex justify-center">
|
||||
<umb-pagination
|
||||
ng-if="vm.usersPagination.totalPages"
|
||||
page-number="vm.usersPagination.pageNumber"
|
||||
total-pages="vm.usersPagination.totalPages">
|
||||
</umb-pagination>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Invite user -->
|
||||
<div ng-if="vm.usersViewState === 'inviteUser' || vm.usersViewState === 'createUser'">
|
||||
|
||||
<umb-editor-sub-header>
|
||||
<umb-editor-sub-header-content-left>
|
||||
<a class="umb-package-details__back-link" href="" ng-click="vm.setUsersViewState('overview');">← Take me back</a>
|
||||
</umb-editor-sub-header-content-left>
|
||||
</umb-editor-sub-header>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<ng-form style="max-width: 500px;" class="block-form">
|
||||
<div>
|
||||
<div ng-if="vm.usersViewState === 'inviteUser'">
|
||||
<h3 class="bold" style="margin-bottom: 0;">Invite user</h3>
|
||||
<p style="line-height: 1.6em; margin-bottom: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non libero vel turpis ultrices pharetra.</p>
|
||||
</div>
|
||||
<div ng-if="vm.usersViewState === 'createUser'">
|
||||
<h3 class="bold" style="margin-bottom: 0;">Create user</h3>
|
||||
<p style="line-height: 1.6em; margin-bottom: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non libero vel turpis ultrices pharetra.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<umb-control-group label="Name">
|
||||
<input type="text"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_entername"
|
||||
class="input-block-level"
|
||||
ng-model="vm.newUser.name"
|
||||
umb-auto-focus />
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="Email">
|
||||
<input type="email"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_entername"
|
||||
class="input-block-level"
|
||||
ng-model="vm.newUser.email" />
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="User group">
|
||||
|
||||
<umb-node-preview
|
||||
style="max-width: 100%;"
|
||||
ng-repeat="group in vm.newUser.userGroups"
|
||||
icon="group.icon"
|
||||
name="group.name"
|
||||
allow-remove="true"
|
||||
on-remove="vm.removeSelectedUserGroup($index, vm.newUser.userGroups)">
|
||||
</umb-node-preview>
|
||||
|
||||
<a href=""
|
||||
style="max-width: 100%;"
|
||||
class="umb-node-preview-add"
|
||||
ng-click="vm.openUserGroupPicker($event)"
|
||||
prevent-default>
|
||||
<localize key="general_add">Add</localize>
|
||||
</a>
|
||||
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="Message" ng-if="vm.usersViewState === 'inviteUser'">
|
||||
<textarea type="text"
|
||||
class="input-block-level"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_entername"
|
||||
ng-model="vm.newUser.message"></textarea>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-button
|
||||
ng-if="vm.usersViewState === 'inviteUser'"
|
||||
button-style="success"
|
||||
type="button"
|
||||
action=""
|
||||
label="Send invite">
|
||||
</umb-button>
|
||||
|
||||
<umb-button
|
||||
ng-if="vm.usersViewState === 'createUser'"
|
||||
button-style="success"
|
||||
type="button"
|
||||
action=""
|
||||
label="Create user">
|
||||
</umb-button>
|
||||
|
||||
</ng-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<umb-editor-sub-views
|
||||
sub-views="vm.page.navigation">
|
||||
</umb-editor-sub-views>
|
||||
|
||||
</umb-editor-container>
|
||||
|
||||
@@ -332,11 +27,4 @@
|
||||
|
||||
</form>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="vm.userGroupPicker.show"
|
||||
model="vm.userGroupPicker"
|
||||
view="vm.userGroupPicker.view"
|
||||
position="target">
|
||||
</umb-overlay>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<div>This is my roles overview</div>
|
||||
@@ -0,0 +1,232 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function UsersController($scope, $timeout, $location, usersResource) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
vm.users = [];
|
||||
vm.userGroups = [];
|
||||
vm.userStates = [];
|
||||
vm.selection = [];
|
||||
vm.newUser = {};
|
||||
vm.newUser.userGroups = [];
|
||||
vm.usersViewState = 'overview';
|
||||
|
||||
vm.usersPagination = {
|
||||
"pageNumber": 1,
|
||||
"totalPages": 5
|
||||
}
|
||||
|
||||
vm.layouts = [
|
||||
{
|
||||
"icon": "icon-thumbnails-small",
|
||||
"path": "1",
|
||||
"selected": true
|
||||
},
|
||||
{
|
||||
"icon": "icon-list",
|
||||
"path": "2",
|
||||
"selected": true
|
||||
}
|
||||
];
|
||||
|
||||
vm.activeLayout = {
|
||||
"icon": "icon-thumbnails-small",
|
||||
"path": "1",
|
||||
"selected": true
|
||||
};
|
||||
|
||||
vm.defaultButton = {
|
||||
labelKey:"users_inviteUser",
|
||||
handler: function() {
|
||||
vm.setUsersViewState('inviteUser');
|
||||
}
|
||||
};
|
||||
|
||||
vm.subButtons = [
|
||||
{
|
||||
labelKey: "users_createUser",
|
||||
handler: function () {
|
||||
vm.setUsersViewState('createUser');
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
vm.setUsersViewState = setUsersViewState;
|
||||
vm.getUserStateType = getUserStateType;
|
||||
vm.selectLayout = selectLayout;
|
||||
vm.selectUser = selectUser;
|
||||
vm.clearSelection = clearSelection;
|
||||
vm.goToUser = goToUser;
|
||||
vm.disableUser = disableUser;
|
||||
vm.openUserGroupPicker = openUserGroupPicker;
|
||||
vm.removeSelectedUserGroup = removeSelectedUserGroup;
|
||||
vm.selectAll = selectAll;
|
||||
vm.areAllSelected = areAllSelected;
|
||||
|
||||
function init() {
|
||||
|
||||
vm.loading = true;
|
||||
|
||||
// Get users
|
||||
usersResource.getUsers().then(function (users) {
|
||||
vm.users = users;
|
||||
vm.userStates = getUserStates(vm.users);
|
||||
formatDates(vm.users);
|
||||
});
|
||||
|
||||
// Get user groups
|
||||
usersResource.getUserGroups().then(function (userGroups) {
|
||||
vm.userGroups = userGroups;
|
||||
});
|
||||
|
||||
// fake loading
|
||||
$timeout(function () {
|
||||
vm.loading = false;
|
||||
}, 500);
|
||||
|
||||
}
|
||||
|
||||
function setUsersViewState(state) {
|
||||
vm.usersViewState = state;
|
||||
}
|
||||
|
||||
function getUserStateType(state) {
|
||||
switch (state) {
|
||||
case "disabled" || "umbracoDisabled":
|
||||
return "danger";
|
||||
case "pending":
|
||||
return "warning";
|
||||
default:
|
||||
return "success";
|
||||
}
|
||||
}
|
||||
|
||||
function selectLayout(selectedLayout) {
|
||||
|
||||
angular.forEach(vm.layouts, function(layout){
|
||||
layout.active = false;
|
||||
});
|
||||
|
||||
selectedLayout.active = true;
|
||||
vm.activeLayout = selectedLayout;
|
||||
}
|
||||
|
||||
function selectUser(user, selection) {
|
||||
if(user.selected) {
|
||||
var index = selection.indexOf(user.id);
|
||||
selection.splice(index, 1);
|
||||
user.selected = false;
|
||||
} else {
|
||||
user.selected = true;
|
||||
vm.selection.push(user.id);
|
||||
}
|
||||
}
|
||||
|
||||
function clearSelection() {
|
||||
angular.forEach(vm.users, function(user){
|
||||
user.selected = false;
|
||||
});
|
||||
vm.selection = [];
|
||||
}
|
||||
|
||||
function goToUser(user, event) {
|
||||
$location.path('users/usersV2/edit/' + user.id);
|
||||
}
|
||||
|
||||
function disableUser() {
|
||||
alert("disable users");
|
||||
}
|
||||
|
||||
function openUserGroupPicker(event) {
|
||||
vm.userGroupPicker = {
|
||||
title: "Select user groups",
|
||||
view: "itempicker",
|
||||
event: event,
|
||||
availableItems: vm.userGroups,
|
||||
selectedItems: vm.newUser.userGroups,
|
||||
show: true,
|
||||
submit: function(model) {
|
||||
|
||||
if(model.selectedItem) {
|
||||
vm.newUser.userGroups.push(model.selectedItem);
|
||||
}
|
||||
|
||||
vm.userGroupPicker.show = false;
|
||||
vm.userGroupPicker = null;
|
||||
},
|
||||
close: function(oldModel) {
|
||||
vm.userGroupPicker.show = false;
|
||||
vm.userGroupPicker = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function removeSelectedUserGroup(index, selection) {
|
||||
selection.splice(index, 1);
|
||||
}
|
||||
|
||||
function selectAll() {
|
||||
if(areAllSelected()) {
|
||||
vm.selection = [];
|
||||
angular.forEach(vm.users, function(user){
|
||||
user.selected = false;
|
||||
});
|
||||
} else {
|
||||
// clear selection so we don't add the same user twice
|
||||
vm.selection = [];
|
||||
// select all users
|
||||
angular.forEach(vm.users, function(user){
|
||||
user.selected = true;
|
||||
vm.selection.push(user.id);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function areAllSelected() {
|
||||
if(vm.selection.length === vm.users.length) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// helpers
|
||||
function getUserStates(users) {
|
||||
var userStates = [];
|
||||
|
||||
angular.forEach(users, function(user) {
|
||||
|
||||
var newUserState = {"name": user.state, "count": 1};
|
||||
var userStateExists = false;
|
||||
|
||||
angular.forEach(userStates, function(userState){
|
||||
if(newUserState.name === userState.name) {
|
||||
userState.count = userState.count + 1;
|
||||
userStateExists = true;
|
||||
}
|
||||
});
|
||||
|
||||
if(userStateExists === false) {
|
||||
userStates.push(newUserState);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
return userStates;
|
||||
}
|
||||
|
||||
function formatDates(users) {
|
||||
angular.forEach(users, function(user){
|
||||
if(user.lastLogin) {
|
||||
user.formattedLastLogin = moment(user.lastLogin).format("MMMM Do YYYY, HH:mm");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.Users.UsersController", UsersController);
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,322 @@
|
||||
<div ng-controller="Umbraco.Editors.Users.UsersController as vm" class="clearfix">
|
||||
|
||||
<umb-load-indicator ng-show="vm.loading"></umb-load-indicator>
|
||||
|
||||
<!-- Users Overview -->
|
||||
<div ng-if="vm.usersViewState === 'overview'">
|
||||
|
||||
<umb-editor-sub-header>
|
||||
|
||||
<!-- No selection -->
|
||||
<umb-editor-sub-header-content-left ng-if="vm.selection.length === 0">
|
||||
<umb-button-group
|
||||
ng-if="vm.defaultButton"
|
||||
default-button="vm.defaultButton"
|
||||
sub-buttons="vm.subButtons">
|
||||
</umb-button-group>
|
||||
</umb-editor-sub-header-content-left>
|
||||
|
||||
<umb-editor-sub-header-content-right ng-if="vm.selection.length === 0">
|
||||
<umb-editor-sub-header-section>
|
||||
<umb-layout-selector
|
||||
ng-if="vm.layouts"
|
||||
layouts="vm.layouts"
|
||||
active-layout="vm.activeLayout"
|
||||
on-layout-select="vm.selectLayout">
|
||||
</umb-layout-selector>
|
||||
</umb-editor-sub-header-section>
|
||||
<umb-editor-sub-header-section>
|
||||
<ng-form class="form-search -no-margin-bottom pull-right" novalidate>
|
||||
<div class="inner-addon left-addon">
|
||||
<i class="icon icon-search" ng-click="enterSearch($event)"></i>
|
||||
<input
|
||||
class="form-control search-input"
|
||||
type="text"
|
||||
localize="placeholder"
|
||||
placeholder="@general_typeToSearch"
|
||||
ng-model="options.filter"
|
||||
ng-change="enterSearch()"
|
||||
ng-keydown="forceSearch($event)"
|
||||
prevent-enter-submit
|
||||
no-dirty-check>
|
||||
</div>
|
||||
</ng-form>
|
||||
</umb-editor-sub-header-section>
|
||||
</umb-editor-sub-header-content-right>
|
||||
|
||||
<!-- With selection -->
|
||||
<umb-editor-sub-header-content-left ng-if="vm.selection.length > 0">
|
||||
<umb-editor-sub-header-section>
|
||||
<umb-button
|
||||
type="button"
|
||||
label="Clear selection"
|
||||
label-key="buttons_clearSelection"
|
||||
action="vm.clearSelection()"
|
||||
disabled="actionInProgress">
|
||||
</umb-button>
|
||||
</umb-editor-sub-header-section>
|
||||
<umb-editor-sub-header-section>
|
||||
<strong>{{ vm.selection.length }} <localize key="general_of">of</localize> {{ vm.users.length }} <localize key="general_selected">selected</localize></strong>
|
||||
</umb-editor-sub-header-section>
|
||||
</umb-editor-sub-header-content-left>
|
||||
|
||||
<umb-editor-sub-header-content-right ng-if="vm.selection.length > 0">
|
||||
<umb-button
|
||||
type="button"
|
||||
button-style="link"
|
||||
label="Set group"
|
||||
icon="icon-users"
|
||||
action="vm.disableUser()">
|
||||
</umb-button>
|
||||
<umb-button
|
||||
type="button"
|
||||
button-style="link"
|
||||
label="Disable"
|
||||
icon="icon-block"
|
||||
action="vm.disableUser()">
|
||||
</umb-button>
|
||||
</umb-editor-sub-header-content-right>
|
||||
|
||||
</umb-editor-sub-header>
|
||||
|
||||
<!-- Filters
|
||||
<div class="flex justify-end">
|
||||
|
||||
<div class="dropdown pull-right">
|
||||
<a style="text-decoration: none;" class="btn btn-link dropdown-toggle" href="" ng-click="vm.showFilter = !vm.showFilter">
|
||||
Show:
|
||||
<span class="bold" style="text-decoration: underline; margin-left: 2px;">All</span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul ng-if="vm.showFilter" on-outside-click="vm.showFilter = false;" style="display: block;" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li style="padding: 5px 10px;">
|
||||
<div class="flex items-center">
|
||||
<input style="margin-right: 7px; margin-top: 2px;" type="checkbox" />All
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li ng-repeat="userGroup in vm.userGroups" style="padding: 5px 10px;">
|
||||
<div class="flex items-center">
|
||||
<input style="margin-right: 7px; margin-top: 2px;" type="checkbox" />
|
||||
{{ userGroup.name }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li ng-repeat="userState in vm.userStates" style="padding: 5px 10px;">
|
||||
<div class="flex items-center">
|
||||
<input style="margin-right: 7px; margin-top: 2px;" type="checkbox" />
|
||||
{{ userState.name }} ({{userState.count}})
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown pull-right">
|
||||
<a style="text-decoration: none;" class="btn btn-link dropdown-toggle" href="" data-toggle="dropdown">
|
||||
Order by:
|
||||
<span class="bold" style="text-decoration: underline; margin-left: 2px;">Last login</span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#" prevent-default>Last login</a></li>
|
||||
<li><a tabindex="-1" href="#" prevent-default>Name</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- Layout: Cards -->
|
||||
<div class="umb-users" ng-if="vm.activeLayout.path === '1'">
|
||||
<div class="umb-user" ng-repeat="user in vm.users" ng-class="{'umb-user--selected': user.selected}" ng-click="vm.selectUser(user, vm.selection)">
|
||||
<div class="umb-user__avatar">
|
||||
<umb-avatar
|
||||
size="l"
|
||||
color="secondary"
|
||||
name="{{user.name}}"
|
||||
img-src="{{user.avatar}}">
|
||||
</umb-avatar>
|
||||
<umb-badge
|
||||
class="umb-user__badge"
|
||||
size="xs"
|
||||
ng-if="user.state !== 'active'"
|
||||
color="{{vm.getUserStateType(user.state)}}">
|
||||
{{ user.state }}
|
||||
</umb-badge>
|
||||
</div>
|
||||
<div class="umb-user__checkmark" ng-if="user.selected"><umb-checkmark checked="user.selected" size="s"></umb-checkmark></div>
|
||||
<a class="umb-user__name" href="" ng-click="vm.goToUser(user)">{{user.name}}</a>
|
||||
<div class="umb-user__group">
|
||||
<span ng-repeat="group in user.userGroups">{{ group.name }}<span ng-if="!$last">, </span></span>
|
||||
</div>
|
||||
<div class="umb-user__divider"></div>
|
||||
<div class="umb-user__last-login">
|
||||
<div ng-if="user.formattedLastLogin">
|
||||
<div>Last login on</div>
|
||||
{{ user.formattedLastLogin }}
|
||||
</div>
|
||||
<div ng-if="!user.formattedLastLogin">
|
||||
<div>{{ user.name | umbWordLimit:1 }} has</div>
|
||||
not logged in yet
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Layout: Table -->
|
||||
<div ng-if="vm.activeLayout.path === '2'">
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="padding-left: 20px; width: 10px;">
|
||||
<a href="" style="text-decoration: none;" ng-click="vm.selectAll()"><umb-checkmark checked="vm.areAllSelected()" size="xs"></umb-checkmark></a>
|
||||
</th>
|
||||
<th style="width: 70px;"></th>
|
||||
<th>Name</th>
|
||||
<th>User group</th>
|
||||
<th>Last Login</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="user in vm.users" ng-click="vm.selectUser(user, vm.selection)" style="cursor: pointer;">
|
||||
<td style="padding-left: 20px;">
|
||||
<umb-checkmark
|
||||
checked="user.selected"
|
||||
size="xs">
|
||||
</umb-checkmark>
|
||||
</td>
|
||||
<td scope="row" style="padding-left: 20px;">
|
||||
<umb-avatar
|
||||
size="xs"
|
||||
color="secondary"
|
||||
name="{{user.name}}"
|
||||
img-src="{{user.avatar}}">
|
||||
</umb-avatar>
|
||||
</td>
|
||||
<td class="bold"><a href="" ng-click="vm.goToUser(user)">{{user.name}}</a></td>
|
||||
<td><span ng-repeat="group in user.userGroups">{{group.name}}<span ng-if="!$last">, </span></span></td>
|
||||
<td>{{ user.formattedLastLogin }}</td>
|
||||
<td style="text-transform: capitalize;">
|
||||
<umb-badge
|
||||
size="xs"
|
||||
ng-if="user.state !== 'active'"
|
||||
color="{{vm.getUserStateType(user.state)}}">
|
||||
{{ user.state }}
|
||||
</umb-badge>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="flex justify-center">
|
||||
<umb-pagination
|
||||
ng-if="vm.usersPagination.totalPages"
|
||||
page-number="vm.usersPagination.pageNumber"
|
||||
total-pages="vm.usersPagination.totalPages">
|
||||
</umb-pagination>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Invite user -->
|
||||
<div ng-if="vm.usersViewState === 'inviteUser' || vm.usersViewState === 'createUser'">
|
||||
|
||||
<umb-editor-sub-header>
|
||||
<umb-editor-sub-header-content-left>
|
||||
<a class="umb-package-details__back-link" href="" ng-click="vm.setUsersViewState('overview');">← Take me back</a>
|
||||
</umb-editor-sub-header-content-left>
|
||||
</umb-editor-sub-header>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<ng-form style="max-width: 500px;" class="block-form">
|
||||
<div>
|
||||
<div ng-if="vm.usersViewState === 'inviteUser'">
|
||||
<h3 class="bold" style="margin-bottom: 0;">Invite user</h3>
|
||||
<p style="line-height: 1.6em; margin-bottom: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non libero vel turpis ultrices pharetra.</p>
|
||||
</div>
|
||||
<div ng-if="vm.usersViewState === 'createUser'">
|
||||
<h3 class="bold" style="margin-bottom: 0;">Create user</h3>
|
||||
<p style="line-height: 1.6em; margin-bottom: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non libero vel turpis ultrices pharetra.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<umb-control-group label="Name">
|
||||
<input type="text"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_entername"
|
||||
class="input-block-level"
|
||||
ng-model="vm.newUser.name"
|
||||
umb-auto-focus />
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="Email">
|
||||
<input type="email"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_entername"
|
||||
class="input-block-level"
|
||||
ng-model="vm.newUser.email" />
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="User group">
|
||||
|
||||
<umb-node-preview
|
||||
style="max-width: 100%;"
|
||||
ng-repeat="group in vm.newUser.userGroups"
|
||||
icon="group.icon"
|
||||
name="group.name"
|
||||
allow-remove="true"
|
||||
on-remove="vm.removeSelectedUserGroup($index, vm.newUser.userGroups)">
|
||||
</umb-node-preview>
|
||||
|
||||
<a href=""
|
||||
style="max-width: 100%;"
|
||||
class="umb-node-preview-add"
|
||||
ng-click="vm.openUserGroupPicker($event)"
|
||||
prevent-default>
|
||||
<localize key="general_add">Add</localize>
|
||||
</a>
|
||||
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="Message" ng-if="vm.usersViewState === 'inviteUser'">
|
||||
<textarea type="text"
|
||||
class="input-block-level"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_entername"
|
||||
ng-model="vm.newUser.message"></textarea>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-button
|
||||
ng-if="vm.usersViewState === 'inviteUser'"
|
||||
button-style="success"
|
||||
type="button"
|
||||
action=""
|
||||
label="Send invite">
|
||||
</umb-button>
|
||||
|
||||
<umb-button
|
||||
ng-if="vm.usersViewState === 'createUser'"
|
||||
button-style="success"
|
||||
type="button"
|
||||
action=""
|
||||
label="Create user">
|
||||
</umb-button>
|
||||
|
||||
</ng-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="vm.userGroupPicker.show"
|
||||
model="vm.userGroupPicker"
|
||||
view="vm.userGroupPicker.view"
|
||||
position="target">
|
||||
</umb-overlay>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user