first commit

src/pageElements/Button.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+const Button = (props) => {
+  const { className, variant, color, onClick, labelText, disabled } = props;
+  const buttonClass = disabled ? "primary-disabled" : className;
+  return (
+    <button
+      disabled={disabled}
+      className={buttonClass}
+      variant={variant}
+      color={color}
+      onClick={onClick}
+    >
+      {labelText}
+    </button>
+  );
+};
+
+export default Button;

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

src/pageElements/DetailCard.js

@@ -0,0 +1,81 @@
+import React from "react";
+import "../styles/detailcard.scss";
+
+export const DetailCard = (props) => {
+  const { data } = props;
+
+  const {
+    caseNumber,
+    caption,
+    jurisdiction,
+    judge,
+    venue,
+    caseType,
+    trialDate,
+    filedDate,
+    contactFirstName,
+    contactLastName,
+    contactEmail,
+    attorneys,
+    parties,
+  } = data;
+
+  return (
+    <div className="det-card-card-outer">
+      <div className="detail-card-row">
+        <div className="detail-card-col">
+          <div className="detail-card-detail">
+            <p className="detail-subhead"> Trial Date:</p>
+            <p className="detail-text"> {trialDate}</p>
+          </div>
+          <div className="detail-card-detail">
+            <p className="detail-subhead"> Date Filed:</p>
+            <p className="detail-text"> {filedDate}</p>
+          </div>
+          <div className="detail-card-detail">
+            <p className="detail-subhead">Lead attorney(s):</p>
+            <p className="detail-text">
+              {" "}
+              {attorneys ? attorneys : "Not listed"}
+            </p>
+          </div>
+        </div>
+
+        <div className="detail-card-col">
+          <div className="detail-card-detail">
+            <p className="detail-subhead">Jurisdiction:</p>
+            <p className="detail-text"> {jurisdiction}</p>
+          </div>
+          <div className="detail-card-detail">
+            <p className="detail-subhead">Venue:</p>
+            <p className="detail-text"> {venue}</p>
+          </div>
+          <div className="detail-card-detail">
+            <p className="detail-subhead"> Contact:</p>
+            <p className="detail-text">
+              {contactFirstName}
+              &nbsp;
+              {contactLastName}
+            </p>
+          </div>
+        </div>
+
+        <div className="detail-card-col">
+          <div className="detail-card-detail">
+            <p className="detail-subhead">Judge:</p>
+            <p className="detail-text"> {judge}</p>
+          </div>
+
+          <div className="detail-card-detail">
+            <p className="detail-subhead">Case Type:</p>
+            <p className="detail-text"> {caseType}</p>
+          </div>
+          <div className="detail-card-detail">
+            <p className="detail-subhead">Contact email:</p>
+            <p className="detail-text"> {contactEmail}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/pageElements/EditElement.js

@@ -0,0 +1,64 @@
+import React, { useLayoutEffect, useRef } from "react";
+
+const EditElement = (props) => {
+  const {
+    className,
+    handleEditValue,
+    value,
+    setShowInputEle,
+    showInputEle,
+    handleFocus,
+    handleBlur,
+    i,
+  } = props;
+  const MIN_TEXTAREA_HEIGHT = 32;
+  const textareaRef = useRef(null);
+
+  useLayoutEffect(() => {
+    // Reset height to shrink on delete
+    textareaRef.current.style.height = "inherit";
+    // Set height
+    textareaRef.current.style.height = `${Math.max(
+      textareaRef.current.scrollHeight,
+      MIN_TEXTAREA_HEIGHT
+    )}px`;
+  }, [value]);
+
+  return (
+    <div>
+      {showInputEle ? (
+        <div
+          style={{ width: "100%" }}
+          onBlur={(e) => handleBlur(e, i)}
+          tabIndex="0"
+        ></div>
+      ) : (
+        <div
+          style={{ width: "100%" }}
+          onClick={() => handleFocus("plain-div onCLick, i", i)}
+          onBlur={(e) => handleBlur(e, i)}
+          className="outer-div"
+          tabIndex="0"
+        >
+          <textarea
+            ref={textareaRef}
+            name={"text-box"}
+            type="text"
+            style={{
+              minHeight: MIN_TEXTAREA_HEIGHT,
+              resize: "none",
+              color: "#4e4e4e",
+              letterSpacing: ".02rem",
+            }}
+            value={value}
+            className="edit-ele-input"
+            onChange={(e) => handleEditValue(e, i)}
+            autoFocus
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EditElement;

src/pageElements/ListPagination.js

@@ -0,0 +1,24 @@
+import Pagination from "react-bootstrap/Pagination";
+
+const ListPagination = (props) => {
+  const { totalPages, page, setPage } = props;
+
+  const handlePaginationItemClick = (event) => {
+    const targetPage = Number(event.currentTarget.dataset.page);
+    if (!isNaN(targetPage)) {
+      setPage(targetPage);
+    }
+  };
+
+  return (
+    <Pagination className="justify-content-end">
+      {page !== 1 ? <Pagination.Prev data-page={page - 1} onClick={handlePaginationItemClick}/> : null}
+      {Array.from({ length: totalPages }, (v, i) => i + 1).map(n => (
+        <Pagination.Item key={`page${n}`} active={n === page} data-page={n} onClick={handlePaginationItemClick}>{n}</Pagination.Item>
+      ))}
+      {page !== totalPages ? <Pagination.Next data-page={page + 1} onClick={handlePaginationItemClick}/> : null}
+    </Pagination>
+  );
+};
+
+export default ListPagination;

src/pageElements/LoadingSpinner.js

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import RingLoader from "react-spinners/RingLoader";
+import "../styles/spinner.scss";
+
+const LoadingSpinner = (props) => {
+  const { message } = props;
+  let [loading, setLoading] = useState(true);
+  const color = "#31e0f7";
+
+  const override = {
+    display: "flex",
+    flexDirection: "column",
+    margin: "12px auto",
+    borderColor: "#a4ebf4",
+  };
+
+  return (
+    <div className="spinner-outer-wrapper">
+      <div className="spinner-container">
+        <div className="loading-text-box">
+          <p className="loading-graph">{message}</p>
+        </div>
+        <RingLoader
+          color={color}
+          loading={loading}
+          cssOverride={override}
+          size={150}
+          aria-label="Loading Spinner"
+          data-testid="loader"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default LoadingSpinner;

src/pageElements/ProgressBar.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+const ProgressBar = (props) => {
+  const {
+    value,
+    total
+  } = props;
+
+  return (
+    <div className="progress-bar">
+      <div className="progress-bar-fill" style={{ width: `${Math.min(Math.ceil(100 * value / total), 100)}%` }} />
+    </div>
+  );
+};
+
+export default ProgressBar;

src/pageElements/Radio.js

@@ -0,0 +1,23 @@
+
+const Radio = ({
+  rightLabel,
+  leftLabel,
+  containerClassName,
+  labelClassName,
+  ...props
+}) => {
+  return (
+    <div className={containerClassName}>
+      <label className={labelClassName}>
+        <input {...props} type="radio" />
+        {leftLabel && <span>{leftLabel}</span>}
+        <div></div>
+        {rightLabel && <span>{rightLabel}</span>}
+      </label>
+    </div>
+  );
+};
+
+export default Radio;
+
+//

src/pageElements/Radiogroup.js

@@ -0,0 +1,96 @@
+import { CircleFill, Circle } from "react-bootstrap-icons";
+
+const Radiogroup = (props) => {
+  const {
+    className,
+    classNames,
+    labelText,
+    title,
+    price,
+    ref,
+    onClick,
+    value,
+    options,
+    disabled
+  } = props;
+  const classCheckbox = "checkbox";
+  const classOption = "option";
+
+  return (
+    <div className="radio-option-container">
+      {title && <div className="checkbox-title">{title}</div>}
+      <div className="checkbox-option-div">
+        {options &&
+          options?.length &&
+          options.map((option, index) => (
+            <div
+              className="option-container"
+              key={option.name}
+              onClick={() => !disabled && onClick && onClick(option)}
+            >
+              <div className="checked-icon">
+                {value === option.value ? (
+                  <div className="zora">
+                    <div className="circle-container">
+                      <CircleFill
+                        className={
+                          value === option.value
+                            ? "clickable-icon-active"
+                            : "clieckable-icon"
+                        }
+                        color="#1a76c7"
+                        size="20px"
+                        onClick={(e) => {
+                          !disabled && onClick(e);
+                        }}
+                      />
+                    </div>
+
+                    <div
+                      className="option-label"
+                      htmlFor={"helper-radio-" + index}
+                    >
+                      {option.name}
+                    </div>
+                  </div>
+                ) : (
+                  <div className="zora">
+                    <div className="circle-container">
+                      <Circle
+                        className={
+                          value === option.value
+                            ? "clickable-icon-active"
+                            : "clieckable-icon"
+                        }
+                        color="#1a76c7"
+                        size="20px"
+                        onClick={(e) => {
+                          !disabled && onClick(e);
+                        }}
+                      />
+                    </div>
+                    <div
+                      className="option-label"
+                      htmlFor={"helper-radio-" + index}
+                    >
+                      {option.name}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * A radio button is a quick way to extract a single coded answer from our users by presenting multiple possibilities and allowing only one option to be chosen.
+ */
+
+export default Radiogroup;
+
+/*
+
+                  */

src/pageElements/SelectDropdown.js

@@ -0,0 +1,18 @@
+import Dropdown from "react-bootstrap/Dropdown";
+import DropdownButton from "react-bootstrap/DropdownButton";
+
+const SelectDropdown = (props) => {
+  const { titleText, dropDownOptions, handleSelect, className } = props;
+
+  return (
+    <DropdownButton className={className} id="dropdown--button" title={`${titleText}`}>
+      {dropDownOptions?.map((option, i) => (
+        <Dropdown.Item key={i} onClick={() => handleSelect(`${option.value}`)}>
+          {`${option.label}`}
+        </Dropdown.Item>
+      ))}
+    </DropdownButton>
+  );
+};
+
+export default SelectDropdown;

src/pageElements/TextInput.js

@@ -0,0 +1,68 @@
+import React from "react";
+import "../styles/text-input.scss";
+const TextInput = (props) => {
+  const {
+    error,
+    message,
+    inputClassName,
+    labelClassName,
+    label,
+    name,
+    value,
+    values,
+    onChange,
+    id,
+    type,
+    disabled,
+  } = props;
+
+  return (
+    <div className="pe-input-container form-floating mb-3">
+      {label ? (
+        <label htmlFor="signup" className="form-label">
+          {label}
+        </label>
+      ) : (
+        <></>
+      )}
+      {type === "select" ? (
+        <select
+          id={id}
+          className={`form-select`}
+          value={value}
+          name={name}
+          disabled={disabled}
+          onChange={onChange}
+        >
+          <option
+            id="ddlProducts"
+            className={`select-option`}
+            value=""
+          ></option>
+          {values.map((item, i) => (
+            <option
+              id="ddlProducts"
+              className={`select-option`}
+              key={`item${i}`}
+            >
+              {item}
+            </option>
+          ))}
+        </select>
+      ) : (
+        <input
+          id={id}
+          className={`form-control ${inputClassName}`}
+          value={value}
+          name={name}
+          disabled={disabled}
+          onChange={onChange}
+          type={type}
+        />
+      )}
+      {error ? <div className="textinput-error-box">{message}</div> : <></>}
+    </div>
+  );
+};
+
+export default TextInput;