391 lines
18 KiB
PHP
391 lines
18 KiB
PHP
<?php
|
||
helper('datatable_view');
|
||
$rto_header_labels = ['S.No.', 'RTO Office at', 'RTO Code', 'RTO State', 'Action'];
|
||
$rto_col_count = count($rto_header_labels);
|
||
$rto_col_max_len = array_fill(0, $rto_col_count, 0);
|
||
for ($i = 0; $i < $rto_col_count; $i++) {
|
||
$rto_col_max_len[$i] = mb_strlen($rto_header_labels[$i]);
|
||
}
|
||
if (isset($data) && is_array($data)) {
|
||
$rto_sl = 0;
|
||
foreach ($data as $row) {
|
||
++$rto_sl;
|
||
$rto_col_max_len[0] = max($rto_col_max_len[0], mb_strlen((string) $rto_sl));
|
||
$rto_col_max_len[1] = max($rto_col_max_len[1], mb_strlen((string) ($row['rto_name'] ?? '')));
|
||
$rto_col_max_len[2] = max($rto_col_max_len[2], mb_strlen((string) ($row['rto_code'] ?? '')));
|
||
$rto_col_max_len[3] = max($rto_col_max_len[3], mb_strlen((string) ($row['rto_state'] ?? '')));
|
||
$rto_col_max_len[4] = max($rto_col_max_len[4], 4);
|
||
}
|
||
}
|
||
$rto_col_min_px = [48, 140, 88, 120, 72];
|
||
$rto_col_max_px = [64, 400, 120, 200, 88];
|
||
$rto_col_width_px = nhance_dt_column_widths_px($rto_header_labels, $rto_col_max_len, $rto_col_min_px, $rto_col_max_px);
|
||
?>
|
||
<style>
|
||
.dataTables_filter {position: absolute;}
|
||
.dataTables_length label {height: 21px !important;}
|
||
|
||
<?php for ($i = 0; $i < $rto_col_count; $i++) : ?>
|
||
#rto-master-list-table_wrapper .dataTables_scrollHead table thead th:nth-child(<?= $i + 1 ?>),
|
||
#rto-master-list-table thead th:nth-child(<?= $i + 1 ?>) {
|
||
min-width: <?= (int) $rto_col_width_px[$i] ?>px;
|
||
width: <?= (int) $rto_col_width_px[$i] ?>px;
|
||
box-sizing: border-box;
|
||
vertical-align: middle;
|
||
overflow: visible !important;
|
||
}
|
||
#rto-master-list-table tbody td:nth-child(<?= $i + 1 ?>) {
|
||
width: <?= (int) $rto_col_width_px[$i] ?>px;
|
||
max-width: <?= (int) $rto_col_width_px[$i] ?>px;
|
||
min-width: <?= (int) $rto_col_width_px[$i] ?>px;
|
||
box-sizing: border-box;
|
||
vertical-align: middle;
|
||
}
|
||
<?php endfor; ?>
|
||
#rto-master-list-table tbody td:nth-child(1),
|
||
#rto-master-list-table tbody td:nth-child(2),
|
||
#rto-master-list-table tbody td:nth-child(3),
|
||
#rto-master-list-table tbody td:nth-child(4) {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
#rto-master-list-table tbody td:nth-child(5) {
|
||
overflow: visible;
|
||
text-overflow: clip;
|
||
}
|
||
#rto-master-list-table tbody td {
|
||
padding: 5px 11px !important;
|
||
font-size: 13px;
|
||
line-height: 1.25;
|
||
}
|
||
#rto-master-list-table thead th {
|
||
padding: 5px 2.35rem 5px 11px !important;
|
||
font-size: 13px;
|
||
line-height: 1.25;
|
||
}
|
||
</style>
|
||
|
||
<!-- End ADD and EDIT Page HTML -->
|
||
<div class="row" id="List-page">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<table data-custom-table-css="table" class="table table-sm m-0 table-centered dt-responsive nowrap w-100" cellspacing="a" id="rto-master-list-table">
|
||
<thead class="bg-light">
|
||
<tr>
|
||
<th class="font-weight-medium">S.No.</th>
|
||
<th class="font-weight-medium">RTO Office at</th>
|
||
<th class="font-weight-medium">RTO Code</th>
|
||
<th class="font-weight-medium">RTO State</th>
|
||
<!-- <th class="font-weight-medium">Status</th> -->
|
||
<th class="font-weight-medium">Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<?php if(isset($data)) { $slno = 1; ?>
|
||
<?php foreach($data as $index => $row) { ?>
|
||
<tr>
|
||
<td><?= $slno++; ?></td>
|
||
<td><?= $row['rto_name']; ?></td>
|
||
<td><?= $row['rto_code']; ?></td>
|
||
<td><?= $row['rto_state']; ?></td>
|
||
<!-- <td>
|
||
<span class="<?php if($row['is_active'] == 1){ echo 'badge badge-primary'; }else{ echo 'badge badge-danger'; } ?>">
|
||
<?php if($row['is_active'] == 1){ echo 'Active'; }else{ echo 'In-Active'; } ?>
|
||
</span>
|
||
</td> -->
|
||
<td>
|
||
<div class="btn-group dropdown" style="position: relative !important;left:0px !important;top:0px !important;">
|
||
<a href="javascript: void(0);" class="dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
|
||
<div class="dropdown-menu dropdown-menu-right" style="cursor: pointer;">
|
||
<a class="dropdown-item" data-id="<?= $row['id']; ?>" onclick="handleSaveEditAndDelete('edit', this)">
|
||
<i class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>Edit
|
||
</a>
|
||
<?php if ($row['is_active'] == 1): ?>
|
||
<a class="dropdown-item" data-id="<?= $row['id']; ?>" onclick="handleSaveEditAndDelete('remove', this)">
|
||
<i class="mdi mdi-delete mr-2 text-muted font-18 vertical-middle"></i>Delete
|
||
</a>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<?php } ?>
|
||
<?php } else { ?>
|
||
<tr>
|
||
<td colspan="3" class="text-center">No data available</td>
|
||
</tr>
|
||
<?php } ?>
|
||
</tbody>
|
||
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- modal content -->
|
||
<div id="con-close-modal" class="modal fade app-font-family" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;" data-backdrop="static">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h4 class="modal-title" id="modalLabel">Add RTO Details</h4>
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
</div>
|
||
<div class="modal-body p-4">
|
||
<!-- <form class="parsley-examples" id="RTOForm" enctype="multipart/form-data"> -->
|
||
<form id="RTOForm" enctype="multipart/form-data" data-parsley-validate>
|
||
<input type="hidden" name="pk" id="rto_id"/>
|
||
<div class="form-group">
|
||
<div class="form-row">
|
||
<div class="form-group col-md-12">
|
||
<label for="rto_name">RTO Office Name<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="rto_name" name="rto_name" placeholder="Enter RTO Office Name"
|
||
required
|
||
data-parsley-required-message="RTO Office Name is required"
|
||
data-parsley-minlength="3"
|
||
data-parsley-minlength-message="RTO Office Name must be at least 3 characters"
|
||
data-parsley-maxlength="100"
|
||
data-parsley-maxlength-message="RTO Office Name maximum 100 characters"
|
||
data-parsley-pattern="^[a-zA-Z0-9\s]+$"
|
||
data-parsley-pattern-message="RTO Office Name may only contain alphanumeric and space characters"
|
||
data-parsley-trigger="keyup">
|
||
</div>
|
||
<div class="form-group col-md-12">
|
||
<label for="rto_code">RTO Code<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="rto_code" name="rto_code"
|
||
placeholder="Enter RTO Code"
|
||
required
|
||
data-parsley-required-message="RTO Code is required"
|
||
data-parsley-type="digits"
|
||
data-parsley-type-message="RTO Code must contain only numbers"
|
||
data-parsley-length="[2,2]"
|
||
data-parsley-length-message="RTO Code must be exactly 2 digits"
|
||
data-parsley-trigger="keyup">
|
||
</div>
|
||
|
||
<div class="form-group col-md-12">
|
||
<label for="rto_state">RTO State<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="rto_state" name="rto_state"
|
||
placeholder="Enter RTO State" style="text-transform:uppercase"
|
||
required
|
||
data-parsley-required-message="RTO State is required"
|
||
data-parsley-pattern="^[a-zA-Z\s]+$"
|
||
data-parsley-pattern-message="RTO State must contain only alphabets and spaces"
|
||
data-parsley-minlength="2"
|
||
data-parsley-minlength-message="RTO State must be at least 2 characters"
|
||
data-parsley-maxlength="50"
|
||
data-parsley-maxlength-message="RTO State maximum 50 characters"
|
||
data-parsley-trigger="keyup">
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="form-group text-right m-b-0">
|
||
<button type="submit" class="btn app-btn-secondary waves-effect waves-light" id="btnSubmit">Submit</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var table;
|
||
$(document).ready(function () {
|
||
var ticketsTable = $('#rto-master-list-table');
|
||
nhanceListDataTableBeforeInit();
|
||
table = ticketsTable.DataTable(nhanceMergeListDataTableOptions({
|
||
// dom: "<'row'<'col-sm-7'f><'col-sm-5 text-right'B>>" + // Filter left, buttons right
|
||
// "<'row'<'col-sm-12'tr>>" +
|
||
// "<'row'<'col-sm-5'i><'col-sm-7'p>>", // Pagination at the bottom, without page length selector
|
||
dom: "<'row'<'col-sm-7'f><'col-sm-5 text-right'B>>" + // Filter left, buttons right
|
||
"<'row'<'col-sm-12'tr>>" +
|
||
"<'row align-items-center'<'col-5 text-start'i><'col-7 d-flex justify-content-end align-items-center'<'me-2'l>p>>",
|
||
lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
|
||
buttons: [
|
||
{
|
||
className: 'btn app-btn-primary mr-2',
|
||
text: '<i class="mdi mdi-plus"></i><span class="btn-custom"> Add </span>',
|
||
action: function(e, dt, node, config) {
|
||
openModal()
|
||
}
|
||
},
|
||
{
|
||
extend: 'collection',
|
||
text: '<span class=" btn-custom"> Export </span><i class="mdi mdi-menu-down"></i>',
|
||
className: 'btn app-btn-secondary ',
|
||
buttons: [
|
||
{
|
||
extend: 'csv',
|
||
text: '<i class="mdi mdi-file-delimited " ></i><span class=" btn-custom"> CSV </span>',
|
||
title: 'RTO',
|
||
className: 'app-btn-primary ',
|
||
exportOptions: {
|
||
columns: ':not(:last-child)'
|
||
},
|
||
}
|
||
]
|
||
}
|
||
],
|
||
language: {
|
||
search: `
|
||
<div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
|
||
_INPUT_
|
||
<i class="mdi mdi-magnify datatable-search-icon"
|
||
style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
|
||
<i class="mdi mdi-close-circle datatable-clear-icon"
|
||
style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
|
||
</div>`,
|
||
searchPlaceholder: "Search",
|
||
emptyTable: '<div class="text-center text-muted">No Data found</div>'
|
||
},
|
||
paging: true, // Enable pagination
|
||
pageLength: 10, // Set default number of rows per page (optional)
|
||
// ordering: false,
|
||
columnDefs: [
|
||
<?php for ($i = 0; $i < $rto_col_count; $i++) : ?>
|
||
{ targets: <?= $i ?>, width: '<?= (int) $rto_col_width_px[$i] ?>px' },
|
||
<?php endfor; ?>
|
||
],
|
||
}));
|
||
nhanceListDataTableAfterInit();
|
||
nhanceListDataTableBindAdjust(table);
|
||
});
|
||
|
||
$('.close').click(function(){
|
||
resetValues();
|
||
if ($('#RTOForm').parsley()) {
|
||
$('#RTOForm').parsley().reset();
|
||
}
|
||
})
|
||
|
||
function openModal(){
|
||
var myModal = new bootstrap.Modal(document.getElementById('con-close-modal'));
|
||
myModal.show();
|
||
}
|
||
|
||
function handleSaveEditAndDelete(type = 'submit', el = null) {
|
||
|
||
let url = '<?= base_url('util/rtoMaster') ?>';
|
||
let method = "POST";
|
||
let requestData = {};
|
||
|
||
let pk = null;
|
||
|
||
// If element is passed (from edit/remove button), get its data-id
|
||
if (el) { pk = $(el).data('id'); }
|
||
|
||
requestData.pk = pk;
|
||
|
||
if(type == 'submit'){
|
||
$("#RTOForm").find("input, select, textarea").each(function () {
|
||
let name = $(this).attr("name");
|
||
let value = $.trim($(this).val());
|
||
if (name) requestData[name] = value;
|
||
});
|
||
}
|
||
|
||
if(type == 'remove'){
|
||
method = "DELETE";
|
||
} else if (type == 'edit'){
|
||
method = "GET";
|
||
$('#modalLabel').text('Edit RTO details');
|
||
$('#RTOForm')[0].reset();
|
||
}
|
||
|
||
console.log("type", type)
|
||
console.log("url", url)
|
||
console.log("method", method)
|
||
console.log("requestData", requestData)
|
||
|
||
$('.loader').fadeIn();
|
||
$('.loader-mask').fadeIn();
|
||
|
||
// Send AJAX request
|
||
sendAjaxRequestForGlobal(url, method, requestData, function(response) {
|
||
|
||
console.log('Data fetched successfully:', response);
|
||
|
||
if (response.status) {
|
||
if(type == 'edit'){
|
||
appendEditData(response.data);
|
||
} else if(type == 'remove'){
|
||
toastr.success(response.message, 'Success');
|
||
if(el) $(el).closest('tr').remove();
|
||
window.location.reload();
|
||
} else if(type == 'submit'){
|
||
toastr.success(response.message, 'Success');
|
||
var myModal = new bootstrap.Modal(document.getElementById('con-close-modal'));
|
||
myModal.hide();
|
||
resetValues();
|
||
window.location.reload();
|
||
}
|
||
} else {
|
||
toastr.warning(response.message, 'Warning');
|
||
}
|
||
|
||
$('.loader').fadeOut();
|
||
$('.loader-mask').delay(350).fadeOut('slow');
|
||
|
||
}, function(xhr, status, error) {
|
||
console.error('Error fetching data:', error);
|
||
console.error(xhr.responseText);
|
||
$('.loader').fadeOut();
|
||
$('.loader-mask').delay(350).fadeOut('slow');
|
||
if (xhr.status === 400) {
|
||
let response = JSON.parse(xhr.responseText);
|
||
let errorMessages = "";
|
||
let seenMessages = []; // Array to store unique messages
|
||
if (response.errors) {
|
||
$.each(response.errors, function (field, message) {
|
||
if (!seenMessages.includes(message)) {
|
||
errorMessages += `• ${message}<br>`;
|
||
seenMessages.push(message); // Mark this message as "seen"
|
||
}
|
||
});
|
||
toastr.error(errorMessages, 'Validation Error', { "allowHtml": true });
|
||
} else {
|
||
toastr.warning(response.message || 'Validation failed', 'Warning');
|
||
}
|
||
|
||
} else if (xhr.status === 403) {
|
||
let response = JSON.parse(xhr.responseText);
|
||
toastr.error(response.message, 'Security Policy');
|
||
} else if (xhr.status === 500) {
|
||
toastr.error('Something went wrong . Please try again later.', 'Server Error');
|
||
} else {
|
||
toastr.error('An unexpected error occurred. Please try again later.', 'Error');
|
||
}
|
||
});
|
||
}
|
||
|
||
function resetValues(){
|
||
$('#modalLabel').text('Add RTO Details');
|
||
$('#RTOForm')[0].reset();
|
||
if ($('#RTOForm').parsley()) {
|
||
$('#RTOForm').parsley().reset();
|
||
}
|
||
}
|
||
|
||
function appendEditData(data){
|
||
$('#rto_id').val(data[0]['id']);
|
||
$('#rto_name').val(data[0]['rto_name']);
|
||
$('#rto_code').val(data[0]['rto_code']);
|
||
$('#rto_state').val(data[0]['rto_state']);
|
||
openModal()
|
||
}
|
||
|
||
$('#RTOForm').on('submit', function(e) {
|
||
e.preventDefault();
|
||
var $form = $(this);
|
||
|
||
// Validate the form using Parsley
|
||
$form.parsley().validate();
|
||
|
||
if ($form.parsley().isValid()) {
|
||
handleSaveEditAndDelete('submit');
|
||
}
|
||
});
|
||
</script>
|