more

src/Components/Case/CaseTypePage.js

@@ -13,14 +13,17 @@ import {
   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";
 
-const CaseTypePage = () => {
+const CaseTypePage = ({ caseData }) => {
   const { caseId } = useParams();
   const navigate = useNavigate();
   const { appState } = useContext(AppContext);
@@ -31,7 +34,9 @@ const CaseTypePage = () => {
   const typeaheadRef = useRef();
   const appUserId = group ? group.appUserId : null;
   const [data, setData] = useState(fields);
-
+  const [isBusy, setIsBusy] = useState(false);
+  const [isEditing, setFsEditing] = useState(false);
+  const parsedTags = dJSON.parse(JSON.stringify(caseTags));
   const handleNavigate = () => {
     navigate("/documents");
   };
@@ -54,6 +59,13 @@ const CaseTypePage = () => {
 
   useEffect(getCase, [caseId, appUserId]);
 
+  const handleChangeInput = (e, name) => {
+    const newData = handleFormDataChange(e, name, data, fields);
+    if (newData !== null) {
+      setData(newData);
+    }
+  };
+
   const setSelectedTag = (item) => {
     console.log("item in setSelectedTag ---------------------->", item);
     const temp = [...selectedCaseTags, item.tagName];
@@ -84,6 +96,11 @@ const CaseTypePage = () => {
     );
   };
 
+  const radioOptions = [
+    { name: "Plaintiff", label: "Plaintiff", value: "Plaintiff" },
+    { name: "Defendant", label: "Defendant", value: "Defendant" },
+  ];
+
   if (!group) {
     return null;
   }
@@ -94,7 +111,146 @@ const CaseTypePage = () => {
         <div>Additional Case Details</div>
         <div></div>
         <Form>
-          <Row className="modal-caption-row"></Row>
+          <Row className="modal-caption-row">
+            <Col>
+              <div className="foo-bar-row">
+                <div className="typeahead-box">
+                  <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">
+                            <div className="tag-ex"> x</div>
+                          </div>
+                          <div className="casetag-name">{tag}</div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="radio-group-wrapper">
+                  <Radiogroup
+                    title="Client position"
+                    options={radioOptions}
+                    value={data.clientPosition.value}
+                    disabled={isBusy}
+                    onClick={(e) => handleChangeInput(e, "clientPosition")}
+                  />
+                </div>
+              </div>
+            </Col>
+          </Row>
+          <Row>
+            <Col className="mb-3">
+              <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>
       </div>
     </div>

src/Components/Modals/CreateModal.js

@@ -111,11 +111,6 @@ const CreateModal = ({ setShowModal, caseData }) => {
     }
   };
 
-  const radioOptions = [
-    { name: "Plaintiff", label: "Plaintiff", value: "Plaintiff" },
-    { name: "Defendant", label: "Defendant", value: "Defendant" },
-  ];
-
   const modalInputForm = (
     <>
       <p className="create-modal-header">