FIX_UI_support_Search_with_icon

This commit is contained in:
venba-Inspriron-3558 2025-09-19 15:26:25 +05:30
parent dc5119f752
commit 9ea7b318f2
9 changed files with 150 additions and 82 deletions

View File

@ -887,8 +887,12 @@ table.dataTable tbody td {
paging: true,
pageLength: 25,
language: {
search: "_INPUT_",
searchPlaceholder: "Search..."
search: `
<div class="datatable-search-wrapper">
_INPUT_
<i class="mdi mdi-magnify datatable-search-icon"></i>
</div>`,
searchPlaceholder: "Search"
},
initComplete: function () {
$(".dt-buttons").prepend(`

View File

@ -93,9 +93,9 @@ table.dataTable thead th {
<i class="mdi mdi-upload additional-icon"></i>
</div>
</div>
<!-- Don't delete image preview not in deesign.. <div class="form-group col-md-6 float-left" style="position: relative;top: 0px;">
<div class="form-group col-md-6 float-left" style="position: relative;top: 0px;">
<img src=" " width="100" height="100" id="uploadPreview" class="avatar img-circle img-thumbnail" alt="avatar"/>
</div> -->
</div>
</div>
</div>
<div class="form-group text-center">

View File

@ -76,7 +76,7 @@ table.dataTable thead th {
<div class="card-body">
<div class="row" style="margin-bottom:1rem;">
<div class="col-6" style="align-self: center;">
<h4 style="position: relative;">Client List</h4>
<h4 style="position: relative;">Client</h4>
</div>
<!-- <div class="col-2" style="text-align: right; position: relative;top: 56px; left: 303px;">
<a class="btn btn-primary waves-effect waves-light" onclick="showModal()">Add From Lead</a>
@ -332,8 +332,12 @@ $(document).ready(function()
.addClass('btn btn-primary');
},
language: {
search: "_INPUT_",
searchPlaceholder: "Search..."
search: `
<div class="datatable-search-wrapper">
_INPUT_
<i class="mdi mdi-magnify datatable-search-icon"></i>
</div>`,
searchPlaceholder: "Search"
},
paging: true ,
// pagingType: 'full_numbers'

View File

@ -1459,7 +1459,44 @@
overflow: hidden !important;
}
</style>
/* Wrapper around the search input */
.datatable-search-wrapper {
position: relative;
display: inline-block;
width: 100%;
}
/* The search input itself */
.dataTables_filter input {
background: #F0F0F0 !important;
color: #707070 !important;
font-weight: 400 !important;
box-shadow: 0px 2px 4px 0px #00000024 !important;
border-color: #F0F0F0 !important;
margin-left : 1px !important;
}
/* Placeholder styling */
.dataTables_filter input::placeholder {
color: #707070 !important;
font-weight: 400 !important;
}
/* The magnify icon */
.datatable-search-icon {
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: #707070 !important;
font-size: 18px !important;
pointer-events: none; /* prevents blocking typing */
}
</style>
</head>
@ -1553,12 +1590,12 @@
<?php if (get_role_id() == 1 || get_role_id() == 5) { ?>
<li>
<a href="#sidebarDashboards" data-toggle="collapse" class=" img-inactive-not-working">
<a href="#sidebarPolicies" data-toggle="collapse" class=" img-inactive-not-working">
<img
src="<?= base_url() . "public"; ?>/assets/images/masters_sb.png" alt="Logo" height="20">
<span> Masters </span>
</a>
<div class="collapse" id="sidebarDashboards">
<div class="collapse" id="sidebarPolicies">
<ul class="nav-second-level">
<li>
<a href="<?= base_url('/master/insurer/list') ?>">Insurer</a>
@ -1842,10 +1879,7 @@
</div>
<!-- Left Sidebar End -->
<!-- Top Bar -->
<!-- ========== Top Bar Start ========== -->
<div class="top-navbar-div" style="margin-left:130px;">
<div class="top-navbar-title">
<h5>Welcome <?= (isset(get_session_userdata()->first_name) ? get_session_userdata()->first_name : 'NOT SET') ?> </h5>

View File

@ -167,16 +167,21 @@ custom-dropdown-menu {
}
</style>
<div class="row" id="endorsement_filter">
<div class="col-12" style="margin-top: -12px;">
<div class="col-12">
<h4 class="ml-1 mb-3"> <span class="font-color-black">Endorsement</span> </h4>
</div>
<div class="col-12" id="endorsement_filter">
<div id="accordion" class="mb-3">
<div class="card mb-1">
<h5 class="m-1">
<label id="filterAccordion" class="m-1 d-flex justify-content-between align-items-center">
<span class="font-color-black">Filters</span>
<a id="toggleIcon" class="text-dark float-right" data-toggle="collapse" href="#collapseOne"
aria-expanded="true">
<i id="icon" class="mdi mdi-chevron-down mr-1 text-primary" style="font-size: 28px;"></i>
</a>
</h5>
</label>
<div class="card mb-1">
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<div class="form-group">
@ -275,12 +280,11 @@ custom-dropdown-menu {
<input type="hidden" id="endDate">
</div>
</div>
<div class="form-group col-md-3 text-right m-b-0" style="margin-top: 29px;">
<div class="form-group text-right m-b-0">
<a href="<?= base_url("/policy_tranction/endorsement/list"); ?>" class="btn btn-secondary" id="clear-filters">Clear</a>
<a href="<?= base_url("/policy_tranction/endorsement/list"); ?>" class="btn btn-primary" id="get-emp-list" onclick="fetchEmpolyeeList(event);">Submit</a>
</div>
</div>
</div>
@ -290,21 +294,18 @@ custom-dropdown-menu {
</div>
</div>
</div>
<div class="row" id="endorsement_list">
<div class="col-12">
<div class="col-12" id="endorsement_list">
<div class="card">
<div class="card-body">
<div class="row" style="margin-bottom:1rem;">
<div class="col-6" style="align-self: center;">
<h4 style="position: relative;">Endorsement List</h4>
</div>
</div><!-- col-6 -->
<div class="col-3" id="status_change" style="text-align: right; position: relative;top: 56px; left: 291px;">
<button type="button" id="btnAdd" class="btn btn-primary waves-effect waves-light" onclick="hide_list_show_add()">Add</button>
</div>
</div>
<div>
</div><!-- col-3 -->
</div><!-- row -->
<table data-custom-table-css="table" class="table table-striped mb-0 nowrap" cellspacing="0" id="tickets-table">
<thead class="bg-light">
<tr>
@ -328,11 +329,11 @@ custom-dropdown-menu {
<?php foreach($endorsement_data_list as $index => $row){ ?>
<tr>
<td><?php echo $index+1; ?></td>
<td><?php echo $issuer[$row['issuer']] ?? ''; ?></td>
<td><?php echo $row['client_short_name']; ?></td>
<td><?php echo $row['client_branch_name']; ?></td>
<td><?php echo $row['insurer_short_name']; ?></td>
<td><?php echo $row['policy_type']; ?></td>
<td><?php echo $issuer[$row['issuer']] ?? ''; ?></td><!-- Issuer -->
<td><?php echo $row['client_short_name']; ?></td><!-- Client -->
<td><?php echo $row['client_branch_name']; ?></td><!-- Branch -->
<td><?php echo $row['insurer_short_name']; ?></td><!-- Insurer -->
<td><?php echo $row['policy_type']; ?></td><!-- Policy -->
<td><?php echo $action_type[$row['action_type']]; ?></td>
<td><?php echo $row['endorsement_no']; ?></td>
<td><?php echo empty($row['data_received_date']) ? '' : date('d/m/Y', strtotime($row['data_received_date'])); ?></td>
@ -340,24 +341,24 @@ custom-dropdown-menu {
<td class="right-align-input"><?php echo $row['dependent_count']; ?></td>
<td><?php echo empty($row['policy_issue_date']) ? '' : date('d/m/Y', strtotime($row['policy_issue_date'])); ?></td>
<td><?php echo $policy_status[$row['status']]; ?></td>
<td>
<div class="btn-group dropdown">
<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">
<a class="dropdown-item btnEdit" data-id="<?= $row['id'];?>" onclick="getPolicyTransactionDataForEndorsementEdit('<?= htmlspecialchars($row['id'], ENT_QUOTES) ?>')"> <i class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>Edit</a>
<div class="btn-group dropdown">
<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">
<a class="dropdown-item btnEdit" data-id="<?= $row['id'];?>" onclick="getPolicyTransactionDataForEndorsementEdit('<?= htmlspecialchars($row['id'], ENT_QUOTES) ?>')">
<i class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>Edit
</a>
</div>
</div>
</div>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</table><!-- table -->
</div><!-- card-body -->
</div><!-- card -->
</div><!-- end col -->
</div>
<!-- end table row -->
<?php include('policy_transaction_endorsement_form.php'); ?>
@ -491,14 +492,20 @@ document.addEventListener("DOMContentLoaded", function () {
dom: "<'row'<'col-sm-6'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: [
{
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: 'CSV',
text: '<i class="mdi mdi-file-delimited " ></i><span class=" btn-custom"> CSV </span>',
title: 'Policy-Tranction-Endorsement-List',
exportOptions: {
columns: ':not(:last-child)'
},
}],
}]
}],
language: {
search: "_INPUT_",
searchPlaceholder: "Search..."
@ -923,6 +930,7 @@ $(function() {
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
locale: { format: 'DD-MM-YYYY' },
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],

View File

@ -144,23 +144,26 @@ table.dataTable tbody td {
}
</style>
<div class="col-12">
<h4 class="ml-1 mb-3"> <span class="font-color-black">Policy</span> </h4>
</div>
<div class="row" id="inception_filter">
<div class="col-12" style="margin-top: -12px;">
<div class="col-12" id="inception_filter">
<div id="accordion" class="mb-3">
<div class="card mb-1">
<h4 class="m-1">
<label id="filterAccordion" class="m-1 d-flex justify-content-between align-items-center">
<span class="font-color-black">Filters</span>
<a id="toggleIcon" class="text-dark float-right" data-toggle="collapse" href="#collapseOne"
aria-expanded="true">
<i id="icon" class="mdi mdi-chevron-down mr-1 text-primary" style="font-size: 28px;"></i>
</a>
</h4>
</label>
<div class="card mb-1">
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<div class="form-group">
<div class="form-row">
<div class="form-group col-md-3">
<div class="form-group col-md-4">
<label for="client_branch">Client<span class="text-danger"></span></label>
<select class="form-control" id="client_id_for_search" name="client_id" >
<option value="0">Select Client</option>
@ -174,7 +177,7 @@ table.dataTable tbody td {
</select>
</div>
<div class="form-group col-md-3">
<div class="form-group col-md-4">
<label for="addon_policy"> Insurer <span id="base_danger" class="text-danger"></span></label>
<select class="form-control" id="insurer_id_for_search" name="insurer_id" >
<option value="0" selected>Select Insurer</option>
@ -184,7 +187,7 @@ table.dataTable tbody td {
</select>
</div>
<div class="form-group col-md-3">
<div class="form-group col-md-4">
<label for="email"> Policy Type <span class="text-danger"></span></label>
<select class="form-control" id="policy_type_for_search" name="policy_type_id" >
<option value="0">Select Policy Type</option>
@ -212,7 +215,7 @@ table.dataTable tbody td {
</select>
</div> -->
<div class="form-group col-md-3">
<div class="form-group col-md-4">
<label for="email"> Status <span class="text-danger"></span></label>
<select class="form-control" id="policy_status_for_search" name="policy_type_id" >
<option value="0">Select Status</option>
@ -226,13 +229,7 @@ table.dataTable tbody td {
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<div class="form-group col-md-4">
<label>Date Type<span class="text-danger"></span></label>
<select class="form-control" id="date_type" name="date_type" onchange="hideDateField()">
<option value="0">Select Date Type</option>
@ -246,21 +243,19 @@ table.dataTable tbody td {
</select>
</div>
<div class="form-group col-md-3" style="display: none;" id="date_div">
<div class="form-group col-md-4" style="display: none;" id="date_div">
<label>Date<span class="text-danger"></span></label>
<div id="reportrange" class="form-control" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="mdi mdi-calendar-blank"></i>&nbsp;
<span></span> <i class="mdi mdi-menu-down"></i>
<div class="input-icon">
<input type="text" id="reportrange" class="form-control" readonly style="caret-color: transparent;">
<i class="mdi mdi-calendar-blank-outline additional-icon"></i>
</div>
<input type="hidden" id="startDate">
<input type="hidden" id="endDate">
</div>
<div class="form-group col-md-3 text-right m-b-0" style="margin-top: 29px;">
</div>
<div class="form-group text-right m-b-0">
<a href="<?= base_url("/policy_tranction/inception/list"); ?>" class="btn btn-secondary" id="clear-filters">Clear</a>
<a href="<?= base_url("/policy_tranction/inception/list"); ?>" class="btn btn-primary" id="get-emp-list" onclick="fetchEmpolyeeList(event);">Submit</a>
</div>
</div>
</div>
</div>
@ -268,15 +263,15 @@ table.dataTable tbody td {
</div>
</div>
</div>
</div>
<div class="row" id="inception_list">
<div class="col-12">
<div class="col-12" id="inception_list">
<div class="card">
<div class="card-body">
<div class="row" style="margin-bottom:1rem;">
<div class="col-6" style="align-self: center;">
<h4 style="position: relative;">Policy List</h4>
<h4 style="position: relative;">Policy </h4>
</div>
<div class="col-3" id="status_change" style="text-align: right; position: relative;top: 56px; left: 291px;">
@ -345,7 +340,8 @@ table.dataTable tbody td {
</div>
</div>
</div><!-- end col -->
</div>
<!-- end table row -->
@ -559,15 +555,20 @@ $(document).ready(function() {
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: [
{
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: 'CSV',
text: '<i class="mdi mdi-file-delimited " ></i><span class=" btn-custom"> CSV </span>',
title: 'Policy-Tranction-Inception-List',
exportOptions: {
columns: ':not(:last-child)'
},
},
} ]},
{
text: 'Add',
className: 'buttons-html5 addbtnStyle',
@ -1625,7 +1626,7 @@ $(function() {
// var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('D/MM/YYYY') + ' - ' + end.format('D/MM/YYYY'));
$('#reportrange').html(start.format('D/MM/YYYY') + ' - ' + end.format('D/MM/YYYY'));
$('#startDate').val(start.format('DD/MM/YYYY'));
$('#endDate').val(end.format('DD/MM/YYYY'));
}

View File

@ -621,6 +621,14 @@ $(document).ready(function() {
]
}
],
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']]

View File

@ -16,7 +16,12 @@
padding: 8px;
font-size: 14px;
}
textarea {
background-color: white !important;
border-radius: 0px !important;
box-shadow: 0px 0px 0px 0px white !important;
border-color: white !important;
}
.icon-buttons {
display: flex;
gap: 6px;

View File

@ -200,8 +200,12 @@ document.addEventListener("DOMContentLoaded", function () {
language: {
search: "_INPUT_",
searchPlaceholder: "Search..."
search: `
<div class="datatable-search-wrapper">
_INPUT_
<i class="mdi mdi-magnify datatable-search-icon"></i>
</div>`,
searchPlaceholder: "Search"
},
paging: true ,
});