more
This commit is contained in:
Kenneth Jannette
@@ -1,318 +1,32 @@
|
|||||||
import { useEffect, useContext, useState, useRef } from "react";
|
import { useState } from "react";
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
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 Radiogroup from "../../pageElements/Radiogroup";
|
|
||||||
import {
|
|
||||||
getFormDataDefaults,
|
|
||||||
getValidatedFormData,
|
|
||||||
handleFormDataChange,
|
|
||||||
isFormDataHasErrors,
|
|
||||||
} from "../../Utils/Form";
|
|
||||||
import { db } from "../../firebase";
|
|
||||||
import * as dJSON from "dirty-json";
|
|
||||||
import { useParams } from "react-router-dom";
|
|
||||||
import { AppContext } from "../../Hooks/useContext/appContext.js";
|
|
||||||
import LoadingSpinner from "../../pageElements/LoadingSpinner";
|
|
||||||
import { doc, onSnapshot } from "firebase/firestore";
|
|
||||||
import { createCaseAdditionalFields as fields } from "../../Constants/Fields/CreateCaseFields.js";
|
|
||||||
import { objectMap } from "../../Utils/Object";
|
|
||||||
import { Typeahead } from "react-bootstrap-typeahead";
|
|
||||||
import { caseTags } from "../../Constants/Tags/CaseTags";
|
|
||||||
import "../../styles/casetype-page.scss";
|
import "../../styles/casetype-page.scss";
|
||||||
|
const CaseTypePage = () => {
|
||||||
const CaseTypePage = ({ caseData }) => {
|
const [email, setEmail] = useState("");
|
||||||
const { caseId } = useParams();
|
const [contactName, setContactName] = useState("");
|
||||||
const navigate = useNavigate();
|
|
||||||
const { appState } = useContext(AppContext);
|
|
||||||
const { group } = appState;
|
|
||||||
const [isEditing, setFsEditing] = useState(false);
|
|
||||||
const [subCase, setSubCase] = useState(null);
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
const [selectedCaseTags, setSelectedCaseTags] = useState([]);
|
|
||||||
const typeaheadRef = useRef();
|
|
||||||
const appUserId = group ? group.appUserId : null;
|
|
||||||
const [data, setData] = useState(
|
|
||||||
getFormDataDefaults(fields, isEditing ? caseData : undefined)
|
|
||||||
);
|
|
||||||
const [isBusy, setIsBusy] = useState(false);
|
|
||||||
|
|
||||||
const parsedTags = dJSON.parse(JSON.stringify(caseTags));
|
|
||||||
|
|
||||||
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 handleChangeInput = (e, name) => {
|
|
||||||
const newData = handleFormDataChange(e, name, data, fields);
|
|
||||||
if (newData !== null) {
|
|
||||||
setData(newData);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const setSelectedTag = (item) => {
|
|
||||||
const temp = [...selectedCaseTags, item.tagName];
|
|
||||||
setSelectedCaseTags(temp);
|
|
||||||
console.log("selectedCaseTags", selectedCaseTags);
|
|
||||||
};
|
|
||||||
|
|
||||||
const validateData = () => {
|
|
||||||
const newData = getValidatedFormData(data, fields);
|
|
||||||
const hasErrors = isFormDataHasErrors(newData);
|
|
||||||
setData(newData);
|
|
||||||
return hasErrors ? null : objectMap(({ value }) => value, newData);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleTagClick = (clickedTag) => {
|
|
||||||
console.log("handleTagClick tag", clickedTag);
|
|
||||||
console.log("selectedCaseTags", selectedCaseTags);
|
|
||||||
const temp = selectedCaseTags;
|
|
||||||
const foo = temp.filter((tag) => {
|
|
||||||
if (tag != clickedTag) return tag;
|
|
||||||
});
|
|
||||||
setSelectedCaseTags(foo);
|
|
||||||
};
|
|
||||||
|
|
||||||
const ButtonContent = () => {
|
|
||||||
return (
|
return (
|
||||||
<div className="details-button-container">
|
<div className="type-row">
|
||||||
<div className="details-button-box">
|
<div className="type-col">
|
||||||
<Button
|
<input
|
||||||
className="secondary-button back-button"
|
type="email"
|
||||||
labelText="Somewhere"
|
className="form-control"
|
||||||
/>
|
id="emailInput"
|
||||||
<div className="upload-button-box">
|
placeholder="Contact Name"
|
||||||
<Button className="p-2 mr-2 primary-button" labelText="Something" />
|
value={email}
|
||||||
|
onChange={(e) => setContactName(e.target.value)}
|
||||||
|
></input>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="type-col">
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
className="form-control"
|
||||||
|
id="emailInput"
|
||||||
|
placeholder="Contact Email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
></input>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
const radioOptions = [
|
|
||||||
{ name: "Plaintiff", label: "Plaintiff", value: "Plaintiff" },
|
|
||||||
{ name: "Defendant", label: "Defendant", value: "Defendant" },
|
|
||||||
];
|
|
||||||
|
|
||||||
if (!group) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="casetype-container">
|
|
||||||
<Form style={{ width: "100%" }}>
|
|
||||||
<Row>
|
|
||||||
<Col className="mb-3">
|
|
||||||
{isEditing ? (
|
|
||||||
<div className="edit-modal-label">Case Type</div>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
<Typeahead
|
|
||||||
className="flex-grow-1 create-case-taginput"
|
|
||||||
id="case-type-search"
|
|
||||||
labelKey="tagName"
|
|
||||||
options={parsedTags}
|
|
||||||
minLength={1}
|
|
||||||
ref={typeaheadRef}
|
|
||||||
placeholder="Case Type - start typing"
|
|
||||||
onChange={(selected) => {
|
|
||||||
let item = null;
|
|
||||||
for (const currentItem of selected) {
|
|
||||||
item = { ...currentItem };
|
|
||||||
}
|
|
||||||
setSelectedTag(item);
|
|
||||||
typeaheadRef.current.clear();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div className="case-tag-container">
|
|
||||||
{selectedCaseTags.map((tag, i) => (
|
|
||||||
<div className="tag-container">
|
|
||||||
<div className="tag-box">
|
|
||||||
<div
|
|
||||||
className="tag-ex-box"
|
|
||||||
onClick={() => handleTagClick(tag)}
|
|
||||||
>
|
|
||||||
<div className="tag-ex"> x</div>
|
|
||||||
</div>
|
|
||||||
<div className="casetag-name">{tag}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</Col>
|
|
||||||
<Col className="mb-3">
|
|
||||||
{isEditing ? (
|
|
||||||
<div className="edit-modal-label">Position</div>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
</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 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">Contact Name</div>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
<TextInput
|
|
||||||
key={"contactName"}
|
|
||||||
name={"contactName"}
|
|
||||||
value={data.contactName.value}
|
|
||||||
error={data.contactName.error}
|
|
||||||
message={data.contactName.message}
|
|
||||||
disabled={isBusy}
|
|
||||||
onChange={(e) => handleChangeInput(e, "contactLastName")}
|
|
||||||
label={
|
|
||||||
data.contactName.value.length === 0
|
|
||||||
? isEditing
|
|
||||||
? caseData.contactName
|
|
||||||
: "Contact Name"
|
|
||||||
: ""
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</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>
|
|
||||||
</Form>
|
|
||||||
<ButtonContent />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default CaseTypePage;
|
export default CaseTypePage;
|
||||||
|
|
||||||
/*
|
|
||||||
<Typeahead
|
|
||||||
className="flex-grow-1 create-case-taginput"
|
|
||||||
id="case-type-search"
|
|
||||||
labelKey="tagName"
|
|
||||||
options={parsedTags}
|
|
||||||
minLength={1}
|
|
||||||
ref={typeaheadRef}
|
|
||||||
placeholder="Case Type - start typing"
|
|
||||||
onChange={(selected) => {
|
|
||||||
let item = null;
|
|
||||||
for (const currentItem of selected) {
|
|
||||||
item = { ...currentItem };
|
|
||||||
}
|
|
||||||
setSelectedTag(item);
|
|
||||||
typeaheadRef.current.clear();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div className="case-tag-container">
|
|
||||||
{selectedCaseTags.map((tag, i) => (
|
|
||||||
<div className="tag-container">
|
|
||||||
<div className="tag-box">
|
|
||||||
<div className="tag-ex-box">
|
|
||||||
<div className="tag-ex"> x</div>
|
|
||||||
</div>
|
|
||||||
<div className="casetag-name">{tag}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<Radiogroup
|
|
||||||
title="Client position"
|
|
||||||
options={radioOptions}
|
|
||||||
value={data.clientPosition.value}
|
|
||||||
disabled={isBusy}
|
|
||||||
onClick={(e) => handleChangeInput(e, "clientPosition")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|||||||
43
src/pageElements/TagSelector.js
Normal file
43
src/pageElements/TagSelector.js
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
/*
|
||||||
|
<Typeahead
|
||||||
|
className="flex-grow-1 create-case-taginput"
|
||||||
|
id="case-type-search"
|
||||||
|
labelKey="tagName"
|
||||||
|
options={parsedTags}
|
||||||
|
minLength={1}
|
||||||
|
ref={typeaheadRef}
|
||||||
|
placeholder="Case Type - start typing"
|
||||||
|
onChange={(selected) => {
|
||||||
|
let item = null;
|
||||||
|
for (const currentItem of selected) {
|
||||||
|
item = { ...currentItem };
|
||||||
|
}
|
||||||
|
setSelectedTag(item);
|
||||||
|
typeaheadRef.current.clear();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="case-tag-container">
|
||||||
|
{selectedCaseTags.map((tag, i) => (
|
||||||
|
<div className="tag-container">
|
||||||
|
<div className="tag-box">
|
||||||
|
<div className="tag-ex-box">
|
||||||
|
<div className="tag-ex"> x</div>
|
||||||
|
</div>
|
||||||
|
<div className="casetag-name">{tag}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<Radiogroup
|
||||||
|
title="Client position"
|
||||||
|
options={radioOptions}
|
||||||
|
value={data.clientPosition.value}
|
||||||
|
disabled={isBusy}
|
||||||
|
onClick={(e) => handleChangeInput(e, "clientPosition")}
|
||||||
|
/>
|
||||||
|
|
||||||
|
*/
|
||||||
|
*/
|
||||||
@@ -1,14 +1,14 @@
|
|||||||
.casetype-container {
|
.type-row {
|
||||||
width: 920px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.casetype-form {
|
.type-col {
|
||||||
width: 100%;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.case-tag-container {
|
.case-tag-container {
|
||||||
|
|||||||
Reference in New Issue
Block a user