Changes in document manager.
This commit is contained in:
parent
b04d4a26c5
commit
e4c54ab239
@ -1,15 +1,14 @@
|
||||
// DocumentForm.js
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { z } from "zod";
|
||||
|
||||
// Helper function to format file size
|
||||
// const formatFileSize = (bytes) => {
|
||||
// if (bytes === 0) return "0 Bytes";
|
||||
// const k = 1024;
|
||||
// const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
|
||||
// const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
// return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
|
||||
// };
|
||||
const formatFileSize = (bytes) => {
|
||||
if (bytes === 0) return "0 Bytes";
|
||||
const k = 1024;
|
||||
const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
|
||||
};
|
||||
|
||||
// Define the Zod schema for the form
|
||||
const DocumentSchema = z.object({
|
||||
@ -25,7 +24,7 @@ const DocumentSchema = z.object({
|
||||
.refine(
|
||||
(files) => files.every((file) => file.fileSize <= 5 * 1024 * 1024),
|
||||
{
|
||||
message: "File size exceeds 5MB.",
|
||||
message: "File size must be 5MB or less.",
|
||||
}
|
||||
),
|
||||
});
|
||||
@ -89,10 +88,9 @@ const DocumentForm = ({ initialData, onSave, onCancel }) => {
|
||||
onSave({ ...formData, files });
|
||||
} else {
|
||||
const fieldErrors = result.error.flatten().fieldErrors;
|
||||
const fileErrors = fieldErrors.files ? [{ message: fieldErrors.files.join(", ") }] : [];
|
||||
setErrors({
|
||||
...fieldErrors,
|
||||
billAttachments: fileErrors,
|
||||
files: fieldErrors.files ? fieldErrors.files[0] : null,
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -219,11 +217,9 @@ const DocumentForm = ({ initialData, onSave, onCancel }) => {
|
||||
onClick={(e) => (e.target.value = null)}
|
||||
/>
|
||||
</div>
|
||||
{errors.billAttachments && (
|
||||
{errors.files && (
|
||||
<div className="text-danger small mt-1">
|
||||
{errors.billAttachments.map((err, idx) => (
|
||||
<div key={idx}>{err.message || err.fileSize?.message}</div>
|
||||
))}
|
||||
{errors.files}
|
||||
</div>
|
||||
)}
|
||||
{files.length > 0 && (
|
||||
@ -241,7 +237,7 @@ const DocumentForm = ({ initialData, onSave, onCancel }) => {
|
||||
{file.fileName}
|
||||
</span>
|
||||
<span className="text-body-secondary small d-block">
|
||||
{/* {formatFileSize(file.fileSize)} */}
|
||||
{formatFileSize(file.fileSize)}
|
||||
</span>
|
||||
</div>
|
||||
<i
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
// DocumentManager.js
|
||||
import React, { useState } from "react";
|
||||
import DocumentForm from "./DocumentForm";
|
||||
import ConfirmModal from "../common/ConfirmModal";
|
||||
@ -8,6 +7,9 @@ const EmpDocuments = () => {
|
||||
const [documents, setDocuments] = useState([
|
||||
{
|
||||
name: "Adhar Card",
|
||||
documentNumber: "1234-5678-9012",
|
||||
category: "private",
|
||||
documentType: "Aadhar Card",
|
||||
uploadedDate: "21 Aug, 2025",
|
||||
uploadedBy: "Alice Johnson",
|
||||
fileType: "PDF",
|
||||
@ -17,6 +19,9 @@ const EmpDocuments = () => {
|
||||
},
|
||||
{
|
||||
name: "Pan Card",
|
||||
documentNumber: "ABCDE1234F",
|
||||
category: "public",
|
||||
documentType: "Pan Card",
|
||||
uploadedDate: "15 Jul, 2025",
|
||||
uploadedBy: "Bob Smith",
|
||||
fileType: "Excel",
|
||||
@ -26,6 +31,9 @@ const EmpDocuments = () => {
|
||||
},
|
||||
{
|
||||
name: "Driving Licence",
|
||||
documentNumber: "DL-2025-12345",
|
||||
category: "private",
|
||||
documentType: "Driving License",
|
||||
uploadedDate: "10 Aug, 2025",
|
||||
uploadedBy: "Carol Lee",
|
||||
fileType: "Word",
|
||||
@ -33,30 +41,11 @@ const EmpDocuments = () => {
|
||||
initials: "DL",
|
||||
files: [],
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
uploadedDate: "05 Aug, 2025",
|
||||
uploadedBy: "David Kim",
|
||||
fileType: "PNG",
|
||||
url: "#",
|
||||
initials: "DM",
|
||||
files: [],
|
||||
},
|
||||
{
|
||||
name: "Client Presentation",
|
||||
uploadedDate: "18 Aug, 2025",
|
||||
uploadedBy: "Eve Brown",
|
||||
fileType: "PPT",
|
||||
url: "#",
|
||||
initials: "CP",
|
||||
files: [],
|
||||
},
|
||||
]);
|
||||
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [currentDocument, setCurrentDocument] = useState(null);
|
||||
|
||||
// New state for the delete modal
|
||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const [documentToDelete, setDocumentToDelete] = useState(null);
|
||||
|
||||
@ -79,16 +68,33 @@ const EmpDocuments = () => {
|
||||
};
|
||||
|
||||
const handleSave = (newDoc) => {
|
||||
// Helper function to get the file type from the file name
|
||||
const getFileType = (fileName) => {
|
||||
const parts = fileName.split('.');
|
||||
return parts.length > 1 ? parts.pop().toUpperCase() : 'N/A';
|
||||
};
|
||||
|
||||
// Create a new document object with all required fields
|
||||
const updatedDoc = {
|
||||
...newDoc,
|
||||
uploadedDate: new Date().toLocaleDateString("en-US", { day: '2-digit', month: 'short', year: 'numeric' }),
|
||||
uploadedBy: "Current User", // Replace with actual user name
|
||||
initials: newDoc.name ? newDoc.name.slice(0, 2).toUpperCase() : "--",
|
||||
// Infer fileType from the first file name if available
|
||||
fileType: newDoc.files && newDoc.files.length > 0 ? getFileType(newDoc.files[0].fileName) : 'N/A',
|
||||
};
|
||||
|
||||
if (currentDocument) {
|
||||
// Edit an existing document
|
||||
setDocuments(
|
||||
documents.map((doc) => (doc === currentDocument ? { ...newDoc, initials: doc.initials } : doc))
|
||||
documents.map((doc) => (doc === currentDocument ? { ...updatedDoc, initials: doc.initials } : doc))
|
||||
);
|
||||
} else {
|
||||
// Create a new document
|
||||
setDocuments([...documents, { ...newDoc, initials: newDoc.name ? newDoc.name.slice(0, 2).toUpperCase() : "--" }]);
|
||||
setDocuments([updatedDoc, ...documents]); // Prepend new doc for better visibility
|
||||
}
|
||||
setShowForm(false);
|
||||
setCurrentDocument(null);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
@ -97,21 +103,18 @@ const EmpDocuments = () => {
|
||||
};
|
||||
|
||||
const handleDelete = (doc) => {
|
||||
// Set the document to be deleted and open the modal
|
||||
setDocumentToDelete(doc);
|
||||
setIsDeleteModalOpen(true);
|
||||
};
|
||||
|
||||
// New function to handle the confirmed deletion
|
||||
const handleConfirmDelete = () => {
|
||||
if (documentToDelete) {
|
||||
setDocuments(documents.filter((doc) => doc !== documentToDelete));
|
||||
setIsDeleteModalOpen(false); // Close the modal
|
||||
setDocumentToDelete(null); // Clear the document to delete
|
||||
setIsDeleteModalOpen(false);
|
||||
setDocumentToDelete(null);
|
||||
}
|
||||
};
|
||||
|
||||
// Function to close the delete modal
|
||||
const handleCloseDeleteModal = () => {
|
||||
setIsDeleteModalOpen(false);
|
||||
setDocumentToDelete(null);
|
||||
@ -145,10 +148,11 @@ const EmpDocuments = () => {
|
||||
<table className="table mb-0">
|
||||
<thead>
|
||||
<tr className="text-center">
|
||||
<th colSpan={2}>Document Name</th>
|
||||
<th>Document Name</th>
|
||||
<th>Document Number</th>
|
||||
<th>Document Type</th>
|
||||
<th>Uploaded Date</th>
|
||||
<th>Uploaded By</th>
|
||||
<th>File Type</th>
|
||||
{/* <th>Uploaded By</th> */}
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -156,7 +160,7 @@ const EmpDocuments = () => {
|
||||
{filteredDocuments.length > 0 ? (
|
||||
filteredDocuments.map((doc, index) => (
|
||||
<tr key={index} className="align-middle" style={{ height: "50px" }}>
|
||||
<td colSpan={2}>
|
||||
<td>
|
||||
<div className="d-flex align-items-center">
|
||||
<div
|
||||
className="avatar bg-secondary text-white rounded-circle d-flex align-items-center justify-content-center"
|
||||
@ -174,9 +178,10 @@ const EmpDocuments = () => {
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>{doc.documentNumber}</td>
|
||||
<td>{doc.documentType}</td>
|
||||
<td>{doc.uploadedDate}</td>
|
||||
<td>{doc.uploadedBy}</td>
|
||||
<td>{doc.fileType}</td>
|
||||
{/* <td>{doc.uploadedBy}</td> */}
|
||||
<td className="text-center">
|
||||
<i
|
||||
className="bx bx-edit text-secondary cursor-pointer me-2"
|
||||
@ -229,8 +234,6 @@ const EmpDocuments = () => {
|
||||
message={`Are you sure you want to delete "${documentToDelete?.name || "Unnamed Document"}"?`}
|
||||
onSubmit={handleConfirmDelete}
|
||||
onClose={handleCloseDeleteModal}
|
||||
// `loading` prop is not needed for this example but can be added
|
||||
// `paramData` is also not needed since we're using a state variable
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@ -238,4 +241,4 @@ const EmpDocuments = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default EmpDocuments;
|
||||
export default EmpDocuments;
|
||||
Loading…
x
Reference in New Issue
Block a user