From e5240575bd8454ffee141febf86d0d2af12836a3 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 11 May 2017 09:31:58 +0200
Subject: [PATCH] add bulk selection to user roles

---
 .../usersV2/views/roles/roles.controller.js   | 94 +++++++++++++++++++
 .../src/views/usersV2/views/roles/roles.html  | 72 +++++++++++++-
 2 files changed, 165 insertions(+), 1 deletion(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/usersV2/views/roles/roles.controller.js

diff --git a/src/Umbraco.Web.UI.Client/src/views/usersV2/views/roles/roles.controller.js b/src/Umbraco.Web.UI.Client/src/views/usersV2/views/roles/roles.controller.js
new file mode 100644
index 0000000000..79f16644d5
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/usersV2/views/roles/roles.controller.js
@@ -0,0 +1,94 @@
+(function () {
+    "use strict";
+
+    function UserRolesController($scope, $timeout, $location, usersResource) {
+
+        var vm = this;
+
+        vm.userRoles = [];
+        vm.selection = [];
+        vm.viewState = 'overview';
+        
+        vm.pagination = {
+            "pageNumber": 1,
+            "totalPages": 5
+        };
+
+        vm.setViewState = setViewState;
+        vm.goToUserRole = goToUserRole;
+        vm.clearSelection = clearSelection;
+        vm.selectUserRole = selectUserRole;
+        vm.selectAll = selectAll;
+        vm.areAllSelected = areAllSelected;
+
+        function init() {
+
+            vm.loading = true;
+
+            // Get users
+            usersResource.getUserGroups().then(function (userRoles) {
+                vm.userRoles = userRoles;
+            });
+
+            // fake loading
+            $timeout(function () {
+                vm.loading = false;
+            }, 500);
+
+        }
+
+        function setViewState(state) {
+            vm.viewState = state;
+        }
+
+        function selectUserRole(userRole, selection) {
+            if(userRole.selected) {
+                var index = selection.indexOf(userRole.id);
+                selection.splice(index, 1);
+                userRole.selected = false;
+            } else {
+                userRole.selected = true;
+                vm.selection.push(userRole.id);
+            }
+        }
+
+        function clearSelection() {
+            angular.forEach(vm.userRoles, function(userRole){
+                userRole.selected = false;
+            });
+            vm.selection = [];
+        }
+
+        function goToUserRole(userRole) {
+            $location.path('users/usersV2/role/' + userRole.id);
+        }
+        function selectAll() {
+            if(areAllSelected()) {
+                vm.selection = [];
+                angular.forEach(vm.userRoles, function(userRole){
+                    userRole.selected = false;
+                });
+            } else {
+                // clear selection so we don't add the same user twice
+                vm.selection = [];
+                // select all users
+                angular.forEach(vm.userRoles, function(userRole){
+                    userRole.selected = true;
+                    vm.selection.push(userRole.id);
+                });
+            }
+        }
+
+        function areAllSelected() {
+            if(vm.selection.length === vm.userRoles.length) {
+                return true;
+            }
+        }
+
+        init();
+
+    }
+
+    angular.module("umbraco").controller("Umbraco.Editors.Users.RolesController", UserRolesController);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/usersV2/views/roles/roles.html b/src/Umbraco.Web.UI.Client/src/views/usersV2/views/roles/roles.html
index be73bace60..b90edb55dc 100644
--- a/src/Umbraco.Web.UI.Client/src/views/usersV2/views/roles/roles.html
+++ b/src/Umbraco.Web.UI.Client/src/views/usersV2/views/roles/roles.html
@@ -1 +1,71 @@
-<div>This is my roles overview</div>
\ No newline at end of file
+<div ng-controller="Umbraco.Editors.Users.RolesController as vm" class="clearfix">
+
+    <umb-editor-sub-header>
+            
+        <!-- No selection -->
+        <umb-editor-sub-header-content-left ng-if="vm.selection.length === 0">
+            <umb-button
+                type="button"
+                button-style="success"
+                action="vm.createUserRole()"
+                label="Create Role">
+            </umb-button>
+        </umb-editor-sub-header-content-left>
+
+        <umb-editor-sub-header-content-right ng-if="vm.selection.length === 0">
+
+            <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.userRoles.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="Delete"
+                icon="icon-trash"
+                action="vm.deleteUserRole()">
+            </umb-button>
+        </umb-editor-sub-header-content-right>
+
+    </umb-editor-sub-header>
+
+    <div ng-repeat="userRole in vm.userRoles" class="flex items-center" ng-click="vm.selectUserRole(userRole, vm.selection)">
+        <i class="{{userRole.icon}}"></i>
+        <div class="bold" style="margin-right: 5px;">{{userRole.name}}</div>
+        <a href="" ng-click="vm.goToUserRole(userRole)">Edit</a>
+    </div>
+
+</div>
\ No newline at end of file