more

src/Components/Case/CaseTypePage.js

@@ -21,6 +21,9 @@ const CaseTypePage = () => {
   const [billingCode, setBillingCode] = useState("");
   const [leadAttorney, setLeadAttorney] = useState("");
   const [radioValue, setRadioValue] = useState();
+  const [selectedCaseTags, setSelectedCaseTags] = useState([]);
+
+  const typeaheadRef = useRef();
 
   function getCase() {
     const docRef = doc(db, "cases", caseId);
@@ -35,7 +38,16 @@ const CaseTypePage = () => {
   }
 
   const parsedTags = JSON.parse(JSON.stringify(caseTags));
+
   useEffect(getCase, [caseId, appUserId]);
+
+  const setSelectedTag = (item) => {
+    console.log("item in setSelectedTag ---------------------->", item);
+    const temp = [...selectedCaseTags, item.tagName];
+    setSelectedCaseTags(temp);
+    console.log("selectedCaseTags", selectedCaseTags);
+  };
+
   const radioOptions = [
     { name: "Plaintiff", label: "Plaintiff", value: "Plaintiff" },
     { name: "Defendant", label: "Defendant", value: "Defendant" },
@@ -93,7 +105,37 @@ const CaseTypePage = () => {
         </div>
       </div>
       <div className="type-row">
-        <div className="type-col"></div>
+        <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>
+        </div>
         <div className="type-col">
           <Radiogroup
             title="Client position"