add save user and create user
This commit is contained in:
Mads Rasmussen
@@ -100,7 +100,34 @@
|
||||
"GetById",
|
||||
{ id: userId })),
|
||||
"Failed to retrieve data for user " + userId);
|
||||
}
|
||||
|
||||
function createUser(user) {
|
||||
if (!user) {
|
||||
throw "user not specified";
|
||||
}
|
||||
|
||||
return umbRequestHelper.resourcePromise(
|
||||
$http.post(
|
||||
umbRequestHelper.getApiUrl(
|
||||
"userApiBaseUrl",
|
||||
"PostCreateUser"),
|
||||
user),
|
||||
"Failed to save user");
|
||||
}
|
||||
|
||||
function saveUser(user) {
|
||||
if (!user) {
|
||||
throw "user not specified";
|
||||
}
|
||||
|
||||
return umbRequestHelper.resourcePromise(
|
||||
$http.post(
|
||||
umbRequestHelper.getApiUrl(
|
||||
"userApiBaseUrl",
|
||||
"PostSaveUser"),
|
||||
user),
|
||||
"Failed to save user");
|
||||
}
|
||||
|
||||
function getUserGroup() {
|
||||
@@ -151,12 +178,14 @@
|
||||
}
|
||||
|
||||
var resource = {
|
||||
getUser: getUser,
|
||||
getUserGroup: getUserGroup,
|
||||
getUserGroups: getUserGroups,
|
||||
disableUsers: disableUsers,
|
||||
enableUsers: enableUsers,
|
||||
getPagedResults: getPagedResults
|
||||
getPagedResults: getPagedResults,
|
||||
getUser: getUser,
|
||||
createUser: createUser,
|
||||
saveUser: saveUser,
|
||||
getUserGroup: getUserGroup,
|
||||
getUserGroups: getUserGroups
|
||||
};
|
||||
|
||||
return resource;
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function UserEditController($scope, $timeout, $location, usersResource, $routeParams) {
|
||||
function UserEditController($scope, $timeout, $location, $routeParams, usersResource, contentEditingHelper, localizationService, notificationsService) {
|
||||
|
||||
var vm = this;
|
||||
var localizeSaving = localizationService.localize("general_saving");
|
||||
|
||||
vm.page = {};
|
||||
vm.user = {};
|
||||
@@ -18,6 +19,7 @@
|
||||
vm.resetPassword = resetPassword;
|
||||
vm.getUserStateType = getUserStateType;
|
||||
vm.changeAvatar = changeAvatar;
|
||||
vm.save = save;
|
||||
|
||||
function init() {
|
||||
|
||||
@@ -32,6 +34,33 @@
|
||||
|
||||
}
|
||||
|
||||
function save() {
|
||||
|
||||
vm.page.saveButtonState = "busy";
|
||||
|
||||
contentEditingHelper.contentEditorPerformSave({
|
||||
statusMessage: localizeSaving,
|
||||
saveMethod: usersResource.saveUser,
|
||||
scope: $scope,
|
||||
content: vm.user,
|
||||
// We do not redirect on failure for users - this is because it is not possible to actually save a user
|
||||
// when server side validation fails - as opposed to content where we are capable of saving the content
|
||||
// item if server side validation fails
|
||||
redirectOnFailure: false,
|
||||
rebindCallback: function (orignal, saved) {}
|
||||
}).then(function (saved) {
|
||||
|
||||
vm.user = saved;
|
||||
vm.page.saveButtonState = "success";
|
||||
|
||||
}, function (err) {
|
||||
|
||||
vm.page.saveButtonState = "error";
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function goToPage(ancestor) {
|
||||
$location.path(ancestor.path).search("subview", ancestor.subView);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function UsersController($scope, $timeout, $location, usersResource) {
|
||||
function UsersController($scope, $timeout, $location, usersResource, localizationService, contentEditingHelper) {
|
||||
|
||||
var vm = this;
|
||||
var localizeSaving = localizationService.localize("general_saving");
|
||||
|
||||
vm.users = [];
|
||||
vm.userGroups = [];
|
||||
@@ -69,6 +70,7 @@
|
||||
vm.areAllSelected = areAllSelected;
|
||||
vm.searchUsers = searchUsers;
|
||||
vm.setOrderByFilter = setOrderByFilter;
|
||||
vm.createUser = createUser;
|
||||
|
||||
function init() {
|
||||
|
||||
@@ -206,6 +208,34 @@
|
||||
getUsers();
|
||||
}
|
||||
|
||||
function createUser() {
|
||||
|
||||
vm.newUser.id = -1;
|
||||
vm.newUser.parentId = -1;
|
||||
vm.page.createButtonState = "busy";
|
||||
|
||||
contentEditingHelper.contentEditorPerformSave({
|
||||
statusMessage: localizeSaving,
|
||||
saveMethod: usersResource.createUser,
|
||||
scope: $scope,
|
||||
content: vm.newUser,
|
||||
// We do not redirect on failure for users - this is because it is not possible to actually save a user
|
||||
// when server side validation fails - as opposed to content where we are capable of saving the content
|
||||
// item if server side validation fails
|
||||
redirectOnFailure: false,
|
||||
rebindCallback: function (orignal, saved) {}
|
||||
}).then(function (saved) {
|
||||
|
||||
vm.page.createButtonState = "success";
|
||||
|
||||
}, function (err) {
|
||||
|
||||
vm.page.createButtonState = "error";
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// helpers
|
||||
function getUsers() {
|
||||
|
||||
@@ -225,7 +255,7 @@
|
||||
formatDates(vm.users);
|
||||
|
||||
vm.loading = false;
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -1,353 +1,359 @@
|
||||
<div ng-controller="Umbraco.Editors.Users.UsersController as vm" class="clearfix">
|
||||
|
||||
<umb-load-indicator ng-show="vm.loading"></umb-load-indicator>
|
||||
<form name="usersForm" no-validate val-form-manager>
|
||||
|
||||
<!-- Users Overview -->
|
||||
<div ng-if="vm.usersViewState === 'overview'">
|
||||
|
||||
<umb-editor-sub-header>
|
||||
<umb-load-indicator ng-show="vm.loading"></umb-load-indicator>
|
||||
|
||||
<!-- Users Overview -->
|
||||
<div ng-if="vm.usersViewState === 'overview'">
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
<div class="form-search -no-margin-bottom pull-right">
|
||||
<div class="inner-addon left-addon">
|
||||
<i class="icon icon-search"></i>
|
||||
<input
|
||||
class="form-control search-input"
|
||||
type="text"
|
||||
localize="placeholder"
|
||||
placeholder="@general_typeToSearch"
|
||||
ng-model="vm.usersOptions.filter"
|
||||
ng-change="vm.searchUsers()"
|
||||
prevent-enter-submit
|
||||
no-dirty-check>
|
||||
<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>
|
||||
<div class="form-search -no-margin-bottom pull-right">
|
||||
<div class="inner-addon left-addon">
|
||||
<i class="icon icon-search"></i>
|
||||
<input
|
||||
class="form-control search-input"
|
||||
type="text"
|
||||
localize="placeholder"
|
||||
placeholder="@general_typeToSearch"
|
||||
ng-model="vm.usersOptions.filter"
|
||||
ng-change="vm.searchUsers()"
|
||||
prevent-enter-submit
|
||||
no-dirty-check>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<div style="margin-right: 5px;">
|
||||
<umb-button
|
||||
ng-if="vm.allowSetUserGroup"
|
||||
type="button"
|
||||
button-style="link"
|
||||
label="Set group"
|
||||
icon="icon-users"
|
||||
action="vm.setUserGroup()">
|
||||
</umb-button>
|
||||
</div>
|
||||
</umb-editor-sub-header-section>
|
||||
</umb-editor-sub-header-content-right>
|
||||
<div style="margin-right: 5px;">
|
||||
<umb-button
|
||||
ng-if="vm.allowEnableUser"
|
||||
type="button"
|
||||
button-style="link"
|
||||
label="Enable"
|
||||
icon="icon-check"
|
||||
action="vm.enableUser()">
|
||||
</umb-button>
|
||||
</div>
|
||||
<div>
|
||||
<umb-button
|
||||
ng-if="vm.allowDisableUser"
|
||||
type="button"
|
||||
button-style="link"
|
||||
label="Disable"
|
||||
icon="icon-block"
|
||||
action="vm.disableUser()">
|
||||
</umb-button>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<umb-editor-sub-header-content-right ng-if="vm.selection.length > 0">
|
||||
<div style="margin-right: 5px;">
|
||||
<umb-button
|
||||
ng-if="vm.allowSetUserGroup"
|
||||
type="button"
|
||||
button-style="link"
|
||||
label="Set group"
|
||||
icon="icon-users"
|
||||
action="vm.setUserGroup()">
|
||||
</umb-button>
|
||||
</div>
|
||||
<div style="margin-right: 5px;">
|
||||
<umb-button
|
||||
ng-if="vm.allowEnableUser"
|
||||
type="button"
|
||||
button-style="link"
|
||||
label="Enable"
|
||||
icon="icon-check"
|
||||
action="vm.enableUser()">
|
||||
</umb-button>
|
||||
</div>
|
||||
<div>
|
||||
<umb-button
|
||||
ng-if="vm.allowDisableUser"
|
||||
type="button"
|
||||
button-style="link"
|
||||
label="Disable"
|
||||
icon="icon-block"
|
||||
action="vm.disableUser()">
|
||||
</umb-button>
|
||||
</div>
|
||||
</umb-editor-sub-header-content-right>
|
||||
<div style="margin-bottom: 20px;" class="flex items-center">
|
||||
|
||||
</umb-editor-sub-header>
|
||||
|
||||
<div style="margin-bottom: 20px;" class="flex items-center">
|
||||
|
||||
<div style="font-size: 16px;">
|
||||
<span class="bold">Users</span> <span>({{vm.usersOptions.totalItems}})</span>
|
||||
</div>
|
||||
|
||||
<div class="flex" style="margin-left: auto;">
|
||||
|
||||
<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="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 style="font-size: 16px;">
|
||||
<span class="bold">Users</span> <span>({{vm.usersOptions.totalItems}})</span>
|
||||
</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="margin-left: 2px;">{{ vm.usersOptions.orderBy }} </span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#" ng-click="vm.setOrderByFilter('lastLogin')" prevent-default>Last login</a></li>
|
||||
<li><a tabindex="-1" href="#" ng-click="vm.setOrderByFilter('Name')" prevent-default>Name</a></li>
|
||||
</ul>
|
||||
<div class="flex" style="margin-left: auto;">
|
||||
|
||||
<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="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="margin-left: 2px;">{{ vm.usersOptions.orderBy }} </span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#" ng-click="vm.setOrderByFilter('lastLogin')" prevent-default>Last login</a></li>
|
||||
<li><a tabindex="-1" href="#" ng-click="vm.setOrderByFilter('Name')" prevent-default>Name</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Empty states -->
|
||||
<umb-empty-state
|
||||
ng-if="!vm.users && vm.usersOptions.filter.length > 0"
|
||||
position="center">
|
||||
<localize key="general_searchNoResult"></localize>
|
||||
</umb-empty-state>
|
||||
|
||||
<!-- Layout: Cards -->
|
||||
<div class="umb-users" ng-if="vm.activeLayout.path === '1' && vm.loading === false">
|
||||
<div class="umb-user" ng-repeat="user in vm.users" ng-click="vm.selectUser(user, vm.selection)">
|
||||
<div class="umb-user__content" ng-class="{'umb-user__content--selected': user.selected}">
|
||||
<umb-badge
|
||||
class="umb-user__badge"
|
||||
size="xs"
|
||||
ng-if="user.state !== 'active'"
|
||||
color="{{vm.getUserStateType(user.state)}}">
|
||||
{{ user.state }}
|
||||
</umb-badge>
|
||||
<div class="umb-user__avatar">
|
||||
<umb-avatar
|
||||
size="l"
|
||||
color="secondary"
|
||||
name="{{user.name}}"
|
||||
img-src="{{user.avatar}}">
|
||||
</umb-avatar>
|
||||
</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="(key,value) in user.userGroups">{{ value }}<span ng-if="!$last">, </span></span>
|
||||
</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>
|
||||
</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;">
|
||||
<!-- Empty states -->
|
||||
<umb-empty-state
|
||||
ng-if="!vm.users && vm.usersOptions.filter.length > 0"
|
||||
position="center">
|
||||
<localize key="general_searchNoResult"></localize>
|
||||
</umb-empty-state>
|
||||
|
||||
<!-- Layout: Cards -->
|
||||
<div class="umb-users" ng-if="vm.activeLayout.path === '1' && vm.loading === false">
|
||||
<div class="umb-user" ng-repeat="user in vm.users" ng-click="vm.selectUser(user, vm.selection)">
|
||||
<div class="umb-user__content" ng-class="{'umb-user__content--selected': user.selected}">
|
||||
<umb-badge
|
||||
class="umb-user__badge"
|
||||
size="xs"
|
||||
ng-if="user.state !== 'active'"
|
||||
color="{{vm.getUserStateType(user.state)}}">
|
||||
{{ user.state }}
|
||||
</umb-badge>
|
||||
<div class="umb-user__avatar">
|
||||
<umb-avatar
|
||||
size="xs"
|
||||
size="l"
|
||||
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="(key,value) in user.userGroups">{{ value }}<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.usersOptions.totalPages"
|
||||
page-number="vm.usersOptions.pageNumber"
|
||||
total-pages="vm.usersOptions.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 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="(key,value) in user.userGroups">{{ value }}<span ng-if="!$last">, </span></span>
|
||||
</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>
|
||||
</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>
|
||||
<!-- Layout: Table -->
|
||||
<div ng-if="vm.activeLayout.path === '2'">
|
||||
|
||||
<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>
|
||||
<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="(key,value) in user.userGroups">{{ value }}<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>
|
||||
|
||||
<umb-control-group label="User group">
|
||||
</div>
|
||||
|
||||
<umb-user-group-preview
|
||||
ng-repeat="group in vm.newUser.userGroups"
|
||||
icon="group.icon"
|
||||
name="group.name"
|
||||
sections="group.sections"
|
||||
content-start-nodes="group.startNodesContent"
|
||||
media-start-nodes="group.startNodesMedia"
|
||||
allow-remove="true"
|
||||
on-remove="vm.removeSelectedUserGroup($index, vm.newUser.userGroups)">
|
||||
</umb-user-group-preview>
|
||||
<!-- Pagination -->
|
||||
<div class="flex justify-center">
|
||||
<umb-pagination
|
||||
ng-if="vm.usersOptions.totalPages"
|
||||
page-number="vm.usersOptions.pageNumber"
|
||||
total-pages="vm.usersOptions.totalPages">
|
||||
</umb-pagination>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<!-- Add user -->
|
||||
<div ng-if="vm.usersViewState === 'inviteUser' || vm.usersViewState === 'createUser'">
|
||||
|
||||
<umb-overlay
|
||||
ng-if="vm.userGroupPicker.show"
|
||||
model="vm.userGroupPicker"
|
||||
view="vm.userGroupPicker.view"
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
<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 name="addUserForm" 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-user-group-preview
|
||||
ng-repeat="group in vm.newUser.userGroups"
|
||||
icon="group.icon"
|
||||
name="group.name"
|
||||
sections="group.sections"
|
||||
content-start-nodes="group.startNodesContent"
|
||||
media-start-nodes="group.startNodesMedia"
|
||||
allow-remove="true"
|
||||
on-remove="vm.removeSelectedUserGroup($index, vm.newUser.userGroups)">
|
||||
</umb-user-group-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">
|
||||
<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"
|
||||
state="vm.page.createButtonState"
|
||||
type="button"
|
||||
action="vm.inviteUser()"
|
||||
label="Send invite">
|
||||
</umb-button>
|
||||
|
||||
<umb-button
|
||||
ng-if="vm.usersViewState === 'createUser'"
|
||||
button-style="success"
|
||||
state="vm.page.createButtonState"
|
||||
type="button"
|
||||
action="vm.createUser()"
|
||||
label="Create user">
|
||||
</umb-button>
|
||||
|
||||
</ng-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="vm.userGroupPicker.show"
|
||||
model="vm.userGroupPicker"
|
||||
view="vm.userGroupPicker.view"
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user