Merge pull request #65 from kjannette/caseType

Case type

src/Components/Case/CaseTypePage.js

@@ -1,54 +1,29 @@
-import { useEffect, useContext, useState, useRef } from "react";
+import React, { 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 { AppContext } from "../../Hooks/useContext/appContext.js";
+import { doc, onSnapshot } from "firebase/firestore";
+import Radiogroup from "../../pageElements/Radiogroup";
 import { caseTags } from "../../Constants/Tags/CaseTags";
+import { db } from "../../firebase";
 import "../../styles/casetype-page.scss";
 
-const CaseTypePage = ({ caseData }) => {
+const CaseTypePage = () => {
   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(
+  const [subCase, setSubCase] = useState();
-    getFormDataDefaults(fields, isEditing ? caseData : undefined)
+  const [email, setEmail] = useState("");
-  );
+  const [contactName, setContactName] = useState("");
-  const [isBusy, setIsBusy] = useState(false);
+  const [billingCode, setBillingCode] = useState("");
+  const [leadAttorney, setLeadAttorney] = useState("");
+  const [radioValue, setRadioValue] = useState();
+  const [selectedCaseTags, setSelectedCaseTags] = useState([]);
 
-  const parsedTags = dJSON.parse(JSON.stringify(caseTags));
+  const typeaheadRef = useRef();
-
-  const handleNavigate = () => {
-    navigate("/documents");
-  };
-
-  const handleBack = () => {
-    navigate("/cases");
-  };
 
   function getCase() {
     const docRef = doc(db, "cases", caseId);
@@ -62,14 +37,9 @@ const CaseTypePage = ({ caseData }) => {
     return unsub;
   }
 
-  useEffect(getCase, [caseId, appUserId]);
+  const parsedTags = JSON.parse(JSON.stringify(caseTags));
 
-  const handleChangeInput = (e, name) => {
+  useEffect(getCase, [caseId, appUserId]);
-    const newData = handleFormDataChange(e, name, data, fields);
-    if (newData !== null) {
-      setData(newData);
-    }
-  };
 
   const setSelectedTag = (item) => {
     console.log("item in setSelectedTag ---------------------->", item);
@@ -78,228 +48,105 @@ const CaseTypePage = ({ caseData }) => {
     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 ButtonContent = () => {
-    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>
-        </div>
-      </div>
-    );
-  };
-
   const radioOptions = [
     { name: "Plaintiff", label: "Plaintiff", value: "Plaintiff" },
     { name: "Defendant", label: "Defendant", value: "Defendant" },
   ];
 
-  if (!group) {
+  const handleSetRadioValue = (e) => {
-    return null;
+    console.log("e", e);
-  }
+    setRadioValue(e.value);
+  };
 
   return (
-    <div className="casetype-container">
+    <div className="type-container">
-      <Form style={{ width: "100%" }}>
+      <div className="type-row">
-        <Row>
+        <div className="type-col">
-          <Col className="mb-3">
+          <input
-            {isEditing ? (
+            type="email"
-              <div className="edit-modal-label">Case Type</div>
+            className="form-control"
-            ) : (
+            id="attorneyInput"
-              <></>
+            placeholder="Lead Attorney"
-            )}
+            value={leadAttorney}
-            <Typeahead
+            onChange={(e) => setLeadAttorney(e.target.value)}
-              className="flex-grow-1 create-case-taginput"
+          ></input>
-              id="case-type-search"
+        </div>
-              labelKey="tagName"
+        <div className="type-col">
-              options={parsedTags}
+          <input
-              minLength={1}
+            type="email"
-              ref={typeaheadRef}
+            className="form-control"
-              placeholder="Case Type - start typing"
+            id="billingInput"
-              onChange={(selected) => {
+            placeholder="Billing Code"
-                let item = null;
+            value={billingCode}
-                for (const currentItem of selected) {
+            onChange={(e) => setBillingCode(e.target.value)}
-                  item = { ...currentItem };
+          ></input>
-                }
+        </div>
-                setSelectedTag(item);
+      </div>
-                typeaheadRef.current.clear();
+      <div className="type-row">
-              }}
+        <div className="type-col">
-            />
+          <input
-            <div className="case-tag-container">
+            type="email"
-              {selectedCaseTags.map((tag, i) => (
+            className="form-control"
-                <div className="tag-container">
+            id="emailInput"
-                  <div className="tag-box">
+            placeholder="Contact Name"
-                    <div className="tag-ex-box">
+            value={contactName}
-                      <div className="tag-ex"> x</div>
+            onChange={(e) => setContactName(e.target.value)}
-                    </div>
+          ></input>
-                    <div className="casetag-name">{tag}</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 className="type-row">
+        <div className="type-col">
+          <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>
+            ))}
-          </Col>
+          </div>
-          <Col className="mb-3">
+        </div>
-            {isEditing ? (
+        <div className="type-col">
-              <div className="edit-modal-label">Position</div>
+          <Radiogroup
-            ) : (
+            title="Client position"
-              <></>
+            options={radioOptions}
-            )}
+            value={radioValue}
-          </Col>
+            onClick={(e) => handleSetRadioValue(e, "clientPosition")}
-        </Row>
+          />
-        <Row>
+        </div>
-          <Col className="mb-3">
+      </div>
-            {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>
     </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")}
-                  />
-  
-              */

src/pageElements/TagSelector.js

@@ -0,0 +1,42 @@
+/*
+              <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={radioValue}
+                    disabled={isBusy}
+                    onClick={(e) => setRadioValue(e, "clientPosition")}
+                  />
+  
+              */

src/styles/casetype-page.scss

@@ -1,36 +1,48 @@
-.casetype-container {
+.type-container {
-  width: 920px;
   display: flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
   margin-left: auto;
   margin-right: auto;
-  align-items: center;
+  width: 900px;
 }
 
-.casetype-form {
+.type-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
   width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.type-col {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
 }
 
 .case-tag-container {
   display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
   border: 1px solid red;
-  height: 300px;
+  padding-top: 8px;
 }
 
 .tag-container {
-  display: flex;
+  height: 30px;
-  flex-direction: row;
+  margin-top: 8px;
-  height: 50px;
+  margin-bottom: 8px;
-  justify-content: center;
   align-items: center;
 }
 
 .tag-box {
   background-color: rgba(224, 224, 224, 0.421);
   display: flex;
-  flex-direction: row;
   border-radius: 8px;
-  margin: 6px 4px;
+  margin: 4px 4px;
   padding: 6px;
 }
 
@@ -39,9 +51,12 @@
 }
 
 .tag-ex {
+  cursor: pointer;
   margin-top: -7px;
   font-weight: 500;
   font-size: 0.88rem;
+  height: 20px;
+  background-color: blue;
 }
 
 .casetag-name {