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-12">
			<table id="usersTable" class="table table-condensed table-hover stupidtable dataTable">
				<thead>
					<tr>
						<th data-sort="string">{{lang_users}}</th>
						<th class="slx-smallcol">{{lang_roles}}</th>
						<th class="slx-smallcol" data-sort="int" data-sort-default="desc">{{lang_selected}}</th>
					</tr>
				</thead>

				<tbody>
				{{#user}}
					<tr class="{{#roles}}roleid-{{roleid}} {{/roles}}">
						<td>{{username}}</td>
						<td class="slx-smallcol">
							{{#roles}}
							<a href="?do=permissionmanager&show=roleEditor&cancel=users&roleid={{roleid}}" class="label label-default customSpanMargin">{{rolename}}</a>
							{{/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 stupidtable">
								<thead>
									<tr>
										<th data-sort="string">{{lang_roles}}</th>
										<th data-sort="int" data-sort-default="desc">{{lang_selected}}</th>
									</tr>
								</thead>

								<tbody>
								{{#allroles}}
									<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>
								{{/allroles}}
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</button>
					<button id="confirmAddButton" type="submit" name="action" value="addRoleToUser" class="btn btn-success"  onclick="clearRemoveRoleModal()" disabled><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_removeRole}}</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12 scrollingTable">
							<table id="removeRoleFromUserTable" class="table table-condensed table-hover stupidtable">
								<thead>
									<tr>
										<th data-sort="string">{{lang_roles}}</th>
										<th data-sort="int" data-sort-default="desc">{{lang_selected}}</th>
									</tr>
								</thead>

								<tbody>
								{{#allroles}}
									<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>
								{{/allroles}}
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</button>
					<button id="confirmRemoveButton" type="submit" name="action" value="removeRoleFromUser" class="btn btn-danger" onclick="clearAddRoleModal()" disabled><span class="glyphicon glyphicon-remove-circle"></span> {{lang_removeRole}}</button>
				</div>
			</div>
		</div>
	</div>
</form>

<div class="text-right">
	<button class="roleButtons btn btn-success" type="button" data-toggle="modal" data-target="#addRoleToUserModal" disabled><span class="glyphicon glyphicon-share-alt"></span> {{lang_addRole}}</button>
	<button class="roleButtons btn btn-danger" type="button" data-toggle="modal" data-target="#removeRoleFromUserModal" disabled><span class="glyphicon glyphicon-remove-circle"></span> {{lang_removeRole}}</button>
</div>

<script>
	selectedUsersCounter = 0;
	selectedAddRolesCounter = 0;
	selectedRemoveRolesCounter = 0;

	document.addEventListener("DOMContentLoaded", function() {
		var checkboxes = $("input[type=checkbox]");
		checkboxes.prop("checked", false);
		$(".roleButtons, #confirmAddButton, #confirmRemoveButton").prop("disabled", true);

		checkboxes.change(function() {
			if ($(this).is(':checked')) {
				var color = "#eeeeff";
				if ($(this).closest("table").is("#addRoleToUserTable")) {
					color = "#eeffee";
				} else if ($(this).closest("table").is("#removeRoleFromUserTable")) {
					color = "#ffeeee";
				}
				$(this).closest("td").data("sort-value", 1);
				$(this).closest("tr").css("background-color", color);
			} else {
				$(this).closest("td").data("sort-value", 0);
				$(this).closest("tr").css("background-color", "");
			}
		});

		$("#usersTable").find("input[type=checkbox]").change(function() {
			if ($(this).is(':checked')) {
				selectedUsersCounter++;
				if (selectedUsersCounter === 1) {
					$(".roleButtons").prop("disabled", false);
				}
			} else {
				selectedUsersCounter--;
				if (selectedUsersCounter === 0) {
					$(".roleButtons").prop("disabled", true);
				}
			}
		});

		$("#addRoleToUserTable").find("input[type=checkbox]").change(function() {
			if ($(this).is(':checked')) {
				selectedAddRolesCounter++;
				if (selectedAddRolesCounter === 1) {
					$("#confirmAddButton").prop("disabled", false);
				}
			} else {
				selectedAddRolesCounter--;
				if (selectedAddRolesCounter === 0) {
					$("#confirmAddButton").prop("disabled", true);
				}
			}
		});

		$("#removeRoleFromUserTable").find("input[type=checkbox]").change(function() {
			if ($(this).is(':checked')) {
				selectedRemoveRolesCounter++;
				if (selectedRemoveRolesCounter === 1) {
					$("#confirmRemoveButton").prop("disabled", false);
				}
			} else {
				selectedRemoveRolesCounter--;
				if (selectedRemoveRolesCounter === 0) {
					$("#confirmRemoveButton").prop("disabled", true);
				}
			}
		});
	});

	// 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", false);
	}

	// 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", false);
	}
</script>