1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
define([
'backbone.marionette',
'./templates'
], function (Marionette) {
return Marionette.ItemView.extend({
template: Templates['provisioning-search'],
collectionEvents: {
'change:selected': 'onSelectedChange',
'reset': 'onSelectedChange'
},
events: {
'click .js-toggle-selection': 'onToggleSelectionClick',
'submit #provisioning-search-form': 'onFormSubmit',
'search #provisioning-search-query': 'debouncedOnKeyUp',
'keyup #provisioning-search-query': 'debouncedOnKeyUp'
},
initialize: function () {
this._bufferedValue = null;
this.debouncedOnKeyUp = _.debounce(this.onKeyUp, 400);
},
onRender: function () {
this.delegateEvents();
},
onFormSubmit: function (e) {
e.preventDefault();
this.debouncedOnKeyUp();
},
onKeyUp: function () {
var q = this.getQuery();
if (q === this._bufferedValue) {
return;
}
this._bufferedValue = this.getQuery();
if (this.searchRequest != null) {
this.searchRequest.abort();
}
this.searchRequest = this.search(q);
},
onSelectedChange: function () {
var projectsCount = this.collection.length,
selectedCount = this.collection.where({ selected: true }).length,
allSelected = projectsCount > 0 && projectsCount === selectedCount,
someSelected = !allSelected && selectedCount > 0;
this.$('.js-toggle-selection')
.toggleClass('icon-checkbox-checked', allSelected || someSelected)
.toggleClass('icon-checkbox-single', someSelected);
},
onToggleSelectionClick: function (e) {
e.preventDefault();
this.toggleSelection();
},
toggleSelection: function () {
var selectedCount = this.collection.where({ selected: true }).length,
someSelected = selectedCount > 0;
return someSelected ? this.selectNone() : this.selectAll();
},
selectNone: function () {
this.collection.where({ selected: true }).forEach(function (project) {
project.set({ selected: false });
});
},
selectAll: function () {
this.collection.forEach(function (project) {
project.set({ selected: true });
});
},
getQuery: function () {
return this.$('#provisioning-search-query').val();
},
search: function (q) {
this.selectNone();
return this.collection.fetch({ reset: true, data: { q: q } });
},
serializeData: function () {
var projectsCount = this.collection.length,
selectedCount = this.collection.where({ selected: true }).length,
allSelected = projectsCount > 0 && projectsCount === selectedCount,
someSelected = !allSelected && selectedCount > 0;
return _.extend(Marionette.ItemView.prototype.serializeData.apply(this, arguments), {
selectedCount: selectedCount,
allSelected: allSelected,
someSelected: someSelected
});
}
});
});
|
