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

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

<?= $this->section('content') ?>
<div class="card border-0 m-1">
	<div class="card-body">
		<div class='card-title'>Dictionary Test</div>		
		<div class='row mb-2'>
			<div class='col-2'>Testcode</div>
			<div class='col-2'><input type='text' class='form-control form-control-sm' id='search_testcode' oninput='this.value = this.value.toUpperCase();' /></div>
		</div>
		<div class='row mb-2'>
			<div class='col-2'>Shorttext</div>
			<div class='col-3'><input type='text' class='form-control form-control-sm' id='search_shorttext' oninput='this.value = this.value.toLowerCase();' /></div>
		</div>
		<button class='btn btn-sm btn-primary' onclick='search()'>Search</button>
	</div>
</div>

<div class="card border-0 m-1">
	<div class="card-body">
		<div class="table-responsive">
			<table id="myTable" class="table">
				<thead>
					<tr>
						<th>Testcode</th>
						<th>Shorttext</th>
						<th>Text</th>
						<th>Unit</th>
						<th>Reff. </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-lg modal-dialog-centered modal-dialog-scrollable">
		<div class="modal-content">
			<div class="modal-header">
				<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Edit Test</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">
						<table class="table table-sm table-borderless">
							<input type='hidden' id='testcode' value='' />
							<tr class="align-middle"> <th>Testcode</th> <th>:</th> <td id='testcodetext'></td> </tr>
							<tr class="align-middle"> <th>Text 1</th> <th>:</th> <td><textarea class='form-control' id='text1'/></textarea></td> </tr>
							<tr class="align-middle"> <th>Text 2</th> <th>:</th> <td><textarea class='form-control' id='text2'/></textarea></td> </tr>
							<tr class="align-middle"> <th>Unit</th> <th>:</th> <td><textarea class='form-control' id='unit'/></textarea></td> </tr>
							<tr class="align-middle"> <th>Reff.</th> <th>:</th> <td><textarea class='form-control' id='refftext'/></textarea></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>
function search() {
	let url = '<?=base_url('');?>api/dictTests/search';
	testcode = $('#search_testcode').val();
	shorttext = $('#search_shorttext').val();
	let data = { testcode : testcode, shorttext: shorttext };
	$.ajax({
		url: url,
		method: 'POST',
		data: data,
		success: function(response) {
			$("#myTable").DataTable().destroy();
			$("#table-body").html("");
			var data = response['dictTests'];
			for (var i = 0; i < data.length; i++) {
				testcode = data[i].TESTCODE;
				shorttext = data[i].SHORTTEXT;
				text1 = '';
				text2 = '';
				refftext = '';
				unit = '';
				if(data[i].TEXT1 != null) { text1 = data[i].TEXT1; }
				if(data[i].TEXT2 != null) { text2 = data[i].TEXT2; }
				if(data[i].UNIT != null) { unit = data[i].UNIT; }
				if(data[i].REFFTEXT != null) { refftext = data[i].REFFTEXT; }
				let editBtn =  '<button class="btn btn-sm btn-success" ' + ' onclick="edit(\'' + testcode + '\')">Edit' + '</button> ';
				let datarow = '<tr class="align-middle">' + 
					'<td>' + testcode + '</td>' + '<td>' + shorttext + '</td> <td> <pre class="m-0">' + text1 + '<hr/>' + text2 + '</pre> </td>' + '<td>' + unit + '</td>' + '<td>' + refftext + '</td>' +
					'<td>' + editBtn + '</td>' +
				'</tr>';
				$("#table-body").append(datarow);
			}			
			$("#myTable").DataTable({
				"pageLength" : 25,
			});
		},
		error: function(response) { console.log(response.responseJSON); }
	});
}

function edit(testcode) {
	let url = '<?=base_url('');?>api/dictTests/detail/'+testcode;
	$.ajax({
		url: url,
		method: "GET",
		success: function(response) {
			let data = response;
			$("#alert-div").html("");
			$("#error-div").html("");   
			$("#testcode").val(testcode);
			$("#testcodetext").html(testcode);
			$("#update").val('1');
			$("#text1").val(data.TEXT1);
			$("#text2").val(data.TEXT2);
			$("#unit").val(data.UNIT);
			$("#refftext").val(data.REFFTEXT);
			$("#modal_crud").modal('show'); 
		},
		error: function(response) {
			console.log(response.responseJSON)
		}
	});
}


function save() {
	let url = '<?=base_url('');?>api/dictTests/save';
	var testcode = $("#testcode").val();
	var text1 = $("#text1").val();
	var text2 = $("#text2").val();
	var unit = $("#unit").val();
	var refftext = $("#refftext").val();
	let data = { testcode: testcode, text1:text1, text2:text2, unit:unit, refftext:refftext };
	$.ajax({
		url: url,
		method: "POST",
		data: data,
		success: function(response) {
			$("#alert-div").html("");
			$("#error-div").html("");   
			$("#testcode").val('');			
			$("#text1").val('');
			$("#text2").val('');
			$("#refftext").val('');
			$("#unit").val('');
			$("#modal_crud").modal('hide');
			search();
		},
		error: function(response) {
			console.log(response.responseJSON)
		}
	});
}


</script>
<?= $this->endSection() ?>