first commit

src/pageElements/Cards.js

@@ -0,0 +1,336 @@
+import React from "react";
+import Button from "../pageElements/Button.js";
+import { FileEarmarkText } from "react-bootstrap-icons";
+import TextInput from "../pageElements/TextInput";
+
+export const InfoCard = (props) => {
+  const { data, onEdit, onCancel, onSave, onChangeInput, isEditing, isBusy } =
+    props;
+
+  const {
+    caseNumber,
+    caption,
+    jurisdiction,
+    judge,
+    venue,
+    caseType,
+    trialDate,
+    filedDate,
+    contactFirstName,
+    contactLastName,
+    contactEmail,
+    attorneys,
+    parties,
+  } = data;
+
+  /*
+  const [editPLaintiffs, setEditPLaintiffs] = useState(plaintiffs);
+  const [editDefendants, setEditDefendants] = useState(defendants);
+  */
+
+  const editingContent = () => {
+    return (
+      <>
+        <div className="info-column">
+          <div className="info-row">Case caption:</div>
+          <TextInput
+            id="caption"
+            disa
+            inputClassName="info-edit-input"
+            value={caption}
+            disabled={isBusy}
+            onChange={(e) => onChangeInput(e, "caption")}
+          />
+          <div className="info-row">Jurisdiction:</div>
+          <TextInput
+            id="jurisdiction"
+            inputClassName="info-edit-input"
+            value={jurisdiction}
+            disabled={isBusy}
+            onChange={(e) => onChangeInput(e, "jurisdiction")}
+          />
+          <div className="info-row">Judge:</div>
+          <TextInput
+            id="judge"
+            inputClassName="info-edit-input"
+            value={judge}
+            disabled={isBusy}
+            onChange={(e) => onChangeInput(e, "judge")}
+          />
+          <div className="info-row">Venue:</div>
+          <TextInput
+            id="venue"
+            inputClassName="info-edit-input"
+            value={venue}
+            disabled={isBusy}
+            onChange={(e) => onChangeInput(e, "venue")}
+          />
+          {caseType || isEditing ? (
+            <>
+              <div className="info-row">Case type:</div>
+              <div>
+                <TextInput
+                  id="caseType"
+                  inputClassName="info-edit-input"
+                  value={caseType}
+                  disabled={isBusy}
+                  onChange={(e) => onChangeInput(e, "caseType")}
+                />
+              </div>
+            </>
+          ) : (
+            <></>
+          )}
+          <div className="info-row">Trial date:</div>
+          <TextInput
+            id="trialDate"
+            inputClassName="info-edit-input"
+            value={trialDate}
+            disabled={isBusy}
+            onChange={(e) => onChangeInput(e, "trialDate")}
+          />
+        </div>
+        <div className="info-column">
+          <div className="info-row">Index number:</div>
+          <TextInput
+            id="caseNumber"
+            inputClassName="info-edit-input"
+            value={caseNumber}
+            disabled={isBusy}
+            onChange={(e) => onChangeInput(e, "caseNumber")}
+          />
+          <div className="info-row">Date filed:</div>
+          <TextInput
+            id="dateFiled"
+            inputClassName="info-edit-input"
+            value={filedDate}
+            disabled={isBusy}
+            onChange={(e) => onChangeInput(e, "filedDate")}
+          />
+          <div className="info-row">
+            Contact:
+            <TextInput
+              id="contactFirst"
+              inputClassName="info-edit-input"
+              value={contactFirstName}
+              disabled={isBusy}
+              onChange={(e) => onChangeInput(e, "contactFirstName")}
+            />
+            <TextInput
+              id="contactLast"
+              inputClassName="info-edit-input"
+              value={contactLastName}
+              disabled={isBusy}
+              onChange={(e) => onChangeInput(e, "contactLastName")}
+            />
+          </div>
+          <div className="info-row">Contact email:</div>
+          <TextInput
+            id="contactEmail"
+            inputClassName="info-edit-input"
+            value={contactEmail}
+            disabled={isBusy}
+            onChange={(e) => onChangeInput(e, "contactEmail")}
+          />
+          <div className="info-row">Lead attorneys:</div>
+          <TextInput
+            id="leadAttorneys"
+            inputClassName="info-edit-input"
+            value={attorneys}
+            disabled={isBusy}
+            onChange={(e) => onChangeInput(e, "attorneys")}
+          />
+        </div>
+      </>
+    );
+  };
+
+  const infoContent = () => {
+    return (
+      <>
+        <div className="info-column">
+          <div className="info-row">
+            Case caption: <p className="info-text"> {caption}</p>
+          </div>
+          <div className="info-row">
+            Jurisdiction: <p className="info-text"> {jurisdiction}</p>
+          </div>
+          <div className="info-row">
+            Judge: <p className="info-text"> {judge}</p>
+          </div>
+          <div className="info-row">
+            Venue: <p className="info-text"> {venue}</p>
+          </div>
+          {caseType ? (
+            <div className="info-row">
+              Case type: <p className="info-text"> {caseType}</p>
+            </div>
+          ) : (
+            <></>
+          )}
+          <div className="info-row">
+            Trial date: <p className="info-text"> {trialDate}</p>
+          </div>
+        </div>
+        <div className="info-column">
+          <div className="info-row">
+            Index number: <p className="info-text"> {caseNumber}</p>
+          </div>
+          <div className="info-row">
+            Date filed: <p className="info-text"> {filedDate}</p>
+          </div>
+          <div className="info-row">
+            Contact:
+            <p className="info-text">
+              {contactFirstName} {contactLastName}
+            </p>
+          </div>
+          <div className="info-row">
+            Contact email: <p>{contactEmail}</p>
+          </div>
+          <div className="info-row">
+            Lead attorneys: <p className="info-text"> {attorneys}</p>
+          </div>
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <div className="info-card-outer">
+      <div className="info-upper-wrapper">
+        {isEditing ? editingContent() : infoContent()}
+      </div>
+      <div className="info-button-wrapper">
+        {isEditing ? (
+          <>
+            <Button
+              onClick={() => onSave()}
+              labelText="Save"
+              className="btn primary-button save-button"
+              disabled={isBusy}
+            />
+            <Button
+              onClick={() => onCancel()}
+              labelText="Cancel"
+              className="btn primary-button cancel-button"
+              disabled={isBusy}
+            />
+          </>
+        ) : (
+          <Button
+            onClick={() => onEdit()}
+            labelText="Edit"
+            className="btn primary-button edit-button"
+            disabled={isBusy}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const CaseCard = (props) => {
+  const {
+    caption,
+    captionTwo,
+    caseNumber,
+    filedDate,
+    jurisdiction,
+    caseId,
+    onClick,
+    labelText,
+  } = props;
+
+  return (
+    <div className="linkcard-container">
+      <div className="card-col1">
+        {caption} v. {captionTwo}
+      </div>
+      <div className="card-col2">{jurisdiction}</div>
+      <div className="card-col3">
+        <p className="card-text">{`Filed: ${filedDate}`}</p>
+      </div>
+      <div className="card-col4">{caseNumber}</div>
+      <div className="card-viewButton-container">
+        <Button
+          onClick={() => onClick(caseId)}
+          labelText={labelText}
+          className="btn btn-primary view-button"
+        />
+      </div>
+    </div>
+  );
+};
+
+export const DocCard = (props) => {
+  const {
+    title,
+    parentCaseNumber,
+    parentCaseName,
+    parentCaseId,
+    documentId,
+    dateServed,
+    openDocument,
+    docType,
+    displayDeleteButton,
+    handleNavigate,
+    responseGenerations,
+    confirmDelete,
+  } = props;
+  const disabled = docType ? false : true;
+  return (
+    <div className="doc-card-container">
+      <div className="doc-card-input">
+        <div className="card-col-icon">
+          <FileEarmarkText
+            className="doc-file-icon"
+            onClick={() => openDocument(documentId)}
+            size="22px"
+          />
+        </div>
+        <div className="doc-col2">{title}</div>
+        {dateServed ? (
+          <div className="doc-col3">Served: {dateServed}</div>
+        ) : (
+          <></>
+        )}
+        <div className="doc-col4">
+          <div className="jurisdiction-box">{parentCaseName}</div>
+        </div>
+        <div className="doc-col5">{parentCaseNumber}</div>
+        <div className="doc-col6">
+          {displayDeleteButton ? (
+            <Button
+              onClick={() =>
+                confirmDelete(documentId, docType, responseGenerations)
+              }
+              labelText="Delete"
+              className="btn btn-primary view-button delete-one"
+            />
+          ) : (
+            <></>
+          )}
+        </div>
+      </div>
+      <div className="doccard-button-wrapper">
+        <Button
+          disabled={disabled}
+          className={"primary-button pt-2 pb-2 gen-button"}
+          onClick={() =>
+            documentId &&
+            handleNavigate(
+              documentId,
+              responseGenerations,
+              parentCaseId,
+              docType
+            )
+          }
+          labelText={
+            responseGenerations > 0 ? "Edit Response" : "Generate Response"
+          }
+        />
+      </div>
+    </div>
+  );
+};