You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

801 lines
30 KiB

2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" dir="">
  3. <html xmlns:th="http://www.thymeleaf.org">
  4. <head th:replace="~{fragments/modules/base/head :: head}"></head>
  5. <style>
  6. .required{
  7. color: red;
  8. }
  9. #modalBody h4 {
  10. font-weight: bold;
  11. margin-top: 15px;
  12. margin-bottom: 10px;
  13. }
  14. #modalBody p {
  15. margin: 5px 0;
  16. }
  17. #modalBody hr {
  18. margin: 15px 0;
  19. }
  20. .comment {
  21. margin-bottom: 20px;
  22. }
  23. .comment p {
  24. margin: 0;
  25. }
  26. hr {
  27. border: 1px solid #ccc;
  28. margin-top: 20px;
  29. margin-bottom: 20px;
  30. }
  31. h5 {
  32. font-size: bold;
  33. }
  34. /* Limit the height of the dropdown menu and make it scrollable */
  35. .dropdown-menu {
  36. max-height: 200px; /* Adjust this value as needed */
  37. overflow-y: auto;
  38. }
  39. .col-4 {
  40. font-weight: bold;
  41. text-align: right;
  42. }
  43. .col-8 {
  44. padding-left: 20px;
  45. }
  46. .comment {
  47. padding: 10px 0;
  48. }
  49. .comment .text-muted {
  50. font-size: 0.9em;
  51. color: #6c757d;
  52. }
  53. .comment hr {
  54. border-top: 1px solid #ccc;
  55. }
  56. .comment .btn-link {
  57. font-size: 0.9em;
  58. text-decoration: underline;
  59. color: #007bff;
  60. }
  61. /* Make the modal body scrollable */
  62. #detailsModal .modal-body {
  63. max-height: 70vh; /* Limit the height to 70% of the viewport */
  64. overflow-y: auto; /* Enable vertical scrolling */
  65. }
  66. .card-box {
  67. border-radius: 20px;
  68. box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
  69. }
  70. #followupCard {
  71. transition: transform 0.2s ease; /* Smooth scaling transition */
  72. cursor: pointer; /* Default cursor change */
  73. }
  74. #followupCard:hover {
  75. transform: scale(1.05); /* Slightly scale up on hover */
  76. cursor: pointer; /* Change cursor to hand symbol */
  77. }
  78. .modal-body label{
  79. padding-top: 10px;
  80. }
  81. </style>
  82. <body>
  83. <!--[if lt IE 8]>
  84. <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  85. <![endif]-->
  86. <div class="wrapper">
  87. <!-- header top menu Start -->
  88. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  89. <!-- header top menu end -->
  90. <div class="page-wrap">
  91. <!--=============== Left Menu side Start ================-->
  92. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  93. <!--=============== Left side End ================-->
  94. <div class="main-content">
  95. <div class="container-fluid">
  96. <div class="page-header mb-2">
  97. <div class="row align-items-end">
  98. <div class="col-lg-8">
  99. <div class="page-header-title">
  100. <i class="fa fa-list-alt bg-blue"></i>
  101. <div class="d-inline">
  102. <h5>Retirement</h5>
  103. <span>Department Entries</span>
  104. </div>
  105. </div>
  106. </div>
  107. <div class="col-lg-4">
  108. <nav class="breadcrumb-container" aria-label="breadcrumb">
  109. <ol class="breadcrumb">
  110. <li class="breadcrumb-item"><a href="/gcc/index"><i class="ik ik-home"></i></a></li>
  111. <li class="breadcrumb-item" aria-current="page">Department Entries</li>
  112. <li class="breadcrumb-item" aria-current="page">NewEntry</li>
  113. <li class="breadcrumb-item active" aria-current="page">Retirement</li>
  114. </ol>
  115. </nav>
  116. </div>
  117. </div>
  118. </div>
  119. <div class="row mt-4">
  120. <div class="col-md-12">
  121. <div class="card">
  122. <div class="card-block">
  123. <h5 style="font-weight:bold;"> <span th:text="${deptname}"></span>&nbsp;Department</h5>
  124. <h5 style="font-weight:bold;"><span th:text="${deptId}" id="deptId" style="display:none"></span><span th:text="${filecategory}" id="filecategory" style="display:none"></span>
  125. <span th:text="${userId}" id="userId" style="display:none"></span> New Entry - Retirement</h5>
  126. <div class="row mb-4">
  127. <div class="col-md-4">
  128. <label for="fromDate" class="form-label fw-bold">From Date<span class="text-danger">*</span></label>
  129. <input type="date" id="fromDate" class="form-control" onclick="this.showPicker()">
  130. </div>
  131. <div class="col-md-4">
  132. <label for="toDate" class="form-label fw-bold">To Date<span class="text-danger">*</span></label>
  133. <input type="date" id="toDate" class="form-control" onclick="this.showPicker()" >
  134. </div>
  135. </div>
  136. <div class="row mt-4">
  137. <div class="col-12 d-flex justify-content-center">
  138. <button id="searchButton" class="btn btn-primary mx-2" >Search</button>
  139. <button id="resetButton" class="btn btn-secondary">Reset</button>
  140. </div>
  141. </div>
  142. <div id="employeedetails">
  143. <table id="FollowupDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
  144. <thead class="thead-dark">
  145. <tr role="row">
  146. <th class="text-center">S.No</th>
  147. <th class="text-center">Employee Code</th>
  148. <th class="text-center">Name </th>
  149. <th class="text-center">DOB</th>
  150. <th class="text-center">Retirement Date</th>
  151. <th class="text-center">Department</th>
  152. <th class="text-center">Designation</th>
  153. <th class="text-center">View</th>
  154. </tr>
  155. </thead>
  156. <tbody style="text-align:center;">
  157. </tbody>
  158. </table>
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. </div>
  164. </div>
  165. </div>
  166. <div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
  167. <div style="position: relative; top: 50%; transform: translateY(-50%);">
  168. <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
  169. <span class="sr-only">Loading...</span>
  170. </div>
  171. <!-- Add the 'Please wait' text below the spinner -->
  172. <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
  173. </div>
  174. </div>
  175. <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
  176. </div>
  177. </div>
  178. <!-- Modal -->
  179. <div class="modal fade" id="returnretrieddetailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  180. <div class="modal-dialog modal-lg" role="document">
  181. <div class="modal-content">
  182. <div class="modal-header">
  183. <h5 class="modal-title" id="detailsModalLabel">
  184. New Entry - Retirement (<span id="modalEmployeeCode"></span>)
  185. </h5>
  186. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  187. <span aria-hidden="true">&times;</span>
  188. </button>
  189. </div>
  190. <div class="modal-body">
  191. <div class="row">
  192. <div class="col-sm-6">
  193. <label for="employeeno" class="form-label fw-bold">Employee No <span class="text-danger">*</span></label>
  194. <input type="number" id="employeeno" class="form-control" readonly>
  195. </div>
  196. <div class="col-sm-6">
  197. <label for="employeename" class="form-label fw-bold">Employee Name <span class="text-danger">*</span></label>
  198. <input type="text" id="employeename" class="form-control" readonly>
  199. </div>
  200. <div class="col-sm-6">
  201. <label for="department" class="form-label fw-bold">Department <span class="text-danger">*</span></label>
  202. <input type="text" id="department" class="form-control" readonly>
  203. </div>
  204. <div class="col-sm-6">
  205. <label for="designation" class="form-label fw-bold">Designation <span class="text-danger">*</span></label>
  206. <input type="text" id="designation" class="form-control" readonly>
  207. </div>
  208. <div class="col-sm-6">
  209. <label for="retirementdate" class="form-label fw-bold">Retirement Date <span class="text-danger">*</span></label>
  210. <input type="date" id="retirementdate" class="form-control" readonly>
  211. </div>
  212. <div class="col-sm-6">
  213. <label for="classes" class="form-label fw-bold">Class <span class="text-danger">*</span></label>
  214. <input type="text" id="classes" class="form-control" readonly>
  215. </div>
  216. <div class="col-sm-6">
  217. <label for="typeretirement" class="form-label fw-bold">Type Of Retirement<span class="text-danger">*</span></label>
  218. <select id="typeretirement" class="form-select" style="width: 100%;height: 30px;" required>
  219. </select>
  220. </div>
  221. <div class="col-sm-6">
  222. <label for="datefile" class="form-label fw-bold">Date File Sent to Audit <span class="text-danger">*</span></label>
  223. <input type="text" id="datefile" class="form-control" readonly>
  224. </div>
  225. <div class="col-md-12">
  226. <label for="remarks" class="form-label fw-bold">Comments/Remarks <span class="text-danger">*</span></label>
  227. <textarea id="remarks" class="form-control" rows="2" placeholder="Enter your remarks here"></textarea>
  228. </div>
  229. </div>
  230. <div class="row mt-4">
  231. <div class="col-12 d-flex justify-content-center">
  232. <button id="auditsubmit" class="btn btn-primary mx-2">Mark as sent audit</button>
  233. <button type="button" class="btn btn-secondary" data-dismiss="modal" id="close">Close</button>
  234. </div>
  235. </div>
  236. </div>
  237. </div>
  238. </div>
  239. </div>
  240. <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
  241. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  242. <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
  243. <!-- Bootstrap 5 JS -->
  244. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  245. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  246. <script>
  247. // Initialize DataTable
  248. // Helper function to convert yyyy-MM-dd to dd-MM-yyyy for API calls
  249. function formatDateForAPI(dateStr) {
  250. const [year, month, day] = dateStr.split('-');
  251. return `${day}-${month}-${year}`; // Convert to dd-MM-yyyy
  252. }
  253. document.getElementById('resetButton').addEventListener('click', function () {
  254. event.preventDefault();
  255. window.location.href="/gcc/department/newentry/retirement";
  256. });
  257. document.addEventListener("DOMContentLoaded", function() {
  258. // Get today's date
  259. const today = new Date();
  260. // Format the date as DD-MM-YYYY for display
  261. const day = String(today.getDate()).padStart(2, '0');
  262. const month = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-based
  263. const year = today.getFullYear();
  264. // Combine into DD-MM-YYYY format for display
  265. const formattedDateDisplay = `${day}-${month}-${year}`;
  266. // Set the value of the input field to the current date (in DD-MM-YYYY format for display)
  267. document.getElementById("datefile").value = formattedDateDisplay;
  268. });
  269. function convertDateFormat(dateString) {
  270. if (!dateString) return '';
  271. let [day, month, year] = dateString.split('-');
  272. return `${year}-${month}-${day}`;
  273. }
  274. //Function to convert date to dd/mm/yyyy format
  275. $(document).ready(function () {
  276. // Initialize the DataTable
  277. const dataTable = $('#FollowupDatatable').DataTable({
  278. dom: 'Bftip',
  279. columnDefs: [
  280. { targets: 'no-sort', orderable: false }
  281. ],
  282. lengthMenu: [
  283. [50, 100, 200, 500, -1],
  284. ['50 rows', '100 rows', '200 rows', 'Show all']
  285. ],
  286. scrollY: '50vh',
  287. buttons: [
  288. { extend: 'pageLength', className: 'btn btn-warning' },
  289. { title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
  290. { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
  291. { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
  292. { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
  293. ],
  294. fixedHeader: true,
  295. autoWidth: true,
  296. responsive: true,
  297. searching: false, // Disable searching as it's custom
  298. paging: true,
  299. info: true,
  300. ordering: false,
  301. });
  302. // Update To Date's min attribute when From Date changes
  303. $('#fromDate').on('change', function () {
  304. const fromDate = $(this).val();
  305. $('#toDate').attr('min', fromDate); // Update min attribute for To Date
  306. // If To Date is earlier than the new From Date, adjust it
  307. const toDate = $('#toDate').val();
  308. if (new Date(toDate) < new Date(fromDate)) {
  309. $('#toDate').val(fromDate);
  310. }
  311. });
  312. // Update From Date's max attribute when To Date changes
  313. $('#toDate').on('change', function () {
  314. const toDate = $(this).val();
  315. $('#fromDate').attr('max', toDate); // Update max attribute for From Date
  316. // If From Date is later than the new To Date, adjust it
  317. const fromDate = $('#fromDate').val();
  318. if (new Date(fromDate) > new Date(toDate)) {
  319. $('#fromDate').val(toDate);
  320. }
  321. });
  322. getstart(dataTable);
  323. document.getElementById('searchButton').addEventListener('click', function () {
  324. event.preventDefault();
  325. getstart(dataTable);
  326. });
  327. function getstart(dataTable)
  328. {
  329. const fromDate=$('#fromDate').val();
  330. const toDate=$('#toDate').val();
  331. const deptId = $('#deptId').text().trim(); // Default department ID
  332. const file_category = $('#filecategory').text().trim();
  333. console.log("fromDate==",fromDate);
  334. console.log("toDate==",toDate);
  335. console.log("deptId", deptId);
  336. /* if (!fromDate && !toDate) {
  337. Swal.fire({
  338. icon: "info",
  339. title: "Info",
  340. text: "Select Both Date for Searching",
  341. confirmButtonText: "OK",
  342. });
  343. return;
  344. } */
  345. if (!deptId) {
  346. Swal.fire({
  347. icon: "warning",
  348. title: "Error",
  349. text: "Department ID is Missing",
  350. confirmButtonText: "OK",
  351. });
  352. return;
  353. }
  354. $('#pageLoader').show();
  355. // Call the API
  356. $.ajax({
  357. url: '/gcc/api/department/newentry/retirementdetails', // Correct API URL
  358. type: 'GET',
  359. data: { deptId: deptId,
  360. file_category:file_category,
  361. fromDate:fromDate,
  362. toDate:toDate
  363. },
  364. success: function (response) {
  365. $('#pageLoader').hide();
  366. console.log("response:", response.details);
  367. fromDate1 = response.fromDate; // Extract the fromDate
  368. toDate1 = response.toDate; // Extract the toDate
  369. // Set formatted date values
  370. $('#fromDate').val(fromDate1);
  371. $('#toDate').val(toDate1);
  372. if (response.status === "success") {
  373. // Clear existing data
  374. dataTable.clear();
  375. let table = $('#FollowupDatatable').DataTable({
  376. destroy: true,
  377. searching: true,
  378. autoWidth: true,
  379. responsive: true,
  380. paging: true,
  381. info: true,
  382. data: response.details.list,
  383. columns: [
  384. {
  385. data: null,
  386. render: (data, type, row, meta) => meta.row + 1,
  387. className: 'text-center'
  388. },
  389. { data: 'EMPLOYEE_CODE', defaultContent: '-', className: 'text-center' },
  390. { data: 'EMPLOYEE_NAME', defaultContent: '-', className: 'text-center' },
  391. { data: 'DATE_OF_BIRTH', defaultContent: '-', className: 'text-center' },
  392. { data: 'RETIREMENT_DATE', defaultContent: '-', className: 'text-center' },
  393. { data: 'DEPARTMENT', defaultContent: '-', className: 'text-center' },
  394. { data: 'DESIGNATION', defaultContent: '-', className: 'text-center' },
  395. {
  396. data: 'EMPLOYEE_CODE',
  397. render: function(data, type, row) {
  398. return `
  399. <td class="text-center">
  400. <button type="button" class="btn btn-info" data-employee-code="${data}">
  401. View
  402. </button>
  403. </td>`;
  404. },
  405. className: 'text-center'
  406. }
  407. ],
  408. dom: 'Bfrtip',
  409. buttons: [
  410. {
  411. extend: 'pageLength',
  412. className: 'btn btn-warning'
  413. },
  414. {
  415. title: 'Data export',
  416. extend: 'copyHtml5',
  417. text: 'Copy',
  418. className: 'btn btn-secondary',
  419. id: 'copyBtn'
  420. },
  421. {
  422. extend: 'excelHtml5',
  423. text: 'Excel',
  424. className: 'btn btn-secondary',
  425. id: 'excelBtn'
  426. },
  427. {
  428. extend: 'csvHtml5',
  429. text: 'CSV',
  430. className: 'btn btn-secondary',
  431. id: 'csvBtn'
  432. },
  433. {
  434. extend: 'pdfHtml5',
  435. text: 'PDF',
  436. className: 'btn btn-secondary',
  437. id: 'pdfBtn'
  438. }
  439. ],
  440. columnDefs: [
  441. { targets: 'no-sort', orderable: false }
  442. ],
  443. lengthMenu: [
  444. [50, 100, 200, 500, -1],
  445. ['50 rows', '100 rows', '200 rows', 'Show all']
  446. ],
  447. scrollY: '50vh',
  448. fixedColumns: {
  449. left: 1,
  450. right: 1
  451. }
  452. });
  453. }
  454. else if (response.status === "deptid") {
  455. // Display the error message for missing department ID
  456. dataTable.clear().draw();
  457. $('#FollowupDatatable tbody').html(`
  458. <tr>
  459. <td colspan="8" class="text-center text-danger">${response.message}</td>
  460. </tr>
  461. `);
  462. } else if (response.status === "nodata") {
  463. // Display the no data message
  464. dataTable.clear().draw();
  465. $('#FollowupDatatable tbody').html(`
  466. <tr>
  467. <td colspan="8" class="text-center text-danger">${response.message}</td>
  468. </tr>
  469. `);
  470. }
  471. else {
  472. $('#pageLoader').hide();
  473. dataTable.clear().draw();
  474. Swal.fire({
  475. icon: "info",
  476. title: "No Data",
  477. text: "No data available for the selected date range.",
  478. confirmButtonText: "OK",
  479. });
  480. }
  481. },
  482. error: function () {
  483. $('#pageLoader').hide();
  484. Swal.fire({
  485. icon: "error",
  486. title: "Error",
  487. text: "An error occurred while fetching data. Please try again.",
  488. confirmButtonText: "OK",
  489. });
  490. }
  491. });
  492. }
  493. });
  494. $(document).ready(function () {
  495. function loadRetirementTypes() {
  496. $.ajax({
  497. url: "/gcc/api/getRetrimentTypes",
  498. type: "GET",
  499. success: function (data) {
  500. var dropdown = $("#typeretirement");
  501. dropdown.empty();
  502. dropdown.append('<option value="" selected>-- Select Option --</option>');
  503. $.each(data, function (key, entry) {
  504. if (entry.retriment_type !== "Provisional") { // Exclude "Provisional"
  505. dropdown.append($('<option></option>').attr('value', entry.retriment_type).text(entry.retriment_type));
  506. }
  507. });
  508. },
  509. error: function () {
  510. console.log("Error loading dropdown data.");
  511. }
  512. });
  513. }
  514. // Call function on page load
  515. loadRetirementTypes();
  516. });
  517. // Fetch count on page load
  518. $(document).ready(function () {
  519. $(document).on('click', '.btn-info', function () {
  520. const empCode = $(this).data('employee-code'); // Get EMPLOYEE_CODE from button
  521. fetchEmployeeDetails(empCode); // Call the function to fetch employee details
  522. });
  523. // Initialize the modal with static backdrop and disabled keyboard closing
  524. $('#returnretrieddetailsModal').modal({
  525. backdrop: 'static',
  526. keyboard: false,
  527. show: false // Ensure it doesn't auto-show on page load
  528. });
  529. // Handle close button click
  530. $('#close').click(function () {
  531. $('#returnretrieddetailsModal').modal('hide');
  532. });
  533. $('.close').click(function () {
  534. $('#returnretrieddetailsModal').modal('hide');
  535. });
  536. });
  537. function fetchEmployeeDetails(empCode) {
  538. // Clear previous values in the modal fields
  539. $('#employeeno').val('');
  540. $('#employeename').val('');
  541. $('#department').val('');
  542. $('#designation').val('');
  543. $('#retirementdate').val('');
  544. $('#classes').val('');
  545. $('#typeretirement').val('').prop('selected', true); // Reset the dropdown to default
  546. //$('#datefile').val('');
  547. $('#remarks').val('');
  548. $.ajax({
  549. url: '/gcc/api/department/newentry/employeedetails', // API to fetch employee details
  550. type: 'GET',
  551. data: { empCode: empCode }, // Pass EMPLOYEE_CODE as a parameter
  552. success: function (response) {
  553. if (response.list && response.list.length > 0) {
  554. let employeeDetails = response.list[0];
  555. console.log("employeecode",response);
  556. // Populate modal fields
  557. $('#employeeno').val(employeeDetails.EMPLOYEE_CODE);
  558. $('#employeename').val(employeeDetails.EMPLOYEE_NAME);
  559. $('#department').val(employeeDetails.DEPARTMENT);
  560. $('#designation').val(employeeDetails.DESIGNATION);
  561. $('#classes').val(employeeDetails.GROUP_TYPE);
  562. $('#retirementdate').val(employeeDetails.RETIREMENT_DATE);
  563. // Update the modal title with the employee code
  564. $('#modalEmployeeCode').text(empCode);
  565. // Show the modal
  566. $('#returnretrieddetailsModal').modal('show');
  567. } else {
  568. Swal.fire({
  569. icon: 'info',
  570. title: 'No Data',
  571. text: 'No details found for the selected employee.',
  572. confirmButtonText: 'OK',
  573. });
  574. }
  575. },
  576. error: function () {
  577. Swal.fire({
  578. icon: 'error',
  579. title: 'Error',
  580. text: 'Failed to fetch employee details. Please try again.',
  581. confirmButtonText: 'OK',
  582. });
  583. },
  584. });
  585. }
  586. //$('#auditsubmit').one('click', saveEntryDetails);
  587. $('#auditsubmit').off('click').on('click', saveEntryDetails);
  588. /* document.getElementById('auditsubmit').addEventListener('click', function () {
  589. // Trigger the save function when the button is clicked
  590. saveEntryDetails();
  591. }); */
  592. function saveEntryDetails() {
  593. let entryDetails = {
  594. empNo: $('#employeeno').val(),
  595. empName: $('#employeename').val(),
  596. deptName: $('#department').val(),
  597. designation: $('#designation').val(),
  598. typeOfRetirement: $('#typeretirement').val(),
  599. retirementdate: $('#retirementdate').val(),
  600. retirementclass: $('#classes').val(),
  601. dateToAudit: convertDateFormat($('#datefile').val()?.trim()),
  602. remarks: $('#remarks').val(),
  603. deptId: $('#deptId').text().trim(),
  604. filemovedby: $('#userId').text().trim(),
  605. filecategory: $('#filecategory').text().trim()
  606. };
  607. console.log("entryDetails:", entryDetails);
  608. if(!entryDetails.typeOfRetirement){
  609. Swal.fire({
  610. icon: 'warning',
  611. title: 'Validation Error!',
  612. text: 'Type of Retirement.',
  613. confirmButtonText: 'OK'
  614. });
  615. return;
  616. }
  617. if(!entryDetails.remarks){
  618. Swal.fire({
  619. icon: 'warning',
  620. title: 'Validation Error!',
  621. text: 'Remarks.',
  622. confirmButtonText: 'OK'
  623. });
  624. return;
  625. }
  626. // Disable the button to prevent multiple submissions
  627. $('#auditsubmit').prop('disabled', true).text('Processing...');
  628. $.ajax({
  629. url: '/gcc/api/department/newentry/saveEmployeeDetails',
  630. type: 'POST',
  631. contentType: 'application/json',
  632. data: JSON.stringify(entryDetails),
  633. success: function (response) {
  634. $('#auditsubmit').prop('disabled', false).text('Mark as sent audit');
  635. Swal.fire({
  636. icon: 'success',
  637. title: 'Success',
  638. text: response,
  639. allowOutsideClick: false,
  640. allowEscapeKey: false,
  641. allowEnterKey: false,
  642. confirmButtonText: 'OK'
  643. }).then((result) => {
  644. if (result.isConfirmed) {
  645. $('#auditsubmit').prop('disabled', false).text('Mark as sent audit');
  646. window.location.href = "/gcc/department/newentry/retirement";
  647. console.log("Continue clicked");
  648. }
  649. });
  650. },
  651. error: function (xhr, status, error) {
  652. $('#auditsubmit').prop('disabled', false).text('Mark as sent audit');
  653. Swal.fire({
  654. icon: 'error',
  655. title: 'Error',
  656. text: 'Failed to save details. Please try again.',
  657. confirmButtonText: 'OK'
  658. });
  659. console.error('Error:', xhr.responseText);
  660. }
  661. });
  662. }
  663. </script>
  664. </body>
  665. </html>