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
|
<div class="row">
<div class="col-md-4 text-left">
<select multiple name="roles[]" id="select-role">
<option value></option>
{{#roles}}
<option value="{{roleId}}">{{roleName}}</option>
{{/roles}}
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table id="locationsTable" class="table table-condensed table-hover">
<thead>
<tr>
<th data-sort="string">{{lang_Locations}}</th>
<th>{{lang_Roles}}</th>
</tr>
</thead>
<tbody>
{{#location}}
<tr data-selectizeCount='0'>
<td>{{locname}}</td>
<td>
{{#roles}}
<span class="label label-default customSpanMargin roleId-{{roleId}}">{{roleName}}</span>
{{/roles}}
</td>
</tr>
{{/location}}
</tbody>
</table>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var selectize = $('#select-role').selectize({
allowEmptyOption: false,
maxItems: null,
highlight: false,
hideSelected: true,
create: false,
placeholder: "{{lang_selectizePlaceholder}}",
plugins: [ "remove_button" ]
})[0].selectize;
// If Site gets refreshed, all data-selectizeCounts will be reset to 0, so delete the filters from the selectize
selectize.clear();
selectize.on('item_add', function(value, $item) {
// When first item gets added the filter isn't empty anymore, so hide all rows
if (selectize.items.length === 1) {
$('#locationsTable').find('tr').hide();
}
// Find all rows which shall be shown and increase their counter by 1
$(".roleId-"+value).closest("tr").each(function() {
$(this).data("selectizeCount", $(this).data("selectizeCount") + 1);
$(this).show();
});
});
selectize.on('item_remove', function(value, $item) {
// When no items in the filter, show all rows again
if (selectize.items.length === 0) {
$('#locationsTable').find('tr').show();
} else {
// Find all rows which have the delete role, decrease their counter by 1
$(".roleId-"+value).closest("tr").each(function() {
$(this).data("selectizeCount", $(this).data("selectizeCount") - 1);
// If counter is 0, hide the row (no filter given to show the row anymore)
if ($(this).data("selectizeCount") === 0) {
$(this).closest("tr").hide();
}
});
}
});
$("form input").keydown(function(e) {
if (e.keyCode === 13) e.preventDefault();
});
});
</script>
|
