pbmc-cmod/app/Views/userroles_index.php

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

<?= $this->section('content') ?>
<div class="card border-0">
	<div class="card-body">
		<button class='btn btn-sm btn-success mx-3 my-2' onclick='create()'><i class='bi bi-plus-circle'></i> Create</button>
		<div class="table-responsive">
			<table id="table_dashboard" class="table">
				<thead>
					<tr>
						<th>#</th>
						<th>Code</th>
						<th>Name</th>
						<th>Action</th>
					</tr>
				</thead>
				<tbody id='table-body'>
				</tbody>
			</table>
		</div>
	</div>
</div>

<div class="modal fade" id="modal_crud" aria-hidden="true" tabindex="-1">
	<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
		<div class="modal-content">
			<div class="modal-header">
				<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Edit UserRoles</h1>
				<button type="button" class="btn-close" data-bs-dismiss="modal" ></button>
			</div>
			<div class="modal-body" style='background-color:#F4F6FF'>
				<div class="row">
					<div class="col-12">
						<input type='hidden' id='userroleid' value='' />
						<table class="table table-sm table-borderless">
							<tr class="align-middle"> <th>User Role Code</th> <th>:</th> <td><input class='form-control' type='text' id='userrolecode' oninput='this.value = this.value.toUpperCase();'/></td> </tr>
							<tr class="align-middle"> <th>User Role Name</th> <th>:</th> <td><input class='form-control' type='text' id='userrolename'/></td> </tr>
						</table>
						<button class='btn btn-sm btn-primary' onclick='save()'>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/userroles/index';
	$.ajax({
		url: url,
		method: 'GET',
		success: function(response) {
			$("#table-body").html("");
				var data = response['userroles'];
				for (var i = 0; i < data.length; i++) {
					let editBtn =  '<button class="btn btn-sm btn-success" ' + ' onclick="edit(' + data[i].USERROLEID + ')">Edit' + '</button> ';
					//let deleteBtn =  '<button class="btn btn-sm btn-danger" ' + ' onclick="delete(' + data[i].USERROLEID + ')">Delete' + '</button>';

					let datarow = '<tr class="align-middle">' + 
						'<td>' + data[i].USERROLEID + '</td>' + '<td>' + data[i].USERROLECODE+ '</td>' + '<td>' + data[i].USERROLENAME+ '</td>' + '<td>' + editBtn + '</td>' +
					'</tr>';
					$("#table-body").append(datarow);
				}
			},
			error: function(response) { console.log(response.responseJSON); }
	});
}

function create() {
	$("#alert-div").html("");
	$("#error-div").html("");   
	$("#userroleid").val("0");
	$("#userrolecode").val("");
	$("#userrolename").val("");
	$("#modal_crud").modal('show'); 
}

function edit(userroleid) {
	let url = '<?=base_url('');?>api/userroles/detail/'+userroleid ;
	$.ajax({
		url: url,
		method: "GET",
		success: function(response) {
			let data = response;
			$("#alert-div").html("");
			$("#error-div").html("");   
			$("#userroleid").val(userroleid);
			$("#userrolecode").val(data.USERROLECODE);
			$("#userrolename").val(data.USERROLENAME);
			$("#modal_crud").modal('show'); 
		},
		error: function(response) {
			console.log(response.responseJSON)
		}
	});
}

function save() {
	var userroleid = $("#userroleid").val();
	var userrolecode = $("#userrolecode").val();
	var userrolename = $("#userrolename").val();
	//console.log(userroleid+' '+userrolecode+' '+userrolename);
	let url = '<?=base_url('');?>api/userroles/save/'+userroleid ;
	let data = { userroleid: userroleid, userrolecode: userrolecode, userrolename: userrolename };
	$.ajax({
		url: url,
		method: "POST",
		data: data,
		success: function(response) {
			console.log(response);
			$("#alert-div").html("");
			$("#error-div").html("");   
			$("#userroleid").val("");
			$("#userrolecode").val("");
			$("#userrolename").val("");
			index();
			$("#modal_crud").modal('hide'); 
		},
		error: function(response) {
			console.log(response.responseJSON)
		}
	});
}
</script>
<?= $this->endSection() ?>