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,158 +111,194 @@ 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>
-                  <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>
-                    ))}
+      <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"
+              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>
+          <Col className="mb-3">
+            {isEditing ? (
+              <div className="edit-modal-label">Position</div>
+            ) : (
+              <></>
+            )}
+          </Col>
+        </Row>
+        <Row>
+          <Col className="mb-3">
+            {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>
+  );
+};
 
-                <div className="radio-group-wrapper">
-                  <Radiogroup
+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")}
                   />
-                </div>
-              </div>
-            </Col>
-          </Row>
-          <Row>
-            <Col className="mb-3">
-              {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>
-    </div>
-  );
-};
-
-export default CaseTypePage;
+  
+              */

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;
+}