Files
dev-chiefworks f76abffdcd first commit
2022-05-31 16:21:53 -04:00

250 lines
10 KiB
PHP

<div class="row">
<div class="col-lg-4">
<div class="panel panel-flat">
<div class="jumbotron" style="background-color:#F3DFE5; padding:10px;">
<?php if ($msg) { ?>
<div class="col-12">
<div class="alert alert-danger alert-dismissible bg-danger text-white border-0" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<?php echo $msg ? $msg : '' ?>
</div>
</div>
<?php } ?>
<font id="message" color=red></font>
<h3>Global Setting Adding</h3>
<form id="global-setting-form" name="global-setting-form" method="post" action="create" autocomplete="off">
<div class="form-group">
<label for="key">Key</label>
<input type="text" value="<?= isset($key) ? $key : '' ?>" class="form-control" name="key" id="key" maxlength="50" placeholder="Key" />
<input type="hidden" value="" class="form-control" name="old_key" id="old_key" maxlength="50" />
</div>
<div class="form-group">
<label for="value">Value</label>
<input type="text" value="<?= isset($value) ? $value : '' ?>" class="form-control" name="value" id="value" maxlength="50" placeholder="Value" />
</div>
<div class="form-group">
<label for="description">Description</label>
<input type="text" value="<?= isset($description) ? $description : '' ?>" class="form-control" name="description" id="description" maxlength="350" placeholder="Description" />
</div>
<div class="form-group">
<label for="status">Status</label>
<?= $card_status ?>
</div>
<div class="form-group">
<button type="submit" id="btn-add" class="btn btn-info btn-block btn-sm">Add</button>
<button type="button" id="btn-update" class="btn btn-info btn-block btn-sm hidden">Update</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="panel panel-white">
<form class="search-block" method="GET" autocomplete="off">
<div class="search-block-item">
<div class="form-group">
<label for="key_filter">Key</label>
<input type="search" class="form-control" id="key_filter" name="key_filter">
</div>
<div class="form-group">
<label for="description_filter">Description</label>
<input type="search" class="form-control" id="description_filter" name="description_filter">
</div>
<div class="form-group">
<label for="card_status_filter">Status</label>
<?= $card_status_filter ?>
</div>
<div class="form-group">
<input class="btn btn-primary btn-search" type="button" value="Search">
</div>
</div>
</form>
</div>
<div class="panel-heading" style="margin-bottom: 15px;">
<div class="heading-elements">
<div id="pagination"></div>
</div>
</div>
<table id="global-setting-list" class="table-responsive table-bordered table-condensed table-hover table-striped table-condensed col-lg-12" style="padding:0px; background-color:lightgreen;">
<thead class="bg-indigo">
<th>ID</th>
<th>Key</th>
<th>Value</th>
<th>Description</th>
<th>Status</th>
<th></th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<script src="/assets/js/app.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('[name="card_status_filter"]').
prepend("<option value='' selected='selected'>All</option>");
// Detect pagination click
$('#pagination').on('click', 'a', function(e) {
e.preventDefault();
if ($(this).attr('href').trim() === '#') {
return;
}
let pageno = $(this).attr('data-ci-pagination-page');
loadPagination(pageno, $('#search-block').serialize());
});
// Prevent submit form by press the enter button
$(window).keydown(function(event) {
if (event.keyCode == 13) {
loadPagination(0);
event.preventDefault();
return false;
}
});
// Load Page
loadPagination(0);
function loadPagination(pagno, filters = null, btn_search = null) {
loadingButton(btn_search);
$.ajax({
url: '/global_settings/loadRecord',
type: 'get',
dataType: 'json',
data: {
'rowno': pagno,
'filters': filters
},
success: function(response) {
$('#pagination').html(response.pagination);
createTable(response.result);
},
complete: function() {
stopLoadingButton(btn_search);
}
});
}
function createTable(result) {
$('#global-setting-list tbody').empty();
for (index in result) {
let id = result[index].id;
let key = result[index].key;
let value = result[index].value;
let description = result[index].description;
let status = result[index].status === '1' ? 'Active' : 'Not-Active';
let tr =
`<tr>
<td>${id}</td>
<td class="word-wrap">${key}</td>
<td class="word-wrap">${value}</td>
<td class="word-wrap">${description}</td>
<td>${status}</td>
<td class="input-group-btn">
<button type='button' class='btn btn-info btn-sm btn-update'>Update</button>
<button type='button' class='btn btn-secondary btn-sm btn-cancel hidden'>Cancel</button>
<button type='button' class='btn btn-danger btn-sm btn-delete'>Delete</button>
</td>
</tr>`;
$('#global-setting-list tbody').append(tr);
}
}
// Detect on click the update button on form
$('#btn-update').click(function() {
$('#global-setting-form').submit();
});
// Detect on click the update button
$(document).on('click', '.btn-update', function(e) {
let $row = $(this).closest("tr"); // Finds the closest row <tr>
let $tds = $row.find("td"); // Finds all children <td> elements
$('.btn-cancel').addClass('hidden');
$('.btn-update').removeClass('hidden');
$('#btn-add').addClass('hidden');
$('#btn-update').removeClass('hidden');
$(this).siblings('.btn-cancel').removeClass('hidden');
$(this).addClass('hidden');
$('[name="key"]').val($tds[1].innerText);
$('[name="old_key"]').val($tds[1].innerText);
$('[name="value"]').val($tds[2].innerText);
$('[name="description"]').val($tds[3].innerText);
$('[name="card_status"]').val($tds[4].innerText === 'Active' ? 1 : 0);
$('#global-setting-form').attr('action', origin + "/global_settings/update/" + $tds[0].innerText);
});
// Detect on click the cancel button
$(document).on('click', '.btn-cancel', function(e) {
let $row = $(this).closest("tr"); // Finds the closest row <tr>
let $tds = $row.find("td"); // Finds all children <td> elements
$(this).siblings('.btn-update').removeClass('hidden');
$(this).addClass('hidden');
$('#btn-add').removeClass('hidden');
$('#btn-update').addClass('hidden');
$('[name="key"]').val('');
$('[name="old_key"]').val('');
$('[name="value"]').val('');
$('[name="description"]').val('');
$('[name="status"]').val('');
$('#global-setting-form').attr('action', origin + "/global_settings/create");
});
// Detect on click the delete button
$(document).on('click', '.btn-delete', function(e) {
if (!confirm('Are you sure want to delete?')) {
return;
}
let $row = $(this).closest("tr"); // Finds the closest row <tr>
let $tds = $row.find("td"); // Finds all children <td> elements
$('#global-setting-form').attr('action', origin + "/global_settings/destroy/" + $tds[0].innerText);
$('#global-setting-form').submit();
});
// Detect on click the add button on form
$('#btn-add').click(function() {
$('#global-setting-form').attr('action', origin + "/global_settings/create");
});
$('.btn-search').on('click', function() {
loadPagination(0, $('.search-block').serialize());
});
});
</script>
<style>
.word-wrap {
word-break: break-all;
}
.search-block-item {
display: flex;
justify-content: space-around;
align-items: flex-end;
}
</style>