first commit
This commit is contained in:
Kenneth Jannette
133
src/Components/Case/CaseDetailsPage.js
Normal file
133
src/Components/Case/CaseDetailsPage.js
Normal file
@@ -0,0 +1,133 @@
|
||||
import React, { useEffect, useContext, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { DetailCard } from "../../pageElements/DetailCard.js";
|
||||
import Button from "../../pageElements/Button";
|
||||
import CreateModal from "../Modals/CreateModal.js";
|
||||
import UploadModal from "../Modals/UploadModal.js";
|
||||
import { db } from "../../firebase";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { AppContext } from "../../Hooks/useContext/appContext.js";
|
||||
import LoadingSpinner from "../../pageElements/LoadingSpinner";
|
||||
import { doc, onSnapshot } from "firebase/firestore";
|
||||
|
||||
const CaseDetailsPage = () => {
|
||||
const { caseId } = useParams();
|
||||
const [subCase, setSubCase] = useState(null);
|
||||
const navigate = useNavigate();
|
||||
const [showUploadModal, setShowUploadModal] = useState();
|
||||
const [showCreateModal, setShowCreateModal] = useState();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const { appState } = useContext(AppContext);
|
||||
const { group } = appState;
|
||||
const appUserId = group ? group.appUserId : null;
|
||||
const message = "Parsing document. This may take several minutes.";
|
||||
|
||||
const handleNavigate = () => {
|
||||
navigate("/documents");
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
navigate("/cases");
|
||||
};
|
||||
|
||||
function getCase() {
|
||||
const docRef = doc(db, "cases", caseId);
|
||||
const unsub = onSnapshot(docRef, (snapshot) => {
|
||||
if (snapshot.exists() && snapshot.data().ownerId === appUserId) {
|
||||
setSubCase({ ...snapshot.data(), id: snapshot.id });
|
||||
} else {
|
||||
setSubCase(null);
|
||||
}
|
||||
});
|
||||
return unsub;
|
||||
}
|
||||
|
||||
useEffect(getCase, [caseId, appUserId]);
|
||||
|
||||
const handleSuccess = () => {
|
||||
setIsLoading(true);
|
||||
setShowUploadModal(false);
|
||||
setTimeout(handleNavigate, 40000);
|
||||
};
|
||||
|
||||
const ButtonContent = () => {
|
||||
return (
|
||||
<div className="details-button-container">
|
||||
<div className="details-butn-wrapper">
|
||||
<Button
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
labelText="Edit"
|
||||
className="primary-button"
|
||||
/>
|
||||
</div>
|
||||
<div className="details-button-box">
|
||||
<Button
|
||||
className="secondary-button back-button"
|
||||
onClick={handleBack}
|
||||
labelText="Back"
|
||||
/>
|
||||
<div className="upload-button-box">
|
||||
<Button
|
||||
className="p-2 mr-2 primary-button"
|
||||
onClick={() => setShowUploadModal(true)}
|
||||
labelText="Upload Document"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (!group) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const HeadingContent = () => {
|
||||
return (
|
||||
<div className="details-heading-container">
|
||||
<h3 className="details-heading">Case Details:</h3>
|
||||
<div className="details-subhead">
|
||||
<h3 className="details-heading2">
|
||||
{subCase?.caption} v. {subCase?.captionTwo}
|
||||
</h3>
|
||||
<div className="pheno-phun">
|
||||
<h3 className="details-heading3">Index Number:</h3>
|
||||
<h3 className="details-heading4">{subCase?.caseNumber}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const showUp = showUploadModal && subCase !== null ? true : false;
|
||||
const showCreate = showCreateModal && subCase !== null ? true : false;
|
||||
return (
|
||||
<div className="details-container">
|
||||
{isLoading ? <LoadingSpinner message={message} /> : null}
|
||||
{!isLoading ? <HeadingContent /> : null}
|
||||
{!isLoading ? (
|
||||
showUp ? (
|
||||
<UploadModal
|
||||
setShowModal={setShowUploadModal}
|
||||
setIsLoading={setIsLoading}
|
||||
handleSuccess={handleSuccess}
|
||||
caseData={subCase}
|
||||
/>
|
||||
) : null
|
||||
) : null}
|
||||
{!isLoading ? (
|
||||
showCreate ? (
|
||||
<CreateModal setShowModal={setShowCreateModal} caseData={subCase} />
|
||||
) : null
|
||||
) : null}
|
||||
{!isLoading ? (
|
||||
subCase !== null ? (
|
||||
<DetailCard data={subCase} />
|
||||
) : null
|
||||
) : null}
|
||||
{!isLoading ? <ButtonContent /> : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CaseDetailsPage;
|
||||
152
src/Components/Case/CaseListPage.js
Normal file
152
src/Components/Case/CaseListPage.js
Normal file
@@ -0,0 +1,152 @@
|
||||
import React, { useEffect, useContext, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { CaseCard } from "../../pageElements/Cards.js";
|
||||
import CreateModal from "../Modals/CreateModal.js";
|
||||
import { db } from "../../firebase";
|
||||
import { AppContext } from "../../Hooks/useContext/appContext";
|
||||
import SelectDropdown from "../../pageElements/SelectDropdown";
|
||||
import { collection, query, where, onSnapshot } from "firebase/firestore";
|
||||
import ListPagination from "../../pageElements/ListPagination.js";
|
||||
import Button from "../../pageElements/Button";
|
||||
|
||||
const CaseListPage = ({ perPage }) => {
|
||||
const navigate = useNavigate();
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [allCases, setAllCases] = useState(null);
|
||||
const [page, setPage] = useState(1);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [order, setOrder] = useState("caption");
|
||||
const { appState } = useContext(AppContext);
|
||||
const { group } = appState;
|
||||
const appUserId = group ? group.appUserId : null;
|
||||
|
||||
function getCases() {
|
||||
if (!appUserId) {
|
||||
setAllCases([]);
|
||||
return;
|
||||
}
|
||||
const q = query(collection(db, "cases"), where("ownerId", "==", appUserId));
|
||||
const unsub = onSnapshot(q, (snapshot) => {
|
||||
const data = snapshot.docs.map((doc) => doc.data());
|
||||
if (order === "caption") {
|
||||
data.sort((a, b) => {
|
||||
return a.caption.toLowerCase() > b.caption.toLowerCase() ? 1 : -1;
|
||||
});
|
||||
} else if (order === "caption2") {
|
||||
data.sort((a, b) => {
|
||||
return a.caption.toLowerCase() < b.caption.toLowerCase() ? 1 : -1;
|
||||
});
|
||||
} else if (order === "filedDate") {
|
||||
data.sort((a, b) => {
|
||||
return a.filedDate > b.filedDate ? 1 : -1;
|
||||
});
|
||||
} else if (order === "filedDate2") {
|
||||
data.sort((a, b) => {
|
||||
return a.filedDate < b.filedDate ? 1 : -1;
|
||||
});
|
||||
}
|
||||
const pages = Math.ceil(data.length / perPage);
|
||||
if (page > pages) {
|
||||
setPage(pages);
|
||||
}
|
||||
setTotalPages(pages);
|
||||
setAllCases(data);
|
||||
});
|
||||
return unsub;
|
||||
}
|
||||
const createNewButton = () => {
|
||||
return (
|
||||
<div className="create-new-box">
|
||||
<Button
|
||||
className="primary-button"
|
||||
onClick={() => setShowModal(!showModal)}
|
||||
labelText="Create New Case"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const dropDownOptions = [
|
||||
{ label: "Case name a - z", value: "caption" },
|
||||
{ label: "Case name z - a", value: "caption2" },
|
||||
{ label: "Date filed 1 - 10", value: "filedDate" },
|
||||
{ label: "Date filed 10 - 1", value: "filedDate2" },
|
||||
];
|
||||
|
||||
useEffect(getCases, [appUserId, order]);
|
||||
|
||||
async function deleteData() {
|
||||
console.log("delete data");
|
||||
}
|
||||
|
||||
const handleView = (caseId) => {
|
||||
navigate(`/casedetails/${caseId}`);
|
||||
};
|
||||
|
||||
if (!group) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="doc-list-header">
|
||||
<h2 className="doc-header-text">Active Cases</h2>
|
||||
<div className="user-name-container" style={{ marginLeft: "4px" }}>
|
||||
{group.firm}
|
||||
</div>
|
||||
</div>
|
||||
{showModal ? <CreateModal setShowModal={setShowModal} /> : <></>}
|
||||
{allCases === null ? <div>Loading...</div> : null}
|
||||
{allCases !== null ? (
|
||||
allCases.length > 0 ? (
|
||||
<>
|
||||
<div className="d-flex justify-content-end mb-3">
|
||||
<SelectDropdown
|
||||
dropDownOptions={dropDownOptions}
|
||||
titleText="Sort Cases"
|
||||
handleSelect={setOrder}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{allCases
|
||||
.slice((page - 1) * perPage, page * perPage)
|
||||
.map((c, i) => (
|
||||
<CaseCard
|
||||
key={`linkcard-${i}`}
|
||||
caption={c.caption}
|
||||
captionTwo={c.captionTwo}
|
||||
jurisdiction={c.jurisdiction}
|
||||
filedDate={c.filedDate}
|
||||
caseNumber={`Index no. ${c.caseNumber}`}
|
||||
caseId={c.caseId}
|
||||
labelText="View"
|
||||
onClick={handleView}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{totalPages > 1 ? (
|
||||
<div className="mb-3">
|
||||
<ListPagination
|
||||
page={page}
|
||||
totalPages={totalPages}
|
||||
setPage={setPage}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
{createNewButton()}
|
||||
</>
|
||||
) : (
|
||||
<div className="nodocs-text-container">
|
||||
<p> You have not created any cases yet.</p>
|
||||
<p>
|
||||
To get started, click "Create New Case" and enter case
|
||||
information.
|
||||
</p>
|
||||
{createNewButton()}
|
||||
</div>
|
||||
)
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CaseListPage;
|
||||
Reference in New Issue
Block a user