Merge pull request #1619 from emanuelschuetze/agenda-template

Agenda item list: new multiselect delete mode
2015-09-14 20:43:39 +02:00 · 2015-09-14 20:43:39 +02:00 · d79bad80f6
commit d79bad80f6
parent e5008c1f53 7f9c8b6a38
6 changed files with 467 additions and 348 deletions
--- a/bower.json
+++ b/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",
--- a/openslides/agenda/static/js/agenda/agenda.js
+++ b/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;
-    })
-});
+    }
+]);
--- a/openslides/agenda/static/templates/agenda/item-list.html
+++ b/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>
--- a/openslides/agenda/static/templates/agenda/slide-item-list.html
+++ b/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>
--- a/openslides/core/static/css/app.css
+++ b/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;
 }
--- a/openslides/core/static/js/core/core.js
+++ b/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) {