adjustment_file_management_system/src/main/resources/static/js/view-oc-file-script.js

$(document).ready(function () {
	// Initialize DataTable
	var table = $('#oc-file-det-tbl').DataTable({
		paging: true,
		searching: true,
		ordering: true,
		lengthChange: true,
		pageLength: 10,
		language: {
			emptyTable: "No data available",
			lengthMenu: "Display _MENU_ records per page",
			info: "Showing _START_ to _END_ of _TOTAL_ entries",
			infoEmpty: "No records to show",
			infoFiltered: "(filtered from _MAX_ total records)"
		},
		columnDefs: [
			{
				orderable: false,
				targets: [0, 5] // S.No and OC File columns
			}
		],
		buttons: [
			{
				extend: 'excelHtml5',
				title: "OC File Details",
				filename: "OC File Details",
				exportOptions: {
					columns: ':visible:not(:eq(5))', // exclude OC File column
					format: {
						body: function (data, row, column, node) {
							if (column === 0) {
								return row + 1;
							}
							return $('<div>').html(data).text().trim();
						}
					}
				}
			},
			'pdfHtml5'
		]
	});

	// --- SEQUENTIAL S.NO FIX ---
	table.on('order.dt search.dt draw.dt', function () {
		var pageInfo = table.page.info();
		table.column(0, { page: 'current' }).nodes().each(function (cell, i) {
			cell.innerHTML = pageInfo.start + i + 1;
		});
	}).draw();

	// Move DataTable controls to custom containers
	$('#custom-pagination').html($('.dataTables_paginate'));
	$('#custom-info').html($('.dataTables_info'));
	$('#custom-length').html($('.dataTables_length'));
	$('.dataTables_filter').hide(); // hide default search

	// Custom search / filtering on the datatable
	$('#export-excel').on('click', function () {
		table.button('.buttons-excel').trigger();
	});

	$('#export-pdf').on('click', function () {
		var originalLength = table.page.len();
		table.one('draw', function () {
			var tableClone = $('#oc-file-det-tbl').clone();
			tableClone.removeClass('dataTable');
			tableClone.find('thead, tbody, tfoot').removeAttr('style');

			// Remove "OC File" column (6th col = index 5)
			tableClone.find('tr').each(function () {
				$(this).find('th:eq(5), td:eq(5)').remove();
			});

			var pdfContainer = $('#pdf-print-container');
			if (!pdfContainer.length) {
				$('body').append('<div id="pdf-print-container" style="display:none;"></div>');
				pdfContainer = $('#pdf-print-container');
			}
			pdfContainer.html('<h2 style="text-align:center;">OC File Details</h2>');
			pdfContainer.append(tableClone).css({ display: 'block', padding: '20px' });

			tableClone.css({ width: '100%', borderCollapse: 'collapse' });
			tableClone.find('th, td').css({
				border: '1px solid #ccc',
				padding: '5px',
				fontSize: '10px',
				textAlign: 'left',
				verticalAlign: 'top'
			});
			tableClone.find('tr').css({ pageBreakInside: 'avoid', breakInside: 'avoid', webkitBreakInside: 'avoid' });

			html2pdf().set({
				margin: 0.5,
				filename: 'OC File Details.pdf',
				image: { type: 'jpeg', quality: 0.98 },
				html2canvas: { scale: 2, useCORS: true },
				jsPDF: { unit: 'in', format: 'a3', orientation: 'landscape' }
			}).from(pdfContainer[0]).save().then(function () {
				table.page.len(originalLength).draw();
				pdfContainer.hide();
			});
		});
		table.page.len(-1).draw(); // show all rows for PDF
	});

	function populateFilters() {
		var numSet = {}, vendSet = {};

		table.rows().every(function () {
			var data = this.data();
			var fileNum = data[1] ? $('<div>').html(data[1]).text().trim() : '';
			var vendName = data[2] ? $('<div>').html(data[2]).text().trim() : '';

			if (fileNum) numSet[fileNum] = true;
			if (vendName) vendSet[vendName] = true;
		});

		Object.keys(numSet).sort().forEach(val => $('#file-num-list').append(`<option value="${val}">`));
		Object.keys(vendSet).sort().forEach(val => $('#vend-name-list').append(`<option value="${val}">`));
	}
	populateFilters();

	function applyFilters() {
		var fileNum = $('#filter-file-num').val();
		var vendName = $('#filter-vend-name').val();

		table.columns().search(''); // reset all

		if (fileNum) table.column(1).search('^' + $.fn.dataTable.util.escapeRegex(fileNum) + '$', true, false);
		if (vendName) table.column(2).search('^' + $.fn.dataTable.util.escapeRegex(vendName) + '$', true, false);

		table.draw();
	}

	// Event bindings for filters
	$('#filter-file-num').on('input', applyFilters);
	$('#filter-vend-name').on('input', applyFilters);
});

// Function to view Supporting Document in modal
function viewFileInModal(fileNum, fileType, filePath) {
	var pdfModal = new bootstrap.Modal(document.getElementById('pdf-modal'));
	var modalTitle = document.getElementById('pdf-modal-label');
	var pdfContainer = document.getElementById('pdf-container');
	pdfContainer.innerHTML = ''; // Clear previous pages
	pdfContainer.scrollTop = 0; // Scroll to the first page (top)

	var decodedFilePath = decodeURIComponent(filePath);
	var fileName = decodedFilePath.split(/[\\/]/).pop();
	modalTitle.textContent = fileType + " File (" + fileName + ")";

	var params = new URLSearchParams();
	params.append('file-type', fileType);
	params.append('file-path', decodedFilePath);
	params.append('file-num', fileNum);

	fetch('/api/file/view-supp-docs', {
		method: 'POST',
		headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
		body: params.toString()
	}).then(function (response) {
		if (!response.ok) {
			throw new Error('Failed to fetch PDF: ' + response.statusText);
		}
		return response.arrayBuffer();
	}).then(function (pdfData) {
		console.log(pdfData);
		var blob = new Blob([pdfData], { type: 'application/pdf' });
		var blobUrl = URL.createObjectURL(blob);

		// Set download link
		var downloadBtn = document.getElementById('download-pdf-btn');
		downloadBtn.href = blobUrl;
		downloadBtn.download = fileName;

		return pdfjsLib.getDocument({ data: pdfData }).promise;
	}).then(function (pdf) {
		let renderPage = function (pageNum) {
			return pdf.getPage(pageNum).then(function (page) {
				var viewport = page.getViewport({ scale: 1.5 });
				var canvas = document.createElement('canvas');
				canvas.classList.add('mb-3');
				var ctx = canvas.getContext('2d');
				canvas.height = viewport.height;
				canvas.width = viewport.width;

				var renderContext = { canvasContext: ctx, viewport: viewport };
				pdfContainer.appendChild(canvas);
				return page.render(renderContext).promise;
			});
		};

		// Render all pages sequentially
		let sequence = Promise.resolve();
		for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
			sequence = sequence.then(() => renderPage(pageNum));
		}

		return sequence;
	}).then(function () {
		var modalElement = document.getElementById('pdf-modal');
		modalElement.addEventListener('shown.bs.modal', function onShown() {
			pdfContainer.scrollTop = 0; // Reset scroll position
			modalElement.scrollTop = 0; // Reset modal scroll
			modalElement.removeEventListener('shown.bs.modal', onShown); // Clean up listener
		});
		pdfModal.show();
	}).catch(function (error) {
		alert('Error loading PDF: ' + error.message);
	});
}