From f044c4dde13b3051902e2355fe0e06b80e46a6e9 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Mon, 8 May 2017 14:16:02 +0200
Subject: [PATCH] add functionality for bulk actions

---
 .../src/common/resources/users.resource.js    | 18 +++++-
 .../src/less/components/users/umb-users.less  | 13 ++++-
 .../src/views/usersV2/edit.html               |  1 +
 .../src/views/usersV2/overview.controller.js  | 34 ++++++++++-
 .../src/views/usersV2/overview.html           | 58 +++++++++++++++----
 5 files changed, 111 insertions(+), 13 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/usersV2/edit.html

diff --git a/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js b/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
index f493b50cb2..4498e33786 100644
--- a/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
+++ b/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
@@ -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": [
                         {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-users.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-users.less
index d65b3e7aae..bc207662ea 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-users.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-users.less
@@ -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;
 }
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/usersV2/edit.html b/src/Umbraco.Web.UI.Client/src/views/usersV2/edit.html
new file mode 100644
index 0000000000..a500a1d625
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/usersV2/edit.html
@@ -0,0 +1 @@
+<div>Edit user</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/usersV2/overview.controller.js b/src/Umbraco.Web.UI.Client/src/views/usersV2/overview.controller.js
index e9691952c4..183bc62969 100644
--- a/src/Umbraco.Web.UI.Client/src/views/usersV2/overview.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/usersV2/overview.controller.js
@@ -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) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/usersV2/overview.html b/src/Umbraco.Web.UI.Client/src/views/usersV2/overview.html
index 30457c3aa0..155270b30c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/usersV2/overview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/usersV2/overview.html
@@ -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"