Merge pull request #64 from kjannette/tagsNEW

Tags new

src/Components/Modals/CreateModal.js

@@ -12,6 +12,8 @@ import { AppContext } from "../../Hooks/useContext/appContext.js";
 import { db } from "../../firebase";
 import { objectMap } from "../../Utils/Object";
 import { createCaseFields as fields } from "../../Constants/Fields/CreateCaseFields.js";
+import { createCaseAdditionalFields as additionalFields } from "../../Constants/Fields/CreateCaseFields.js";
+
 import "../../styles/modals.scss";
 import {
   getFormDataDefaults,
@@ -91,10 +93,6 @@ const CreateModal = ({ setShowModal, caseData }) => {
     }
   };
 
-  const handleCreateCaseNavigation = (caseId) => {
-    // console.log("caseId in handleCreateCaseNavigation", caseId);
-  };
-
   const handleCreateCase = (e) => {
     e.preventDefault();
     const dataValues = validateData();
@@ -337,7 +335,6 @@ const CreateModal = ({ setShowModal, caseData }) => {
               }
             />
           </Col>
-
           <Col className="mb-3">
             {isEditing ? (
               <div className="edit-modal-label">Plaintiff(s)</div>
@@ -362,166 +359,6 @@ const CreateModal = ({ setShowModal, caseData }) => {
             />
           </Col>
         </Row>
-        <Row>
-          <Col className="mb-3">
-            {isEditing ? (
-              <div className="edit-modal-label">Contast first name</div>
-            ) : (
-              <></>
-            )}
-            <TextInput
-              key={"contactFirstName"}
-              name={"contactFirstName"}
-              value={data.contactFirstName.value}
-              error={data.contactFirstName.error}
-              message={data.contactFirstName.message}
-              disabled={isBusy}
-              onChange={(e) => handleChangeInput(e, "contactFirstName")}
-              label={
-                data.contactFirstName.value.length === 0
-                  ? isEditing
-                    ? caseData.contactFirstName
-                    : "Contact First Name"
-                  : ""
-              }
-            />
-          </Col>
-
-          <Col className="mb-3">
-            {isEditing ? (
-              <div className="edit-modal-label">Contact last name</div>
-            ) : (
-              <></>
-            )}
-            <TextInput
-              key={"contactLastName"}
-              name={"contactLastName"}
-              value={data.contactLastName.value}
-              error={data.contactLastName.error}
-              message={data.contactLastName.message}
-              disabled={isBusy}
-              onChange={(e) => handleChangeInput(e, "contactLastName")}
-              label={
-                data.contactLastName.value.length === 0
-                  ? isEditing
-                    ? caseData.contactLastName
-                    : "Contact Last Name"
-                  : ""
-              }
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col className="mb-3">
-            {isEditing ? (
-              <div className="edit-modal-label">Case type</div>
-            ) : (
-              <></>
-            )}
-            <TextInput
-              key={"caseType"}
-              name={"caseType"}
-              value={data.caseType.value}
-              error={data.caseType.error}
-              message={data.caseType.message}
-              disabled={isBusy}
-              onChange={(e) => handleChangeInput(e, "caseType")}
-              label={
-                data.caseType.value.length === 0
-                  ? isEditing
-                    ? caseData.caseType
-                    : "Case Type"
-                  : ""
-              }
-            />
-          </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>
-        <Row>
-          <Col>
-            <div className="radio-group-wrapper">
-              <Radiogroup
-                title="Client position"
-                options={radioOptions}
-                value={data.clientPosition.value}
-                disabled={isBusy}
-                onClick={(e) => handleChangeInput(e, "clientPosition")}
-              />
-            </div>
-          </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">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></Col>
-        </Row>
       </Form>
     </>
   );
@@ -553,3 +390,114 @@ const CreateModal = ({ setShowModal, caseData }) => {
 };
 
 export default CreateModal;
+
+/*
+          <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, "contactName")}
+              label={
+                data.contactName.value.length === 0
+                  ? isEditing
+                    ? caseData.contactName
+                    : "Contact Name"
+                  : ""
+              }
+            />
+          </Col>
+
+                    <Col className="mb-3">
+            {isEditing ? (
+              <div className="edit-modal-label">Case type</div>
+            ) : (
+              <></>
+            )}
+            <TextInput
+              key={"caseType"}
+              name={"caseType"}
+              value={data.caseType.value}
+              error={data.caseType.error}
+              message={data.caseType.message}
+              disabled={isBusy}
+              onChange={(e) => handleChangeInput(e, "caseType")}
+              label={
+                data.caseType.value.length === 0
+                  ? isEditing
+                    ? caseData.caseType
+                    : "Case Type"
+                  : ""
+              }
+            />
+          </Col>
+
+
+            <Col>
+            <div className="radio-group-wrapper">
+              <Radiogroup
+                title="Client position"
+                options={radioOptions}
+                value={data.clientPosition.value}
+                disabled={isBusy}
+                onClick={(e) => handleChangeInput(e, "clientPosition")}
+              />
+            </div>
+          </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>
+
+                    <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>
+          */

src/Constants/Fields/CreateCaseFields.js

@@ -6,15 +6,17 @@ export const createCaseFields = {
   plaintiffParties: { required: true, maxLength: 45 },
   defendantParties: { required: true, maxLength: 45 },
   jurisdiction: { required: true, maxLength: 45 },
-  billingCode: { required: true, maxLength: 45 },
   venue: { required: true, maxLength: 45 },
-  caseType: { required: true, maxLength: 45 },
   trialDate: { required: true, maxLength: 45, type: "date" },
   filedDate: { required: true, maxLength: 45, type: "date" },
-  contactFirstName: { required: true, maxLength: 45 },
-  contactLastName: { required: true, maxLength: 45 },
-  contactEmail: { required: true, maxLength: 45, type: "email" },
-  leadAttorneys: { required: true, maxLength: 45 },
   lawFirm: { required: false, maxLength: 45 },
-  clientPosition: { required: true, default: "Plaintiff" },
+};
+
+export const createCaseAdditionalFields = {
+  contactEmail: { required: true, maxLength: 45, type: "email" },
+  contactName: { required: true, maxLength: 45 },
+  clientPosition: { required: true, default: "Plaintiff" },
+  caseType: { required: true, maxLength: 45 },
+  billingCode: { required: true, maxLength: 45 },
+  leadAttorneys: { required: true, maxLength: 45 },
 };

src/styles/modals.scss

@@ -31,16 +31,17 @@
 
 .create-modal-header {
   padding-left: 15px;
-  margin-bottom: 29px;
+  margin-bottom: 14px;
   font-weight: 500;
   letter-spacing: 0.009rem;
   line-height: 1.2rem;
 }
 
 .modal-caption-row {
+  height: 190px;
   background-color: rgba(230, 230, 230, 0.3254901961);
   padding: 15px;
-  margin-bottom: 12px;
+  margin-bottom: 24px;
   margin-left: 2px;
   margin-right: 2px;
   border-radius: 10px;
@@ -54,7 +55,7 @@
   font-weight: 500;
   letter-spacing: 0.009rem;
   line-height: 1.2rem;
-  margin: 20px 0px;
+  margin: 10px 0px;
 }
 
 .caption-one-container {