Agenda item list: new multiselect delete mode

Remove action column.

bower.json

@@ -14,6 +14,7 @@
     "angular-loading-bar": "~0.7.1",
     "angular-ui-router": "~0.2.13",
     "angular-ui-select": "~0.12",
+    "angular-ui-switch": "~0.1.0",
     "angular-ui-tree": "~2.2.0",
     "angular-gettext": "~2.0.2",
     "angular-sanitize": "~1.3.15",

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

@@ -2,7 +2,9 @@
 
 angular.module('OpenSlidesApp.agenda', ['OpenSlidesApp.users'])
 
-.factory('Speaker', ['DS', function(DS) {
+.factory('Speaker', [
+    'DS',
+    function(DS) {
         return DS.defineResource({
             name: 'agenda/speaker',
             relations: {
@@ -14,9 +16,14 @@ angular.module('OpenSlidesApp.agenda', ['OpenSlidesApp.users'])
                 }
             }
         });
-}])
+    }
+])
 
-.factory('Agenda', ['DS', 'Speaker', 'jsDataModel', function(DS, Speaker, jsDataModel) {
+.factory('Agenda', [
+    'DS',
+    'Speaker',
+    'jsDataModel',
+    function(DS, Speaker, jsDataModel) {
         var name = 'agenda/item'
         return DS.defineResource({
             name: name,
@@ -39,7 +46,8 @@ angular.module('OpenSlidesApp.agenda', ['OpenSlidesApp.users'])
                 }
             }
         });
-}])
+    }
+])
 
 // Make sure that the Agenda resource is loaded.
 .run(['Agenda', function(Agenda) {}]);
@@ -60,7 +68,9 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
     }
 ])
 
-.config(function($stateProvider) {
+.config([
+    '$stateProvider',
+    function($stateProvider) {
         $stateProvider
             .state('agenda', {
                 url: '/agenda',
@@ -126,13 +136,14 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
                 url: '/import',
                 controller: 'AgendaImportCtrl',
             });
-})
+    }
+])
 
 .factory('AgendaTree', [
     function () {
         return {
             getTree: function (items) {
-                // sortieren nach weight???
+                // TODO: sortieren nach weight???
 
                 // Build a dict with all children (dict-value) to a specific
                 // item id (dict-key).
@@ -190,7 +201,14 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
     }
 ])
 
-.controller('ItemListCtrl', function($scope, $http, Agenda, Projector, AgendaTree) {
+.controller('ItemListCtrl', [
+    '$scope',
+    '$http',
+    '$state',
+    'Agenda',
+    'AgendaTree',
+    'Projector',
+    function($scope, $http, $state, Agenda, AgendaTree, Projector) {
         // Bind agenda tree to the scope
         $scope.$watch(function () {
             return Agenda.lastModified();
@@ -198,14 +216,43 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
             $scope.items = AgendaTree.getFlatTree(Agenda.getAll());
         });
 
+        // open detail view link
+        $scope.openDetail = function (id) {
+            $state.go('agenda.item.detail', {id: id});
+        }
+
         // save changed item
         $scope.save = function (item) {
             Agenda.save(item);
         };
-    // delete selected item
-    $scope.delete = function (id) {
-        Agenda.destroy(id);
+
+        // *** delete mode functions ***
+        $scope.isDeleteMode = false;
+        // check all checkboxes
+        $scope.checkAll = function () {
+            angular.forEach($scope.items, function (item) {
+                item.selected = $scope.selectedAll;
+            });
         };
+        // uncheck all checkboxes if isDeleteMode is closed
+        $scope.uncheckAll = function () {
+            if (!$scope.isDeleteMode) {
+                $scope.selectedAll = false;
+                angular.forEach($scope.items, function (item) {
+                    item.selected = false;
+                });
+            }
+        };
+        // delete selected item
+        $scope.delete = function () {
+            angular.forEach($scope.items, function (item) {
+                if (item.selected)
+                    Agenda.destroy(item.id);
+            });
+            $scope.isDeleteMode = false;
+            $scope.uncheckAll();
+        };
+
         // project agenda
         $scope.projectAgenda = function () {
             $http.post('/rest/core/projector/1/prune_elements/',
@@ -223,9 +270,16 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
             }) > -1;
 
         };
-})
+    }
+])
 
-.controller('ItemDetailCtrl', function($scope, $http, Agenda, User, item) {
+.controller('ItemDetailCtrl', [
+    '$scope',
+    '$http',
+    'Agenda',
+    'User',
+    'item',
+    function ($scope, $http, Agenda, User, item) {
         Agenda.bindOne(item.id, $scope, 'item');
         User.bindAll({}, $scope, 'users');
         $scope.speaker = {};
@@ -279,9 +333,16 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
             $http.post('/rest/core/projector/1/prune_elements/',
                     [{name: 'agenda/item', id: item.id, list_of_speakers: true}]);
         };
-})
+    }
+])
 
-.controller('ItemCreateCtrl', function($scope, $state, Agenda, Tag, types) {
+.controller('ItemCreateCtrl', [
+    '$scope',
+    '$state',
+    'Agenda',
+    'Tag',
+    'types',
+    function($scope, $state, Agenda, Tag, types) {
         $scope.types = types.data.actions.POST.type.choices;  // get all item types
         Tag.bindAll({}, $scope, 'tags');
         $scope.save = function (item) {
@@ -293,9 +354,17 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
                 }
             );
         };
-})
+    }
+])
 
-.controller('ItemUpdateCtrl', function($scope, $state, Agenda, Tag, types, item) {
+.controller('ItemUpdateCtrl', [
+    '$scope',
+    '$state',
+    'Agenda',
+    'Tag',
+    'types',
+    'item',
+    function($scope, $state, Agenda, Tag, types, item) {
         $scope.types = types.data.actions.POST.type.choices;  // get all item types
         Tag.bindAll({}, $scope, 'tags');
         $scope.item = item;
@@ -306,9 +375,15 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
                 }
             );
         };
-})
+    }
+])
 
-.controller('AgendaSortCtrl', function($scope, $http, Agenda, AgendaTree) {
+.controller('AgendaSortCtrl', [
+    '$scope',
+    '$http',
+    'Agenda',
+    'AgendaTree',
+    function($scope, $http, Agenda, AgendaTree) {
         // Bind agenda tree to the scope
         $scope.$watch(function () {
             return Agenda.lastModified();
@@ -319,12 +394,17 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
         // set changed agenda tree
         $scope.treeOptions = {
             dropped: function() {
-            $http.put('/rest/agenda/item/tree/', {tree: $scope.items});
+                $http.put('/rest/agenda/item/tree/', {tree: $scope.tree});
             }
         };
-})
+    }
+])
 
-.controller('AgendaImportCtrl', function($scope, $state, Agenda) {
+.controller('AgendaImportCtrl', [
+    '$scope',
+    '$state',
+    'Agenda',
+    function($scope, $state, Agenda) {
         // import from textarea
         $scope.importByLine = function () {
             $scope.items = $scope.itemlist[0].split("\n");
@@ -365,24 +445,26 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
             }
             $scope.csvimported = true;
         }
-
         $scope.clear = function () {
             $scope.csv.result = null;
         };
-
-});
+     }
+]);
 
 
 angular.module('OpenSlidesApp.agenda.projector', ['OpenSlidesApp.agenda'])
 
-.config(function(slidesProvider) {
+.config([
+    'slidesProvider',
+    function(slidesProvider) {
         slidesProvider.registerSlide('agenda/item', {
             template: 'static/templates/agenda/slide-item-detail.html',
         });
         slidesProvider.registerSlide('agenda/item-list', {
             template: 'static/templates/agenda/slide-item-list.html',
         });
-})
+    }
+])
 
 .controller('SlideItemDetailCtrl', [
     '$scope',
@@ -401,18 +483,21 @@ angular.module('OpenSlidesApp.agenda.projector', ['OpenSlidesApp.agenda'])
     }
 ])
 
-.controller('SlideItemListCtrl', function($scope, $http, Agenda) {
+.controller('SlideItemListCtrl', [
+    '$scope',
+    '$http',
+    'Agenda',
+    'AgendaTree',
+    function($scope, $http, Agenda, AgendaTree) {
         // Attention! Each object that is used here has to be dealt on server side.
         // Add it to the coresponding get_requirements method of the ProjectorElement
         // class.
-    Agenda.findAll();
-    Agenda.bindAll({}, $scope, 'items');
-    $scope.ids = [];
-    var tree = $http.get('/rest/agenda/item/tree/').success(function(data) {
-        var ids = [];
-        angular.forEach(data,function(element) {
-            ids.push(element.id)
+
+        // Bind agenda tree to the scope
+        $scope.$watch(function () {
+            return Agenda.lastModified();
+        }, function () {
+            $scope.items = AgendaTree.getFlatTree(Agenda.getAll());
         });
-        $scope.ids = ids;
-    })
-});
+    }
+]);

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

@@ -23,74 +23,93 @@
   </a>
 </div>
 
-<div class="row form-group">
+
+<div class="row">
   <div class="col-sm-8">
-    <!-- project agenda -->
-    <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
+    <form class="form-inline">
+      <!-- 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>
+      <div class="form-group">
+        <!-- project agenda button -->
+        <a ng-show="!isDeleteMode" os-perms="core.can_manage_projector"
+            class="btn btn-default btn-sm form-control"
             ng-click="projectAgenda()"
             ng-class="{ 'btn-primary': isAgendaProjected() }">
           <i class="fa fa-video-camera"></i>
           <translate>Project agenda</translate>
         </a>
+        <!-- delete button -->
+        <a ng-show="isDeleteMode && (items|filter:{selected:true}).length > 0"
+            os-perms="agenda.can_manage" ng-click="delete()"
+            class="btn btn-primary btn-sm form-control">
+          <i class="fa fa-trash fa-lg"></i>
+          <translate>Delete selected items</translate>
+        </a>
+      </div>
+    </form>
   </div>
   <div class="col-sm-4">
+    <div class="input-group">
+      <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>
 
-<i>{{ items.length }} {{ "items" | translate }}</i>
+<i>
+  {{ items.length }} {{ "items" | translate }}<span ng-if="(items|filter:{selected:true}).length > 0">,
+  {{(items|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
+</i>
 <table class="table table-striped table-bordered table-hover">
   <thead>
     <tr>
-      <th class="minimum">
-        <translate>Closed</translate>
+      <!-- projector column -->
+      <th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="firstColumn">
+      <!-- delete selection column -->
+      <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 -->
       <th>
         <translate>Agenda item</translate>
       <th os-perms="agenda.can_manage">
         <translate>Duration</translate>
-      <th os-perms="agenda.can_manage core.can_manage_projector" class="minimum">
-        <translate>Actions</translate>
+      <th class="minimum">
+        <translate>Done</translate>
   <tbody>
-    <tr ng-repeat="item in items"
-        ng-class="{ 'activeline': item.isProjected() }">
-      <td>
-        <!-- Please do not use ng-click, but ng-change -->
-        <input type="checkbox" ng-model="item.closed" ng-click="save(item.id)">
+    <tr ng-repeat="item in items | filter: filter.search"
+        ng-click="openDetail(item.id)"
+        ng-class="{ 'activeline': item.isProjected() }"
+        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': item.isProjected() }"
+            ng-click="item.project(); $event.stopPropagation();"
+            title="{{ 'Project item' | translate }}">
+          <i class="fa fa-video-camera"></i>
+        </a>
+      <!-- delete selection column -->
+      <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 -->
       <td>
         <span ng-repeat="n in [].constructor(item.parentCount) track by $index">&ndash;</span>
-        <a ui-sref="agenda.item.detail({id: item.id})">
-          {{ item.item_number }}
-          {{ item.title }}
-        </a>
+          {{ item.item_number }} {{ item.title }}
         <div ng-if="item.comment">
           <small><i class="fa fa-info-circle"></i> {{ item.comment }}</small>
         </div>
       <td os-perms="agenda.can_manage" class="optional">
-        <a href="#" editable-number="item.duration" e-min="1" onaftersave="save(item.id)">
         {{ item.duration }}
-        </a>
-        <span ng-if="item.duration" translate>min</span>
-      <td os-perms="agenda.can_manage core.can_manage_projector" class="nobr">
-        <!-- project -->
-        <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
-            ng-class="{ 'btn-primary': item.isProjected() }"
-            ng-click="item.project()"
-            title="{{ 'Project item' | translate }}">
-          <i class="fa fa-video-camera"></i>
-        </a>
-        <!-- edit -->
-        <a ui-sref="agenda.item.detail.update({id: item.id })" os-perms="agenda.can_manage"
-            class="btn btn-default btn-sm"
-            title="{{ 'Edit' | translate }}">
-          <i class="fa fa-pencil"></i>
-        </a>
-        <!-- delete -->
-        <a os-perms="agenda.can_manage" class="btn btn-danger btn-sm"
-            ng-bootbox-confirm="Are you sure you want to delete
-              <b>{{ item.title }}</b>?"
-            ng-bootbox-confirm-action="delete(item.id)"
-            title="{{ 'Delete' | translate }}">
-          <i class="fa fa-trash-o"></i>
-        </a>
+        <span ng-if="item.duration" translate>h</span>
+      <td ng-click="$event.stopPropagation();">
+        <input type="checkbox" ng-model="item.closed" ng-change="save(item.id);">
 </table>

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

@@ -2,10 +2,10 @@
   <h1 translate>Agenda</h1>
 
   <table class="tablelist">
-    <tr ng-repeat="id in ids">
-      <td class="leftcolumn nobr" ng-class="{ 'closed': (items | filter: {id: id})[0].closed }">
-        {{ (items | filter: {id: id})[0].item_number }}
-      <td class="rightcolumn" ng-class="{ 'closed': (items | filter: {id: id})[0].closed }">
-        {{ (items | filter: {id: id})[0].title }}
+    <tr ng-repeat="item in items">
+      <td class="leftcolumn nobr" ng-class="{ 'closed': item.closed }">
+        {{ item.item_number }}
+      <td class="rightcolumn" ng-class="{ 'closed': item.closed }">
+        {{ item.title }}
   </table>
 </div>

openslides/core/static/css/app.css

@@ -184,7 +184,7 @@ a:hover {
 }
 
 /* List tables */
-th.sortable:hover {
+th.sortable:hover, tr.pointer:hover {
     cursor: pointer;
 }
 
@@ -246,7 +246,7 @@ tr.offline td, li.offline {
     background-color: #EAEAEA !important;
 }
 tr.activeline td, li.activeline {
-    background-color: #bed4de !important;
+    background-color: #bed4de;
 }
 .nopadding {
     padding: 0;
@@ -266,6 +266,19 @@ tr.total td {
 .indentation {
     margin-left: 12px;
 }
+.firstColumn {
+    width: 55px;
+}
+.deleteColumn {
+    text-align: center;
+    background-color: #ff9999 !important;
+}
+.switch.checked {
+    background-color: #ff9999 !important;
+    border-color: #ff9999;
+}
+
+
 .minimum, .mini_width {
     width: 1px;
 }

openslides/core/static/js/core/core.js

@@ -8,6 +8,7 @@ angular.module('OpenSlidesApp.core', [
     'ngAnimate',
     'ui.bootstrap',
     'ui.tree',
+    'uiSwitch',
 ])
 
 .config(['DSProvider', 'DSHttpAdapterProvider', function(DSProvider, DSHttpAdapterProvider) {