GCC_Officer_Portal/target/classes/templates/modules/circular/inbox.html

<!DOCTYPE html>
<html lang="en" dir="">
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}"></head>
    <body>
        <!--[if lt IE 8]>
            <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>
        <![endif]-->

        <div class="wrapper">
			<!-- header top menu Start -->
			 <header th:replace="~{fragments/modules/base/header :: header}"></header>
			<!-- header top menu end -->

            <div class="page-wrap">
				<!--=============== Left Menu side Start ================-->
				<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
				<!--=============== Left side End ================-->
                <div class="main-content">
                    <div class="container-fluid">
                        <div class="page-header">
                            <div class="row align-items-end">
                                <div class="col-lg-6">
                                    <div class="page-header-title">
                                        <i class="far fa-list-alt bg-blue"></i>
                                        <div class="d-inline">
                                            <h5>Circular List</h5>
                                            <span>Circular / Minutes</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                                        <ol class="breadcrumb">
                                            <li class="breadcrumb-item">
                                                <a href="/index"><i class="ik ik-home"></i></a>
                                            </li>
                                            <li class="breadcrumb-item" aria-current="page">Circular & Minutes</li>
                                            <li class="breadcrumb-item active" aria-current="page">Circular List</li>
                                        </ol>
                                    </nav>
                                </div>
                            </div>
                        </div>
                        
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    
                                    <div class="card-block">
										<div id="tableLoading"></div>
                                        <div>
											<table id="circularDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
                                                <thead class="thead-dark">
	                                                <tr class="table-bordered">
						                                <th class="text-center no-sort" width="2%">S.No</th>
														<th class="text-center" width="10%">Category</th>
						 								<th class="text-center" width="10%">Type</th>
						 								<th class="text-center" width="10%">Department</th>
						 								<th class="text-center" width="10%">Date</th>
														<th class="text-center" width="40%">Subject</th>
						                                <th class="text-center no-sort no-exportable no-print" width="5%"><i class="ik ik-more-horizontal"></i></th>
						                             </tr>
                                                </thead>
                                                <tbody>
	                                                	
                                                </tbody>
                                                <!-- 
                                                <tfoot class="thead-dark">
	                                                <tr>
						                                <th class="text-center no-sort">S.No</th>
														<th class="text-center">Category</th>
						 								<th class="text-center">Type</th>
						 								<th class="text-center">Department</th>
						 								<th class="text-center">Date</th>
														<th class="text-center">Subject</th>
						                                <th class="text-center no-sort no-exportable no-print"><i class="ik ik-more-horizontal"></i></th>
													</tr>
                                                </tfoot>
                                                 --> 
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>

                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
            </div>
        </div>
		
	    <div th:replace="~{fragments/modules/circular/modal-box :: div}"></div>   
        
        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
       
        <script th:replace="~{fragments/modules/base/script :: script}"></script>
        <script th:replace="~{fragments/modules/circular/script :: script}"></script>
        <script th:inline="javascript">
       		var createdBy = /*[[${LoginUserId}]]*/'';
       		var uploadDirectory = /*[[${uploadDirectory}]]*/'';
       		
        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
        	
        	// Loading Div id
        	const loading = $("#tableLoading");
	     	
        	// DataTables buttons configuration
	        var buttons = [
	        	{
					extend: 'pageLength',
					className: 'btn btn-warning'
				},
	            {
					title: 'Data export',
	                extend: 'copyHtml5',
	                text: 'Copy',
	                className: 'btn btn-secondary',
	                id: 'copyBtn'
	            },
	            {
	                extend: 'excelHtml5',
	                text: 'Excel',
	                className: 'btn btn-secondary',
	                id: 'excelBtn',
	                title: 'Circular List'
	            },
	            {
	                extend: 'csvHtml5',
	                text: 'CSV',
	                className: 'btn btn-secondary',
	                id: 'csvBtn',
	                title: 'Circular List'
	            },
	            {
	                extend: 'pdfHtml5',
	                text: 'PDF',
	                className: 'btn btn-secondary',
	                id: 'pdfBtn',
	                title: 'Circular List'
	            },
	            {
	                extend: 'print',
	                text: 'Print',
	                className: 'btn btn-secondary',
	                id: 'printBtn',
	                title: 'Circular List',
	                exportOptions: {
	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
	                }
	            },
	            {
					extend: 'colvis',
					className: 'btn btn-warning'
				},
	        ];
			
        	
	        function call_loading(){
				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
			}
			
			function remove_loading(){
				loading.html("");
			}
			
	        
	        /* Get Complaints Data */
	        function get_circular_data(){
	        	var apiUrl = '/gcc/api/circular/getCircularList';
	    	    // Return a Promise
	    	    return new Promise(function(resolve, reject) {
	    	        $.ajax({
	    	            url: apiUrl,
	    	            type: 'GET',
	    	            dataType: 'json',
	    	            success: function(jsonResponse) {
	    	                // Resolve the Promise with the department list
	    	                resolve(jsonResponse);
	    	            },
	    	            error: function(xhr, status, error) {
	    	                // Reject the Promise with the error message
	    	                reject(error);
	    	            }
	    	        });
	    	    });
	        }
	        
	        /* Get Complaints List */
	        function get_circular_list(){
	        	get_circular_data().then(function(circularList) {
	    		    // Handle the complaint list
	    		    generate_table(circularList);
	    		    
	    		}).catch(function(error) {
	    		    // Handle errors
			        if (error && error.message) {
			            console.error('Error fetching circular list:', error.message);
			        } else {
			            console.error('An error occurred while fetching circular list:', error);
			        }
	    		});
			}
	        
	        /* Call DataTable function */
	        function generate_table(data){
	        	
	            var table = $('#circularDatatable').DataTable( {
				        dom: 'Bftip',
				        columnDefs: [
						  { targets: 'no-sort', "orderable": false },
						  { targets: 'no-exportable', "exportable": false },
						  { targets: 5, orderSequence: ['desc'] }
						],
				        lengthMenu: [
				            [ 50, 100, 200, 500, -1 ],
				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
				        ],
				        /*scrollY: '50vh',*/
				        fixedColumns: {
					        left: 0,
					        right: 0
					    },
				        buttons: [buttons],
				        responsive: true,
				        searching: false,
				        select: false,
				        processing: false,
				    } );
	            
	            // Clearn Table data
	            table.clear().draw();
	            
	         	// Add rows to DataTable
	         	//var rowNum = data.length;
	         	var rowNum = 1;
	            $.each(data, function(index, row) {

	            	var circular_category=row["category"];
	            	circular_category=circular_category.charAt(0).toUpperCase() + circular_category.slice(1);
					
					var file_text = `No File`;
					var filetype = '';
					if(row['file_exits']=='true'){
						file_text = row['file_name'];
						filetype = row['file_type'];
					}
					
					var action =`<center><a href="#" onclick="return viewFile('${file_text}','${filetype}');" class="text-blue" data-animation="true" data-toggle="tooltip" data-placement="top" title="View Circular Details" data-original-title="View Circular Details"><i class="ik ik-eye f-16 text-blue"></i></a></center>`;
			                    
	                table.row.add([
	                	rowNum++,
	                	circular_category,
	                    row['circular_type_name'],
	                    row['department_name'],
	                    convertdate_2(row['date']),
	                    row['subject'],
	                    action
	                ]).draw(false);
	            });
	            
	            // Enable tooltips for all elements with data-toggle="tooltip"
	            $('[data-toggle="tooltip"]').tooltip();
	            remove_loading(); // remove Loading 
			}
			
			$(document).ready(function() {
				call_loading();
				get_circular_list();
			});
			
			function viewFile(filename,filetype){
	        	$("#viewFileBox").modal({
				    backdrop: 'static',
				    keyboard: false
				}); // Show Modal Box
				
				var filepath= '/gcc/files/circular/'+filename;
				var fileHTML = '';
				
	        	if(filetype=='application/pdf'){
	        		fileHTML = `<iframe src="${filepath}" type="application/pdf" width="100%" height="600px"></iframe>`;
					
				}
				else{
					fileHTML =nodata;
				}
				
	        	console.error(fileHTML);
	        	
	        	$('#viewFileBoxBody').html(fileHTML); // Inject content into modal body
				
				return false;
			}
		</script>
    </body>
</html>