first commit
This commit is contained in:
Kenneth Jannette
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;
|
||||
Reference in New Issue
Block a user