ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use angular-chosen instead of ui-select for better performance.

Browse Source 
The jQuery select field from angular-chosen is used for all ui-select
fields. See https://github.com/leocaseiro/angular-chosen/

Use input delay on users filter field with 'debounce'.

Fixed #2006.
This commit is contained in:
Emanuel Schuetze 2016-03-08 22:55:43 +01:00
parent e7cb77c946
commit 89446ce4f6
18 changed files with 116 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bower.json
View File

@ -12,12 +12,12 @@
"angular-sanitize": "~1.4.9",
"angular-bootstrap": "~0.14.3",
"angular-bootstrap-colorpicker": "~3.0.24",
"angular-chosen-localytics": "~1.3.0",
"angular-csv-import": "~0.0.27",
"angular-formly-templates-bootstrap": "~6.2.0",
"angular-formly": "~7.3.9",
"angular-loading-bar": "~0.8.0",
"angular-ui-router": "~0.2.17",
"angular-ui-select": "~0.13.1",
"angular-ui-tree": "~2.5.0",
"angular-gettext": "~2.2.0",
"angular-scroll-glue": "~2.0.6",

8
gulpfile.js
View File

@ -68,6 +68,12 @@ gulp.task('fonts-libs', function() {
.pipe(gulp.dest(path.join(output_directory, 'fonts')));
});
// Catches image files for angular-chosen.
gulp.task('angular-chosen-img', function () {
return gulp.src(path.join('bower_components', 'chosen', '*.png'))
.pipe(gulp.dest(path.join(output_directory, 'css')));
});
// Catches all skins files for TinyMCE editor.
gulp.task('tinymce-skins', function () {
return gulp.src(path.join('bower_components', 'tinymce-dist', 'skins', '**'))
@ -108,7 +114,7 @@ gulp.task('translations', function () {
});
// Gulp default task. Runs all other tasks before.
gulp.task('default', ['js-libs', 'css-libs', 'fonts-libs', 'tinymce', 'translations'], function () {});
gulp.task('default', ['js-libs', 'css-libs', 'fonts-libs', 'tinymce', 'angular-chosen-img', 'translations'], function () {});
/**

6
openslides/agenda/static/js/agenda/site.js
View File

@ -226,18 +226,14 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
'operator',
'Agenda',
'User',
'LimitUsers',
'item',
function ($scope, $filter, $http, $state, operator, Agenda, User, LimitUsers, item) {
function ($scope, $filter, $http, $state, operator, Agenda, User, item) {
Agenda.bindOne(item.id, $scope, 'item');
User.bindAll({}, $scope, 'users');
$scope.speakerSelectBox = {};
$scope.alert = {};
$scope.speakers = $filter('orderBy')(item.speakers, 'weight');
// limit the number of users in ui-select field
$scope.LimitUsers = LimitUsers;
$scope.$watch(function () {
return Agenda.lastModified();
}, function () {

22
openslides/agenda/static/templates/agenda/item-detail.html
View File

@ -130,20 +130,14 @@
<uib-alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
{{ alert.msg }}
</uib-alert>
<div os-perms="agenda.can_manage" class="input-group">
<ui-select ng-model="speakerSelectBox.selected" ng-change="addSpeaker(speakerSelectBox.selected.id)">
<ui-select-match placeholder="{{ 'Select or search a participant ...' | translate }}">
{{ $select.selected.get_full_name() }}
</ui-select-match>
<ui-select-choices repeat="user in users | filter: $select.search | limitTo: LimitUsers">
<div ng-bind-html="user.get_full_name() | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
<span class="input-group-btn">
<a ng-click="speakerSelectBox={}" class="btn btn-default">
<i class="fa fa-times-circle"></i>
</a>
</span>
<div os-perms="agenda.can_manage">
<select chosen ng-model="speakerSelectBox.selected" ng-change="addSpeaker(speakerSelectBox.selected)"
ng-options="user.id as user.get_full_name() for user in users"
search-contains="true"
placeholder-text-single="'{{ 'Select or search a participant ...' | translate }}'"
no-results-text="'{{ 'No results available ...' | translate }}'"
class="form-control">
<select>
</div>
<p class="spacer">
<button ng-if="isAllowed('add')" ng-click="addSpeaker()" class="btn btn-default">

6
openslides/assignments/static/js/assignments/site.js
View File

@ -268,10 +268,9 @@ angular.module('OpenSlidesApp.assignments.site', ['OpenSlidesApp.assignments'])
'operator',
'Assignment',
'User',
'LimitUsers',
'assignment',
'phases',
function($scope, $http, filterFilter, gettext, ngDialog, AssignmentForm, operator, Assignment, User, LimitUsers, assignment, phases) {
function($scope, $http, filterFilter, gettext, ngDialog, AssignmentForm, operator, Assignment, User, assignment, phases) {
User.bindAll({}, $scope, 'users');
Assignment.bindOne(assignment.id, $scope, 'assignment');
Assignment.loadRelations(assignment, 'agenda_item');
@ -279,9 +278,6 @@ angular.module('OpenSlidesApp.assignments.site', ['OpenSlidesApp.assignments'])
$scope.phases = phases;
$scope.alert = {};
// limit the number of users in ui-select field
$scope.LimitUsers = LimitUsers;
// open edit dialog
$scope.openDialog = function (assignment) {
ngDialog.open(AssignmentForm.getDialog(assignment));

24
openslides/assignments/static/templates/assignments/assignment-detail.html
View File

@ -90,22 +90,16 @@
<uib-alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
{{ alert.msg }}
</uib-alert>
<div os-perms="assignments.can_nominate_other" class="input-group">
<ui-select ng-model="candidateSelectBox.selected" ng-change="addCandidate(candidateSelectBox.selected.id)">
<ui-select-match placeholder="{{ 'Select or search a participant ...' | translate }}">
{{ $select.selected.get_full_name() }}
</ui-select-match>
<ui-select-choices repeat="user in users | filter: $select.search | limitTo: LimitUsers">
<div ng-bind-html="user.get_full_name() | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
<span class="input-group-btn">
<a ng-click="candidateSelectBox={}" class="btn btn-default">
<i class="fa fa-times-circle"></i>
</a>
</span>
<div os-perms="assignments.can_nominate_other">
<select chosen ng-model="candidateSelectBox.selected" ng-change="addCandidate(candidateSelectBox.selected)"
ng-options="user.id as user.get_full_name() for user in users"
search-contains="true"
placeholder-text-single="'{{ 'Select or search a participant ...' | translate }}'"
no-results-text="'{{ 'No results available ...' | translate }}'"
class="form-control">
<select>
</div>
<p os-perms="assignments.can_nominate_self">
<p os-perms="assignments.can_nominate_self" class="spacer">
<button ng-if="!isCandidate()" ng-click="addMe()" class="btn btn-default">
<i class="fa fa-plus"></i>
<translate>Add me</translate>

4
openslides/core/static/css/app.css
View File

@ -660,6 +660,10 @@ img {
margin-top: 5px;
}
/* angular-chosen: override default width of select fields in quickmode */
.quickmode .chosen-container {
width: 100% !important;
}
/* angular-ui-tree style */

27
openslides/core/static/js/core/site.js
View File

@ -10,11 +10,11 @@ angular.module('OpenSlidesApp.core.site', [
'colorpicker.module',
'formly',
'formlyBootstrap',
'localytics.directives',
'ngBootbox',
'ngDialog',
'ngMessages',
'ngCsvImport',
'ui.select',
'ui.tinymce',
'luegg.directives',
])
@ -104,13 +104,6 @@ angular.module('OpenSlidesApp.core.site', [
}
])
.config([
'uiSelectConfig',
function(uiSelectConfig) {
uiSelectConfig.theme = 'bootstrap';
}
])
.config([
'$stateProvider',
'$urlMatcherFactoryProvider',
@ -349,14 +342,14 @@ angular.module('OpenSlidesApp.core.site', [
templateUrl: 'static/templates/core/editor.html',
});
formlyConfig.setType({
name: 'ui-select-single',
name: 'select-single',
extends: 'select',
templateUrl: 'static/templates/core/ui-select-single.html'
templateUrl: 'static/templates/core/select-single.html'
});
formlyConfig.setType({
name: 'ui-select-multiple',
name: 'select-multiple',
extends: 'select',
templateUrl: 'static/templates/core/ui-select-multiple.html'
templateUrl: 'static/templates/core/select-multiple.html'
});
}
])
@ -610,14 +603,11 @@ angular.module('OpenSlidesApp.core.site', [
},
{
key: 'attachments_id',
type: 'ui-select-multiple',
type: 'select-multiple',
templateOptions: {
label: gettextCatalog.getString('Attachment'),
optionsAttr: 'bs-options',
options: Mediafile.getAll(),
ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search',
valueProp: 'id',
labelProp: 'title_or_filename',
ngOptions: 'option.id as option.title_or_filename for option in to.options',
placeholder: gettextCatalog.getString('Select or search an attachment ...')
}
},
@ -1064,9 +1054,6 @@ angular.module('OpenSlidesApp.core.site', [
}
])
// define maximum number of users shown in users select fields (e.g. in motion or speakers forms)
.value('LimitUsers', 50)
.directive('osFocusMe', [
'$timeout',
function ($timeout) {

10
openslides/core/static/templates/core/select-multiple.html Normal file
View File

@ -0,0 +1,10 @@
<!-- custom angular formly template for angular-chosen multiple form field -->
<select multiple chosen
data-ng-model="model[options.key]"
ng-required="{{ to.required }}"
ng-options="{{ to.ngOptions }}"
search-contains="true"
placeholder-text-multiple="'{{ to.placeholder }}'"
no-results-text="'{{ 'No results available ...' | translate }}'"
class="form-control">
</select>

12
openslides/core/static/templates/core/select-single.html Normal file
View File

@ -0,0 +1,12 @@
<!-- custom angular formly template for angular-chosen single form field -->
<select chosen
data-ng-model="model[options.key]"
ng-required="{{ to.required }}"
ng-options="{{ to.ngOptions }}"
allow-single-deselect="true"
search-contains="true"
placeholder-text-single="'{{ to.placeholder }}'"
no-results-text="'{{ 'No results available ...' | translate }}'"
class="form-control">
<option value=""></option>
</select>

10
openslides/core/static/templates/core/ui-select-multiple.html
View File

@ -1,10 +0,0 @@
<!-- custom angular formly template for ui-select multiple form field -->
<ui-select multiple data-ng-model="model[options.key]" data-required="{{to.required}}"
data-disabled="{{to.disabled}}" theme="bootstrap">
<ui-select-match placeholder="{{to.placeholder}}">
{{$item[to.labelProp]}}
</ui-select-match>
<ui-select-choices data-repeat="{{to.ngOptions}}">
<div ng-bind-html="option[to.labelProp] | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>

10
openslides/core/static/templates/core/ui-select-single.html
View File

@ -1,10 +0,0 @@
<!-- custom angular formly template for ui-select single form field -->
<ui-select data-ng-model="model[options.key]" data-required="{{to.required}}"
data-disabled="{{to.disabled}}" theme="bootstrap">
<ui-select-match placeholder="{{to.placeholder}}" data-allow-clear="true">
{{$select.selected[to.labelProp]}}
</ui-select-match>
<ui-select-choices data-repeat="{{to.ngOptions}}">
<div ng-bind-html="option[to.labelProp] | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>

8
openslides/mediafiles/static/js/mediafiles/site.js
View File

@ -222,13 +222,11 @@ angular.module('OpenSlidesApp.mediafiles.site', ['ngFileUpload', 'OpenSlidesApp.
'$scope',
'MediafileForm',
'User',
'LimitUsers',
function($scope, MediafileForm, User, LimitUsers) {
function($scope, MediafileForm, User) {
User.bindAll({}, $scope, 'users');
$scope.mediafile = {};
$scope.alert = {};
$scope.users = User.getAll();
$scope.LimitUsers = LimitUsers;
// upload and save mediafile
$scope.save = function (mediafile) {
@ -253,13 +251,11 @@ angular.module('OpenSlidesApp.mediafiles.site', ['ngFileUpload', 'OpenSlidesApp.
'operator',
'Mediafile',
'User',
'LimitUsers',
'mediafile',
function($scope, operator, Mediafile, User, LimitUsers, mediafile) {
function($scope, operator, Mediafile, User, mediafile) {
User.bindAll({}, $scope, 'users');
$scope.alert = {};
$scope.users = User.getAll();
$scope.LimitUsers = LimitUsers;
// set initial values for form model by create deep copy of motion object
// so list/detail view is not updated while editing

20
openslides/mediafiles/static/templates/mediafiles/mediafile-form.html
View File

@ -24,17 +24,19 @@
<!-- uploader -->
<div os-perms="mediafiles.can_manage" class="form-group">
<label for="inputTitle" translate>Uploaded by</label>
<ui-select ng-model="mediafile.uploader_id">
<ui-select-match placeholder="{{ 'Select or search a participant ...' | translate }}" data-allow-clear="true">
{{ $select.selected.get_full_name() }}
</ui-select-match>
<ui-select-choices repeat="user.id as user in users | filter: $select.search | limitTo: LimitUsers">
<div ng-bind-html="user.get_full_name() | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
<select chosen
ng-model="mediafile.uploader_id"
ng-options="user.id as user.get_full_name() for user in users"
allow-single-deselect="true"
search-contains="true"
placeholder-text-single="'{{ 'Select or search a participant ...' | translate }}'"
no-results-text="'{{ 'No results available ...' | translate }}'"
class="form-control">
<option value=""></option>
<select>
</div>
<i ng-show="mediafile.file.$error.maxSize">File too large
<i ng-if="mediafile.file.$error.maxSize">File too large
{{ picFile.size / 1000000|number:1}}MB: max {{ mediafile.mediafile.$errorParam}}</i>
<button type="submit" ng-disabled="mediafileForm.$invalid" class="btn btn-primary" translate>

44
openslides/motions/static/js/motions/site.js
View File

@ -159,8 +159,7 @@ angular.module('OpenSlidesApp.motions.site', ['OpenSlidesApp.motions'])
'Tag',
'User',
'Workflow',
'LimitUsers',
function (gettextCatalog, operator, Editor, Category, Config, Mediafile, Tag, User, Workflow, LimitUsers) {
function (gettextCatalog, operator, Editor, Category, Config, Mediafile, Tag, User, Workflow) {
return {
// ngDialog for motion form
getDialog: function (motion) {
@ -205,14 +204,11 @@ angular.module('OpenSlidesApp.motions.site', ['OpenSlidesApp.motions'])
},
{
key: 'submitters_id',
type: 'ui-select-multiple',
type: 'select-multiple',
templateOptions: {
label: gettextCatalog.getString('Submitters'),
optionsAttr: 'bs-options',
options: User.getAll(),
ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search | limitTo: ' + LimitUsers,
valueProp: 'id',
labelProp: 'full_name',
ngOptions: 'option.id as option.full_name for option in to.options',
placeholder: gettextCatalog.getString('Select or search a submitter ...')
},
hide: !operator.hasPerms('motions.can_manage')
@ -274,70 +270,56 @@ angular.module('OpenSlidesApp.motions.site', ['OpenSlidesApp.motions'])
},
{
key: 'attachments_id',
type: 'ui-select-multiple',
type: 'select-multiple',
templateOptions: {
label: gettextCatalog.getString('Attachment'),
optionsAttr: 'bs-options',
options: Mediafile.getAll(),
ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search',
valueProp: 'id',
labelProp: 'title_or_filename',
ngOptions: 'option.id as option.title_or_filename for option in to.options',
placeholder: gettextCatalog.getString('Select or search an attachment ...')
},
hideExpression: '!model.more'
},
{
key: 'category_id',
type: 'ui-select-single',
type: 'select-single',
templateOptions: {
label: gettextCatalog.getString('Category'),
optionsAttr: 'bs-options',
options: Category.getAll(),
ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search',
valueProp: 'id',
labelProp: 'name',
ngOptions: 'option.id as option.name for option in to.options',
placeholder: gettextCatalog.getString('Select or search a category ...')
},
hideExpression: '!model.more'
},
{
key: 'tags_id',
type: 'ui-select-multiple',
type: 'select-multiple',
templateOptions: {
label: gettextCatalog.getString('Tags'),
optionsAttr: 'bs-options',
options: Tag.getAll(),
ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search',
valueProp: 'id',
labelProp: 'name',
ngOptions: 'option.id as option.name for option in to.options',
placeholder: gettextCatalog.getString('Select or search a tag ...')
},
hideExpression: '!model.more'
},
{
key: 'supporters_id',
type: 'ui-select-multiple',
type: 'select-multiple',
templateOptions: {
label: gettextCatalog.getString('Supporters'),
optionsAttr: 'bs-options',
options: User.getAll(),
ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search | limitTo: ' + LimitUsers,
valueProp: 'id',
labelProp: 'full_name',
ngOptions: 'option.id as option.full_name for option in to.options',
placeholder: gettextCatalog.getString('Select or search a supporter ...')
},
hideExpression: '!model.more'
},
{
key: 'workflow_id',
type: 'ui-select-single',
type: 'select-single',
templateOptions: {
label: gettextCatalog.getString('Workflow'),
optionsAttr: 'bs-options',
options: workflows,
ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search',
valueProp: 'id',
labelProp: 'name',
ngOptions: 'option.id as option.name for option in to.options',
placeholder: gettextCatalog.getString('Select or search a workflow ...')
},
hideExpression: '!model.more',

54
openslides/motions/static/templates/motions/motion-list.html
View File

@ -197,7 +197,7 @@
</span>
<!-- quickEdit columns -->
<td ng-if="motion.quickEdit && motion.isAllowed('quickedit')" colspan="6">
<td ng-if="motion.quickEdit && motion.isAllowed('quickedit')" class="quickmode" colspan="6">
<h4>{{ motion.getTitle() }} <span class="text-muted">&ndash; <translate>QuickEdit</translate></span></h4>
<uib-alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
{{ alert.msg }}
@ -206,51 +206,49 @@
<div class="col-xs-6">
<label for="inputIdentifier" translate>Identifier</label>
<input type="text" ng-model="motion.identifier" class="form-control input-sm"
name="inputIdentifier">
id="inputIdentifier">
</div>
<div class="col-xs-6">
<label for="selectCategory" translate>Category</label>
<select ng-options="category.id as category.name for category in categories"
ng-model="motion.category_id" class="form-control" name="selectCategory">
ng-model="motion.category_id" class="form-control" id="selectCategory">
</select>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label for="selectSubmitter" translate>Submitters</label>
<ui-select multiple ng-model="motion.submitters_id" name="selectSubmitter">
<ui-select-match placeholder="{{ 'Select or search a submitter ...' | translate }}">
{{ $item.get_full_name() }}
</ui-select-match>
<ui-select-choices repeat="user.id as user in users | filter: $select.search">
<div ng-bind-html="user.get_full_name() | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
<select multiple chosen
ng-model="motion.submitters_id"
ng-options="user.id as user.full_name for user in users"
search-contains="true"
id="selectSubmitter"
class="form-control">
</select>
</div>
<div class="col-xs-6">
<label for="selectTags" translate>Tags</label>
<ui-select multiple ng-model="motion.tags_id">
<ui-select-match placeholder="{{ 'Select or search a tag ...' | translate }}">
{{ $item.name }}
</ui-select-match>
<ui-select-choices repeat="tag.id as tag in tags | filter: $select.search">
{{ tag.name }}
</ui-select-choices>
</ui-select>
<select multiple chosen
ng-model="motion.tags_id"
ng-options="tag.id as tag.name for tag in tags"
search-contains="true"
id="selectTag"
class="form-control">
</select>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div ng-if="config('motions_min_supporters') > 0">
<label for="selectSubmitter" translate>Supporters</label>
<ui-select multiple ng-model="motion.supporters_id">
<ui-select-match placeholder="{{ 'Select or search a supporter ...' | translate }}">
{{ $item.get_full_name() }}
</ui-select-match>
<ui-select-choices repeat="user.id as user in users | filter: $select.search">
<div ng-bind-html="user.get_full_name() | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
<label for="selectSupporter" translate>Supporters</label>
<select multiple chosen
ng-model="motion.supporters_id"
ng-options="user.id as user.full_name for user in users"
search-contains="true"
id="selectSupporter"
class="form-control">
<option value=""></option>
</select>
</div>
</div>
</div>

10
openslides/users/static/js/users/site.js
View File

@ -300,16 +300,12 @@ angular.module('OpenSlidesApp.users.site', ['OpenSlidesApp.users'])
},
{
key: 'groups',
type: 'ui-select-multiple',
type: 'select-multiple',
templateOptions: {
label: gettextCatalog.getString('Groups'),
optionsAttr: 'bs-options',
options: Group.getAll(),
ngOptions: 'option[to.valueProp] as option in to.options | ' +
'filter: {id: "!1"} | filter: {id: "!2"} | ' +
'filter: $select.search',
valueProp: 'id',
labelProp: 'name',
ngOptions: 'option.id as option.name for option in to.options | ' +
'filter: {id: "!1"} | filter: {id: "!2"}',
placeholder: gettextCatalog.getString('Select or search a group ...')
}
},

2
openslides/users/static/templates/users/user-list.html
View File

@ -52,7 +52,7 @@
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" os-focus-me ng-model="filter.search" class="form-control"
<input type="text" os-focus-me ng-model="filter.search" ng-model-options="{debounce: 500}" class="form-control"
placeholder="{{ 'Search' | translate}}">
</div>
</div>