List of speakers with angularjs.

- Add/remove user to/from list
- Open/close list

bower.json

@@ -13,7 +13,7 @@
     "angular-csv-import": "~0.0.15",
     "angular-loading-bar": "~0.7.1",
     "angular-ui-router": "~0.2.13",
-    "angular-ui-select": "~0.11.2",
+    "angular-ui-select": "~0.12",
     "angular-ui-tree": "~2.2.0",
     "angular-gettext": "~2.0.2",
     "angular-sanitize": "~1.3.15",

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

@@ -116,9 +116,33 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
     };
 })
 
-.controller('ItemDetailCtrl', function($scope, Agenda, User, item) {
+.controller('ItemDetailCtrl', function($scope, $http, Agenda, User, item) {
     Agenda.bindOne(item.id, $scope, 'item');
     User.bindAll({}, $scope, 'users');
+    $scope.speaker = {};
+    $scope.alert = {};
+
+    // close/open list of speakers of current item
+    $scope.closeList = function (listClosed) {
+        item.speakerListClosed = listClosed;
+        Agenda.save(item);
+    };
+    // add user to list of speakers
+    $scope.addSpeaker = function (userId) {
+        $http.post('/rest/agenda/item/' + item.id + '/manage_speaker/', {'user': userId})
+            .success(function(data){
+                $scope.alert.show = false;
+            })
+            .error(function(data){
+                $scope.alert = { type: 'danger', msg: data.detail, show: true };
+            });
+    };
+    // delete speaker(!) from list of speakers
+    $scope.removeSpeaker = function (speakerId) {
+        $http.delete('/rest/agenda/item/' + item.id + '/manage_speaker/',
+                {headers: {'Content-Type': 'application/json'},
+                 data: JSON.stringify({speaker: speakerId})});
+    };
 })
 
 .controller('ItemCreateCtrl', function($scope, $state, Agenda, types) {

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

@@ -31,26 +31,52 @@
 </div>
 
 
-<h3 translate>List of speakers</h3>
+<h3 translate>List of speakers
+  <span ng-if="item.speakerListClosed" class="label label-danger" translate>closed</span>
+  <span os-perms="agenda.can_manage">
+    <button ng-if="item.speakerListClosed" ng-click="closeList(false)"
+        class="btn btn-sm btn-default" translate>
+      Open list
+    </button>
+    <button ng-if="!item.speakerListClosed" ng-click="closeList(true)"
+        class="btn btn-sm btn-default" translate>
+      Close list
+    </button>
+  </span>
+</h3>
+
 <!-- TODO:
-   * open/close list
-   * add/remove speakers
    * project list
    * show old/current/next speakers
+   * start/stop speech
    * button 'put/remove me on/from the list'
    * check permissions
 -->
-<div class="form-group row">
+<ol>
-  <div class="col-sm-6">
+  <li ng-repeat="speaker in item.speaker_set">
-    <ui-select ng-model="speaker.selected" theme="bootstrap">
+    {{ (users | filter: {id: speaker.user})[0].get_full_name() }}
+    <button os-perms="agenda.can_manage" ng-click="removeSpeaker(speaker.id)"
+        class="btn btn-default btn-xs">
+      <i class="fa fa-times"></i>
+    </button>
+  </li>
+</ol>
+
+<div os-perms="agenda.can_manage" class="form-group col-sm-6">
+  <alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">{{alert.msg}}</alert>
+  <div class="input-group">
+    <ui-select ng-model="speaker.selected" ng-change="addSpeaker(speaker.selected.id)">
       <ui-select-match placeholder="{{ 'Select or search a participant...' | translate }}">
-        {{ $select.selected.get_short_name() }}
+        {{ $select.selected.get_full_name() }}
       </ui-select-match>
-      <ui-select-choices repeat="user.id as user in users | filter: $select.search">
+      <ui-select-choices repeat="user in users | filter: $select.search">
-        <div ng-bind-html="user.get_short_name() | highlight: $select.search"></div>
+        <div ng-bind-html="user.get_full_name() | highlight: $select.search"></div>
-        <small ng-bind-html="user.structure_level | highlight: $select.search"></small>
       </ui-select-choices>
     </ui-select>
+    <span class="input-group-btn">
+      <a ng-click="speaker={}" class="btn btn-default">
+        <i class="fa fa-times-circle"></i>
+      </a>
+    </span>
   </div>
 </div>
-

openslides/core/static/js/app.js

@@ -45,4 +45,8 @@ angular.module('OpenSlidesApp.site', [
     // Combine the django csrf system with the angular csrf system
     $httpProvider.defaults.xsrfCookieName = 'csrftoken';
     $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
+})
+
+.config(function(uiSelectConfig) {
+  uiSelectConfig.theme = 'bootstrap';
 });

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

@@ -37,6 +37,24 @@ angular.module('OpenSlidesApp.users', [])
                 }
                 return name;
             },
+            get_full_name: function() {
+                // should be the same as in the python user model.
+                var firstName = _.trim(this.first_name),
+                    lastName = _.trim(this.last_name),
+                    structure_level = _.trim(this.structure_level),
+                    name;
+
+                if (firstName && lastName) {
+                    // TODO: check config
+                    name = [firstName, lastName].join(' ');
+                } else {
+                    name = firstName || lastName || this.username;
+                }
+                if (structure_level) {
+                    name = name + " (" + structure_level + ")";
+                }
+                return name;
+            },
             getPerms: function() {
                 var allPerms = [];
                 _.forEach(this.groups, function(groupId) {