Merge pull request #1649 from emanuelschuetze/users-templates

Added multiselection delete mode for users list view.

openslides/agenda/static/js/agenda/agenda.js

@@ -222,7 +222,7 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
         // open detail view link
         $scope.openDetail = function (id) {
             $state.go('agenda.item.detail', {id: id});
-        }
+        };
 
         // save changed item
         $scope.save = function (item) {

openslides/agenda/static/templates/agenda/item-list.html

@@ -73,7 +73,7 @@
       <!-- projector column -->
       <th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="firstColumn">
       <!-- delete selection column -->
-      <th ng-show="isDeleteMode" os-perms="agenda.can_manage" class="firstColumn deleteColumn"
+      <th ng-show="isDeleteMode" os-perms-lite="agenda.can_manage" class="firstColumn deleteColumn"
           ng-click="$event.stopPropagation();">
         <input type="checkbox" ng-model="selectedAll" ng-change="checkAll()">
       <!-- agenda item column -->
@@ -100,10 +100,10 @@
       <td ng-show="isDeleteMode" os-perms="agenda.can_manage" class="deleteColumn"
           ng-click="$event.stopPropagation();">
         <input type="checkbox" ng-model="item.selected">
-      <!-- agenda item column -->
+      <!-- agenda data columns -->
       <td>
         <span ng-repeat="n in [].constructor(item.parentCount) track by $index">&ndash;</span>
-          {{ item.item_number }} {{ item.title }}
+        {{ item.item_number }} {{ item.title }}
         <div ng-if="item.comment">
           <small><i class="fa fa-info-circle"></i> {{ item.comment }}</small>
         </div>

openslides/users/static/js/users/users.js

@@ -350,33 +350,66 @@ angular.module('OpenSlidesApp.users.site', ['OpenSlidesApp.users'])
     }
 ])
 
-.controller('UserListCtrl', function($scope, User, Group) {
+.controller('UserListCtrl', [
-    User.bindAll({}, $scope, 'users');
+    '$scope',
-    Group.bindAll({}, $scope, 'groups');
+    '$state',
+    'User',
+    'Group',
+    function($scope, $state, User, Group) {
+        User.bindAll({}, $scope, 'users');
+        Group.bindAll({}, $scope, 'groups');
 
-    // setup table sorting
+        // setup table sorting
-    $scope.sortColumn = 'first_name'; //TODO: sort by first OR last name
+        $scope.sortColumn = 'first_name'; //TODO: sort by first OR last name
-    $scope.filterPresent = '';
+        $scope.filterPresent = '';
-    $scope.reverse = false;
+        $scope.reverse = false;
-    // function to sort by clicked column
+        // function to sort by clicked column
-    $scope.toggleSort = function ( column ) {
+        $scope.toggleSort = function ( column ) {
-        if ( $scope.sortColumn === column ) {
+            if ( $scope.sortColumn === column ) {
-            $scope.reverse = !$scope.reverse;
+                $scope.reverse = !$scope.reverse;
-        }
+            }
-        $scope.sortColumn = column;
+            $scope.sortColumn = column;
-    };
+        };
 
-    // save changed user
+        // open detail view link
-    $scope.togglePresent = function (user) {
+        $scope.openDetail = function (id) {
-        //the value was changed by the template (checkbox)
+            $state.go('users.user.detail', {id: id});
-        User.save(user);
+        };
-    };
 
-    // delete selected user
+        // save changed user
-    $scope.delete = function (user) {
+        $scope.togglePresent = function (user) {
-        User.destroy(user.id);
+            //the value was changed by the template (checkbox)
-    };
+            User.save(user);
-})
+        };
+
+        // *** delete mode functions ***
+        $scope.isDeleteMode = false;
+        // check all checkboxes
+        $scope.checkAll = function () {
+            angular.forEach($scope.users, function (user) {
+                user.selected = $scope.selectedAll;
+            });
+        };
+        // uncheck all checkboxes if isDeleteMode is closed
+        $scope.uncheckAll = function () {
+            if (!$scope.isDeleteMode) {
+                $scope.selectedAll = false;
+                angular.forEach($scope.users, function (user) {
+                    user.selected = false;
+                });
+            }
+        };
+        // delete selected user
+        $scope.delete = function () {
+            angular.forEach($scope.users, function (user) {
+                if (user.selected)
+                    User.destroy(user.id);
+            });
+            $scope.isDeleteMode = false;
+            $scope.uncheckAll();
+        };
+    }
+])
 
 .controller('UserDetailCtrl', function($scope, User, user, Group) {
     User.bindOne(user.id, $scope, 'user');
@@ -469,7 +502,14 @@ angular.module('OpenSlidesApp.users.site', ['OpenSlidesApp.users'])
             user.first_name = obj[i].first_name;
             user.last_name = obj[i].last_name;
             user.structure_level = obj[i].structure_level;
-            user.groups = obj[i].groups;
+            user.groups = [];
+            if (obj[i].groups != '') {
+                var groups = obj[i].groups.replace('"','').split(",");
+                groups.forEach(function(group) {
+                    user.groups.push(group);
+                    console.log(group);
+                });
+            }
             user.comment = obj[i].comment;
             User.create(user).then(
                 function(success) {

openslides/users/static/templates/users/user-import.html

@@ -86,7 +86,7 @@ Keep each person in a single line.</p>
   </div>
   <a ng-if="csvimported" ui-sref="users.user.list" class="btn btn-sm btn-default">
     <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to agenda overview</translate>
+    <translate>Back to users overview</translate>
   </a>
 </div>
   <p>

openslides/users/static/templates/users/user-list.html

@@ -38,23 +38,45 @@
 
 <div class="row form-group">
   <div class="col-sm-8">
-    <input type="checkbox" ng-model="filterPresent" ng-false-value="''">
+    <form class="form-inline">
-    <translate>Is present</translate>
+      <!-- delete mode -->
+      <div os-perms-lite="agenda.can_manage" class="form-group">
+        <label for="deleteSwitcher" translate>Delete mode</label>
+        <switch id="deleteSwitcher" ng-model="isDeleteMode" ng-change="uncheckAll()"
+            on="{{'On'|translate}}" off="{{'Off'|translate}}"
+            class="green wide form-control">
+        </switch>
+      </div>
+      <!-- delete button -->
+      <a ng-show="isDeleteMode && (users|filter:{selected:true}).length > 0"
+          os-perms="users.can_manage" ng-click="delete()"
+          class="btn btn-primary btn-sm form-control">
+        <i class="fa fa-trash fa-lg"></i>
+        <translate>Delete selected users</translate>
+      </a>
+      <!-- isPresent filter -->
+      <input type="checkbox" ng-model="filterPresent" ng-false-value="''">
+      <translate>Is present</translate>
+    </form>
   </div>
   <div class="col-sm-4">
-    <input type="text" os-focus-me ng-model="filter.search" class="form-control"
+    <div class="input-group">
-        placeholder="{{ 'Filter' | translate}}">
+      <div class="input-group-addon"><i class="fa fa-filter"></i></div>
+      <input type="text" os-focus-me ng-model="filter.search" class="form-control"
+         placeholder="{{ 'Filter' | translate}}">
+    </div>
   </div>
 </div>
 
 <table class="table table-striped table-bordered table-hover">
   <thead>
     <tr>
-      <th ng-click="toggleSort('is_present')" class="sortable minimum">
+      <!-- projector column -->
-        <translate>Present</translate>
+      <th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="firstColumn">
-        <i class="pull-right fa" ng-show="sortColumn === 'is_present' && header.sortable != false"
+      <!-- delete selection column -->
-            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+      <th ng-show="isDeleteMode" os-perms-lite="users.can_manage" class="firstColumn deleteColumn"
-        </i>
+          ng-click="$event.stopPropagation();">
+        <input type="checkbox" ng-model="selectedAll" ng-change="checkAll()">
       <th ng-click="toggleSort('first_name')" class="sortable">
         <translate>Name</translate>
         <!-- TODO: sort by first OR last name -->
@@ -71,37 +93,38 @@
         <i class="pull-right fa" ng-show="sortColumn === 'groups' && header.sortable != false"
             ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
         </i>
-      <th os-perms="users.can_manage core.can_manage_projector" class="minimum">
+      <th ng-click="toggleSort('is_present')" class="sortable minimum">
-        <translate>Actions</translate>
+        <translate>Present</translate>
+        <i class="pull-right fa" ng-show="sortColumn === 'is_present' && header.sortable != false"
+            ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
+        </i>
   <tbody>
     <tr ng-repeat="user in users | filter: filter.search | filter: {is_present: filterPresent} |
-        orderBy: sortColumn:reverse" ng-class="{ 'activeline': user.isProjected() }">
+        orderBy: sortColumn:reverse"
-      <td><input type="checkbox" ng-model="user.is_present" ng-click="togglePresent(user)">
+        ng-click="openDetail(user.id)"
-      <td><a ui-sref="users.user.detail({id: user.id})">{{ user.get_short_name() }}</a>
+        ng-class="{ 'activeline': user.isProjected() }"
-          <div ng-if="user.comment"><small><i class="fa fa-info-circle"></i> {{ user.comment }}</small></div>
+        class="pointer">
+      <!-- projector column -->
+      <td ng-show="!isDeleteMode" os-perms="core.can_manage_projector">
+        <a class="btn btn-default btn-sm"
+            ng-class="{ 'btn-primary': user.isProjected() }"
+            ng-click="user.project(); $event.stopPropagation();"
+            title="{{ 'Project user' | translate }}">
+          <i class="fa fa-video-camera"></i>
+        </a>
+      <!-- delete selection column -->
+      <td ng-show="isDeleteMode" os-perms="users.can_manage" class="deleteColumn"
+          ng-click="$event.stopPropagation();">
+        <input type="checkbox" ng-model="user.selected">
+      <!-- user data colums -->
+      <td>{{ user.get_short_name() }}
+          <div ng-if="user.comment">
+            <small><i class="fa fa-info-circle"></i> {{ user.comment }}</small>
+          </div>
       <td class="optional">{{ user.structure_level }}
       <td class="optional">
         <div ng-repeat="group in user.groups">
           {{ (groups | filter: {id: group})[0].name }}
         </div>
-      <td os-perms="users.can_manage core.can_manage_projector" class="nobr">
+      <td><input type="checkbox" ng-model="user.is_present" ng-click="togglePresent(user)">
-        <!-- project -->
-        <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm" ng-class="{ 'btn-primary': user.isProjected() }"
-            ng-click="user.project()"
-            title="{{ 'Project user' | translate }}">
-          <i class="fa fa-video-camera"></i>
-        </a>
-        <!-- edit -->
-        <a ui-sref="users.user.detail.update({id: user.id})" os-perms="users.can_manage"
-            class="btn btn-default btn-sm"
-            title="{{ 'Edit' | translate}}">
-          <i class="fa fa-pencil"></i>
-        </a>
-        <!-- delete -->
-        <a os-perms="users.can_manage" class="btn btn-danger btn-sm"
-            ng-bootbox-confirm="Are you sure you want to delete <b>{{ user.get_short_name() }}</b>?"
-            ng-bootbox-confirm-action="delete(user)"
-            title="{{ 'Delete' | translate }}">
-          <i class="fa fa-trash-o"></i>
-        </a>
 </table>