Merge pull request #66 from kjannette/hag

Hag

src/Components/Case/CaseTypePage.js

@@ -3,7 +3,8 @@ import { useNavigate } from "react-router-dom";
 import { useParams } from "react-router-dom";
 import { Typeahead } from "react-bootstrap-typeahead";
 import { AppContext } from "../../Hooks/useContext/appContext.js";
-import { doc, onSnapshot } from "firebase/firestore";
+import { updateDoc, doc, onSnapshot } from "firebase/firestore";
+import Button from "../../pageElements/Button";
 import Radiogroup from "../../pageElements/Radiogroup";
 import { caseTags } from "../../Constants/Tags/CaseTags";
 import { db } from "../../firebase";
@@ -22,7 +23,7 @@ const CaseTypePage = () => {
   const [leadAttorney, setLeadAttorney] = useState("");
   const [radioValue, setRadioValue] = useState();
   const [selectedCaseTags, setSelectedCaseTags] = useState([]);
-
+  const [isBusy, setIsBusy] = useState(false);
   const typeaheadRef = useRef();
 
   function getCase() {
@@ -58,8 +59,37 @@ const CaseTypePage = () => {
     setRadioValue(e.value);
   };
 
+  const handleSave = () => {
+    console.log("handleSave");
+  };
+
+  async function saveCaseData() {
+    if (isBusy) {
+      return;
+    }
+    const dataValues = {
+      leadAttorney: leadAttorney,
+    };
+
+    setIsBusy(true);
+    try {
+      await updateDoc(doc(db, "cases", caseId), dataValues);
+    } catch (err) {
+      console.log("Error updating case:", err);
+    }
+
+    setIsBusy(false);
+  }
+
   return (
     <div className="type-container">
+      <div
+        clasName="casetype-header"
+        style={{ marginTop: "22px", marginBottom: "12px" }}
+      >
+        <h3 className="doc-header-text">Additional Case Information</h3>
+      </div>
+
       <div className="type-row">
         <div className="type-col">
           <input
@@ -105,15 +135,15 @@ const CaseTypePage = () => {
         </div>
       </div>
       <div className="type-row">
-        <div className="type-col">
+        <div className="type-col create-case-taginput">
           <Typeahead
-            className="flex-grow-1 create-case-taginput"
+            className="flex-grow-1"
             id="case-type-search"
             labelKey="tagName"
             options={parsedTags}
             minLength={1}
             ref={typeaheadRef}
-            placeholder="Case Type - start typing"
+            placeholder="Case Type - start typing to search"
             onChange={(selected) => {
               let item = null;
               for (const currentItem of selected) {
@@ -137,14 +167,23 @@ const CaseTypePage = () => {
           </div>
         </div>
         <div className="type-col">
-          <Radiogroup
-            title="Client position"
-            options={radioOptions}
-            value={radioValue}
-            onClick={(e) => handleSetRadioValue(e, "clientPosition")}
-          />
+          <div className="radio-wrapper">
+            <Radiogroup
+              title="Client position"
+              options={radioOptions}
+              value={radioValue}
+              onClick={(e) => handleSetRadioValue(e, "clientPosition")}
+            />
+          </div>
         </div>
       </div>
+      <div className="caseType-button-container">
+        <Button
+          className="pt-2 pb-2 mr-2 primary-button"
+          onClick={saveCaseData}
+          labelText="Next"
+        />
+      </div>
     </div>
   );
 };

src/styles/casetype-page.scss

@@ -21,6 +21,12 @@
   display: flex;
   flex-direction: column;
   width: 50%;
+  margin: 12px;
+}
+
+.create-case-taginput {
+  display: flex;
+  height: 35px;
 }
 
 .case-tag-container {
@@ -52,14 +58,27 @@
 
 .tag-ex {
   cursor: pointer;
-  margin-top: -7px;
+  margin-top: -6px;
   font-weight: 500;
-  font-size: 0.88rem;
+  font-size: 0.98rem;
   height: 20px;
-  background-color: blue;
 }
 
 .casetag-name {
   font-size: 0.94rem;
-  padding: 0px 6px;
+  padding: 0px 8px;
+}
+
+.caseType-button-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  width: 100%;
+}
+
+.radio-wrapper {
+  padding-left: 8px;
+  margin-top: -3px;
+  border: 1px solid #eaeaea;
+  border-radius: 10px;
 }

src/styles/radio-group.scss

@@ -76,7 +76,6 @@
   justify-content: center;
   align-items: center;
   border-radius: 50%;
-  border: 1px solid #f27300;
 }
 
 .circle-container > svg {