Ui changed for document version list
This commit is contained in:
parent
e66ce11cd5
commit
fe3d356c2e
170
src/components/Documents/DocumentVersionList.jsx
Normal file
170
src/components/Documents/DocumentVersionList.jsx
Normal 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;
|
@ -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"
|
||||
|
@ -243,13 +243,6 @@ const DocumentsList = ({
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{data?.data?.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={data.totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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
26
src/utils/FileIcon.jsx
Normal 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>;
|
||||
};
|
Loading…
x
Reference in New Issue
Block a user