add functionality for bulk actions

This commit is contained in:
Mads Rasmussen
2017-05-08 14:16:02 +02:00
parent 205a83dd3c
commit f044c4dde1
5 changed files with 111 additions and 13 deletions

View File

@@ -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": [
{

View File

@@ -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;
}

View File

@@ -0,0 +1 @@
<div>Edit user</div>

View File

@@ -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) {

View File

@@ -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"