first commit
This commit is contained in:
Kenneth Jannette
35
src/Components/Modals/ConfirmModal.js
Normal file
35
src/Components/Modals/ConfirmModal.js
Normal file
@@ -0,0 +1,35 @@
|
||||
import Button from "../../pageElements/Button";
|
||||
import Modal from "react-bootstrap/Modal";
|
||||
|
||||
const ConfirmModal = ({
|
||||
onCancel,
|
||||
onConfirm,
|
||||
buttonLabelText,
|
||||
modalText,
|
||||
isBusy,
|
||||
}) => {
|
||||
return (
|
||||
<Modal show="true" onHide={onCancel} size="lg">
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>Confirmation</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>{modalText}</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button
|
||||
disabled={isBusy}
|
||||
className="secondary-button"
|
||||
onClick={onCancel}
|
||||
labelText="Cancel"
|
||||
/>
|
||||
<Button
|
||||
disabled={isBusy}
|
||||
className="primary-button"
|
||||
onClick={onConfirm}
|
||||
labelText={buttonLabelText}
|
||||
/>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConfirmModal;
|
||||
561
src/Components/Modals/CreateModal.js
Normal file
561
src/Components/Modals/CreateModal.js
Normal file
@@ -0,0 +1,561 @@
|
||||
import { useState, useContext } from "react";
|
||||
import Button from "../../pageElements/Button";
|
||||
import Form from "react-bootstrap/Form";
|
||||
import Col from "react-bootstrap/Col";
|
||||
import Row from "react-bootstrap/Row";
|
||||
import TextInput from "../../pageElements/TextInput";
|
||||
import Modal from "react-bootstrap/Modal";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import Radiogroup from "../../pageElements/Radiogroup";
|
||||
import { collection, setDoc, updateDoc, doc } from "firebase/firestore";
|
||||
import { AppContext } from "../../Hooks/useContext/appContext.js";
|
||||
import { db } from "../../firebase";
|
||||
import { objectMap } from "../../Utils/Object";
|
||||
import "../../styles/modals.scss";
|
||||
import {
|
||||
getFormDataDefaults,
|
||||
getValidatedFormData,
|
||||
handleFormDataChange,
|
||||
isFormDataHasErrors,
|
||||
} from "../../Utils/Form";
|
||||
import "../../styles/modals.scss";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const CreateModal = ({ setShowModal, caseData }) => {
|
||||
const { appState } = useContext(AppContext);
|
||||
const navigate = useNavigate();
|
||||
const { group } = appState;
|
||||
const appUserId = group.appUserId;
|
||||
const editCaseId = caseData?.id;
|
||||
const isEditing = typeof editCaseId !== "undefined";
|
||||
|
||||
const fields = {
|
||||
caption: { required: true, maxLength: 45 },
|
||||
captionTwo: { required: true, maxLength: 45 },
|
||||
caseNumber: { required: true, maxLength: 45 },
|
||||
judge: { required: true, maxLength: 45 },
|
||||
plaintiffParties: { required: true, maxLength: 45 },
|
||||
defendantParties: { required: true, maxLength: 45 },
|
||||
jurisdiction: { required: true, maxLength: 45 },
|
||||
billingCode: { required: true, maxLength: 45 },
|
||||
venue: { required: true, maxLength: 45 },
|
||||
caseType: { required: true, maxLength: 45 },
|
||||
trialDate: { required: true, maxLength: 45, type: "date" },
|
||||
filedDate: { required: true, maxLength: 45, type: "date" },
|
||||
contactFirstName: { required: true, maxLength: 45 },
|
||||
contactLastName: { required: true, maxLength: 45 },
|
||||
contactEmail: { required: true, maxLength: 45, type: "email" },
|
||||
leadAttorneys: { required: true, maxLength: 45 },
|
||||
lawFirm: { required: false, maxLength: 45 },
|
||||
clientPosition: { required: true, default: "Defendant" },
|
||||
};
|
||||
|
||||
const [isBusy, setIsBusy] = useState(false);
|
||||
const [data, setData] = useState(
|
||||
getFormDataDefaults(fields, isEditing ? caseData : undefined)
|
||||
);
|
||||
|
||||
const handleChangeInput = (e, name) => {
|
||||
const newData = handleFormDataChange(e, name, data, fields);
|
||||
if (newData !== null) {
|
||||
setData(newData);
|
||||
}
|
||||
};
|
||||
|
||||
const validateData = () => {
|
||||
const newData = getValidatedFormData(data, fields);
|
||||
const hasErrors = isFormDataHasErrors(newData);
|
||||
console.log("newData", newData);
|
||||
console.log("hasErrors", hasErrors);
|
||||
setData(newData);
|
||||
return hasErrors ? null : objectMap(({ value }) => value, newData);
|
||||
};
|
||||
|
||||
async function saveCaseData() {
|
||||
const dataValues = validateData();
|
||||
|
||||
if (dataValues === null) {
|
||||
return;
|
||||
}
|
||||
setIsBusy(true);
|
||||
if (isEditing) {
|
||||
try {
|
||||
await updateDoc(doc(db, "cases", editCaseId), dataValues);
|
||||
setShowModal(false);
|
||||
} catch (err) {
|
||||
console.log("Error updating case:", err);
|
||||
}
|
||||
} else {
|
||||
const caseId = uuidv4();
|
||||
const ownerId = appUserId; // userId;
|
||||
const caseData = {
|
||||
ownerId,
|
||||
caseId,
|
||||
...dataValues,
|
||||
};
|
||||
try {
|
||||
const casesRef = collection(db, "cases");
|
||||
await setDoc(doc(casesRef, `${caseId}`), caseData);
|
||||
setShowModal(false);
|
||||
} catch (err) {
|
||||
console.log("Error creating case:", err);
|
||||
}
|
||||
}
|
||||
setIsBusy(false);
|
||||
}
|
||||
|
||||
const stateOfCase = "NY";
|
||||
|
||||
const handleClose = () => {
|
||||
if (!isBusy) {
|
||||
setShowModal(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
if (!isBusy) {
|
||||
void saveCaseData();
|
||||
}
|
||||
navigate("/dashboard");
|
||||
};
|
||||
|
||||
const radioOptions = [
|
||||
{ name: "Plaintiff", label: "Plaintiff", value: "Plaintiff" },
|
||||
{ name: "Defendant", label: "Defendant", value: "Defendant" },
|
||||
];
|
||||
|
||||
const modalInputForm = (
|
||||
<>
|
||||
<p className="create-modal-header">
|
||||
Please enter case information carefully. It will be used later when
|
||||
generating new documents.
|
||||
</p>
|
||||
<Form>
|
||||
<Row className="modal-caption-row">
|
||||
<Col style={{ marginBottom: "0px" }}>
|
||||
{isEditing ? (
|
||||
<div className="edit-modal-label">Case caption</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<div className="caption-one-container">
|
||||
<TextInput
|
||||
inputClassName={"create-modal-input"}
|
||||
key={"caption"}
|
||||
name={"caption"}
|
||||
value={data.caption.value}
|
||||
error={data.caption.error}
|
||||
message={data.caption.message}
|
||||
disabled={isBusy}
|
||||
onChange={(e) => handleChangeInput(e, "caption")}
|
||||
label={
|
||||
data.caption.value.length === 0
|
||||
? isEditing
|
||||
? caseData.caption
|
||||
: "Caption - Plaintiff(s)"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<div className="modal-caption-vee"> - v. -</div>
|
||||
<Col className="mb-3">
|
||||
{isEditing ? <span className="edit-modal-label"></span> : <></>}
|
||||
<TextInput
|
||||
key={"captionTwo"}
|
||||
name={"captionTwo"}
|
||||
value={data.captionTwo.value}
|
||||
error={data.captionTwo.error}
|
||||
message={data.captionTwo.message}
|
||||
disabled={isBusy}
|
||||
onChange={(e) => handleChangeInput(e, "captionTwo")}
|
||||
label={
|
||||
data.captionTwo.value.length === 0
|
||||
? isEditing
|
||||
? caseData.captionTwo
|
||||
: "Caption - Defendant(s)"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col className="mb-3">
|
||||
{isEditing ? (
|
||||
<div className="edit-modal-label">Index number</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<TextInput
|
||||
key={"caseNumber"}
|
||||
name={"caseNumber"}
|
||||
value={data.caseNumber.value}
|
||||
error={data.caseNumber.error}
|
||||
message={data.caseNumber.message}
|
||||
disabled={isBusy}
|
||||
onChange={(e) => handleChangeInput(e, "caseNumber")}
|
||||
label={
|
||||
data.caseNumber.value.length === 0
|
||||
? isEditing
|
||||
? caseData.caseNumber
|
||||
: stateOfCase === "NY"
|
||||
? "Index Number"
|
||||
: "Case Number"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
<Col className="mb-3">
|
||||
{isEditing ? <div className="edit-modal-label">Venue</div> : <></>}
|
||||
<TextInput
|
||||
key={"venue"}
|
||||
name={"venue"}
|
||||
value={data.venue.value}
|
||||
error={data.venue.error}
|
||||
message={data.venue.message}
|
||||
disabled={isBusy}
|
||||
onChange={(e) => handleChangeInput(e, "venue")}
|
||||
label={
|
||||
data.venue.value.length === 0
|
||||
? isEditing
|
||||
? caseData.venue
|
||||
: "Venue"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col className="mb-3">
|
||||
{isEditing ? <div className="edit-modal-label">Judge</div> : <></>}
|
||||
<TextInput
|
||||
key={"judge"}
|
||||
name={"judge"}
|
||||
value={data.judge.value}
|
||||
error={data.judge.error}
|
||||
message={data.judge.message}
|
||||
disabled={isBusy}
|
||||
onChange={(e) => handleChangeInput(e, "judge")}
|
||||
label={
|
||||
data.judge.value.length === 0
|
||||
? isEditing
|
||||
? caseData.judge
|
||||
: "Judge"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
|
||||
<Col className="mb-3">
|
||||
{isEditing ? (
|
||||
<div className="edit-modal-label">Jurisdiction</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<TextInput
|
||||
key={"jurisdiction"}
|
||||
name={"jurisdiction"}
|
||||
value={data.jurisdiction.value}
|
||||
error={data.jurisdiction.error}
|
||||
message={data.jurisdiction.message}
|
||||
disabled={isBusy}
|
||||
onChange={(e) => handleChangeInput(e, "jurisdiction")}
|
||||
label={
|
||||
data.jurisdiction.value.length === 0
|
||||
? isEditing
|
||||
? caseData.jurisdiction
|
||||
: "Jurisdiction"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col className="mb-3">
|
||||
{isEditing ? (
|
||||
<div className="edit-modal-label">Trial Date</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<TextInput
|
||||
key={"trialDate"}
|
||||
name={"trialDate"}
|
||||
value={data.trialDate.value}
|
||||
error={data.trialDate.error}
|
||||
message={data.trialDate.message}
|
||||
disabled={isBusy}
|
||||
onChange={(e) => handleChangeInput(e, "trialDate")}
|
||||
label={
|
||||
data.trialDate.value.length === 0
|
||||
? isEditing
|
||||
? caseData.trialDate
|
||||
: "Trial Date"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
|
||||
<Col className="mb-3">
|
||||
{isEditing ? (
|
||||
<div className="edit-modal-label">Date filed</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<TextInput
|
||||
key={"filedDate"}
|
||||
name={"filedDate"}
|
||||
value={data.filedDate.value}
|
||||
error={data.filedDate.error}
|
||||
message={data.filedDate.message}
|
||||
disabled={isBusy}
|
||||
onChange={(e) => handleChangeInput(e, "filedDate")}
|
||||
label={
|
||||
data.filedDate.value.length === 0
|
||||
? isEditing
|
||||
? caseData.filedDate
|
||||
: "Date Filed"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col className="mb-3">
|
||||
{isEditing ? (
|
||||
<div className="edit-modal-label">Defendant(s)</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<TextInput
|
||||
key={"defendantParties"}
|
||||
name={"defendantParties"}
|
||||
value={data.defendantParties.value}
|
||||
error={data.defendantParties.error}
|
||||
message={data.defendantParties.message}
|
||||
disabled={isBusy}
|
||||
onChange={(e) => handleChangeInput(e, "defendantParties")}
|
||||
label={
|
||||
data.defendantParties.value.length === 0
|
||||
? isEditing
|
||||
? caseData.defendantParties
|
||||
: "Defendant Parties"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
|
||||
<Col className="mb-3">
|
||||
{isEditing ? (
|
||||
<div className="edit-modal-label">Plaintiff(s)</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<TextInput
|
||||
key={"plaintiffParties"}
|
||||
name={"plaintiffParties"}
|
||||
value={data.plaintiffParties.value}
|
||||
error={data.plaintiffParties.error}
|
||||
message={data.plaintiffParties.message}
|
||||
disabled={isBusy}
|
||||
onChange={(e) => handleChangeInput(e, "plaintiffParties")}
|
||||
label={
|
||||
data.plaintiffParties.value.length === 0
|
||||
? isEditing
|
||||
? caseData.plaintiffParties
|
||||
: "Plaintiff Parties"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col className="mb-3">
|
||||
{isEditing ? (
|
||||
<div className="edit-modal-label">Contast first name</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<TextInput
|
||||
key={"contactFirstName"}
|
||||
name={"contactFirstName"}
|
||||
value={data.contactFirstName.value}
|
||||
error={data.contactFirstName.error}
|
||||
message={data.contactFirstName.message}
|
||||
disabled={isBusy}
|
||||
onChange={(e) => handleChangeInput(e, "contactFirstName")}
|
||||
label={
|
||||
data.contactFirstName.value.length === 0
|
||||
? isEditing
|
||||
? caseData.contactFirstName
|
||||
: "Contact First Name"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
|
||||
<Col className="mb-3">
|
||||
{isEditing ? (
|
||||
<div className="edit-modal-label">Contact last name</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<TextInput
|
||||
key={"contactLastName"}
|
||||
name={"contactLastName"}
|
||||
value={data.contactLastName.value}
|
||||
error={data.contactLastName.error}
|
||||
message={data.contactLastName.message}
|
||||
disabled={isBusy}
|
||||
onChange={(e) => handleChangeInput(e, "contactLastName")}
|
||||
label={
|
||||
data.contactLastName.value.length === 0
|
||||
? isEditing
|
||||
? caseData.contactLastName
|
||||
: "Contact Last Name"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col className="mb-3">
|
||||
{isEditing ? (
|
||||
<div className="edit-modal-label">Case type</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<TextInput
|
||||
key={"caseType"}
|
||||
name={"caseType"}
|
||||
value={data.caseType.value}
|
||||
error={data.caseType.error}
|
||||
message={data.caseType.message}
|
||||
disabled={isBusy}
|
||||
onChange={(e) => handleChangeInput(e, "caseType")}
|
||||
label={
|
||||
data.caseType.value.length === 0
|
||||
? isEditing
|
||||
? caseData.caseType
|
||||
: "Case Type"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
|
||||
<Col className="mb-3">
|
||||
{isEditing ? (
|
||||
<div className="edit-modal-label">Contact email</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<TextInput
|
||||
key={"contactEmail"}
|
||||
name={"contactEmail"}
|
||||
value={data.contactEmail.value}
|
||||
error={data.contactEmail.error}
|
||||
message={data.contactEmail.message}
|
||||
disabled={isBusy}
|
||||
onChange={(e) => handleChangeInput(e, "contactEmail")}
|
||||
label={
|
||||
data.contactEmail.value.length === 0
|
||||
? isEditing
|
||||
? caseData.contactEmail
|
||||
: "Contact Email"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<div className="radio-group-wrapper">
|
||||
<Radiogroup
|
||||
title="Client position"
|
||||
options={radioOptions}
|
||||
value={data.clientPosition.value}
|
||||
disabled={isBusy}
|
||||
onClick={(e) => handleChangeInput(e, "clientPosition")}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col className="mb-3">
|
||||
{isEditing ? (
|
||||
<div className="edit-modal-label">Billing code</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<TextInput
|
||||
key={"billingCode"}
|
||||
name={"billingCode"}
|
||||
value={data.billingCode.value}
|
||||
error={data.billingCode.error}
|
||||
message={data.billingCode.message}
|
||||
disabled={isBusy}
|
||||
onChange={(e) => handleChangeInput(e, "billingCode")}
|
||||
label={
|
||||
data.billingCode.value.length === 0
|
||||
? isEditing
|
||||
? caseData.billingCode
|
||||
: "Billing Code"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col className="mb-3">
|
||||
{isEditing ? (
|
||||
<div className="edit-modal-label">Lead attorney</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<TextInput
|
||||
key={"leadAttorneys"}
|
||||
name={"leadAttorneys"}
|
||||
value={data.leadAttorneys.value}
|
||||
error={data.leadAttorneys.error}
|
||||
message={data.leadAttorneys.message}
|
||||
disabled={isBusy}
|
||||
onChange={(e) => handleChangeInput(e, "leadAttorneys")}
|
||||
label={
|
||||
data.leadAttorneys.value.length === 0
|
||||
? isEditing
|
||||
? caseData.leadAttorneys
|
||||
: "Lead Attornery(s)"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
<Col></Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal show="true" onHide={handleClose} size="lg">
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>
|
||||
{isEditing ? "Edit case information" : "Enter case information"}
|
||||
</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>{modalInputForm}</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button
|
||||
className="secondary-button"
|
||||
disabled={isBusy}
|
||||
onClick={handleClose}
|
||||
labelText="Cancel"
|
||||
/>
|
||||
<Button
|
||||
className="primary-button"
|
||||
disabled={isBusy}
|
||||
onClick={handleCreate}
|
||||
labelText="Save Case"
|
||||
/>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateModal;
|
||||
260
src/Components/Modals/UploadModal.js
Normal file
260
src/Components/Modals/UploadModal.js
Normal file
@@ -0,0 +1,260 @@
|
||||
import React, { useState, useContext } from "react";
|
||||
import { FileUploader } from "react-drag-drop-files";
|
||||
import { AppContext } from "../../Hooks/useContext/appContext";
|
||||
import Modal from "react-bootstrap/Modal";
|
||||
import Button from "../../pageElements/Button";
|
||||
import Form from "react-bootstrap/Form";
|
||||
import Row from "react-bootstrap/Row";
|
||||
import Col from "react-bootstrap/Col";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { collection, setDoc, doc } from "firebase/firestore";
|
||||
import { db } from "../../firebase";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import TextInput from "../../pageElements/TextInput";
|
||||
import Radio from "../../pageElements/Radio";
|
||||
import "../../styles/modals.scss";
|
||||
|
||||
const MAX_LENGTH_TITLE = 27;
|
||||
const MAX_LENGTH_DESC = 35;
|
||||
const MAX_LENGTH_DATE = 20;
|
||||
|
||||
const UploadModal = (props) => {
|
||||
const { appState } = useContext(AppContext);
|
||||
const { group } = appState;
|
||||
const appUserId = group.appUserId;
|
||||
const { setShowModal, caseData, handleSuccess } = props;
|
||||
const { caseId, caseNumber, jurisdiction, caption, captionTwo } = caseData;
|
||||
const [docTitle, setDocTitle] = useState("");
|
||||
const [docDescription, setDocDescription] = useState("");
|
||||
const [dateServed, setDateServed] = useState("");
|
||||
const [fileToUpload, setFileToUpload] = useState();
|
||||
const [fileToParse, setFileToParse] = useState("");
|
||||
const [fileChanged, setFileChanged] = useState();
|
||||
const [showFileDetails, setShowFileDetails] = useState("");
|
||||
const [titleError, setShowTitleError] = useState("");
|
||||
const [docError, setShowDocError] = useState("");
|
||||
const fileTypes = ["PDF"];
|
||||
const fileName = fileToParse ? fileToParse.name : undefined;
|
||||
const baseUrl = "http://localhost:4000";
|
||||
const navigate = useNavigate();
|
||||
|
||||
async function saveToDb(uuidName) {
|
||||
const data = {
|
||||
ownerId: appUserId,
|
||||
documentName: `${uuidName}.pdf`,
|
||||
docDescription: docDescription,
|
||||
dateServed: dateServed,
|
||||
docTitle: docTitle,
|
||||
parentCaseId: caseId,
|
||||
parentCaseName: `${caption} v. ${captionTwo}`,
|
||||
parentCaseNumber: caseNumber,
|
||||
parentCaseJurisdiction: jurisdiction,
|
||||
responseGenerations: 0,
|
||||
};
|
||||
|
||||
try {
|
||||
const documentsRef = collection(db, "documents");
|
||||
await setDoc(doc(documentsRef, `${uuidName}`), data);
|
||||
} catch (err) {
|
||||
console.log("Error saving case to db:", err);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleFileChange(file) {
|
||||
setFileToParse(file);
|
||||
setFileChanged(true);
|
||||
}
|
||||
|
||||
async function uploadFile(file) {
|
||||
try {
|
||||
const response = await fetch(`${baseUrl}/uploadToParse`, {
|
||||
method: "POST",
|
||||
body: file,
|
||||
});
|
||||
const res = response;
|
||||
console.log("-------------------------------------------->res", res);
|
||||
return res;
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
}
|
||||
}
|
||||
|
||||
async function processFile() {
|
||||
const uuidName = uuidv4();
|
||||
const newName = `${uuidName}.pdf`;
|
||||
const title = docTitle;
|
||||
const description = docDescription || "";
|
||||
const formData = new FormData();
|
||||
|
||||
if (fileToParse && fileChanged) {
|
||||
formData.append("file", fileToParse[0], newName);
|
||||
}
|
||||
|
||||
if (fileName) {
|
||||
formData.append("fileName", fileName);
|
||||
}
|
||||
|
||||
formData.append("title", title);
|
||||
formData.append("description", description);
|
||||
setFileToUpload(formData);
|
||||
|
||||
let response = {};
|
||||
|
||||
const res = await uploadFile(formData);
|
||||
console.log("--------------------------res", res);
|
||||
response["uuidName"] = uuidName;
|
||||
response["res"] = res;
|
||||
return response;
|
||||
}
|
||||
|
||||
async function handleUpload() {
|
||||
if (!docTitle && !fileToParse) {
|
||||
setShowDocError("Please select a document to upload.");
|
||||
setShowTitleError("Please enter a document title");
|
||||
return;
|
||||
} else if (!docTitle) {
|
||||
setShowTitleError("Please enter a document title");
|
||||
return;
|
||||
} else if (!fileToParse) {
|
||||
setShowDocError("Please select a document to upload.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await processFile();
|
||||
if (response.res?.status !== 200) {
|
||||
saveToDb(response.uuidName);
|
||||
return;
|
||||
} else {
|
||||
saveToDb(response.uuidName);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("err", err);
|
||||
}
|
||||
|
||||
handleSuccess();
|
||||
}
|
||||
|
||||
const handleUploadCancel = () => {
|
||||
setShowFileDetails(false);
|
||||
setFileToParse(null);
|
||||
setFileChanged(false);
|
||||
setShowModal(false);
|
||||
};
|
||||
|
||||
const handleTitleInput = (e) => {
|
||||
if (e.target.value.length <= MAX_LENGTH_TITLE) {
|
||||
setDocTitle(e.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDescInput = (e) => {
|
||||
if (e.target.value.length <= MAX_LENGTH_DESC) {
|
||||
setDocDescription(e.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDateInput = (e) => {
|
||||
if (e.target.value.length <= MAX_LENGTH_DATE) {
|
||||
setDateServed(e.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal show="true" onHide={handleUploadCancel} size="lg">
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>Document Upload</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<div className="modal-header-text-wrapper">
|
||||
<p className="upload-modal-header-text">
|
||||
Select a document in pdf format for upload. Enter the document title
|
||||
below. Document description is optional.
|
||||
</p>
|
||||
<p className="upload-modal-header-text">
|
||||
This document will be associated with {caption} v. {captionTwo}
|
||||
{caseNumber ? `, ${caseNumber}` : ""}.
|
||||
</p>
|
||||
<p className="upload-modal-header-text">
|
||||
If that is not the case you want to associate with this document,
|
||||
click "cancel", go back and select the intended case from your
|
||||
active case list.
|
||||
</p>
|
||||
</div>
|
||||
<Form>
|
||||
<Row>
|
||||
<Col className="mb-3">
|
||||
<TextInput
|
||||
key={"title"}
|
||||
name={"title"}
|
||||
value={docTitle}
|
||||
onChange={handleTitleInput}
|
||||
label={docTitle ? "" : "Title"}
|
||||
error={!!titleError}
|
||||
message={titleError}
|
||||
/>
|
||||
</Col>
|
||||
<Col className="mb-3">
|
||||
<TextInput
|
||||
key={"description"}
|
||||
name={"description"}
|
||||
value={docDescription}
|
||||
onChange={handleDescInput}
|
||||
label="Description"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col className="mb-3">
|
||||
<TextInput
|
||||
key={"date"}
|
||||
name={"date"}
|
||||
value={dateServed}
|
||||
onChange={handleDateInput}
|
||||
label={dateServed ? "" : "Date Served"}
|
||||
/>
|
||||
</Col>
|
||||
<Col />
|
||||
</Row>
|
||||
<Row>
|
||||
<Col className="mb-3">
|
||||
<Form.Label>Select Document</Form.Label>
|
||||
<div className="file-uploader">
|
||||
<FileUploader
|
||||
multiple={true}
|
||||
handleChange={handleFileChange}
|
||||
name="file"
|
||||
>
|
||||
<div className={fileToParse ? "drag-box filled" : "drag-box"}>
|
||||
{fileToParse
|
||||
? fileToParse[0]?.name
|
||||
: "Click to select a file or drag and drop here"}
|
||||
</div>
|
||||
</FileUploader>
|
||||
</div>
|
||||
</Col>
|
||||
{docError ? (
|
||||
<div className="modal-document-error">{docError}</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</Row>
|
||||
</Form>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button
|
||||
className="btn primary-button cancel-button"
|
||||
onClick={handleUploadCancel}
|
||||
labelText="Cancel"
|
||||
/>
|
||||
<Button
|
||||
labelText="Upload"
|
||||
className="primary-button pr-1 pl-1"
|
||||
onClick={handleUpload}
|
||||
/>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default UploadModal;
|
||||
Reference in New Issue
Block a user