more

src/Components/Case/CaseTypePage.js

@@ -22,6 +22,7 @@ import { createCaseAdditionalFields as fields } from "../../Constants/Fields/Cre
 import { objectMap } from "../../Utils/Object";
 import { Typeahead } from "react-bootstrap-typeahead";
 import { caseTags } from "../../Constants/Tags/CaseTags";
+import "../../styles/casetype-page.scss";
 
 const CaseTypePage = ({ caseData }) => {
   const { caseId } = useParams();
@@ -110,15 +111,14 @@ const CaseTypePage = ({ caseData }) => {
 
   return (
     <div className="casetype-container">
-      <div className="casetype-heading-container">
-        <div>Additional Case Details</div>
-        <div></div>
-        <Form>
-          <Row className="modal-caption-row">
-            <Col>
-              <div className="foo-bar-row">
-                <div className="typeahead-box">
-                  <div className="edit-modal-label">Case type</div>
+      <Form className="casetype-form">
+        <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"
@@ -148,18 +148,13 @@ const CaseTypePage = ({ caseData }) => {
                 </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>
+          <Col className="mb-3">
+            {isEditing ? (
+              <div className="edit-modal-label">Position</div>
+            ) : (
+              <></>
+            )}
           </Col>
         </Row>
         <Row>
@@ -260,8 +255,50 @@ const CaseTypePage = ({ caseData }) => {
         </Row>
       </Form>
     </div>
-    </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/styles/case-type-page.scss

@@ -1,7 +0,0 @@
-.casetype-container {
-  display: flex;
-  flex-direction: column;
-  margin-right: auto;
-  margin-left: auto;
-  align-items: center;
-}

src/styles/casetype-page.scss

@@ -0,0 +1,14 @@
+.casetype-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.casetype-form {
+  width: 100%;
+}
+.case-tag-container {
+  display: flex;
+  background-color: red;
+  height: 300px;
+}