FIX_thz list
This commit is contained in:
venba-Inspriron-3558
parent
95704465b4
commit
8ee6820164
@ -1,23 +1,38 @@
|
||||
<style>
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
table.dataTable tbody td {
|
||||
padding: 4px 4px !important;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
|
||||
max-width: 98% !important;
|
||||
}
|
||||
|
||||
|
||||
.right-align-input {
|
||||
text-align: right;
|
||||
.dataTables_filter {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.text-custom {
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 11px;
|
||||
line-height: 1.44;
|
||||
letter-spacing: -0.02em;
|
||||
.highlight {
|
||||
border: 2px solid red;
|
||||
background-color: #ffe6e6;
|
||||
}
|
||||
|
||||
.column-header {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
.btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
/* Modeal class */
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
@ -27,53 +42,46 @@
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
table.dataTable td.wrap {
|
||||
white-space: normal !important;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body maincard">
|
||||
<div class="row">
|
||||
<div class="col-6" style="align-self: center;">
|
||||
<p class="title-text font-color-black" style="position: relative;">Tickets </p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<table data-custom-table-css="table" id="scroll-horizontal-datatable" class="table w-100 nowrap text-custom-black text-custom app-datatable">
|
||||
<thead class="bg-light">
|
||||
<tr>
|
||||
<th>Ticket ID</th>
|
||||
<th class="text-left">Name</th>
|
||||
<th>Policy Number</th>
|
||||
<th>Ticket Type</th>
|
||||
<th>Subject</th>
|
||||
<th>Status</th>
|
||||
<th class="text-left">Assign To</th>
|
||||
<th>Created At</th>
|
||||
<th>Updated At</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="app-table-body">
|
||||
<?php if (isset($ticket_data)) { ?>
|
||||
<?php foreach($ticket_data as $index => $row){ ?>
|
||||
|
||||
<tr data-id="<?= $row['thz_id']; ?>" style="cursor: pointer;">
|
||||
<td class="text-right"><?php echo $row['thz_id']; ?></td>
|
||||
<td class="text-left">
|
||||
<?php echo $row['name']; ?>
|
||||
<span class="text-custom-grey"><?php if (!empty($row['empcode'])): echo '('.$row['empcode'].')'; endif; ?></span><br>
|
||||
<span class="text-custom-grey"><?php if (!empty($row['mobile'])): echo $row['mobile']; endif; ?></span>
|
||||
</td>
|
||||
<td class="text-center"><?php echo (!empty($row['policy_no']) && strtolower($row['policy_no']) !== 'null')
|
||||
<div class="row" id="ticket_list">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="table-responsive">
|
||||
<table data-custom-table-css="table" class="table mb-0 nowrap w-100 table-centered" cellspacing="0" id="tickets-table">
|
||||
|
||||
<thead class="bg-light">
|
||||
<tr>
|
||||
<th><div class="column-header">Ticket ID </div></th>
|
||||
<th class="text-left"><div class="column-header">Name </div></th>
|
||||
<th><div class="column-header">Policy Number </div></th>
|
||||
<th><div class="column-header">Ticket Type </div></th>
|
||||
<th><div class="column-header">Subject </div></th>
|
||||
<th><div class="column-header">Status </div></th>
|
||||
<th class="text-left"><div class="column-header">Assign To </div></th>
|
||||
<th><div class="column-header">Created At </div></th>
|
||||
<th><div class="column-header">Updated At </div></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="app-table-body">
|
||||
<?php if(isset($ticket_data)) { ?>
|
||||
<?php foreach($ticket_data as $index => $row){ ?>
|
||||
<tr data-id="<?= $row['thz_id']; ?>" style="cursor: pointer;">
|
||||
<td class="text-center"><?php echo $row['thz_id']; ?></td>
|
||||
<td class="text-left"><?php echo $row['name']; ?>
|
||||
<span class="text-custom-grey"><?php if (!empty($row['empcode'])): echo '('.$row['empcode'].')'; endif; ?></span><br>
|
||||
<span class="text-custom-grey"><?php if (!empty($row['mobile'])): echo $row['mobile']; endif; ?></span>
|
||||
</td>
|
||||
<td class="text-center"><?php echo (!empty($row['policy_no']) && strtolower($row['policy_no']) !== 'null')
|
||||
? $row['policy_no']
|
||||
: 'N/A'; ?>
|
||||
</td>
|
||||
<td class="text-center"><?php echo $row['ticket_type'] ? $row['ticket_type'] : '-'; ?></td>
|
||||
<td class="text-center"><?php echo $row['ticket_type'] ? $row['ticket_type'] : 'N/A'; ?></td>
|
||||
<td class="text-center wrap" title="<?php echo htmlspecialchars($row['subject']); ?>">
|
||||
<?php
|
||||
$subject = $row['subject'] ? $row['subject'] : 'N/A';
|
||||
@ -82,11 +90,11 @@ table.dataTable td.wrap {
|
||||
: htmlspecialchars($subject);
|
||||
?>
|
||||
</td>
|
||||
<td class="text-center"><?php echo $row['status'] ? $row['status'] : '-' ; ?></td>
|
||||
<td class="text-left"><?php echo $row['assignee_name'] ? $row['assignee_name'] : '-'; ?></td>
|
||||
<td class="text-center"><?php echo $row['status'] ? $row['status'] : 'N/A' ; ?></td>
|
||||
<td class="text-left"><?php echo $row['assignee_name'] ? $row['assignee_name'] : 'N/A'; ?></td>
|
||||
<td class="text-left">
|
||||
<?php if (!empty($row['created_at'])):
|
||||
$cd = date("j F Y", strtotime($row['created_at']));
|
||||
$cd = date("j M Y", strtotime($row['created_at']));
|
||||
$ct = date("h:i a", strtotime($row['created_at']));
|
||||
echo $cd . "<br><span class='time'> " . $ct . "</span>";
|
||||
endif;
|
||||
@ -94,23 +102,27 @@ table.dataTable td.wrap {
|
||||
</td>
|
||||
<td class="text-left">
|
||||
<?php if (!empty($row['updated_at'])):
|
||||
$ud = date("j F Y", strtotime($row['updated_at']));
|
||||
$ud = date("j M Y", strtotime($row['updated_at']));
|
||||
$ut = date("h:i a", strtotime($row['updated_at']));
|
||||
echo $ud . "<br><span class='time'> " . $ut . "</span>";
|
||||
endif;
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
<?php } ?>
|
||||
<?php } ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div>
|
||||
</tr>
|
||||
<?php } ?>
|
||||
<?php } else { ?>
|
||||
<tr>
|
||||
<td colspan="9" class="text-center">No data available</td>
|
||||
</tr>
|
||||
<?php } ?>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
</div>
|
||||
|
||||
<div class="modal fade " id="ticketModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
@ -306,8 +318,80 @@ table.dataTable td.wrap {
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
// Datatable document ready
|
||||
$(document).ready(function() {
|
||||
|
||||
var ticketsTable = $('#tickets-table');
|
||||
|
||||
if (ticketsTable.length) {
|
||||
ticketsTable.DataTable({
|
||||
scrollX: true,
|
||||
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
|
||||
buttons: [
|
||||
{
|
||||
text: '<i class="mdi mdi-plus" ></i><span class=" btn-custom"> Create New Ticket </span>',
|
||||
className: 'btn app-btn-primary mr-2',
|
||||
action: function(e, dt, node, config) {
|
||||
openTicket();
|
||||
}
|
||||
},
|
||||
{
|
||||
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>',
|
||||
className: 'app-btn-primary ',
|
||||
title: 'Tickets',
|
||||
exportOptions: {
|
||||
format: {
|
||||
body: function (data, row, column, node) {
|
||||
// Replace <br> with a space
|
||||
data = data.replace(/<br\s*\/?>/gi, " ");
|
||||
// Remove any other HTML tags
|
||||
data = data.replace(/<[^>]*>?/gm, "");
|
||||
return data.trim();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'excel',
|
||||
text: '<i class="mdi mdi-file-excel " ></i><span class=" btn-custom"> EXCEL </span>',
|
||||
exportOptions: {
|
||||
orthogonal: 'sort'
|
||||
},
|
||||
className: 'app-btn-primary ',
|
||||
title: 'Tickets'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
language: {
|
||||
search: `
|
||||
<div class="datatable-search-wrapper">
|
||||
_INPUT_
|
||||
<i class="mdi mdi-magnify datatable-search-icon"></i>
|
||||
</div>`,
|
||||
searchPlaceholder: "Search"
|
||||
},
|
||||
paging: true,
|
||||
pageLength: 25,
|
||||
order: [[0, 'desc']]
|
||||
});
|
||||
} else {
|
||||
console.error("Table not found.");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function openTicket(){
|
||||
var form = document.getElementById('ticketForm');
|
||||
form.reset();
|
||||
@ -583,61 +667,6 @@ $(document).ready(function() {
|
||||
$("#modal_assignee").select2();
|
||||
hideandshowpolicy();
|
||||
|
||||
var ticketsTable = $('#scroll-horizontal-datatable');
|
||||
|
||||
if (ticketsTable.length) {
|
||||
|
||||
ticketsTable.DataTable({
|
||||
scrollX: true,
|
||||
dom: "<'row'<'col-sm-2'f><'col-sm-10 text-right'B>>" +
|
||||
"<'row'<'col-sm-12'tr>>" +
|
||||
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
|
||||
buttons: [
|
||||
{
|
||||
text: '<i class="mdi mdi-plus" ></i><span class=" btn-custom"> Create New Ticket </span>',
|
||||
className: 'btn app-btn-primary mr-2',
|
||||
action: function(e, dt, node, config) {
|
||||
openTicket();
|
||||
}
|
||||
},
|
||||
{
|
||||
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>',
|
||||
className: 'app-btn-primary ',
|
||||
},
|
||||
{
|
||||
extend: 'excel',
|
||||
text: '<i class="mdi mdi-file-excel " ></i><span class=" btn-custom"> EXCEL </span>',
|
||||
exportOptions: {
|
||||
orthogonal: 'sort'
|
||||
},
|
||||
className: 'app-btn-primary ',
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
language: {
|
||||
search: `
|
||||
<div class="datatable-search-wrapper">
|
||||
_INPUT_
|
||||
<i class="mdi mdi-magnify datatable-search-icon"></i>
|
||||
</div>`,
|
||||
searchPlaceholder: "Search"
|
||||
},
|
||||
paging: true,
|
||||
pageLength: 25,
|
||||
order: [[0, 'desc']]
|
||||
});
|
||||
|
||||
} else {
|
||||
console.error("Table Not found.");
|
||||
}
|
||||
|
||||
const subjectInput = document.getElementById("subject");
|
||||
const subjectCounter = document.getElementById("subjectCounter");
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user