Document Management System

All Documents

Manage your files and folders.

${doc.category}

${doc.content.substring(0, 100)}

By ${doc.author} ${new Date(doc.createdAt).toLocaleDateString()}
`; list.appendChild(card); }); } } function showListView() { document.getElementById('detail-view').classList.add('hidden'); document.getElementById('list-view').classList.remove('hidden'); } function showDetailView(id) { const doc = documents.find(d => d.id === id); if (!doc) return; const detailContainer = document.getElementById('detail-view'); detailContainer.innerHTML = `

${doc.title}

Author: ${doc.author} Category: ${doc.category} Created: ${new Date(doc.createdAt).toLocaleString()}
${doc.content}
`; document.getElementById('list-view').classList.add('hidden'); detailContainer.classList.remove('hidden'); detailContainer.querySelector('#back-btn').onclick = showListView; detailContainer.querySelector('.action-btn-edit').onclick = () => openModal(doc.id); detailContainer.querySelector('.action-btn-delete').onclick = () => openDeleteModal(doc.id); detailContainer.querySelector('.action-btn-pdf').onclick = () => generatePdf(doc); } // --- Modals and Forms --- function openModal(id = null) { const modal = document.getElementById('doc-modal'); const form = document.getElementById('doc-form'); form.reset(); if (id) { const doc = documents.find(d => d.id === id); document.getElementById('modal-title').textContent = 'Edit Document'; document.getElementById('doc-id').value = doc.id; document.getElementById('doc-title').value = doc.title; document.getElementById('doc-author').value = doc.author; document.getElementById('doc-category').value = doc.category; document.getElementById('doc-content').value = doc.content; } else { document.getElementById('modal-title').textContent = 'Add New Document'; document.getElementById('doc-id').value = ''; } modal.classList.remove('hidden'); } function closeModal() { document.getElementById('doc-modal').classList.add('hidden'); } document.getElementById('doc-form').addEventListener('submit', (e) => { e.preventDefault(); const id = document.getElementById('doc-id').value; const docData = { title: document.getElementById('doc-title').value, author: document.getElementById('doc-author').value, category: document.getElementById('doc-category').value, content: document.getElementById('doc-content').value, }; if (id) { // Editing existing doc const index = documents.findIndex(d => d.id === parseInt(id)); documents[index] = { ...documents[index], ...docData }; } else { // Creating new doc docData.id = Date.now(); docData.createdAt = new Date().toISOString(); documents.push(docData); } saveState(); renderDocumentsList(); closeModal(); if(id) showDetailView(parseInt(id)); // Refresh detail view if editing }); function openDeleteModal(id) { document.getElementById('delete-doc-id').value = id; document.getElementById('delete-modal').classList.remove('hidden'); } function closeDeleteModal() { document.getElementById('delete-modal').classList.add('hidden'); } document.getElementById('confirm-delete-btn').addEventListener('click', () => { const id = parseInt(document.getElementById('delete-doc-id').value); documents = documents.filter(d => d.id !== id); saveState(); closeDeleteModal(); showListView(); renderDocumentsList(); }); // --- Event Listeners --- document.getElementById('add-doc-btn').addEventListener('click', () => openModal()); document.getElementById('cancel-btn').addEventListener('click', closeModal); document.getElementById('cancel-delete-btn').addEventListener('click', closeDeleteModal); document.getElementById('search-box').addEventListener('input', (e) => { currentFilter.search = e.target.value.toLowerCase(); renderDocumentsList(); }); // --- PDF Generation --- function generatePdf(doc) { const { jsPDF } = window.jspdf; const pdf = new jsPDF(); pdf.setFont('helvetica', 'bold'); pdf.setFontSize(22); pdf.text(doc.title, 15, 20); pdf.setFontSize(10); pdf.setFont('helvetica', 'normal'); pdf.setTextColor(100); pdf.text(`By ${doc.author}`, 15, 28); pdf.text(`Category: ${doc.category}`, 15, 33); pdf.text(`Created: ${new Date(doc.createdAt).toLocaleString()}`, 15, 38); const content = pdf.splitTextToSize(doc.content, 180); pdf.setTextColor(0); pdf.text(content, 15, 50); pdf.save(`${doc.title.replace(/\s+/g, '_')}.pdf`); } // --- Initial Load --- function loadInitialData() { documents = [ { id: 1, title: 'Q3 Financial Report', author: 'Alice Johnson', category: 'Reports', createdAt: '2025-09-08T10:00:00Z', content: 'The third quarter showed a 15% increase in revenue, driven by strong performance in the North American market. Key metrics and detailed analysis are included within.' }, { id: 2, title: 'Project Phoenix MSA', author: 'Legal Team', category: 'Contracts', createdAt: '2025-09-05T14:30:00Z', content: 'This Master Service Agreement outlines the terms and conditions for Project Phoenix, including deliverables, payment schedules, and intellectual property rights.' }, { id: 3, title: 'Server Upgrade Invoice #8432', author: 'IT Department', category: 'Invoices', createdAt: '2025-08-20T11:00:00Z', content: 'Invoice for the procurement and installation of new server hardware. Total amount: $12,500. Payment due by Oct 1, 2025.' }, { id: 4, title: 'Weekly Standup Notes', author: 'Bob Williams', category: 'Meeting Notes', createdAt: '2025-09-09T09:15:00Z', content: '- Team Alpha: Blocked by API access. ETA Friday.\n- Team Bravo: On track for sprint completion.\n- Marketing: A/B test results are positive.' } ]; renderCategories(); renderDocumentsList(); } loadInitialData(); });
Scroll to Top