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.

681 lines
21 KiB

3 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. <body>
  6. <!--[if lt IE 8]>
  7. <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>
  8. <![endif]-->
  9. <div class="wrapper">
  10. <!-- header top menu Start -->
  11. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  12. <!-- header top menu end -->
  13. <div class="page-wrap">
  14. <!--=============== Left Menu side Start ================-->
  15. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  16. <!--=============== Left side End ================-->
  17. <div class="main-content">
  18. <div class="container-fluid">
  19. <div class="page-header">
  20. <div class="row align-items-end">
  21. <div class="col-lg-8">
  22. <div class="page-header-title">
  23. <i class="fas fa-envelope bg-blue"></i>
  24. <div class="d-inline">
  25. <h5>Circular Inbox</h5>
  26. <span>Circular Inbox Module</span>
  27. </div>
  28. </div>
  29. </div>
  30. <div class="col-lg-4">
  31. <nav class="breadcrumb-container" aria-label="breadcrumb">
  32. <ol class="breadcrumb">
  33. <li class="breadcrumb-item"><a href="/index"><i
  34. class="ik ik-home"></i></a></li>
  35. <li class="breadcrumb-item">Circular</li>
  36. <li class="breadcrumb-item">Inbox</li>
  37. <li class="breadcrumb-item active" aria-current="page">Circular
  38. Inbox</li>
  39. </ol>
  40. </nav>
  41. </div>
  42. </div>
  43. </div>
  44. <hr>
  45. <div class="row">
  46. <div class="col-md-12">
  47. <div class="card">
  48. <div class="card-block">
  49. <div class="row">
  50. <!-- <div class="col-md-2">
  51. <div class="form-group">
  52. <label for="usertype">From Department :</label> <select
  53. class="form-control" name="usertype" id="usertype" required>
  54. <option>1</option>
  55. <option>2</option>
  56. </select>
  57. </div>
  58. </div> -->
  59. <div class="col-md-2">
  60. <div class="form-group">
  61. <label for="usertype">Type :</label> <select
  62. class="form-control" name="usertype" id="usertype" required>
  63. <option>Circular</option>
  64. <option>Minutes</option>
  65. </select>
  66. </div>
  67. </div>
  68. <div class="col-md-2">
  69. <div class="form-group">
  70. <label for="departmentDropdown">Select Department:</label>
  71. <select class="form-control" id="departmentDropdown">
  72. <option value="" selected disabled>Choose Department</option>
  73. </select>
  74. </div>
  75. </div>
  76. <div class="col-md-2">
  77. <label class="" for="lastName">From Date :</label> <input
  78. type="date" class="form-control" id="date" name="date"
  79. required>
  80. </div>
  81. <div class="col-md-2">
  82. <label class="" for="lastName">To Date :</label> <input
  83. type="date" class="form-control" id="date" name="date"
  84. required>
  85. </div>
  86. <div class="col-md-2"></div>
  87. <div class="col-md-2">
  88. <label class="" for="search">search </label>
  89. <button type="button" class="btn btn-primary btn-block">Submit</button>
  90. </div>
  91. </div>
  92. </div>
  93. <div>
  94. <table id="assetDatatable"
  95. class="table table-striped table-bordered table-hover dataTable"
  96. role="grid" width="99.5%">
  97. <thead class="thead-dark">
  98. <tr role="row">
  99. <th class="text-center np-sort" width="1%">S.No</th>
  100. <th class="text-center" width="20%">File Uploaded Date</th>
  101. <th class="text-center" width="20%">File Date</th>
  102. <th class="text-center" width="20%">From Department</th>
  103. <th class="text-center" width="20%">Subject</th>
  104. <th class="text-center" width="20%">View</th>
  105. </tr>
  106. </theadclass="thead-dark">
  107. <tbody>
  108. <tr th:each="category, i : ${assetcategorylist}"
  109. class="assetcategorylist">
  110. <td th:text="${i.count}">0</td>
  111. <td th:text="${category.cId}"></td>
  112. <td th:text="${category.catName}"></td>
  113. <td th:if="${category.isActive}" class="text-center"><label
  114. class="badge badge-success mb-0">Active</label></td>
  115. <td th:unless="${category.isActive}" class="text-center"><label
  116. class="badge badge-danger mb-0">InActive</label></td>
  117. <td class="text-center"><a th:href="@{#}"
  118. th:onclick="return callEdit([[${category.cId}]])"
  119. data-animation="true" data-toggle="tooltip"
  120. data-placement="top" title="Edit"
  121. data-original-title="Edit"><i
  122. class="ik ik-edit f-16 mr-15 text-green"></i></a> <a
  123. th:href="@{#}"
  124. th:onclick="return callDelete([[${category.catName}]], [[${category.cId}]] );"
  125. data-animation="true" data-toggle="tooltip"
  126. data-placement="top" title="Delete"
  127. data-original-title="Delete"><i
  128. class="ik ik-trash-2 f-16 text-red"></i></a></td>
  129. </tr>
  130. </tbody>
  131. <tfoot class="thead-dark">
  132. <tr>
  133. <th>File Uploaded Date</th>
  134. <th>File Date</th>
  135. <th>From Department</th>
  136. <th>Subject</th>
  137. <th>View</th>
  138. </tr>
  139. </tfoot>
  140. </table>
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147. </div>
  148. <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
  149. </div>
  150. </div>
  151. <div class="modal fade" id="addForm" tabindex="-1" role="dialog"
  152. aria-hidden="true">
  153. <div class="modal-dialog modal-dialog-centered" role="document">
  154. <div class="modal-content">
  155. <form name="addCategoryForm" id="addCategoryForm"
  156. onsubmit="return saveCategory();">
  157. <div class="modal-header">
  158. <h5 class="modal-title" id="exampleModalCenterLabel">Master
  159. Category Form</h5>
  160. <button type="button" class="close" data-dismiss="modal"
  161. aria-label="Close">
  162. <span aria-hidden="true">&times;</span>
  163. </button>
  164. </div>
  165. <div class="modal-body">
  166. <div id="addFormError" class="text-danger text-center"></div>
  167. <div class="form-group row">
  168. <label for="catName" class="col-sm-12 col-form-label">Asset
  169. Category Name</label>
  170. <div class="col-sm-12">
  171. <input type="text" class="form-control" name="catName"
  172. id="catName" placeholder="Category Name" required>
  173. </div>
  174. </div>
  175. <div class="form-group row">
  176. <label for="isActive" class="col-sm-12 col-form-label">IsActive</label>
  177. <div class="col-sm-12">
  178. <select class="form-control" id="isActive" name="isActive">
  179. <option value=1>Yes</option>
  180. <option value=0>No</option>
  181. </select>
  182. </div>
  183. </div>
  184. </div>
  185. <div class="modal-footer">
  186. <button type="reset" class="btn btn-secondary btn-sm"
  187. data-dismiss="modal" onclick="return closeModel();">
  188. <i class="ik ik-x-square"></i>Close
  189. </button>
  190. <button type="submit" class="btn btn-success btn-sm" id="savebtn">
  191. <i class="ik ik-save"></i>Save
  192. </button>
  193. </div>
  194. </form>
  195. </div>
  196. </div>
  197. </div>
  198. <div class="modal fade" id="editForm" data-backdrop="static"
  199. tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel"
  200. aria-hidden="true">
  201. <div class="modal-dialog modal-dialog-centered" role="document">
  202. <div class="modal-content">
  203. <form name="editCategoryForm" id="editCategoryForm"
  204. onsubmit="return updateCategory();">
  205. <div class="modal-header">
  206. <h5 class="modal-title" id="exampleModalCenterLabel">Master
  207. Category Form</h5>
  208. <button type="button" class="close" data-dismiss="modal"
  209. aria-label="Close">
  210. <span aria-hidden="true">&times;</span>
  211. </button>
  212. </div>
  213. <div class="modal-body">
  214. <div id="editFormError" class="text-danger text-center"></div>
  215. <div class="form-group row">
  216. <label for="catName" class="col-sm-12 col-form-label">Asset
  217. Category Name</label>
  218. <div class="col-sm-12">
  219. <input type="text" class="form-control" name="catName"
  220. id="editCatName" placeholder="Category Name" required>
  221. </div>
  222. </div>
  223. <div class="form-group row">
  224. <label for="isActive" class="col-sm-12 col-form-label">IsActive</label>
  225. <div class="col-sm-12">
  226. <select class="form-control" id="editIsActive" name="isActive">
  227. <option value=1>Yes</option>
  228. <option value=0>No</option>
  229. </select>
  230. </div>
  231. </div>
  232. </div>
  233. <div class="modal-footer">
  234. <input type="hidden" name="cId" id="cId" value="0">
  235. <button type="reset" class="btn btn-secondary btn-sm"
  236. data-dismiss="modal" onclick="return closeModel();">
  237. <i class="ik ik-x-square"></i>Close
  238. </button>
  239. <button type="submit" class="btn btn-success btn-sm" id="editbtn">
  240. <i class="ik ik-save"></i>Update
  241. </button>
  242. </div>
  243. </form>
  244. </div>
  245. </div>
  246. </div>
  247. <!--end modal-->
  248. <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
  249. ////////////////////////////////////////////////
  250. <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  251. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
  252. integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8sh+Wy1W8+IXckPXXg2gDS3J1VlDakUEmiFxFkr"
  253. crossorigin="anonymous"></script>
  254. ////////////////////////////////////////////////////////////////
  255. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  256. <script type="text/javascript">
  257. var qrAssetFeedbackApiUrl = "[[${qrAssetFeedbackApiUrl}]]";
  258. $(document).ready(function() {
  259. // DataTables buttons configuration
  260. var buttons = [
  261. {
  262. extend: 'pageLength',
  263. className: 'btn btn-warning'
  264. },
  265. {
  266. title: 'Data export',
  267. extend: 'copyHtml5',
  268. text: 'Copy',
  269. className: 'btn btn-secondary',
  270. id: 'copyBtn'
  271. },
  272. {
  273. extend: 'excelHtml5',
  274. text: 'Excel',
  275. className: 'btn btn-secondary',
  276. id: 'excelBtn'
  277. },
  278. {
  279. extend: 'csvHtml5',
  280. text: 'CSV',
  281. className: 'btn btn-secondary',
  282. id: 'csvBtn'
  283. },
  284. {
  285. extend: 'pdfHtml5',
  286. text: 'PDF',
  287. className: 'btn btn-secondary',
  288. id: 'pdfBtn'
  289. },
  290. // Additional button
  291. /* {
  292. text: '<i class="far fa-plus-square"></i> Add New Asset Category',
  293. className: 'btn btn-warning',
  294. action: function () {
  295. callAdd();
  296. }
  297. } */
  298. ];
  299. $('#assetDatatable').DataTable( {
  300. dom: 'Bftip',
  301. columnDefs: [
  302. { targets: 'no-sort', orderable: false }
  303. ],
  304. lengthMenu: [
  305. [ 50, 100, 200, 500, -1 ],
  306. [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
  307. ],
  308. scrollY: '50vh',
  309. fixedColumns: {
  310. left: 1,
  311. right: 1
  312. },
  313. buttons: [buttons],
  314. responsive: true,
  315. searching: false,
  316. select: false,
  317. processing: false,
  318. } );
  319. } );
  320. function callAdd(){
  321. formReset();
  322. $('#addForm').modal({
  323. backdrop: 'static',
  324. keyboard: false
  325. })
  326. $('#addForm').modal('show');
  327. }
  328. function callEdit(id){
  329. // Form reste
  330. formReset();
  331. //Fetch data by id
  332. getEditdata(id);
  333. $('#editForm').modal({
  334. backdrop: 'static',
  335. keyboard: false
  336. })
  337. $('#editForm').modal('show');
  338. return false;
  339. }
  340. function callDelete(name,id){
  341. Swal.fire({
  342. title: 'Are you sure you want to delete the category?`<br>'+name+'`',
  343. text: "You won't be able to revert this!",
  344. icon: 'warning',
  345. showCancelButton: true,
  346. confirmButtonColor: '#3085d6',
  347. cancelButtonColor: '#d33',
  348. confirmButtonText: 'Yes, delete it!',
  349. }).then(function(result) {
  350. if (result.isConfirmed) {
  351. $.ajax({
  352. type: "GET",
  353. dataType: 'json',
  354. url: "/api/qrfeedback/category/"+id+"/delete",
  355. //data: "id=" + id + "&name=" + name,
  356. success: function(data){
  357. Swal.fire(
  358. 'Deleted!',
  359. 'Category `'+name+'` has been deleted.',
  360. 'success'
  361. ).then(() => {
  362. location.reload();
  363. });
  364. }
  365. })
  366. }
  367. })
  368. return false;
  369. }
  370. function saveCategory(){
  371. // Disable the button to prevent multiple clicks
  372. $("#savebtn").prop("disabled", true);
  373. // Show the loading icon on the button
  374. $("#savebtn").html('<i class="fas fa-spinner fa-spin"></i>Save');
  375. // Get form data
  376. var formData = {
  377. catName: $('#catName').val(),
  378. isActive: $('#isActive').val()
  379. };
  380. if(formData.catName!=''){
  381. //alert(qrAssetFeedbackApiUrl);
  382. $.ajax({
  383. type: "POST",
  384. dataType: 'json',
  385. url: "/api/qrfeedback/category/checkbyname",
  386. //contentType: 'application/json',
  387. data: formData,
  388. success: function(data){
  389. if(data==0){
  390. $('#addFormError').html("");
  391. callSaveCategoryAPI();
  392. }
  393. else{
  394. $('#addFormError').html("<i class='ik ik-alert-triangle'></i> Asset Category Name `"+formData.catName+"` already exists!.");
  395. $("#savebtn").prop("disabled", false);
  396. $("#savebtn").html('<i class="ik ik-save"></i>Save');
  397. }
  398. },
  399. error: function(xhr, status, error) {
  400. console.error('Form submission error:', error);
  401. $("#savebtn").prop("disabled", false);
  402. $("#savebtn").html('<i class="ik ik-save"></i>Save');
  403. // Handle errors here
  404. }
  405. })
  406. }
  407. return false;
  408. }
  409. function callSaveCategoryAPI(){
  410. // Get form data
  411. var formData = {
  412. catName: $('#catName').val(),
  413. isActive: $('#isActive').val()
  414. };
  415. if (formData.catName.trim() !== '') {
  416. //alert(qrAssetFeedbackApiUrl);
  417. $.ajax({
  418. type: "POST",
  419. dataType: 'json',
  420. url: "/api/qrfeedback/saveCategory",
  421. //contentType: 'application/json',
  422. data: formData,
  423. success: function(data){
  424. $('#addFormError').html("");
  425. Swal.fire(
  426. 'Add Category!',
  427. 'Category `'+formData.catName+'` added successfully.',
  428. 'success'
  429. ).then(() => {
  430. formReset();
  431. $('#addForm').modal('hide');
  432. $("#savebtn").prop("disabled", false);
  433. $("#savebtn").html('<i class="ik ik-save"></i>Save');
  434. location.reload();
  435. });
  436. },
  437. error: function(xhr, status, error) {
  438. console.error('Form submission error:', error);
  439. $("#savebtn").prop("disabled", false);
  440. $("#savebtn").html('<i class="ik ik-save"></i>Save');
  441. // Handle errors here
  442. }
  443. })
  444. }
  445. return false;
  446. }
  447. function getEditdata(id){
  448. $.ajax({
  449. type: "POST",
  450. dataType: 'json',
  451. url: "/api/qrfeedback/category/"+id,
  452. //data: formData,
  453. success: function(data){
  454. //console.log(data);
  455. $("#cId").val(data[0]["cId"]);
  456. $("#editCatName").val(data[0]["catName"]);
  457. if(data[0]["isActive"]==true){
  458. $("#editIsActive").val(1); // True (Yes)
  459. }
  460. else{
  461. $("#editIsActive").val(0); // False (No)
  462. }
  463. },
  464. error: function(xhr, status, error) {
  465. console.error('Get Data(category) error:', error);
  466. $("#editbtn").prop("disabled", false);
  467. $("#editbtn").html('<i class="ik ik-save"></i>Update');
  468. // Handle errors here
  469. }
  470. })
  471. }
  472. function updateCategory(){
  473. // Disable the button to prevent multiple clicks
  474. $("#editbtn").prop("disabled", true);
  475. // Show the loading icon on the button
  476. $("#editbtn").html('<i class="fas fa-spinner fa-spin"></i>Update');
  477. // Get form data
  478. var formData = {
  479. cId: $('#cId').val(),
  480. catName: $('#editCatName').val(),
  481. isActive: $('#editIsActive').val()
  482. };
  483. if (formData.catName.trim() !== '') {
  484. //alert(qrAssetFeedbackApiUrl);
  485. $.ajax({
  486. type: "POST",
  487. dataType: 'json',
  488. url: "/api/qrfeedback/category/edit/checkbyname",
  489. //contentType: 'application/json',
  490. data: formData,
  491. success: function(data){
  492. if(data==0){
  493. $('#editFormError').html("");
  494. callUpadteCategoryAPI();
  495. }
  496. else{
  497. $('#editFormError').html("<i class='ik ik-alert-triangle'></i> Asset Category Name `"+formData.catName+"` already exists!.");
  498. $("#editbtn").prop("disabled", false);
  499. $("#editbtn").html('<i class="ik ik-save"></i>Update');
  500. }
  501. },
  502. error: function(xhr, status, error) {
  503. console.error('Form submission error:', error);
  504. $("#editbtn").prop("disabled", false);
  505. $("#editbtn").html('<i class="ik ik-save"></i>Update');
  506. // Handle errors here
  507. }
  508. })
  509. }
  510. return false;
  511. }
  512. function callUpadteCategoryAPI(){
  513. // Get form data
  514. var formData = {
  515. cId: $('#cId').val(),
  516. catName: $('#editCatName').val(),
  517. isActive: $('#editIsActive').val()
  518. };
  519. if (formData.catName.trim() !== '') {
  520. //alert(qrAssetFeedbackApiUrl);
  521. $.ajax({
  522. type: "POST",
  523. dataType: 'json',
  524. url: "/api/qrfeedback/updateCategory",
  525. //contentType: 'application/json',
  526. data: formData,
  527. success: function(data){
  528. $('#editFormError').html("");
  529. Swal.fire(
  530. 'Update Category!',
  531. 'Category `'+formData.catName+'` updated successfully.',
  532. 'success'
  533. ).then(() => {
  534. formReset();
  535. $('#editForm').modal('hide');
  536. $("#editbtn").prop("disabled", false);
  537. $("#editbtn").html('<i class="ik ik-save"></i>Update');
  538. location.reload();
  539. });
  540. },
  541. error: function(xhr, status, error) {
  542. console.error('Update form submission error:', error);
  543. $("#editbtn").prop("disabled", false);
  544. $("#editbtn").html('<i class="ik ik-save"></i>Update');
  545. // Handle errors here
  546. }
  547. })
  548. }
  549. return false;
  550. }
  551. function closeModel(){
  552. formReset();
  553. $('#addForm').modal('hide');
  554. $('#editForm').modal('hide');
  555. }
  556. function formReset(){
  557. // For add form
  558. document.getElementById('addCategoryForm').reset();
  559. $('#addFormError').html("");
  560. $("#savebtn").prop("disabled", false);
  561. $("#savebtn").html('<i class="ik ik-save"></i>Save');
  562. // For edit form
  563. document.getElementById('editCategoryForm').reset();
  564. $('#editFormError').html("");
  565. $("#editbtn").prop("disabled", false);
  566. $("#editbtn").html('<i class="ik ik-save"></i>Update');
  567. }
  568. ///////////////////////////////////////////////////////////
  569. /* $(document).ready(function() {
  570. // API endpoint (replace with your actual API URL)
  571. var apiUrl = 'https://api.example.com/options';
  572. // Get data from the API
  573. $.ajax({
  574. url: apiUrl,
  575. method: 'GET',
  576. dataType: 'json',
  577. success: function(data) {
  578. // Update the dropdown options
  579. updateDropdownOptions(data);
  580. },
  581. error: function() {
  582. // Handle error, e.g., show an error message or fallback options
  583. $('#dynamicDropdown').html('<option value="">Error loading options</option>');
  584. }
  585. }
  586. );
  587. function updateDropdownOptions(options) {
  588. var dropdown = $('#dynamicDropdown');
  589. // Clear previous options
  590. dropdown.empty();
  591. // Add default option
  592. dropdown.append('<option value="">Select</option>');
  593. // Add options from the API response
  594. options.forEach(function(option) {
  595. dropdown.append('<option value="' + option.value + '">' + option.label + '</option>');
  596. }
  597. );
  598. }
  599. }
  600. ); */
  601. </script>
  602. <script th:inline="javascript">
  603. $(document).ready(function () {
  604. $.ajax({
  605. url: '/api/Circular/getDepartment', // Change this URL to your endpoint
  606. type: 'GET',
  607. success: function (data) {
  608. var dropdown = $('#departmentDropdown');
  609. $.each(data, function (index, department) {
  610. dropdown.append($('<option></option>').attr('value', department.dept_ID).text(department.dept_DESC));
  611. });
  612. },
  613. error: function () {
  614. alert('Error loading departments.');
  615. }
  616. });
  617. });
  618. </script>
  619. </body>
  620. </html>