path: root/modules-available/permissionmanager/templates/userstable.html

<form method="post" action="?do=permissionmanager&show=users">
	<input type="hidden" name="token" value="{{token}}">

	<div class="row">
		<div class="col-md-4">
			<button class="btn btn-success" type="button" data-toggle="modal" data-target="#addRoleToUserModal"><span class="glyphicon glyphicon-share-alt"></span> {{lang_addRole}}</button>
			<button class="btn btn-danger" type="button" data-toggle="modal" data-target="#removeRoleFromUserModal"><span class="glyphicon glyphicon-trash"></span> {{lang_removeRole}}</button>
		</div>
		<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="usersTable" class="table table-condensed table-hover">
				<thead>
					<tr>
						<th data-sort="string">{{lang_Users}}</th>
						<th>{{lang_Roles}}</th>
						<th data-sort="int" data-sort-default="desc">{{lang_Selected}}</th>
					</tr>
				</thead>

				<tbody>
				{{#user}}
					<tr data-selectizeCount='0'>
						<td>{{username}}</td>
						<td>
							{{#roles}}
							<span class="label label-default customSpanMargin roleId-{{roleId}}">{{roleName}}</span>
							{{/roles}}
						</td>
						<td data-sort-value="0">
							<div class="checkbox">
								<input id="{{userid}}" type="checkbox" name="users[]" value='{{userid}}'>
								<label for="{{userid}}"></label>
							</div>
						</td>
					</tr>
				{{/user}}
				</tbody>
			</table>
		</div>
	</div>

	<!-- Modals -->
	<div class ="modal fade" id="addRoleToUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">{{lang_addRole}}</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12 scrollingTable">
							<table id="addRoleToUserTable" class="table table-condensed table-hover">
								<thead>
									<tr>
										<th data-sort="string">{{lang_Roles}}</th>
										<th data-sort="int" data-sort-default="desc">{{lang_Selected}}</th>
									</tr>
								</thead>

								<tbody>
								{{#roles}}
									<tr>
										<td>{{roleName}}</td>
										<td data-sort-value="0">
											<div class="checkbox">
												<input id="add{{roleId}}" type="checkbox" name="roles[]" value='{{roleId}}'>
												<label for="add{{roleId}}"></label>
											</div>
										</td>
									</tr>
								{{/roles}}
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</button>
					<button type="submit" name="action" value="addRoleToUser" class="btn btn-success"  onclick="clearRemoveRoleModal()"><span class="glyphicon glyphicon-share-alt"></span> {{lang_addRole}}</button>
				</div>
			</div>
		</div>
	</div>

	<div class ="modal fade" id="removeRoleFromUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel2">{{lang_Remove}}</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12 scrollingTable">
							<table id="removeRoleFromUserTable" class="table table-condensed table-hover">
								<thead>
									<tr>
										<th data-sort="string">{{lang_Roles}}</th>
										<th data-sort="int" data-sort-default="desc">{{lang_Selected}}</th>
									</tr>
								</thead>

								<tbody>
								{{#roles}}
									<tr>
										<td>{{roleName}}</td>
										<td data-sort-value="0">
											<div class="checkbox">
												<input id="remove{{roleId}}" type="checkbox" name="roles[]" value='{{roleId}}'>
												<label for="remove{{roleId}}"></label>
											</div>
										</td>
									</tr>
								{{/roles}}
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</button>
					<button type="submit" name="action" value="removeRoleFromUser" class="btn btn-danger" onclick="clearAddRoleModal()"><span class="glyphicon glyphicon-trash"></span> {{lang_Remove}}</button>
				</div>
			</div>
		</div>
	</div>
</form>

<script>
	document.addEventListener("DOMContentLoaded", function() {
		// if checked,: mark green, else: unmark
		$('input:checkbox').change(function() {
			if ($(this).is(':checked')) {
				$(this).closest("td").data("sort-value", 1);
				$(this).closest("tr").css("background-color", "#f2ffe6");
			} else {
				$(this).closest("td").data("sort-value", 0);
				$(this).closest("tr").css("background-color", "");
			}

		});

		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')
			.find("input[type=checkbox]")
			.prop("checked", "")
			.end();
	}

	// if add-Role button is clicked, uncheck all checkboxes in remove-role modal so they aren't submitted too
	function clearRemoveRoleModal() {
		$('#removeRoleFromUserModal')
			.find("input[type=checkbox]")
			.prop("checked", "")
			.end();
	}
</script>