adding employee page. needs reports
This commit is contained in:
@@ -0,0 +1,264 @@
|
||||
// Employee Reports CRUD operations
|
||||
|
||||
const reportsCollectionName = 'Employee_Reports';
|
||||
window.currentEmployeeId = null;
|
||||
|
||||
/**
|
||||
* Load reports for a specific employee
|
||||
*/
|
||||
async function loadEmployeeReports(employeeId) {
|
||||
try {
|
||||
if (!employeeId) {
|
||||
document.getElementById('reportsList').innerHTML = '<p class="text-center text-gray-500 py-8">No employee selected</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
window.currentEmployeeId = employeeId;
|
||||
|
||||
// Filter reports by id matching the employee id (Employee_Records id)
|
||||
// The id field in Employee_Reports links to Employee_Records id
|
||||
const result = await pb.collection(reportsCollectionName).getList(1, 100, {
|
||||
filter: `id = "${employeeId}"`,
|
||||
sort: '-entered_date',
|
||||
});
|
||||
|
||||
displayReports(result.items);
|
||||
} catch (error) {
|
||||
console.error('Error loading reports:', error);
|
||||
document.getElementById('reportsList').innerHTML = '<p class="text-center text-red-500 py-8">Error loading reports. Please try again.</p>';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Display reports in the reports list
|
||||
*/
|
||||
function displayReports(reports) {
|
||||
const container = document.getElementById('reportsList');
|
||||
if (!container) return;
|
||||
|
||||
if (!reports || reports.length === 0) {
|
||||
container.innerHTML = '<p class="text-center text-gray-500 py-8">No reports found. Click "Add Report" to create one.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = reports.map(report => {
|
||||
const enteredDate = report.entered_date
|
||||
? new Date(report.entered_date).toLocaleDateString()
|
||||
: '-';
|
||||
|
||||
return `
|
||||
<div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-4">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-4 mb-2">
|
||||
${report.entered_date ? `
|
||||
<span class="text-xs text-gray-500">${escapeHtml(enteredDate)}</span>
|
||||
` : ''}
|
||||
${report.entered_by ? `
|
||||
<span class="text-xs text-gray-500">Entered by: ${escapeHtml(report.entered_by)}</span>
|
||||
` : ''}
|
||||
${report.row ? `
|
||||
<span class="text-xs text-gray-500">Row: ${escapeHtml(report.row)}</span>
|
||||
` : ''}
|
||||
</div>
|
||||
${report.report ? `
|
||||
<p class="text-sm text-gray-900 whitespace-pre-wrap">${escapeHtml(report.report)}</p>
|
||||
` : '<p class="text-sm text-gray-500 italic">No report content</p>'}
|
||||
${report.id_number ? `
|
||||
<p class="text-xs text-gray-500 mt-2">ID Number: ${escapeHtml(report.id_number)}</p>
|
||||
` : ''}
|
||||
</div>
|
||||
<div class="flex gap-2 ml-4">
|
||||
<button
|
||||
onclick="openReportModal('${report.id}')"
|
||||
class="bg-blue-600 text-white px-3 py-1.5 rounded-lg text-xs font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onclick="deleteReport('${report.id}')"
|
||||
class="bg-red-600 text-white px-3 py-1.5 rounded-lg text-xs font-medium hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 transition"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
/**
|
||||
* Open report modal for creating or editing
|
||||
*/
|
||||
async function openReportModal(reportId = null) {
|
||||
document.getElementById('reportModal').classList.remove('hidden');
|
||||
|
||||
if (reportId) {
|
||||
document.getElementById('reportModalTitle').textContent = 'Edit Report';
|
||||
document.getElementById('reportId').value = reportId;
|
||||
await loadReportForEdit(reportId);
|
||||
} else {
|
||||
document.getElementById('reportModalTitle').textContent = 'Add Report';
|
||||
document.getElementById('reportForm').reset();
|
||||
document.getElementById('reportId').value = '';
|
||||
// Set the employee id for linking
|
||||
document.getElementById('reportEmployeeId').value = window.currentEmployeeId || '';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Close report modal
|
||||
*/
|
||||
function closeReportModal() {
|
||||
document.getElementById('reportModal').classList.add('hidden');
|
||||
document.getElementById('reportForm').reset();
|
||||
document.getElementById('reportId').value = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Load report for editing
|
||||
*/
|
||||
async function loadReportForEdit(reportId) {
|
||||
try {
|
||||
const report = await pb.collection(reportsCollectionName).getOne(reportId);
|
||||
|
||||
// Populate form fields
|
||||
document.getElementById('reportRow').value = report.row || '';
|
||||
document.getElementById('reportEnteredBy').value = report.entered_by || '';
|
||||
document.getElementById('reportEnteredDate').value = report.entered_date
|
||||
? new Date(report.entered_date).toISOString().split('T')[0]
|
||||
: '';
|
||||
document.getElementById('reportIdNumber').value = report.id_number || '';
|
||||
document.getElementById('reportContent').value = report.report || '';
|
||||
document.getElementById('reportEmployeeId').value = report.id || window.currentEmployeeId || '';
|
||||
|
||||
return report;
|
||||
} catch (error) {
|
||||
console.error('Error loading report:', error);
|
||||
showMessage('Error loading report: ' + (error.message || 'Unknown error'), 'error');
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Save report (create or update)
|
||||
*/
|
||||
async function saveReport() {
|
||||
try {
|
||||
const form = document.getElementById('reportForm');
|
||||
if (!form) {
|
||||
showMessage('Form not found', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData(form);
|
||||
const reportId = document.getElementById('reportId')?.value;
|
||||
const employeeId = window.currentEmployeeId || document.getElementById('reportEmployeeId')?.value;
|
||||
|
||||
if (!employeeId) {
|
||||
showMessage('No employee ID found. Please save the employee first.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Build report object
|
||||
// Note: In PocketBase, when creating, we can't set the id field directly
|
||||
// So we'll use the id field value to link to Employee_Records
|
||||
// But we need to check if this is actually a relation field or a text field
|
||||
// For now, we'll set it as a field value
|
||||
const reportData = {};
|
||||
|
||||
// Set the id field to link to Employee_Records (this is the linking field)
|
||||
reportData.id = employeeId;
|
||||
|
||||
// Get all form fields
|
||||
for (const [key, value] of formData.entries()) {
|
||||
if (key === 'id') continue; // Skip the hidden id field
|
||||
|
||||
if (value !== null && value !== undefined) {
|
||||
if (key === 'entered_date' && value) {
|
||||
// Convert date to ISO string
|
||||
reportData[key] = new Date(value).toISOString();
|
||||
} else {
|
||||
reportData[key] = value.trim();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Get employee info to populate name fields if available
|
||||
if (employeeId && typeof loadEmployeeForEdit === 'undefined') {
|
||||
// Try to get employee data if we have access to it
|
||||
try {
|
||||
const employee = await pb.collection('Employee_Records').getOne(employeeId);
|
||||
if (employee) {
|
||||
reportData.first_name = employee.First_Name || '';
|
||||
reportData.last_name = employee.Last_Name || '';
|
||||
reportData.combined_name = `${employee.First_Name || ''} ${employee.Last_Name || ''}`.trim();
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Could not load employee data for report:', e);
|
||||
}
|
||||
}
|
||||
|
||||
if (reportId) {
|
||||
// Update existing report
|
||||
await pb.collection(reportsCollectionName).update(reportId, reportData);
|
||||
showMessage('Report updated successfully', 'success');
|
||||
} else {
|
||||
// Create new report
|
||||
await pb.collection(reportsCollectionName).create(reportData);
|
||||
showMessage('Report created successfully', 'success');
|
||||
}
|
||||
|
||||
closeReportModal();
|
||||
if (window.currentEmployeeId) {
|
||||
loadEmployeeReports(window.currentEmployeeId);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saving report:', error);
|
||||
const errorMsg = error.message || 'Unknown error';
|
||||
showMessage('Error saving report: ' + errorMsg, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete report
|
||||
*/
|
||||
async function deleteReport(reportId) {
|
||||
if (!confirm('Are you sure you want to delete this report? This action cannot be undone.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await pb.collection(reportsCollectionName).delete(reportId);
|
||||
showMessage('Report deleted successfully', 'success');
|
||||
if (window.currentEmployeeId) {
|
||||
loadEmployeeReports(window.currentEmployeeId);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deleting report:', error);
|
||||
showMessage('Error deleting report: ' + (error.message || 'Unknown error'), 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape HTML to prevent XSS
|
||||
*/
|
||||
function escapeHtml(text) {
|
||||
if (text == null) return '';
|
||||
const map = {
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": '''
|
||||
};
|
||||
return String(text).replace(/[&<>"']/g, m => map[m]);
|
||||
}
|
||||
|
||||
// Make functions globally accessible
|
||||
window.loadEmployeeReports = loadEmployeeReports;
|
||||
window.openReportModal = openReportModal;
|
||||
window.closeReportModal = closeReportModal;
|
||||
window.saveReport = saveReport;
|
||||
window.deleteReport = deleteReport;
|
||||
Reference in New Issue
Block a user