pbmc-cmod/app/Views/admin/users_index.php

<?= $this->extend('admin/layout/main.php') ?>

<?= $this->section('content') ?>
<div class="card border-0">
	<div class="card-header bg-success text-white">
		<div class='card-title m-0'><b>Users Manager</b></div>
	</div>
	<div class="card-body">
		<div class="table-responsive">
			<table id="myTable" class="table">
				<thead>
					<tr>
						<th>Userid</th>
						<th>Name</th>
						<th>Role</th>
						<th>Action</th>
					</tr>
				</thead>
				<tbody id='table-body'>
				</tbody>
			</table>
		</div>
	</div>
</div>

<div class="modal fade" id="modal_editRole" aria-hidden="true" tabindex="-1">
	<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
		<div class="modal-content">
			<div class='modal-header'> Role Editor </div>
			<div class='modal-content p-3' style='background-color:#F4F6FF'>
				<div class="row">
					<div class="col-12">
						<table class="table table-sm table-borderless">
							<tr class="align-middle"> <th>Userid</th> <th>:</th> <td><input class='form-control' type='text' id='useridRole' disabled /></td> </tr>
							<tr class="align-middle"> <th>Role</th> <th>:</th> 
								<td>
									<select id='userroleid' class='form-control'>
										<option value=''></option>
										<?php 
										foreach($userroles as $data) {
											$userroleid = $data['USERROLEID'];
											$userrolename = $data['USERROLENAME'];
											echo "<option value='$userroleid'>$userrolename</option>";
										} 
										?>
									</select>
								</td> 
							</tr>
						</table>
						<button class='btn btn-sm btn-primary' onclick='saveRole()'>Save</button>
						<button class='btn btn-sm btn-secondary' data-bs-dismiss="modal">Cancel</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="modal_editPass" aria-hidden="true" tabindex="-1">
	<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
		<div class="modal-content">
			<div class='modal-header'> Password Editor </div>
			<div class='modal-content p-3' style='background-color:#F4F6FF'>
				<div id='alertPass'></div>
				<div class="row">
					<div class="col-12">
						<table class="table table-sm table-borderless">
							<tr class="align-middle"> <th>Userid</th> <th>:</th> <td><input class='form-control' type='text' id='useridPass' disabled /></td> </tr>
							<tr class="align-middle"> <th>Password</th> <th>:</th> <td><input class='form-control' type='password' id='pass1'/></td> </tr>
							<tr class="align-middle"> <th>Conf. Password</th> <th>:</th> <td><input class='form-control' type='password' id='pass2'/></td> </tr>
						</table>
						<button class='btn btn-sm btn-primary' onclick='savePass()'>Save</button>
						<button class='btn btn-sm btn-secondary' data-bs-dismiss="modal">Cancel</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<?= $this->endSection() ?>

<?= $this->section('script') ?>
<script>
index();
function index() {
	let url = '<?=base_url('');?>api/users/index';
	$.ajax({
		url: url,
		method: 'GET',
		success: function(response) {
			$("#table-body").html("");
			var data = response['users'];
			for (var i = 0; i < data.length; i++) {
				let userid = data[i].USERID;
				let username = data[i].USERNAME;
				let userroleid = data[i].USERROLEID;
				if(userroleid === null) {userroleid = '';}
				let userrolename = '';
				if(data[i].USERROLENAME != null) { userrolename = data[i].USERROLENAME; }					
				let editBtn =  '<button class="btn btn-sm btn-secondary" ' + ' onclick="editRole(\'' + userid + '\',\''+ userroleid +'\')">Edit Role' + '</button> ';
				editBtn +=  '<button class="btn btn-sm btn-warning" ' + ' onclick="editPass(\'' + userid + '\')">Edit Password' + '</button> ';
				let datarow = '<tr class="align-middle">' + 
					'<td>' + userid + '</td>' + '<td>' + username + '</td>' + '<td>' + userrolename + '</td>' + '<td>' + editBtn + '</td>' +
				'</tr>';					
				$("#table-body").append(datarow);
			}
			$('#myTable').DataTable();
		},
		error: function(response) { console.log(response.responseJSON); }
	});
}

function editPass(userid) {
	$('#useridPass').val(userid);
	$('#pass1').val('');
	$('#pass2').val('');
	$('#modal_editPass').modal('show');
}

function editRole(userid,userroleid) {
	$('#useridRole').val(userid);
	$(`#userroleid option[value='${userroleid}']`).prop('selected', true);
	$('#modal_editRole').modal('show');
}

function savePass() {
	var userid = $("#useridPass").val();
	var pass1 = $("#pass1").val();
	var pass2 = $("#pass2").val();
	if(pass1 == pass2) {
		let url = '<?=base_url('');?>api/users/savePass/'+userid ;
		let data = { userid: userid, pass : pass1 };
		$.ajax({
			url: url,
			method: "POST",
			data: data,
			success: function(response) {
				$("#alertPass").html("");
				$("#useridPass").val("");
				$("#pass1").val("");
				$("#pass2").val("");
				$("#modal_editPass").modal('hide'); 
			},
			error: function(response) {
				console.log(response.responseJSON)
			}
		});
	} else {
		$('#alertPass').html( 
			"<div class='alert alert-danger alert-dismissible fade show' role='alert'> "+
				"Password is not the same!" +
				"<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>"+
			"</div>"
		);
	}
}

function saveRole() {
	var userid = $("#useridRole").val();
	var userroleid = $("#userroleid").val();
	let url = '<?=base_url('');?>api/users/saveRole/'+userid ;
	let data = { userid: userid, userroleid : userroleid};
	$.ajax({
		url: url,
		method: "POST",
		data: data,
		success: function(response) {
			$("#alertPass").html("");
			$("#useridRole").val("");
			$("#userroleid").val("");
			$("#modal_editRole").modal('hide'); 
			index();
		},
		error: function(response) {
			console.log(response.responseJSON)
		}
	});
}
</script>
<?= $this->endSection() ?>