bulk delete users

README.md

@@ -8,7 +8,7 @@ The mission is to bring software dev inspired features (refactoring, testing, li
 
 ## Latest version
 
-v1.45.2
+v1.45.3
 
 ## OS Support
 

app/app/components/customize/user-admin.js

@@ -17,11 +17,18 @@ export default Ember.Component.extend(AuthProvider, {
 	deleteUser: null,
 	drop: null,
 	password: {},
+	filter: '',
+	filteredUsers: [],
+	selectedUsers: [],
+	hasSelectedUsers: false,
 
 	didReceiveAttrs() {
 		this.users.forEach(user => {
 			user.set('me', user.get('id') === this.get('session.session.authenticated.user.id'));
+			user.set('selected', false);
 		});
+
+		this.set('filteredUsers', this.users);
 	},
 
 	willDestroyElement() {
@@ -32,7 +39,39 @@ export default Ember.Component.extend(AuthProvider, {
 		}
 	},
 
+	onKeywordChange: function () {
+		Ember.run.debounce(this, this.filterUsers, 350);
+	}.observes('filter'),
+
+	filterUsers() {
+		let users = this.get('users');
+		let filteredUsers = [];
+		let filter = this.get('filter').toLowerCase();
+
+		users.forEach(user => {
+			if (user.get('fullname').toLowerCase().includes(filter) || user.get('email').toLowerCase().includes(filter)) {
+				filteredUsers.pushObject(user);
+			}
+		});
+
+		this.set('filteredUsers', filteredUsers);
+	},
+
 	actions: {
+		toggleSelect(user) {
+			user.set('selected', !user.get('selected'));
+
+			let su = this.get('selectedUsers');
+			if (user.get('selected')) {
+				su.push(user.get('id'));
+			} else {
+				su = _.reject(su, function(id){ return id === user.get('id') });
+			}
+
+			this.set('selectedUsers', su);
+			this.set('hasSelectedUsers', su.length > 0);
+		},
+		
 		toggleActive(id) {
 			let user = this.users.findBy("id", id);
 			user.set('active', !user.get('active'));
@@ -142,8 +181,22 @@ export default Ember.Component.extend(AuthProvider, {
 			let drop = this.get('drop');
 			drop.close();
 
-			let user = this.get('deleteUser');
+			this.set('selectedUsers', []);
-			this.attrs.onDelete(user);
+			this.set('hasSelectedUsers', false);
+			this.attrs.onDelete(this.get('deleteUser.id'));
+		},
+
+		onBulkDelete() {
+			let su = this.get('selectedUsers');
+			
+			su.forEach(userId => {
+				this.attrs.onDelete(userId);
+			});
+
+			this.set('selectedUsers', []);
+			this.set('hasSelectedUsers', false);
+			
+			return true;
 		}
 	}
 });

app/app/pods/customize/users/controller.js

@@ -32,9 +32,9 @@ export default Ember.Controller.extend(NotifierMixin, {
 				});
 		},
 
-		onDelete(user) {
+		onDelete(userId) {
 			let self = this;
-			this.get('userService').remove(user.get('id')).then(function () {
+			this.get('userService').remove(userId).then(function () {
 				self.showNotification('Deleted');
 
 				self.get('userService').getComplete().then(function (users) {

app/app/pods/customize/users/template.hbs

@@ -2,4 +2,4 @@
 
 <div class="clearfix" />
 
-{{customize/user-list users=model onDelete=(action "onDelete") onSave=(action "onSave") onPassword=(action "onPassword")}}
+{{customize/user-admin users=model onDelete=(action "onDelete") onSave=(action "onSave") onPassword=(action "onPassword")}}

app/app/styles/view/page-customize.scss

@@ -1,7 +1,7 @@
 .page-customize {
 	@include content-container();
 
-	.user-list {
+	.user-admin {
 		margin: 30px 0;
 
 		> .heading {
@@ -13,16 +13,73 @@
 
 		> .basic-table {
 			background-color: $color-white;
-			font-size: 0.9rem;
+			border: none !important;
+			font-size: 1rem;
+			color: $color-off-black;
+
+			> thead {
+				> tr {
+					> th {
+						height: 40px;
+						font-weight: bold;
+						color: $color-gray;
+					}
+
+					> th:first-child {
+						font-weight: normal;
+					}
+
+					> th:last-child {
+						text-align: center;
+					}
+				}
+			}
+
+			> tbody {
+				> tr {
+					> td {
+						vertical-align: middle;
+						text-align: center;
+
+						> .selector {
+							> i {
+								color: $color-off-black;
+							}
+						}
+
+						> .name {
+							font-size: 1rem;
+							color: $color-off-black;
+							margin: 0 0 0 30px;
+						}
+
+						> .email {
+							font-size: 0.9rem;
+							color: $color-gray;
+							margin: 0 0 0 30px;
+						}
+					}
+
+					> td:first-child, td:last-child {
+						text-align: left;
+					}
+				}
+			}
 		}
 
-		.inactive
+		.inactive-user
 		{
 			@extend .color-red;
 			font-weight: normal;
 			text-decoration: line-through;
 		}
 
+		.admin-user
+		{
+			@extend .color-primary;
+			font-weight: normal;
+		}
+
 		.checkbox {
 			color: $color-checkbox;
 			cursor: pointer;

app/app/templates/components/customize/user-admin.hbs

@@ -1,51 +1,76 @@
-<div class="user-list">
+<div class="user-admin">
 	<div class="form-header">
 		<div class="title">User Management</div>
 		<div class="tip">Set basic information, passwords and permissions for {{users.length}} users</div>
 	</div>
+
     <table class="basic-table">
         <thead>
             <tr>
-                <th class="border-bottom border-top">Firstname</th>
+                <th class="">
-                <th class="border-bottom border-top">Lastname</th>
+                    <div class="input-inline input-transparent">
-                <th class="border-bottom border-top">Email</th>
+                        {{focus-input type="text" placeholder="< type here to filter users >" value=filter}}
-                <th class="border-bottom border-top no-width">Active</th>
+                    </div>
-                <th class="border-bottom border-top no-width">Add Spaces</th>
+                </th>
-                <th class="border-bottom border-top no-width">Admin</th>
+                <th class="no-width">Create spaces</th>
-                <th class="border-bottom border-top no-width">&nbsp;</th>
+                <th class="no-width">Is administrator</th>
+                <th class="no-width">Is active</th>
+                <th class="no-width">
+                    {{#if hasSelectedUsers}}
+                        <div class="round-button round-button-small button-red" id="bulk-delete-users">
+                            <i class="material-icons">delete</i>
+                        </div>
+                        {{#dropdown-dialog target="bulk-delete-users" position="bottom right" button="Delete" color="flat-red" onAction=(action 'onBulkDelete')}}
+                            <p>Are you sure you want to delete selected users?</p>
+                        {{/dropdown-dialog}}
+                    {{/if}}
+                </th>
             </tr>
         </thead>
         <tbody>
-            {{#each users as |user|}}
+            {{#each filteredUsers as |user|}}
                 <tr>
-                    <td class="border-bottom {{if user.active '' 'inactive'}}">{{ user.firstname }}</td>
+                    <td class="{{unless user.active 'inactive-user'}} {{if user.admin 'admin-user'}}">
-                    <td class="border-bottom {{if user.active '' 'inactive'}}">{{ user.lastname }}</td>
+                        <div class="selector pull-left">
-                    <td class="border-bottom {{if user.active '' 'inactive'}}">{{ user.email }}</td>
+                            {{#unless user.me}}
-                    <td class="border-bottom no-width">
+                                {{#if user.selected}}
-                        {{#if user.me}}
+                                    <i class="material-icons checkbox" {{action 'toggleSelect' user}}>check_box</i>
-                            <i class="material-icons">check_box</i> {{else if user.active}}
+                                {{else}}
-                            <i class="material-icons checkbox" {{action 'toggleActive' user.id}}>check_box</i>
+                                    <i class="material-icons checkbox" {{action 'toggleSelect' user}}>check_box_outline_blank</i>
-                        {{else}}
+                                {{/if}}
-                            <i class="material-icons checkbox" {{action 'toggleActive' user.id}}>check_box_outline_blank</i>
+                            {{/unless}}
-                        {{/if}}
+                        </div>
+                        <div class="name">{{ user.fullname }}</div>
+                        <div class="email">{{ user.email }}</div>
                     </td>
-                    <td class="border-bottom no-width">
+                    <td class="no-width text-center">
                         {{#if user.me}}
-                            <i class="material-icons">check_box</i> {{else if user.editor}}
+                            <i class="material-icons color-gray">check_box</i>
+                        {{else if user.editor}}
                             <i class="material-icons checkbox" {{action 'toggleEditor' user.id}}>check_box</i>
                         {{else}}
                             <i class="material-icons checkbox" {{action 'toggleEditor' user.id}}>check_box_outline_blank</i>
                         {{/if}}
                     </td>
-                    <td class="border-bottom no-width">
+                    <td class="no-width text-center">
                         {{#if user.me}}
-                            <i class="material-icons">check_box</i> {{else if user.admin}}
+                            <i class="material-icons color-gray">check_box</i>
+                        {{else if user.admin}}
                             <i class="material-icons checkbox" {{action 'toggleAdmin' user.id}}>check_box</i>
                         {{else}}
                             <i class="material-icons checkbox" {{action 'toggleAdmin' user.id}}>check_box_outline_blank</i>
                         {{/if}}
                     </td>
-                    <td class="border-bottom no-width">
+                    <td class="no-width text-center">
+                        {{#if user.me}}
+                            <i class="material-icons color-gray">check_box</i>
+                        {{else if user.active}}
+                            <i class="material-icons checkbox" {{action 'toggleActive' user.id}}>check_box</i>
+                        {{else}}
+                            <i class="material-icons checkbox" {{action 'toggleActive' user.id}}>check_box_outline_blank</i>
+                        {{/if}}
+                    </td>
+                    <td class="no-width text-center">
                         {{#if user.me}}
                             <div class="edit-button-{{user.id}} round-button-mono" title="Edit" {{action "edit" user.id}}>
                                 <i class="material-icons">edit</i>

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "documize",
-  "version": "1.45.2",
+  "version": "1.45.3",
   "description": "The Document IDE",
   "private": true,
   "repository": "",

core/api/endpoint/server.go

@@ -35,7 +35,7 @@ var Product core.ProdInfo
 func init() {
 	Product.Major = "1"
 	Product.Minor = "45"
-	Product.Patch = "2"
+	Product.Patch = "3"
 	Product.Version = fmt.Sprintf("%s.%s.%s", Product.Major, Product.Minor, Product.Patch)
 	Product.Edition = "Community"
 	Product.Title = fmt.Sprintf("%s Edition", Product.Edition)