Rev 34671 | Blame | Compare with Previous | Last modification | View Log | RSS feed
<link href="https://cdn.datatables.net/fixedcolumns/3.3.0/css/fixedColumns.bootstrap.css" rel="stylesheet"/><section class="wrapper"><div class="row"><div class="col-lg-12"><h3 class="page-header"><i class="icon_document_alt"></i>DESIGN TAT</h3><ol class="breadcrumb"><li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li><li><i class="icon_document_alt"></i>Design TAT</li></ol></div></div>## Filter and Search<div class="col-lg-12" style="margin-bottom: 15px;"><div class="row"><div class="col-lg-3"><label style="margin-right: 10px;"><strong>Filter:</strong></label><select id="holdFilterSelect" class="form-control" style="width: 150px; display: inline-block;"><option value="pending" #if($holdFilter == "pending") selected #end>Pending</option><option value="hold" #if($holdFilter == "hold") selected #end>On Hold</option><option value="all" #if($holdFilter == "all") selected #end>All</option></select></div><div class="col-lg-6"><label style="margin-right: 10px;"><strong>Search:</strong></label><input type="text" id="designTatSearch" class="form-control"style="width: 250px; display: inline-block;"placeholder="Outlet, Phone, Code, City..." value="$!search"><button type="button" class="btn btn-primary" id="designTatSearchBtn" style="margin-left: 5px;"><i class="fa fa-search"></i> Search</button>#if($search && $search != "")<button type="button" class="btn btn-default" id="clearDesignTatSearchBtn"style="margin-left: 5px;">Clear</button>#end</div></div></div><div class="col-lg-12"><table class="table table-border table-condensed table-bordered" id="OnboardingDesign" style="width:100%"><thead class="row htable" style="background:#F5F5F5;"><tr style="color:black;"><th>Id</th><th>Outlet Name(SM)</th><th>Created On</th><th>Acquired Date()</th><th>Phone </br>Number(SM)</th><th>City (SM)</th><th>State Head(SM)</th><th>BDM (SM)</th><th>Agreed Brand fees(SM)</th><th>Inauguration Date(SM)</th><th>LOI(legal)</th><th>Kyc</th><th>Code(legal)</th><th class="hidden-col">Recee Planed</th><th>Recee Actual(Branding L1)</th><th class="hidden-col">Stock Payment</th><th class="hidden-col">2D with BOQ Planed</th><th>BOQ Actual(Branding L1)</th><th>BOQ Document(Branding L1)</th><th class="hidden-col">3D with BOQ Planed</th><th class="hidden-col">3D with BOQ Actual</th><th class="hidden-col">3D with BOQ</th><th class="hidden-col">PO To Vendor Planed</th><th class="hidden-col">PO To Vendor Actual</th><th class="hidden-col">Briefing Partner Date</th><th class="hidden-col">Briefing Partner Actual Date</th><th class="hidden-col">Deployment Planed</th><th>Deployment Actual(Branding L1)</th><th class="hidden-col">Final Pics Planed</th><th>Final Pics Actual(Branding L1)</th><th>Final Pics(Branding L1)</th><th class="hidden-col">NOC Actual</th><th class="hidden-col">NOC</th><th>Submit</th><th>Designing Done</th></tr></thead><tbody>#foreach($pob in $partnerOnBoardingPanel )#if($pob.getHoldTimestamp())<tr class="design-hold" >#parse("partner-onboarding-design-row-index.vm")</tr>#else<tr >#parse("partner-onboarding-design-row-index.vm")</tr>#end#end</tbody></table></div>## Pagination Controls (Bottom)<div class="col-lg-12" style="margin-top: 15px;"><div class="row"><div class="col-lg-12 text-center">#if($totalRecords > 0)<span class="pagination-info">Showing $startRecord - $endRecord of $totalRecords</span><ul class="pagination pagination-sm" style="margin: 0 15px; display: inline-flex;">#if($currentPage > 0)<li><a href="javascript:void(0)" class="design-tat-page-link" data-page="0">First</a></li><li><a href="javascript:void(0)" class="design-tat-page-link" data-page="$prevPage">Prev</a></li>#else<li class="disabled"><span>First</span></li><li class="disabled"><span>Prev</span></li>#end<li class="active"><span>Page $currentPageDisplay of $totalPages</span></li>#if($currentPage < $lastPage)<li><a href="javascript:void(0)" class="design-tat-page-link" data-page="$nextPage">Next</a></li><li><a href="javascript:void(0)" class="design-tat-page-link" data-page="$lastPage">Last</a></li>#else<li class="disabled"><span>Next</span></li><li class="disabled"><span>Last</span></li>#end</ul><select class="form-control design-tat-page-size" style="width: 120px; display: inline-block;"><option value="10" #if($pageSize==10)selected#end>10 per page</option><option value="25" #if($pageSize==25)selected#end>25 per page</option><option value="50" #if($pageSize==50)selected#end>50 per page</option><option value="100" #if($pageSize==100)selected#end>100 per page</option></select>#end</div></div></div></section><script type="text/javascript">$(document).ready(function () {// Handle filter change$('#holdFilterSelect').on('change', function () {refreshDesignTatList(0);});// Search button click handler$('#designTatSearchBtn').on('click', function () {refreshDesignTatList(0);});// Search on Enter key$('#designTatSearch').on('keypress', function (e) {if (e.which === 13) {refreshDesignTatList(0);}});// Clear search button$('#clearDesignTatSearchBtn').on('click', function () {$('#designTatSearch').val('');refreshDesignTatList(0);});// Pagination link click handler$(document).on('click', '.design-tat-page-link', function (e) {e.preventDefault();refreshDesignTatList($(this).data('page'));});// Page size change handler$(document).on('change', '.design-tat-page-size', function () {refreshDesignTatList(0);});// Destroy existing DataTable if it existsif ($.fn.DataTable.isDataTable('#OnboardingDesign')) {$('#OnboardingDesign').DataTable().destroy();}var dtable = $('#OnboardingDesign').DataTable({"scrollX": true,"scrollY": "518px",scrollCollapse: true,"fixedHeader": true,"paging": false,"info": false,"bFilter": false,fixedColumns: {leftColumns: 2},"columnDefs": [{ "targets": 1, "orderDataType": "dom-text", "type":"string" },{ "targets": 2, "orderDataType": "date-dd-mmm-yyyy", "type":"string" },{ "targets": 3, "orderDataType": "date-dd-mmm-yyyy", "type": "string" },{ "targets": 4, "orderDataType": "dom-text-numeric", "type":"number"},{"targets": 5, "orderDataType": "dom-text", "type": "string"},{"targets": 6, "orderDataType": "dom-text", "type": "string"},{"targets": 7, "orderDataType": "dom-text", "type": "string"},{"targets": 9, "orderDataType": "date-dd-mmm-yyyy", "type": "string"},{"targets": 12, "orderDataType": "dom-text", "type": "string"},{"targets": 14, "orderDataType": "date-dd-mmm-yyyy", "type": "string"},{"targets": 17, "orderDataType": "date-dd-mmm-yyyy", "type": "string"},{"targets": 27, "orderDataType": "date-dd-mmm-yyyy", "type": "string"},{"targets": 29, "orderDataType": "date-dd-mmm-yyyy", "type": "string"},## Column hiding is done via CSS class="hidden-col" on <th>/<td> elements.## Do NOT use DataTables visible:false — it removes TDs from DOM,## which breaks td:eq(N) selectors in panel-listing.js submit handler.{"targets": [13, 15, 16, 19, 20, 21, 22, 23, 24, 25, 26, 28, 31, 32], "className": "hidden-col"}],});});// Function to refresh design tat list via AJAXfunction refreshDesignTatList(page) {var holdFilter = $('#holdFilterSelect').val() || 'pending';var pageSize = $('.design-tat-page-size').val() || '25';var search = $('#designTatSearch').val() || '';var url = context + '/partnerOnBoardingDesign?holdFilter=' + encodeURIComponent(holdFilter)+ '&page=' + (page || 0)+ '&pageSize=' + pageSize+ '&search=' + encodeURIComponent(search);$.ajax({url: url,type: 'GET',success: function (response) {$('#main-content').html(response);}});}</script><style>.hidden-col {display: none !important;}td.hidden-col {display: none !important;}.pagination-info {margin-right: 15px;font-weight: bold;}.pagination {margin: 0;}.pagination li {display: inline-block;margin: 0 2px;}.pagination li a, .pagination li span {padding: 5px 10px;border: 1px solid #ddd;text-decoration: none;color: #333;}.pagination li.active span {background-color: #337ab7;color: white;border-color: #337ab7;}.pagination li.disabled span {color: #999;cursor: not-allowed;}</style>