EVOLUTION-NINJA
Edit File: cpd_activity_v.php
<?php echo view('includes/flow-header'); ?> <section class="spec-main last_body"> <div class="row"> <div class="col-sm-3 anaslefbox"> <div class="spec-left specunderline mob_height"> <ul> <li><a href="">CPD Activity</a></li> </ul> </div> </div> <div class="col-sm-9"> <!-- new --> <div class="cme-right-new" style="padding: 2% 5% 0 0;"> <div class="row"> <div class="col-sm-9"> <div class="row"> <div class="col-sm-3 mb-5 cpd_back" id="go-back-new"> <a href="<?php echo base_url('cpd-dashboard');?>"> <i class="fa fa-arrow-left" aria-hidden="true"></i>Back</a> </div> </div> <div class="row cpd_start_four"> <div class="col-sm-3"> <a href="<?php echo base_url('cpd-dashboard');?>"><span><button type="button" class="form-control" id="dash-button-1"><img class="avc-img" src="public/assets/cpdimage/Dashboard 1.png">Dashboard</button></a></span> </div> <div class="col-sm-3 mob_cpdacti"> <a href="<?php echo base_url('cpd-activity');?>"><button type="button" class="form-control dash-button"><img class="avc-img" src="public/assets/cpdimage/Activities 1.png">Activities</button></a> </div> <div class="col-sm-4 mob_cpdproto"> <a href="<?php echo base_url('my-cpd-portfolio');?>"><button type="button" class="form-control cps-summary-button "><img class="avc-img" src="public/assets/cpdimage/My CPD Portfolio 1.png">CPD Summary/Download</button></a> </div> </div> <div class="row"> <div class="col-sm-3 mob_cpdactivity"> <a href="<?php echo base_url('add-cpd');?>"> <img src="public/assets/cpdimage/Subtract.png" class="cpd_subtract"> <button type="button" class="form-control add_act_new">Add Activity</button></a> </div> <div class="col-sm-6"> <button type="button" id="btnExport" class="btn-excel cpd-ex-excel" onclick="usermanagement_excel()">Export to Excel</button> </div> <div class="col-sm-3"> <!-- <button type="button" id="btnExport" class="btn-excel cpd-ex-excel" onclick="fun_pdf()">Export to pdf</button> --> </div> </div> <!-- <div class="row cpd_start_four"> <div class="col-sm-3"> <a href="<?php echo base_url('cpd-dashboard');?>"> <img src="public/assets/cpdimage/Rectangle 4108 (2).png"> <h5 class="cpd_dash">Dashboard</h5> </a> </div> <div class="col-sm-3 mob_cpdacti"> <a href="<?php echo base_url('cpd-activity');?>"><img src="public/assets/cpdimage/Rectangle 4108 (1).png"> <h5 class="cpd_acti">Activities</h5> </a> </div> <div class="col-sm-5 mob_cpdproto"> <a href="<?php echo base_url('my-cpd-portfolio');?>"><img src="public/assets/cpdimage/Rectangle 4108 (2).png"> <h5 class="cpd_proto">My CPD Portfolio</h5> </a> </div> <div class="col-sm-3 mb-5 cpd_back" id="go-back-new"> <a href="<?php echo base_url('cpd-dashboard');?>"> <i class="fa fa-arrow-left" aria-hidden="true"></i>Back</a> --> <!-- <button type="button" id="btnExport" class="btn-excel" onclick="usermanagement_excel()">Export to Excel</button> --> <!-- </div> </div> <div class="row"> <div class="col-sm-5 mt-2 mob_cpdactivity rearrange-add-activity"> <a href="<?php echo base_url('add-cpd');?>"><img src="public/assets/cpdimage/Rectangle 4108 (2).png"> <img src="public/assets/cpdimage/Subtract.png" class="cpd_subtract"> <h5 class="cpd_addaccti">Add Activity</h5> </a> <button type="button" id="btnExport" class="btn-excel cpd-ex-excel" onclick="usermanagement_excel()">Export to Excel</button> </div> </div> --> <form> </div> </form> </div> </div> <div class="row mt-5"> <div class="col-sm-12" id="mobile-table" style="margin-left: -5px;"> <div class="grid_div"></div> <div id="list2" > <table id="list3" > </table> <div style="display:none;"> <table border="1" style="border-spacing: 0px !important;" id="user_excel" class="user_excel"></table> </div> </div> <div id="pager3"></div> </div> </div> </div> </div> <!-- The Confirmation Modal --> <div id="deleteConfirmationModal" class="modal"> <div class="modal-content"> <h3 class="p-2" style="background-color: #0065A3;color: white; ">Logbook</h3> <div class="model_con"> <p><b>Do you want to delete this record?</b></p> <div class="row"> <div class="col-sm-6"> <button class="btn btn-light bt" onclick="closeDeleteConfirmation()"><b>No</b></button> </div> <div class="col-sm-6"> <button class="btn btn-danger bt"onclick="deleteRecord()"><b>Yes</b></button> </div> </div> </div> </div> </div> </section> <script type="text/ecmascript" src="<?php echo base_url('public/jqgrid/js/jquery.jqGrid.min.js'); ?>"></script> <!-- This is the localization file of the grid controlling messages, labels, etc.--> <!-- We support more than 40 localizations --> <script type="text/ecmascript" src="<?php echo base_url('public/jqgrid/js/i18n/grid.locale-en.js'); ?>"></script> <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom --> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/assets/css/jquery-ui.css'); ?>" /> <!-- The link to the CSS that the grid needs --> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/jqgrid/css/ui.jqgrid.css'); ?>" /> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/jqgrid/css/ui.jqgrid-bootstrap.css'); ?>" /> <script src="<?php echo base_url('public/assets/js/jquery-ui.js'); ?>" type="text/javascript"></script> <script type="text/ecmascript" src="<?php echo base_url('public/jqgrid/js/jquery.table2excel.js'); ?>"></script> <script src="<?php echo base_url('public/assets/js/jquery.table2excel.js');?>"></script> <!-- Include html2pdf library --> <style> </style> <script> $(document).ready(function(){ var year = '<?php echo $year;?>'; jQuery("#list3").jqGrid({ url: "<?php echo base_url('cpd-data');?>"+'?year='+year, datatype: "json", colNames:['Start Date','End Date','Category','Section','Title','Details','Hours','Cpd Points','Evidences','Action'], colModel:[ // {name:'id',index:'id', width:140, editable:false }, {name:'start_date',index:'start_date', width:120, editable:false, formatter: 'date',formatoptions: { srcformat: 'Y-m-d', newformat: 'd-m-Y' } }, {name:'end_date',index:'end_date', width:120, editable:false, formatter: 'date',formatoptions: { srcformat: 'Y-m-d', newformat: 'd-m-Y' } }, {name:'category',index:'category', width:140, editable:false }, {name:'section',index:'section', width:130, editable:false}, {name:'title',index:'title', width:130, editable:false}, {name:'notes',index:'notes', width:100, editable:false}, {name:'hours',index:'hours', width:100, editable:false}, {name:'cpd_points',index:'cpd_points', width:50, editable:false}, {name:'evidences',index:'evidences', width:100, editable:false}, { label: 'Action', name: 'edit', width: 75, formatter: function (cellValue, options, rowObject) { return `<div class="fd mt-1 pb-1"> <a href="<?= site_url('cpd-edit-form') ?>?id=${options.rowId}"><img src="public/assets/logimages/file.jpg" class="folder"></a> <a href="#" onclick="deleteRecord(${options.rowId})"><i class="fa fa-trash fa-trash_del" aria-hidden="true"></i></a> </div>`; } } ], rowNum:20, rowList:[20,30,50,100,200,300], rownumbers: true, pager: '#pager3', sortname:'id', autowidth: true, height: '100%', // width: '100%', viewrecords: true, loadonce:true, gridview: true, sortorder:"desc", shrinkToFit: true, caption:"CPD Activities", subGrid: false, }); $("#list3").jqGrid("setLabel", "rn", "SL"); $("#list3").jqGrid('filterToolbar',{stringResult: true,searchOperators : true}); //for multisearch code,remove if not required $("#list3").jqGrid('navGrid','#pager3', {edit:false,add:false,del:false,search:true,refresh:true}, { }, { }, { }, { sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'], closeOnEscape: true, multipleSearch: true, closeAfterSearch: true } ); fun_excel(); }); function fun_excel() { var year = '<?php echo $year;?>'; $.ajax({ url: "<?php echo base_url('cpd-data');?>"+'?year='+year, type: "GET", success: function(response) { // response = jQuery.parseJSON(response); // console.log(response[0]); $('.user_excel').empty(); var con = ''; con += '<thead><tr><th>Start Date</th><th>End Date</th><th>Category</th><th>Section</th><th>Title</th><th>Details</th><th>Hours</th><th>Cpd Points</th><th>Evidences</th></tr></thead>'; $.each(response, function(key, value) { con += '<tr>'; con += '<td>' + value.start_date + '</td>'; con += '<td>' + value.end_date + '</td>'; con += '<td>' + value.category + '</td>'; con += '<td>' + value.section + '</td>'; con += '<td>' + value.title + '</td>'; con += '<td>' + value.notes + '</td>'; con += '<td>' + value.hours + '</td>'; con += '<td>' + value.cpd_points + '</td>'; con += '<td>' + value.evidences + '</td>'; con += '</tr>'; }); $('.user_excel').append(con); } }); } function showDeleteConfirmation(id) { var modal = document.getElementById("deleteConfirmationModal"); modal.style.display = "block"; modal.setAttribute("data-record-id", id); } function closeDeleteConfirmation() { var modal = document.getElementById("deleteConfirmationModal"); modal.style.display = "none"; } function deleteRecord(id) { swal({ title: "Are you sure?", text: "You want to delete this activity?", type: "warning", showCloseButton: true, showCancelButton: true, confirmButtonColor: "#DD6B55", cancelButtonColor:'#d33', confirmButtonText: "Yes, Delete", cancelButtonText: "No", closeOnConfirm: false, closeOnCancel: false }, function(isConfirm){ if(isConfirm){ $(".sweet-alert").hide(); $(".sweet-overlay").hide(); $.ajax({ url:"<?php echo base_url("cpd-delete")?>", type:"POST", data:{id:id}, success:function(response) { response = jQuery.parseJSON(response); console.log(response); if(response.result == 1){ toastr["success"](response.message); location.reload(); }else{ toastr["error"](response.message); } } }); } else { $(".sweet-alert").hide(); $(".sweet-overlay").hide(); } }); } function usermanagement_excel() { $(".user_excel").table2excel({ exclude: ".noExl", name: "Excel Document Name", filename: "CPD Activity", fileext: ".xls", exclude_img: true, exclude_links: true, exclude_inputs: true }); } </script> <style> .ui-jqgrid-sdiv{ display : none !important; } .ui-jqgrid-titlebar { background-color:#0065A3; } .ui-jqgrid-title{ color:#fff; font-weight: 600; font-size: 18px; } .user-tag{ color: #0065A3; font-weight: 600; font-size: 24px; } .soptclass{ display : none; } .fd{ display:flex; } .fa-trash_del{ font-size:21px !important; margin-left:10px; } .fa-trash_fol{ font-size:21px !important; margin-left:20px; } @media only screen and (max-width:600px){ #mobile-div{ padding: 20px; padding-right:10px; } #mobile-table{ overflow-x:scroll; } #list2{ /* overflow-x:scroll; */ width:300%; } .modal-content { width: 70% !important; } .bt{ width: 100%; margin-top: 2px; } .ui-jqgrid .ui-jqgrid-caption, .ui-jqgrid .ui-jqgrid-errorbar-ltr { margin: 5px !important; } } /* CSS for the modal */ .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); } .modal-content { background-color: #fff; margin: 20% auto; /* padding: 20px; */ width: 30%; /* text-align: center; */ } .model_con{ padding: 20px; } .bt{ width: 100%; } .rearrange-add-activity{ margin-left: 0px; margin-top: -60px !important; } .cpd-ex-excel{ margin-top: 34px; position: relative; left: 0px; } #list2{ } @media only screen and (max-width:600px){ .rearrange-add-activity{ margin-left: -167px; margin-top: 9px !important; } .cpd-ex-excel{ /* margin-top: opx; */ position: relative; left: -20px; top: 5px; margin-top: -85px; } } .folder { width: 20px; height: 20px; margin-left: 12px; margin-top: 2px; } </style> <style> .mob_cpdactivity{ margin-top: 20px !important; margin-left: 0px; } .dash-button{ /* background: linear-gradient(to left, #0160A2,#0198CD, #0160A2); */ background-color: #0065a3; box-shadow: #6c757d 0px 0px 0px 3px; color: white; border: none; border-radius: 6px; width: 100%; height: 45px; font-size: 17px; } #dash-button-1{ background: linear-gradient(to left, #0160A2,#0198CD, #0160A2); background-color: #0160A2; color: white; border: none; border-radius: 6px; width: 100%; height: 45px; font-size: 17px; } .cps-summary-button{ background: linear-gradient(to left, #0160A2,#0198CD, #0160A2); color: white; border: none; border-radius: 6px; width: 105%; height: 45px; font-size: unset; } .add_act_new{ background: linear-gradient(to left, #0160A2,#0198CD, #0160A2); color: white; border: none; border-radius: 6px; width: 85%; height: 30px; font-size: 14px; text-align: center; } .cpd_subtract{ margin-left: 3px; position: relative; top: 24px; width: 14px; left: 3px; } .cpd_back{ position: relative; top: 0px; } .mob_cpdacti{ /* margin-left: -50px; */ } .mob_cpdproto{ /* margin-left: -50px; */ } .cpd_start_four{ margin-top: -80px; } .avc-img{ width: 28px; height: 28px; position: relative; left: -7px; } @media only screen and (max-width: 600px){ .mob_cpdactivity{ width: 50%; /* margin-left: -335px; margin-top: 160px !important; margin-bottom: -100px; */ position: relative; top: -45px; left: 45px; } #dash-button-1{ margin-top: 50px; margin-left: 0px; } .cps-summary-button{ margin-left: 50px; margin-top: 10px; width: 80%; } .mob_cpdacti{ margin-top: 50px; margin-left: -189px !important; } .cpd_start_four{ margin-top: -45px; margin-left: 10px !important; } .can-mo{ position: relative; top: -30px; left: 4px; } .can-mo1{ position: relative; top: -12px; left: 4px; } .mob_cpdacti { position: relative; top: -35px; left: 187px; } .cps-summary-button { margin-left: 0px; margin-top: 10px; width: 100%; } } </style>