473 lines
18 KiB
PHP
473 lines
18 KiB
PHP
<style>
|
||
.table th,
|
||
.table td {
|
||
padding: 8px;
|
||
}
|
||
|
||
table.dataTable tbody td {
|
||
padding: 4px 4px !important;
|
||
}
|
||
|
||
.col-12 {
|
||
|
||
max-width: 98% !important;
|
||
}
|
||
|
||
.dataTables_filter {
|
||
position: absolute;
|
||
}
|
||
|
||
.right-align-input {
|
||
text-align: right;
|
||
}
|
||
|
||
.addbtnStyle {
|
||
margin-left: 20px !important;
|
||
}
|
||
</style>
|
||
<style>
|
||
.table th:nth-child(1),
|
||
.table td:nth-child(1) {
|
||
max-width: 200px !important;
|
||
min-width: 100px !important;
|
||
overflow: hidden !important;
|
||
text-overflow: ellipsis !important;
|
||
white-space: nowrap !important;
|
||
}
|
||
|
||
#scroll-horizontal-datatable tbody tr:hover {
|
||
background-color: #e0e0e0;
|
||
}
|
||
|
||
|
||
</style>
|
||
|
||
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="row" style="padding-bottom: 10px;">
|
||
<div class="col-6" style="align-self: center;">
|
||
<h4 style="position: relative;">Ticket List </h4>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="table-responsive">
|
||
<table id="scroll-horizontal-datatable" class="table w-100 nowrap">
|
||
<thead class="bg-light">
|
||
<tr>
|
||
<th>Ticket Number</th>
|
||
<th>Name</th>
|
||
<th>Mobile Number</th>
|
||
<th>Email</th>
|
||
<th>Emp Code</th>
|
||
<th>Policy Number</th>
|
||
<th>Ticket Type</th>
|
||
<th>Subject</th>
|
||
<th>Message</th>
|
||
<th>Status</th>
|
||
<th>Assignee</th>
|
||
<?php if(in_array(get_role_id(), [1,2,3]) ) { ?> <!-- admin,manager,acc.m -->
|
||
<th>ACTION</th>
|
||
<?php } ?>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<?php if (isset($ticket_data)) { ?>
|
||
<?php foreach($ticket_data as $index => $row){ ?>
|
||
|
||
<tr data-id="<?= $row['thz_id']; ?>" style="cursor: pointer;">
|
||
<td><?php echo $row['thz_id']; ?></td>
|
||
<td><?php echo $row['name']; ?></td>
|
||
<td><?php echo $row['mobile']; ?></td>
|
||
<td><?php echo $row['email']; ?></td>
|
||
<td><?php echo $row['empcode']; ?></td>
|
||
<td><?php echo $row['policy_no']; ?></td>
|
||
<td><?php echo $row['ticket_type']; ?></td>
|
||
<td><?php echo $row['subject']; ?></td>
|
||
<td><?php echo $row['message']; ?></td>
|
||
<td><?php echo $row['status']; ?></td>
|
||
<td><?php echo $row['assignee_name']; ?></td>
|
||
<?php if(in_array(get_role_id(), [1,2,3]) ) { ?> <!-- admin,manager,acc.m -->
|
||
<td>
|
||
<div class="btn-group dropdown">
|
||
<button type="button"
|
||
class="btn btn-sm btn-primary"
|
||
data-id="<?= $row['thz_id']; ?>"
|
||
data-assignee="<?= $row['assign_to']; ?>"
|
||
data-subject="<?= $row['subject']; ?>"
|
||
onclick="openAssignee(this)">
|
||
Assign
|
||
</button>
|
||
</div>
|
||
<!-- <a href="javascript:void(0);"
|
||
data-toggle="modal"
|
||
data-target="#AssignModal"
|
||
data-id="<?= $row['thz_id']; ?>"
|
||
data-subject="<?= $row['subject']; ?>">
|
||
<i class="fa fa-users"
|
||
title="Assign To"
|
||
style="font-size:15px; color:#555; cursor:pointer; transition:0.2s;"
|
||
onmouseover="this.style.color='#02a8b5'; this.style.fontSize='17px';"
|
||
onmouseout="this.style.color='#555'; this.style.fontSize='15px';">
|
||
</i>
|
||
</a> -->
|
||
</td>
|
||
<?php } ?>
|
||
</tr>
|
||
<?php } ?>
|
||
<?php } ?>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end col -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal fade" id="ticketModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<form id="ticketForm">
|
||
<div class="modal-header">
|
||
<h4 class="modal-title" id="modalLabel">New Ticket</h4>
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-row">
|
||
<input type="hidden" id="thz_id" name="thz_id">
|
||
<input type="hidden" id="return_type" name="return_type">
|
||
|
||
<div class="form-group col-md-6">
|
||
<label for="name">Name<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" required>
|
||
</div>
|
||
|
||
<div class="form-group col-md-6">
|
||
<label for="mobile">Mobile<span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="mobile"
|
||
name="mobile" placeholder="Enter Mobile"
|
||
pattern="^[0-9]{10}$" required
|
||
title="Please enter a valid 10-digit mobile number">
|
||
</div>
|
||
|
||
<div class="form-group col-md-6">
|
||
<label for="email">Email Id<span class="text-danger">*</span></label>
|
||
<input type="email" class="form-control" id="email"
|
||
name="email" placeholder="Enter Email"
|
||
required
|
||
pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
|
||
title="Please enter a valid email address">
|
||
</div>
|
||
|
||
<div class="form-group col-md-6">
|
||
<label for="empcode">Employee code</label>
|
||
<input type="text" class="form-control" id="empcode" name="empcode" placeholder="Enter Employee code">
|
||
</div>
|
||
|
||
<div class="form-group col-md-6">
|
||
<label for="policy_no">Policy Number</label>
|
||
<input type="text" class="form-control" id="policy_no" name="policy_no" placeholder="Enter Policy Number">
|
||
</div>
|
||
|
||
<div class="form-group col-md-6">
|
||
<label for="ticket_type">Ticket Type<span class="text-danger">*</span></label>
|
||
<select class="form-control" id="ticket_type" name="ticket_type" required>
|
||
<option value="">Select Ticket Type</option>
|
||
<option value="Sales">Sales</option>
|
||
<option value="Service">Service</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group col-md-6">
|
||
<label for="subject">Subject</label>
|
||
<input type="text" class="form-control" id="subject" name="subject" placeholder="Enter Subject">
|
||
</div>
|
||
|
||
<div class="form-group col-md-6">
|
||
<label for="message">Message</label>
|
||
<!-- <input type="text" class="form-control" id="message" name="message" placeholder="Enter Message"> -->
|
||
<textarea class="form-control" id="message" name="message" placeholder="Enter Message" rows="4"></textarea>
|
||
</div>
|
||
|
||
<div class="form-group col-md-6">
|
||
<label for="status">Status</label>
|
||
<select class="form-control" id="status" name="status">
|
||
<option value="">Select Status</option>
|
||
<option value="Open">Open</option>
|
||
<option value="In Progress">In Progress</option>
|
||
<option value="Resolved">Resolved</option>
|
||
<option value="Closed">Closed</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group col-md-6">
|
||
<label for="assign_to">Assign To</label>
|
||
<select class="form-control" id="assign_to" name="assign_to">
|
||
<option value="">Select Assign To</option>
|
||
<?php if(isset($assignee)) { ?>
|
||
<?php foreach ($assignee as $a) { ?>
|
||
<option value="<?= $a['id']?>"><?= $a['emp_code'] ?> - <?= $a['first_name'] ?> <?= $a['last_name'] ?></option>
|
||
<?php } ?>
|
||
<?php } ?>
|
||
</select>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-primary" onclick="submitTicket()">Submit</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="modal fade" id="AssignModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h4 class="modal-title" id="assignModalLabel">Ticket</h4>
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-row">
|
||
<input type="hidden" id="hidden_thz_id" name="hidden_thz_id">
|
||
<div class="form-group col-md-12">
|
||
<label for="modal_assignee">Assign To<span class="text-danger">*</span></label>
|
||
<select class="form-control" id="modal_assignee" name="modal_assignee" required>
|
||
<option value="">Select Assign To</option>
|
||
<?php if(isset($assignee)) { ?>
|
||
<?php foreach ($assignee as $a) { ?>
|
||
<option value="<?= $a['id']?>"><?= $a['emp_code'] ?> - <?= $a['first_name'] ?> <?= $a['last_name'] ?></option>
|
||
<?php } ?>
|
||
<?php } ?>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-primary" onclick="updateAssignTo()">Submit</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
|
||
function openTicket(){
|
||
var form = document.getElementById('ticketForm');
|
||
form.reset();
|
||
document.getElementById('thz_id').value = '';
|
||
document.getElementById('modalLabel').innerText = "New Ticket";
|
||
document.getElementById('return_type').innerText = "WEB";
|
||
var myModal = new bootstrap.Modal(document.getElementById('ticketModal'));
|
||
myModal.show();
|
||
}
|
||
|
||
function submitTicket() {
|
||
var form = document.getElementById('ticketForm');
|
||
|
||
// reset any old error styles
|
||
form.classList.remove('was-validated');
|
||
|
||
|
||
var name = document.getElementById('name').value.trim();
|
||
var mobile = document.getElementById('mobile').value.trim();
|
||
var email = document.getElementById('email').value.trim();
|
||
var ticketType= document.getElementById('ticket_type').value.trim();
|
||
|
||
|
||
if (name === "" || mobile === "" || email === "" || ticketType === "") {
|
||
toastr.warning('Please fill all required fields.', 'warning');
|
||
form.classList.add('was-validated');
|
||
return;
|
||
}
|
||
|
||
var mobilePattern = /^[0-9]{10}$/;
|
||
if (!mobilePattern.test(mobile)) {
|
||
toastr.warning('Please enter a valid 10-digit mobile number.', 'warning');
|
||
document.getElementById('mobile').focus();
|
||
return;
|
||
}
|
||
|
||
var emailPattern = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
|
||
if (!emailPattern.test(email)) {
|
||
toastr.warning('Please enter a valid email address.', 'warning');
|
||
document.getElementById('email').focus();
|
||
return;
|
||
}
|
||
|
||
var form = document.getElementById("ticketForm"); // your form ID
|
||
var formData = new FormData(form);
|
||
|
||
let obj = {};
|
||
formData.forEach((value, key) => obj[key] = value);
|
||
// obj["return_type"] = "web";
|
||
|
||
$.ajax({
|
||
url: "<?= base_url('ticketSave') ?>",
|
||
type: "POST",
|
||
data: JSON.stringify(obj),
|
||
contentType: "application/json",
|
||
dataType: 'json',
|
||
success: function(response) {
|
||
if (response.status === "success") {
|
||
toastr.success(response.message, 'success');
|
||
$('#ticketModal').modal('hide');
|
||
form.reset();
|
||
window.location.href = "<?= base_url('ticketList?return_type=web') ?>";
|
||
} else {
|
||
toastr.error(response.message, 'error');
|
||
}
|
||
},
|
||
error: function(xhr) {
|
||
toastr.error("Something went wrong!", 'error');
|
||
console.error(xhr.responseText);
|
||
}
|
||
});
|
||
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
function openAssignee(button) {
|
||
document.getElementById('hidden_thz_id').value = "";
|
||
document.getElementById('modal_assignee').value = "";
|
||
document.getElementById('assignModalLabel').innerText = "Ticket";
|
||
|
||
var id = button.getAttribute('data-id');
|
||
var subject = button.getAttribute('data-subject');
|
||
var assignee = button.getAttribute('data-assignee');
|
||
|
||
document.getElementById('hidden_thz_id').value = id;
|
||
document.getElementById('modal_assignee').value = assignee;
|
||
document.getElementById('assignModalLabel').innerText = "Ticket: " + subject + " (" + id + ")";
|
||
|
||
var myModal = new bootstrap.Modal(document.getElementById('AssignModal'));
|
||
myModal.show();
|
||
}
|
||
|
||
|
||
function updateAssignTo(){
|
||
console.log('function called then call the api then refresh the updateAssignTo');
|
||
}
|
||
|
||
</script>
|
||
|
||
|
||
|
||
<!-------------------------------------------------------------------------------------------------->
|
||
|
||
<script>
|
||
$(document).ready(function() {
|
||
$('[data-toggle="tooltip"]').tooltip();
|
||
// Initialize select2
|
||
$("#ticket_type").select2();
|
||
$("#status").select2();
|
||
$("#assign_to").select2();
|
||
$("#modal_assignee").select2();
|
||
});
|
||
|
||
// Datatable document ready
|
||
$(document).ready(function() {
|
||
|
||
var ticketsTable = $('#scroll-horizontal-datatable');
|
||
|
||
if (ticketsTable.length) {
|
||
|
||
ticketsTable.DataTable({
|
||
scrollX: true,
|
||
dom: "<'row'<'col-sm-6'f><'col-sm-6 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
|
||
buttons: [{
|
||
extend: 'csv',
|
||
text: 'CSV',
|
||
title: 'ticket-List',
|
||
},
|
||
{
|
||
extend: 'excel',
|
||
text: 'Excel',
|
||
title: 'ticket-List',
|
||
exportOptions: {
|
||
orthogonal: 'sort'
|
||
},
|
||
},
|
||
{
|
||
text: 'New ticket',
|
||
className: 'buttons-html5 addbtnStyle',
|
||
action: function(e, dt, node, config) {
|
||
openTicket()
|
||
}
|
||
}
|
||
],
|
||
language: {
|
||
search: "_INPUT_",
|
||
searchPlaceholder: "Search..."
|
||
},
|
||
paging: true, // Enable pagination
|
||
pageLength: 25, // Set default number of rows per page (optional)
|
||
ordering: false,
|
||
});
|
||
} else {
|
||
console.error("Table Not found.");
|
||
}
|
||
});
|
||
|
||
function viewTicket(ticket_id){
|
||
|
||
// $('.loader').fadeIn();
|
||
// $('.loader-mask').fadeIn();
|
||
|
||
let url = '<?= base_url('ThzControllerview/'); ?>' + ticket_id;
|
||
window.location.href = url;
|
||
|
||
|
||
}
|
||
|
||
function removeticket(input, ticket_id) {
|
||
|
||
confirmActionSweertAlert("Do you want to delete this ticket?", "Yes, Proceed!", "No, Cancel").then((confirmed) => {
|
||
if (confirmed) {
|
||
let url = '<?= base_url('ticket/remove') ?>';
|
||
|
||
// Include `pt_id` in the AJAX request if necessary
|
||
let requestData = { ticket_id: ticket_id };
|
||
|
||
sendAjaxRequestForGlobal(url, 'GET', requestData, function(response) {
|
||
console.log('Data fetched successfully:', response);
|
||
|
||
if (response.status === true) {
|
||
toastr.success(response.message, 'SUCCESS');
|
||
window.location.reload();
|
||
} else {
|
||
toastr.warning(response.message, 'WARNING');
|
||
}
|
||
}, function(xhr, status, error) {
|
||
console.error('Error fetching data:', error);
|
||
console.error(xhr.responseText);
|
||
});
|
||
}
|
||
});
|
||
|
||
}
|
||
|
||
$(document).on('click', 'tbody tr', function (e) {
|
||
// Exclude clicks on any elements inside the last column (actions)
|
||
if ($(e.target).closest('td').index() !== $(this).children('td').length - 1) {
|
||
const id = $(this).data('id');
|
||
console.log('Ticket ID', id)
|
||
viewTicket(id);
|
||
}
|
||
});
|
||
|
||
|
||
</script>
|