add functionality for bulk actions
This commit is contained in:
@@ -15,6 +15,7 @@
|
||||
var deferred = $q.defer();
|
||||
var users = [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Tammy Contreras",
|
||||
"userGroups": [
|
||||
{
|
||||
@@ -25,6 +26,7 @@
|
||||
"state": "active"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Edward Flores",
|
||||
"userGroups": [
|
||||
{
|
||||
@@ -35,6 +37,7 @@
|
||||
"state": "active"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Benjamin Mills",
|
||||
"userGroups": [
|
||||
{
|
||||
@@ -45,6 +48,7 @@
|
||||
"state": "disabled"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Samantha Martinez",
|
||||
"userGroups": [
|
||||
{
|
||||
@@ -55,6 +59,7 @@
|
||||
"state": "pending"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Angela Stone",
|
||||
"userGroups": [
|
||||
{
|
||||
@@ -65,6 +70,7 @@
|
||||
"state": "active"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"name": "Beverly Silva",
|
||||
"userGroups": [
|
||||
{
|
||||
@@ -75,6 +81,7 @@
|
||||
"state": "active"
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"name": "Arthur Welch",
|
||||
"userGroups": [
|
||||
{
|
||||
@@ -85,6 +92,7 @@
|
||||
"state": "active"
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"name": "Ruth Turner",
|
||||
"userGroups": [
|
||||
{
|
||||
@@ -97,13 +105,15 @@
|
||||
"avatar": "",
|
||||
"state": "pending"
|
||||
},
|
||||
{
|
||||
{
|
||||
"id": 9,
|
||||
"name": "Tammy Contreras",
|
||||
"userGroupName": "Admin",
|
||||
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg",
|
||||
"state": "active"
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"name": "Edward Flores",
|
||||
"userGroups": [
|
||||
{
|
||||
@@ -114,6 +124,7 @@
|
||||
"state": "active"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"name": "Benjamin Mills",
|
||||
"userGroups": [
|
||||
{
|
||||
@@ -127,6 +138,7 @@
|
||||
"state": "disabled"
|
||||
},
|
||||
{
|
||||
"id": 12,
|
||||
"name": "Samantha Martinez",
|
||||
"userGroupName": "Editor",
|
||||
"userGroups": [
|
||||
@@ -138,6 +150,7 @@
|
||||
"state": "pending"
|
||||
},
|
||||
{
|
||||
"id": 13,
|
||||
"name": "Angela Stone",
|
||||
"userGroups": [
|
||||
{
|
||||
@@ -148,6 +161,7 @@
|
||||
"state": "active"
|
||||
},
|
||||
{
|
||||
"id": 14,
|
||||
"name": "Beverly Silva",
|
||||
"userGroups": [
|
||||
{
|
||||
@@ -158,6 +172,7 @@
|
||||
"state": "active"
|
||||
},
|
||||
{
|
||||
"id": 15,
|
||||
"name": "Arthur Welch",
|
||||
"userGroups": [
|
||||
{
|
||||
@@ -168,6 +183,7 @@
|
||||
"state": "active"
|
||||
},
|
||||
{
|
||||
"id": 16,
|
||||
"name": "Ruth Turner",
|
||||
"userGroups": [
|
||||
{
|
||||
|
||||
@@ -17,6 +17,11 @@
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.umb-user--selected {
|
||||
border-color: @turquoise;
|
||||
}
|
||||
|
||||
.umb-user:hover {
|
||||
@@ -33,6 +38,12 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.umb-user__group {
|
||||
.umb-user__checkmark {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.umb-user__group {
|
||||
font-size: 14px;
|
||||
}
|
||||
1
src/Umbraco.Web.UI.Client/src/views/usersV2/edit.html
Normal file
1
src/Umbraco.Web.UI.Client/src/views/usersV2/edit.html
Normal file
@@ -0,0 +1 @@
|
||||
<div>Edit user</div>
|
||||
@@ -1,7 +1,7 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function UsersOverviewController($scope, $timeout, usersResource) {
|
||||
function UsersOverviewController($scope, $timeout, $location, usersResource) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
vm.users = [];
|
||||
vm.userGroups = [];
|
||||
vm.userStates = [];
|
||||
vm.selection = [];
|
||||
vm.usersViewState = 'overview';
|
||||
vm.usersPagination = {
|
||||
"pageNumber": 1,
|
||||
@@ -55,6 +56,10 @@
|
||||
vm.setUsersViewState = setUsersViewState;
|
||||
vm.getUserStateType = getUserStateType;
|
||||
vm.selectLayout = selectLayout;
|
||||
vm.selectUser = selectUser;
|
||||
vm.clearSelection = clearSelection;
|
||||
vm.goToUser = goToUser;
|
||||
vm.disableUser = disableUser;
|
||||
|
||||
function init() {
|
||||
|
||||
@@ -107,6 +112,33 @@
|
||||
vm.activeLayout = selectedLayout;
|
||||
}
|
||||
|
||||
function selectUser(user, selection) {
|
||||
// deselect if already selected, else select
|
||||
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() {
|
||||
console.log(vm.selection);
|
||||
alert("disable users");
|
||||
}
|
||||
|
||||
// helpers
|
||||
function getUserStates(users) {
|
||||
|
||||
@@ -18,9 +18,11 @@
|
||||
|
||||
<!-- Users Overview -->
|
||||
<div ng-if="vm.usersViewState === 'overview'">
|
||||
|
||||
<umb-editor-sub-header>
|
||||
|
||||
<umb-editor-sub-header-content-left>
|
||||
|
||||
<!-- 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"
|
||||
@@ -28,8 +30,7 @@
|
||||
</umb-button-group>
|
||||
</umb-editor-sub-header-content-left>
|
||||
|
||||
<umb-editor-sub-header-content-right>
|
||||
|
||||
<umb-editor-sub-header-content-right ng-if="vm.selection.length === 0">
|
||||
<umb-editor-sub-header-section>
|
||||
<umb-layout-selector
|
||||
ng-if="vm.layouts"
|
||||
@@ -38,7 +39,6 @@
|
||||
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">
|
||||
@@ -56,10 +56,44 @@
|
||||
</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">
|
||||
@@ -94,19 +128,22 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- Layouts -->
|
||||
<div class="umb-users" ng-if="vm.activeLayout.path === '1'">
|
||||
<div class="umb-user" ng-repeat="user in vm.users">
|
||||
<div class="umb-user" ng-repeat="user in vm.users" ng-class="{'umb-user--selected': user.selected}" ng-click="vm.selectUser(user, vm.selection)">
|
||||
<umb-avatar
|
||||
class="umb-user__avatar"
|
||||
size="l"
|
||||
size="m"
|
||||
color="secondary"
|
||||
name="{{user.name}}"
|
||||
img-src="{{user.avatar}}">
|
||||
</umb-avatar>
|
||||
<div class="umb-user__name">{{user.name}}</div>
|
||||
<div class="umb-user__checkmark" ng-if="user.selected"><umb-checkmark 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>
|
||||
<span ng-repeat="group in user.userGroups">{{ group.name }}<span ng-if="!$last">, </span></span>
|
||||
</div>
|
||||
<!--
|
||||
<umb-badge
|
||||
@@ -123,6 +160,7 @@
|
||||
This is my second view
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="flex justify-center">
|
||||
<umb-pagination
|
||||
ng-if="vm.usersPagination.totalPages"
|
||||
|
||||
Reference in New Issue
Block a user