more
This commit is contained in:
Kenneth Jannette
@@ -1,318 +1,32 @@
|
||||
import { useEffect, useContext, useState, useRef } 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 { useState } from "react";
|
||||
import "../../styles/casetype-page.scss";
|
||||
|
||||
const CaseTypePage = ({ caseData }) => {
|
||||
const { caseId } = useParams();
|
||||
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 = () => {
|
||||
const CaseTypePage = () => {
|
||||
const [email, setEmail] = useState("");
|
||||
const [contactName, setContactName] = useState("");
|
||||
return (
|
||||
<div className="details-button-container">
|
||||
<div className="details-button-box">
|
||||
<Button
|
||||
className="secondary-button back-button"
|
||||
labelText="Somewhere"
|
||||
/>
|
||||
<div className="upload-button-box">
|
||||
<Button className="p-2 mr-2 primary-button" labelText="Something" />
|
||||
<div className="type-row">
|
||||
<div className="type-col">
|
||||
<input
|
||||
type="email"
|
||||
className="form-control"
|
||||
id="emailInput"
|
||||
placeholder="Contact Name"
|
||||
value={email}
|
||||
onChange={(e) => setContactName(e.target.value)}
|
||||
></input>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
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;
|
||||
|
||||
/*
|
||||
<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 {
|
||||
width: 920px;
|
||||
.type-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.casetype-form {
|
||||
width: 100%;
|
||||
.type-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.case-tag-container {
|
||||
|
||||
Reference in New Issue
Block a user