first commit
This commit is contained in:
Kenneth Jannette
266
src/Components/Document/DocumentListPage.js
Normal file
266
src/Components/Document/DocumentListPage.js
Normal file
@@ -0,0 +1,266 @@
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { AppContext } from "../../Hooks/useContext/appContext";
|
||||
import SelectDropdown from "../../pageElements/SelectDropdown";
|
||||
import { DocCard } from "../../pageElements/Cards";
|
||||
import { db } from "../../firebase";
|
||||
import {
|
||||
collection,
|
||||
deleteDoc,
|
||||
doc,
|
||||
documentId,
|
||||
onSnapshot,
|
||||
query,
|
||||
where,
|
||||
} from "firebase/firestore";
|
||||
import ListPagination from "../../pageElements/ListPagination";
|
||||
import ConfirmModal from "../Modals/ConfirmModal";
|
||||
import "../../styles/doclist-page.scss";
|
||||
|
||||
const DocumentListPage = ({ perPage }) => {
|
||||
const navigate = useNavigate();
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [selectedDocumentId, setSelectedDocumentId] = useState(null);
|
||||
const [allDocs, setAllDocs] = useState(null);
|
||||
const { appState } = useContext(AppContext);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const { group } = appState;
|
||||
const [page, setPage] = useState(1);
|
||||
const [order, setOrder] = useState("parentCaseName");
|
||||
const appUserId = group ? group.appUserId : null;
|
||||
const baseUrl = "http://localhost:4000";
|
||||
const [isBusy, setIsBusy] = useState(false);
|
||||
const [selectedDocumentType, setSelectedDocumentType] = useState();
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
function getDocuments() {
|
||||
if (!appUserId) {
|
||||
setAllDocs([]);
|
||||
return;
|
||||
}
|
||||
const q = query(
|
||||
collection(db, "documents"),
|
||||
where("ownerId", "==", appUserId)
|
||||
);
|
||||
const unsub = onSnapshot(q, (snapshot) => {
|
||||
const data = snapshot.docs.map((doc) => ({
|
||||
...doc.data(),
|
||||
documentId: doc.id,
|
||||
}));
|
||||
if (order === "parentCaseName") {
|
||||
data.sort((a, b) => {
|
||||
return a.parentCaseName.toLowerCase() > b.parentCaseName.toLowerCase()
|
||||
? 1
|
||||
: -1;
|
||||
});
|
||||
} else if (order === "parentCaseName2") {
|
||||
data.sort((a, b) => {
|
||||
return a.parentCaseName.toLowerCase() < b.parentCaseName.toLowerCase()
|
||||
? 1
|
||||
: -1;
|
||||
});
|
||||
}
|
||||
const pages = Math.ceil(data.length / perPage);
|
||||
if (page > pages) {
|
||||
setPage(pages);
|
||||
}
|
||||
setTotalPages(pages);
|
||||
setAllDocs(data);
|
||||
});
|
||||
return unsub;
|
||||
}
|
||||
|
||||
useEffect(getDocuments, [appUserId, order]);
|
||||
|
||||
async function deleteFromDb(documentId) {
|
||||
if (isBusy) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsBusy(true);
|
||||
try {
|
||||
const docRef = doc(db, "documents", `${documentId}`);
|
||||
await deleteDoc(docRef);
|
||||
setShowDeleteModal(false);
|
||||
} catch (err) {
|
||||
console.log("Error deleting document from db:", err);
|
||||
}
|
||||
setIsBusy(false);
|
||||
}
|
||||
|
||||
async function deleteFromStorage() {
|
||||
const selectedDoc = allDocs.filter((doc) => {
|
||||
console.log("doc", doc);
|
||||
return doc.documentId == selectedDocumentId;
|
||||
});
|
||||
console.log(
|
||||
"selectedDoc[0].responseGenerations",
|
||||
selectedDoc[0].responseGenerations
|
||||
);
|
||||
const respGens = selectedDoc[0].responseGenerations;
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${baseUrl}/deleteDoc/${selectedDocumentId}/${selectedDocumentType}/${respGens}`,
|
||||
{
|
||||
method: "POST",
|
||||
}
|
||||
);
|
||||
const res = response;
|
||||
return res;
|
||||
} catch (error) {
|
||||
console.error("Error deleting document from storage:", error);
|
||||
}
|
||||
}
|
||||
|
||||
const dropDownOptions = [
|
||||
{ label: "Associated case name a - z", value: "parentCaseName" },
|
||||
{ label: "Associated case name z - a", value: "parentCaseName2" },
|
||||
];
|
||||
|
||||
async function openDoc(docId) {
|
||||
/*
|
||||
may deprecate this functionality
|
||||
try {
|
||||
window.open(`${baseUrl}/Backend/Documents/Uploads/${docId}`, "_blank");
|
||||
} catch (err) {
|
||||
console.log("Error occurred fetching document:", err);
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
function handleNavigate(
|
||||
documentId,
|
||||
responseGenerations,
|
||||
caseId,
|
||||
documentType
|
||||
) {
|
||||
const _id = String(documentId);
|
||||
const _resGen = String(responseGenerations);
|
||||
const parentCaseId = String(caseId);
|
||||
const _docType = String(documentType);
|
||||
navigate(
|
||||
`/docedit/${_id}/${responseGenerations}/${parentCaseId}/${documentType}`
|
||||
);
|
||||
}
|
||||
|
||||
function handleCancelDelete() {
|
||||
if (!isBusy) {
|
||||
setShowDeleteModal(false);
|
||||
}
|
||||
}
|
||||
|
||||
function handleDeleteDocument() {
|
||||
deleteFromDb(selectedDocumentId);
|
||||
deleteFromStorage(selectedDocumentId, selectedDocumentType);
|
||||
}
|
||||
|
||||
function confirmDelete(documentId, docType) {
|
||||
setSelectedDocumentId(documentId);
|
||||
setSelectedDocumentType(docType);
|
||||
setShowDeleteModal(true);
|
||||
}
|
||||
|
||||
if (!group) {
|
||||
return null;
|
||||
}
|
||||
console.log("allDocs", allDocs);
|
||||
return (
|
||||
<>
|
||||
<div className="doc-list-header">
|
||||
<h2 className="doc-header-text">Documents</h2>
|
||||
<div className="user-name-container">{group.firm}</div>
|
||||
</div>
|
||||
{allDocs === null ? <div>Loading...</div> : null}
|
||||
{allDocs !== null ? (
|
||||
<div className="dropdown-container">
|
||||
{allDocs.length > 0 ? (
|
||||
<div className="d-flex justify-content-end mb-3">
|
||||
<SelectDropdown
|
||||
dropDownOptions={dropDownOptions}
|
||||
titleText="Sort documents"
|
||||
handleSelect={setOrder}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<div className="document-list-lower-wrapper">
|
||||
{allDocs.length > 0 ? (
|
||||
allDocs
|
||||
.slice((page - 1) * perPage, page * perPage)
|
||||
.map((doc, i) => (
|
||||
<DocCard
|
||||
key={`doccard-${i}`}
|
||||
title={doc.docTitle}
|
||||
parentCaseNumber={doc.parentCaseNumber}
|
||||
parentCaseName={doc.parentCaseName}
|
||||
parentCaseId={doc.parentCaseId}
|
||||
docType={doc.docType}
|
||||
documentId={doc.documentId}
|
||||
dateServed={doc.dateServed}
|
||||
openDocument={openDoc}
|
||||
confirmDelete={confirmDelete}
|
||||
handleNavigate={handleNavigate}
|
||||
displayDeleteButton={true}
|
||||
responseGenerations={doc.responseGenerations}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<div className="nodocs-text-container">
|
||||
<p className="nodocs-text">
|
||||
{" "}
|
||||
You have not uploaded any documents yet.
|
||||
</p>
|
||||
<p className="nodocs-light-text">To upload a document:</p>
|
||||
<ol>
|
||||
<li className="nodocs-list-item">
|
||||
Navigate to the cases view (above link in navigation bar).{" "}
|
||||
</li>
|
||||
<li>
|
||||
{" "}
|
||||
Click "View Case" to select the case with which your
|
||||
document will be associated. This will open the Case Detail
|
||||
view.{" "}
|
||||
</li>
|
||||
<li className="nodocs-list-item">
|
||||
Note: If you have not yet created any cases, you will need
|
||||
to create one first - click "Create Case" and follow the
|
||||
prompts.
|
||||
</li>
|
||||
<li className="nodocs-list-item">
|
||||
In the case detail view, click "Upload Case Document" and
|
||||
select a document from your computer for upload.
|
||||
</li>
|
||||
<li className="nodocs-list-item">
|
||||
Your document will be parsed into a processable form. You
|
||||
will then be able to generate a response to the document.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{totalPages > 1 ? (
|
||||
<div className="mb-3">
|
||||
<ListPagination
|
||||
page={page}
|
||||
totalPages={totalPages}
|
||||
setPage={setPage}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
{showDeleteModal && selectedDocumentId !== null ? (
|
||||
<ConfirmModal
|
||||
onCancel={handleCancelDelete}
|
||||
onConfirm={handleDeleteDocument}
|
||||
buttonLabelText="Delete"
|
||||
modalText="Confirm that you want to permanently delete this document."
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocumentListPage;
|
||||
Reference in New Issue
Block a user