[permission-manager] moved multiple code, added text-search to rolesTable

7 files changed, 84 insertions, 111 deletions

diff --git a/modules-available/permissionmanager/clientscript.js b/modules-available/permissionmanager/clientscript.js
index da825984..edbd3eb9 100644
--- a/modules-available/permissionmanager/clientscript.js
+++ b/modules-available/permissionmanager/clientscript.js
@@ -9,4 +9,48 @@ document.addEventListener("DOMContentLoaded", function() {
 		var arrow = data.direction === dir.ASC ? "down" : "up";
 		th.eq(data.column).append(' <span class="arrow glyphicon glyphicon-chevron-'+arrow+'"></span>');
 	});
+
+	var selectize = $('#select-role').selectize({
+		allowEmptyOption: false,
+		maxItems: null,
+		highlight: false,
+		hideSelected: true,
+		create: false,
+		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) {
+			$('.dataTable tbody').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) {
+			$('.dataTable tbody').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();
+	});
 });
\ No newline at end of file
diff --git a/modules-available/permissionmanager/lang/de/template-tags.json b/modules-available/permissionmanager/lang/de/template-tags.json
index 86c03871..e9146d2c 100644
--- a/modules-available/permissionmanager/lang/de/template-tags.json
+++ b/modules-available/permissionmanager/lang/de/template-tags.json
@@ -18,5 +18,6 @@
     "lang_all": "alle",
     "lang_selected": "ausgewählte",
     "lang_Permissions": "Rechte",
-    "lang_selectizePlaceholder": "Nach Rollen filtern..."
+    "lang_selectizePlaceholder": "Nach Rollen filtern...",
+    "lang_searchPlaceholder": "Nach Rollen suchen..."
 }
\ No newline at end of file
diff --git a/modules-available/permissionmanager/lang/en/template-tags.json b/modules-available/permissionmanager/lang/en/template-tags.json
index 82cbc933..ce35a6ce 100644
--- a/modules-available/permissionmanager/lang/en/template-tags.json
+++ b/modules-available/permissionmanager/lang/en/template-tags.json
@@ -18,5 +18,6 @@
     "lang_all": "all",
     "lang_selected": "selected",
     "lang_Permissions": "Permissions",
-    "lang_selectizePlaceholder": "Filter for roles..."
+    "lang_selectizePlaceholder": "Filter for roles...",
+    "lang_searchPlaceholder": "Search for roles..."
 }
\ No newline at end of file
diff --git a/modules-available/permissionmanager/templates/locationstable.html b/modules-available/permissionmanager/templates/locationstable.html
index aa4553f8..ea3a92e8 100644
--- a/modules-available/permissionmanager/templates/locationstable.html
+++ b/modules-available/permissionmanager/templates/locationstable.html
@@ -1,7 +1,8 @@
 <div class="row">
-	<div class="col-md-4 text-left">
+	<div class="col-md-4"></div>
+	<div class="col-md-4">
 		<select multiple name="roles[]" id="select-role">
-			<option value></option>
+			<option value>{{lang_selectizePlaceholder}}</option>
 			{{#roles}}
 			<option value="{{roleId}}">{{roleName}}</option>
 			{{/roles}}
@@ -11,7 +12,7 @@
 
 <div class="row">
 	<div class="col-md-12">
-		<table id="locationsTable" class="table table-condensed table-hover">
+		<table id="locationsTable" class="table table-condensed table-hover dataTable">
 			<thead>
 				<tr>
 					<th data-sort="string">{{lang_Locations}}</th>
@@ -33,53 +34,4 @@
 			</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>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/modules-available/permissionmanager/templates/roleeditor.html b/modules-available/permissionmanager/templates/roleeditor.html
index 7de8eaf3..d21b3fbd 100644
--- a/modules-available/permissionmanager/templates/roleeditor.html
+++ b/modules-available/permissionmanager/templates/roleeditor.html
@@ -83,10 +83,6 @@
 			}
 		});
 
-		$("form input").keydown(function(e) {
-			if (e.keyCode === 13) e.preventDefault();
-		});
-
 		$(".module-toggle").click(function () {
 			var button = $(this);
 			var moduleBox = $("#" + button.data("moduleid"));
diff --git a/modules-available/permissionmanager/templates/rolestable.html b/modules-available/permissionmanager/templates/rolestable.html
index 40cdda96..a455d346 100644
--- a/modules-available/permissionmanager/templates/rolestable.html
+++ b/modules-available/permissionmanager/templates/rolestable.html
@@ -1,7 +1,14 @@
 <form method="post" action="?do=permissionmanager">
 	<input type="hidden" name="token" value="{{token}}">
 
-	<button class="btn btn-success" type="button" onclick="openRoleEditor()"><span class="glyphicon glyphicon-plus"></span> {{lang_newRole}}</button>
+	<div class="row">
+		<div class="col-md-4">
+			<button class="btn btn-success" type="button" onclick="openRoleEditor()"><span class="glyphicon glyphicon-plus"></span> {{lang_newRole}}</button>
+		</div>
+		<div class="col-md-4">
+			<input type="text" class="form-control" id="roleNameSearchField" onkeyup="searchFieldFunction()" placeholder="{{lang_searchPlaceholder}}">
+		</div>
+	</div>
 
 	<div class="row">
 		<div class="col-md-12">
@@ -16,8 +23,8 @@
 
 				<tbody>
 				{{#roles}}
-					<tr>
-						<td>{{roleName}}</td>
+					<tr class="rolesRow">
+						<td class="rolesData">{{roleName}}</td>
 						<td>
 							<a href="?do=permissionmanager&show=roleEditor&roleid={{roleId}}">{{lang_Edit}}</a>
 						</td>
@@ -62,4 +69,23 @@
 	function deleteRole($roleId) {
 		$(".modal-footer #deleteId").val($roleId);
 	}
+
+	function searchFieldFunction() {
+		// Declare variables
+		var input, filter, table, trs, a, i;
+		input = document.getElementById('roleNameSearchField');
+		filter = input.value.toUpperCase();
+		table = document.getElementById("rolesTable");
+		trs = table.getElementsByClassName('rolesRow');
+
+		// Loop through all list items, and hide those who don't match the search query
+		for (i = 0; i < trs.length; i++) {
+			a = trs[i].getElementsByClassName("rolesData")[0];
+			if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
+				trs[i].style.display = "";
+			} else {
+				trs[i].style.display = "none";
+			}
+		}
+	}
 </script>
\ No newline at end of file
diff --git a/modules-available/permissionmanager/templates/userstable.html b/modules-available/permissionmanager/templates/userstable.html
index 44b28833..a740c5e8 100644
--- a/modules-available/permissionmanager/templates/userstable.html
+++ b/modules-available/permissionmanager/templates/userstable.html
@@ -8,7 +8,7 @@
 		</div>
 		<div class="col-md-4 text-left">
 			<select multiple name="roles[]" id="select-role">
-				<option value></option>
+				<option value>{{lang_selectizePlaceholder}}</option>
 				{{#roles}}
 				<option value="{{roleId}}">{{roleName}}</option>
 				{{/roles}}
@@ -18,7 +18,7 @@
 
 	<div class="row">
 		<div class="col-md-12">
-			<table id="usersTable" class="table table-condensed table-hover">
+			<table id="usersTable" class="table table-condensed table-hover dataTable">
 				<thead>
 					<tr>
 						<th data-sort="string">{{lang_Users}}</th>
@@ -150,55 +150,8 @@
 			}
 
 		});
-
-		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();
-		});
-
 	});
 
-
 	// if remove-Role button is clicked, uncheck all checkboxes in add-role modal so they aren't submitted too
 	function clearAddRoleModal () {
 		$('#addRoleToUserModal')