[permission-manager] filter for roles in user and location table, changed structure of role-spans in both tables

1 files changed, 74 insertions, 14 deletions

diff --git a/modules-available/permissionmanager/templates/locationstable.html b/modules-available/permissionmanager/templates/locationstable.html
index e170cd02..3f15ee7b 100644
--- a/modules-available/permissionmanager/templates/locationstable.html
+++ b/modules-available/permissionmanager/templates/locationstable.html
@@ -1,25 +1,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>
+			<tr>
+				<th data-sort="string">{{lang_Locations}}</th>
+				<th>{{lang_Roles}}</th>
+			</tr>
 			</thead>
 
 			<tbody>
-				{{#location}}
-				<tr>
-					<td>{{name}}</td>
-					<td>
-						{{#role}}
-						<span class="label label-default customSpanMargin">{{.}}</span>
-						{{/role}}
-					</td>
-				</tr>
+			{{#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>
\ No newline at end of file
+</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>
\ No newline at end of file