Ui changed for document version list

This commit is contained in:
pramod mahajan 2025-09-04 14:16:15 +05:30
parent e66ce11cd5
commit fe3d356c2e
6 changed files with 270 additions and 111 deletions

View File

@ -0,0 +1,170 @@
import React from "react";
import VersionListSkeleton from "./VersionListSkeleton";
import { getDocuementsStatus } from "./Documents";
import Avatar from "../common/Avatar";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { DOWNLOAD_DOCUMENT, VERIFY_DOCUMENT } from "../../utils/constants";
import { FileIcon } from "../../utils/FileIcon";
const DocumentVersionList = ({
versionLoding,
versionList,
isPending,
setOpenDocument,
VerifyDocument,
}) => {
const canVerifyDocument = useHasUserPermission(VERIFY_DOCUMENT);
const canDownloadDocument = useHasUserPermission(DOWNLOAD_DOCUMENT);
const handleOpenDocument = () => {
if (canDownloadDocument) {
setOpenDocument(true);
}
};
const contentTypeIcons = {
"application/pdf": "fa-solid fa-file-pdf text-primary",
"application/msword": "fa-solid fa-file-word text-primary",
"application/vnd.openxmlformats-officedocument.wordprocessingml.document":
"fa-solid fa-file-word text-primary",
"application/vnd.ms-excel": "fa-solid fa-file-excel text-success",
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
"fa-solid fa-file-excel text-primary",
"application/vnd.ms-powerpoint": "fa-solid fa-file-powerpoint text-primary",
"application/vnd.openxmlformats-officedocument.presentationml.presentation":
"fa-solid fa-file-powerpoint text-primary",
"image/jpg": "fa-solid fa-file-image text-primary",
"image/jpeg": "fa-solid fa-file-image text-primary",
"image/png": "fa-solid fa-file-image text-primary",
"image/gif": "fa-solid fa-file-image text-primary",
"text/plain": "fa-solid fa-file-lines text-primary",
"text/csv": "fa-solid fa-file-csv text-primary",
"application/json": "fa-solid fa-file-code text-primary",
default: "fa-solid fa-file text-primary",
};
const getIcon = (fileName = "") => {
const ext = fileName.split(".").pop().toLowerCase();
return contentTypeIcons[ext] || contentTypeIcons.default;
};
const sortedVersions = versionList?.data
? [...versionList.data].sort((a, b) => b.version - a.version)
: [];
if (versionLoding) {
return <VersionListSkeleton items={2} />;
}
if (!sortedVersions.length) {
return <p className="text-muted">No documents available.</p>;
}
const latestDoc = sortedVersions[0];
return (
<div className="accordion" id="docAccordion">
<div className="accordion-item shadow-none">
<h2 className="accordion-header" id="headingDoc">
<button
className="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseDoc"
aria-expanded="true"
aria-controls="collapseDoc"
>
<i className="bx bxs-folder me-2 text-warning fs-5"></i>
{latestDoc.name} (Latest v{latestDoc.version})
</button>
</h2>
<div
id="collapseDoc"
className="accordion-collapse collapse show"
aria-labelledby="headingDoc"
data-bs-parent="#docAccordion"
>
<div className="accordion-body p-2">
<div className="list-group list-group-flush">
{sortedVersions.map((document, index) => (
<div
key={document.id}
className={`list-group-item list-group-item-action d-flex align-items-center cursor-pointer ${
index > 0 ? "ms-4" : "" // indent only older versions
}`}
>
<FileIcon
type={document.contentType}
size="fs-2"
className="me-2"
/>
<div className="w-100">
<div className="d-flex justify-content-between align-items-center">
<small className=" fw-normal">{document.name}</small>
<small className=" fw-normal">
Version-{document.version}
</small>{" "}
<small className=" text-secondary fw-normal">
fileSize: {document.fileSize} Kb
</small>
</div>
<div className="d-flex justify-content-between m-0">
<div
className="user-info text-start m-0"
onClick={handleOpenDocument}
>
<div className="d-flex align-items-center">
{formatUTCToLocalTime(document?.uploadedAt)} |
Uploaded by{" "}
<div className="d-flex align-items-center ms-1">
<Avatar
size="xs"
classAvatar="m-0"
firstName={document.uploadedBy?.firstName}
lastName={document.uploadedBy?.lastName}
/>
<span className="text-truncate ms-1">
{`${document.uploadedBy?.firstName ?? ""} ${
document.uploadedBy?.lastName ?? ""
}`.trim() || "N/A"}
</span>
</div>
</div>
{document?.updatedAt && (
<div className="d-flex align-items-center">
{formatUTCToLocalTime(document?.updatedAt)} |
Updated by{" "}
<div className="d-flex align-items-center ms-1">
<Avatar
size="xs"
classAvatar="m-0"
firstName={document.updatedBy?.firstName}
lastName={document.updatedBy?.lastName}
/>
<span className="text-truncate ms-1">
{`${document.updatedBy?.firstName ?? ""} ${
document.updatedBy?.lastName ?? ""
}`.trim() || "N/A"}
</span>
</div>
</div>
)}
</div>
<div className="d-flex align-items-end">
{getDocuementsStatus(document.isVerified)}
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
);
};
export default DocumentVersionList;

View File

@ -113,18 +113,34 @@ const Documents = ({ Document_Entity, Entity }) => {
<div className="card d-flex p-2">
<div className="row align-items-center">
{/* Search */}
<div className="col-6 col-md-6 col-lg-3 mb-md-0">
<input
<div className="d-flex col-8 col-md-8 col-lg-4 mb-md-0 align-items-center">
<div className="d-flex"> <input
type="search"
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
className="form-control form-control-sm"
placeholder="Search Document"
/>
/></div>
<label className="switch switch-sm mx-2">
<input
type="checkbox"
className="switch-input"
checked={isActive}
onChange={(e) => setIsActive(e.target.checked)}
/>
<span className="switch-toggle-slider">
<span className="switch-on"></span>
<span className="switch-off"></span>
</span>
<span className="switch-label">
{isActive ? "Active" : "In-Active"}
</span>
</label>
</div>
{/* Actions */}
<div className="col-6 col-md-6 col-lg-9 text-end">
<div className="col-6 col-md-6 col-lg-8 text-end">
{/* <span
className="text-tiny text-muted p-1 border-0 bg-none lead mx-3 cursor-pointer"
disabled={isRefetching}
@ -141,21 +157,7 @@ const Documents = ({ Document_Entity, Entity }) => {
}`}
></i>
</span> */}
<label className="switch switch-sm">
<input
type="checkbox"
className="switch-input"
checked={isActive}
onChange={(e) => setIsActive(e.target.checked)}
/>
<span className="switch-toggle-slider">
<span className="switch-on"></span>
<span className="switch-off"></span>
</span>
<span className="switch-label">
{isActive ? "Active" : "In-Active"}
</span>
</label>
{canUploadDocument && (<button
type="button"

View File

@ -243,13 +243,6 @@ const DocumentsList = ({
})}
</tbody>
</table>
{data?.data?.length > 0 && (
<Pagination
currentPage={currentPage}
totalPages={data.totalPages}
onPageChange={paginate}
/>
)}
</div>
</>
);

View File

@ -16,6 +16,7 @@ import Pagination from "../common/Pagination";
import VersionListSkeleton from "./VersionListSkeleton";
import DocumentDetailsSkeleton from "./DocumentDetailsSkeleton ";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import DocumentVersionList from "./DocumentVersionList";
const ViewDocument = () => {
const { viewDoc, setViewDoc, setOpenDocument } = useDocumentContext();
@ -32,7 +33,7 @@ const ViewDocument = () => {
error: versionError,
} = useDocumentVersionList(
data?.parentAttachmentId,
ITEMS_PER_PAGE-10,
ITEMS_PER_PAGE - 10,
currentPage
);
const paginate = (page) => {
@ -45,6 +46,9 @@ const ViewDocument = () => {
const VerifyDocument = () => {
VerifyDoc({ documentId: viewDoc?.document, isVerify: true });
};
const RejectDocument = () => {
VerifyDoc({ documentId: viewDoc?.document, isVerify: false });
};
if (isLoading) return <DocumentDetailsSkeleton />;
if (isError)
@ -106,12 +110,22 @@ const ViewDocument = () => {
<span className="fw-semibold me-2" style={{ minWidth: "130px" }}>
Uploaded By:
</span>
<span className="text-muted">
{data.uploadedBy?.firstName || "-"}
</span>
<div className="d-flex align-items-center ms-1">
<Avatar
size="xs"
classAvatar="m-0"
firstName={data.uploadedBy?.firstName}
lastName={data.uploadedBy?.lastName}
/>
<span className="text-truncate ms-1">
{`${data.uploadedBy?.firstName ?? ""} ${
data.uploadedBy?.lastName ?? ""
}`.trim() || "N/A"}
</span>
</div>
</div>
</div>
<div className="col-12 col-md-6">
{data.updatedAt && (
<div className="d-flex">
<span className="fw-semibold me-2" style={{ minWidth: "130px" }}>
Updated At:
@ -120,7 +134,8 @@ const ViewDocument = () => {
{formatUTCToLocalTime(data.updatedAt) || "-"}
</span>
</div>
</div>
)}{" "}
<div className="col-12 col-md-6"></div>
</div>
{/* Row 4 */}
@ -170,7 +185,6 @@ const ViewDocument = () => {
</div>
</div>
{/* Row 6 - Description full width */}
<div className="row mb-2 text-start">
<div className="col-12">
<div className="d-flex">
@ -181,85 +195,38 @@ const ViewDocument = () => {
</div>
</div>
</div>
<div className="row text-start py-2">
<p className="m-0 fw-semibold : ">Documents</p>
{versionLoding && <VersionListSkeleton items={2} />}
{!versionLoding && (
<div className="list-group mx-0">
{versionList?.data.map((document) => (
<a
className="list-group-item list-group-item-action py-1 border border-bottom border-top-0 border-start-0 border-end-0"
key={document.id}
>
<div className="d-flex w-100 justify-content-between m-0">
<p className="m-0">
{document.name}{" "}
<em className="text-secondary ms-3">
{formatUTCToLocalTime(document?.uploadedAt)}
</em>
</p>
<div className="d-flex align-items-center gap-1">
<small>Version {document.version}</small>
<small>{getDocuementsStatus(document.isVerified)}</small>
</div>
</div>
<div className="d-flex align-items-center justify-content-between text-secondary">
<div className="d-flex align-items-center">
Upload By
<Avatar
size="xs"
classAvatar="m-0"
firstName={document.uploadedBy?.firstName}
lastName={document.uploadedBy?.lastName}
/>
<span className="text-truncate m-0 ">
{`${document.uploadedBy?.firstName ?? ""} ${
document.uploadedBy?.lastName ?? ""
}`.trim() || "N/A"}
</span>
</div>
<div className="d-flex text-primary align-items-center gap-2 ">
{document.isVerified == null &&
canVerifyDocument &&
(isPending ? (
<div
class="spinner-border spinner-border-sm text-primary"
role="status"
>
<span class="visually-hidden">Loading...</span>
</div>
) : (
<span
className="cursor-pointer"
onClick={VerifyDocument}
>
verify
</span>
))}
{canDownloadDocument && (
<span
className="cursor-pointer text-decoration-underline"
onClick={() => setOpenDocument(true)}
>
<small>view</small>{" "}
<i className="bx bx-sm bx-link-external"></i>
</span>
)}
</div>
</div>
</a>
))}
{data.isVerified === null && (
<div className="d-flex justify-content-end">
<div className="d-flex text-start text-sm-end">
{" "}
{isPending ? (
"Please Wait..."
) : (
<div className="mx-2">
<a
onClick={VerifyDocument}
className="cursor-pointer text-primary"
>
Verify
</a>
<a
onClick={RejectDocument}
className="cursor-pointer text-danger mx-2"
>
Reject
</a>
</div>
)}
</div>
)}
{!versionLoding && versionList?.data?.length > 0 && (
<Pagination
currentPage={currentPage}
totalPages={versionList?.totalPages}
onPageChange={paginate}
/>
)}
</div>
</div>
)}
<DocumentVersionList
versionLoding={versionLoding}
versionList={versionList}
isPending={isPending}
setOpenDocument={setOpenDocument}
VerifyDocument={VerifyDocument}
/>
</div>
);
};

View File

@ -162,6 +162,7 @@ export const useVerifyDocument = ()=>{
onSuccess: (data, variables) => {
queryClient.invalidateQueries({ queryKey: ["DocumentVersionList"] });
queryClient.invalidateQueries({ queryKey: ["DocumentList"] });
queryClient.invalidateQueries({ queryKey: ["Document"] });
showToast(
data.response.data.message ||
"Document Successfully Verified !",

26
src/utils/FileIcon.jsx Normal file
View File

@ -0,0 +1,26 @@
const contentTypeIcons = {
"application/pdf": "fa-solid fa-file-pdf text-danger",
"application/msword": "fa-solid fa-file-word text-primary",
"application/vnd.openxmlformats-officedocument.wordprocessingml.document":
"fa-solid fa-file-word text-primary",
"application/vnd.ms-excel": "fa-solid fa-file-excel text-success",
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
"fa-solid fa-file-excel text-success",
"application/vnd.ms-powerpoint": "fa-solid fa-file-powerpoint text-warning",
"application/vnd.openxmlformats-officedocument.presentationml.presentation":
"fa-solid fa-file-powerpoint text-warning",
"image/jpg": "fa-solid fa-file-image text-info",
"image/jpeg": "fa-solid fa-file-image text-info",
"image/png": "fa-solid fa-file-image text-info",
"image/gif": "fa-solid fa-file-image text-info",
"text/plain": "fa-solid fa-file-lines text-secondary",
"text/csv": "fa-solid fa-file-csv text-success",
"application/json": "fa-solid fa-file-code text-dark",
folder: "fa-solid fa-folder text-warning", // special for folders
default: "fa-solid fa-file text-muted",
};
export const FileIcon = ({ type, size = "fs-4", className = "" }) => {
const iconClass = contentTypeIcons[type] || contentTypeIcons.default;
return <i className={`${iconClass} ${size} ${className}`}></i>;
};