more

src/Components/Document/ReqEditPage.js

@@ -4,6 +4,9 @@ import { useParams } from "react-router-dom";
 import { Link, useNavigate } from "react-router-dom";
 import { AppContext } from "../../Hooks/useContext/appContext";
 import EditElement from "../../pageElements/EditElement";
+import { docEditCopy } from "../../Constants/Copy/docEditCopy.js";
+import ConfirmModal from "../Modals/ConfirmModal";
+import Button from "../../pageElements/Button";
 import { db } from "../../firebase";
 import {
   collection,
@@ -34,7 +37,7 @@ const RequestEditPage = () => {
   const [isReport, setIsReport] = useState(false);
   const [issueText, setIssueText] = useState("");
   const [showErrorModal, setShowErrorModal] = useState(false);
-
+  const [isBusy, setIsBusy] = useState(false);
   const state = group.state[0] ? group.state[0].code : "ny";
   const lawFirm = group ? group?.firm : null;
   const streetAdd = group ? group?.streetAddress : null;
@@ -85,14 +88,11 @@ const RequestEditPage = () => {
     }
     getOutgoingRequests(documentId)
       .then((data) => {
-        console.log("data in getOutgoingRequests", data);
-        /*
         const resp = data[0].responses.map((item, index) => {
           // NEVER CHANGE THIS:
           return { showInputEle: false, resp: item.text, index: index };
         });
-        */
+        setResponses(resp);
-        setResponses();
       })
       .catch((err) => console.log(err));
   }, [documentId]);
@@ -126,6 +126,20 @@ const RequestEditPage = () => {
     return req;
   }
 
+  async function createAndReturnDocx() {
+    window.scrollTo({ top: 0 });
+    setIsBusy(true);
+    const response = await handleCreateDocx();
+    if (response.status === 200) {
+      setTimeout(getDocx, 5000);
+      setTimeout(cleanUpDocx, 10000);
+    } else {
+      setShowErrorModal(true);
+    }
+  }
+
+  const postEditedResponses = () => {};
+
   const onScrollClick = () => {
     const bottom = window.document.scrollingElement.scrollHeight;
     const place = window.scrollY;
@@ -136,11 +150,222 @@ const RequestEditPage = () => {
     }
   };
 
+  const handleBlur = (e, i) => {
+    const newSelectedResponses = responses?.map((r) => {
+      if (r.index === i) {
+        return {
+          ...r,
+          showInputEle: !showInputEle,
+        };
+      }
+      return r;
+    });
+    setResponses(newSelectedResponses);
+  };
+
+  const handleFocus = (arg, i) => {
+    const newSelectedResponses = responses?.map((r) => {
+      if (r.index === i) {
+        return {
+          ...r,
+          showInputEle: !showInputEle,
+        };
+      }
+      return r;
+    });
+    setResponses(newSelectedResponses);
+  };
+
+  const handleEditValue = (e, i) => {
+    const editingRes = responses?.map((r) => {
+      if (r.index === i) {
+        return {
+          ...r,
+          resp: e.target.value,
+        };
+      }
+      return r;
+    });
+    setResponses(editingRes);
+  };
+
+  const handleBack = () => {
+    navigate(`/documents`);
+  };
+
+  const handleCancelSave = () => {
+    setShowSaveModal(false);
+  };
+
+  const handleSave = () => {
+    postEditedResponses();
+    setShowSaveModal(false);
+  };
+
+  const handleConfirmReport = () => {
+    setShowSaveModal(true);
+    setIsReport(true);
+  };
+
+  const numberingContent = (i) => {
+    let numText;
+    if (documentType === "interrogatories") {
+      numText = "INTERROGATORY NO..";
+    } else if (documentType === "admissions") {
+      numText = "REQUEST FOR ADMISSION NO.";
+    } else if (documentType === "production") {
+      numText = "REQUEST FOR PRODUCTION NO.";
+    } else {
+      numText = "REQUEST NO.";
+    }
+    return <div className="numbering-container">{`${numText}${i + 1}  `}</div>;
+  };
+
+  const respondent =
+    fetchedCase?.clientPosition == "Defendant"
+      ? fetchedCase?.defendantParties
+      : fetchedCase?.plaintiffParties;
+
+  const displayCopy =
+    state === "ny"
+      ? docEditCopy.NewYork
+      : state === "nj"
+      ? docEditCopy.NewJersey
+      : docEditCopy.NewYork;
+
+  const servingParty =
+    fetchedCase?.clientPosition === "Defendant"
+      ? fetchedCase?.plaintiffParties
+      : fetchedCase?.defendantParties;
+
+  const editingContent = () => {
+    return (
+      <>
+        <div> {headerPicker()}</div>
+        <div className="doc-editing-wrapper">
+          <div className="pleading-header">{headerString}</div>
+          <div>
+            {displayCopy.prelimaryStatement(
+              documentType,
+              respondent,
+              servingParty
+            )}
+          </div>
+          <div className="doc-editing-sub-wrapper">
+            {parsedRogs?.map((rog, i) => (
+              <div className="req-item-outer-div">
+                <div className="request-text-up">
+                  {numberingContent(i)}
+                  {rog?.text}
+                </div>
+                <div className="req-item-inner-div">
+                  <EditElement
+                    value={
+                      responses && responses.length > 2
+                        ? // NEVER CHANGE THIS
+                          responses[i].resp
+                        : null
+                    }
+                    setShowInputEle={setShowInputEle}
+                    showInputEle={
+                      responses && responses.length > 2
+                        ? responses[i].showInputEle
+                        : null
+                    }
+                    handleFocus={handleFocus}
+                    handleEditValue={handleEditValue}
+                    handleBlur={handleBlur}
+                    i={i}
+                  />
+                </div>
+              </div>
+            ))}
+            <div
+              className="docedit-report-container"
+              onClick={() => handleConfirmReport()}
+            >
+              <div className="docedit-report-link">Report an issue</div>
+            </div>
+            <div className="doc-editing-button-container">
+              <div className="generate-button-box">
+                {/*  TODO: add tooltip: "This will save the document and create a .docx file that will (be downloaded?  saved somewhere?" */}
+                <Button
+                  className="primary-button create-gen-button"
+                  onClick={createAndReturnDocx}
+                  labelText={"Create .docx File"}
+                />
+              </div>
+              <div className="details-button-box">
+                <div>
+                  <Button
+                    className="pt-2 pb-2 mr-4 secondary-button edit-back-button"
+                    onClick={handleBack}
+                    labelText="Back To Documents Page"
+                  />
+                </div>
+                <div>
+                  <Button
+                    className="pt-2 pb-2 mr-2 primary-button"
+                    onClick={handleConfirmSave}
+                    labelText="Save Changes"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        {showSaveModal && !isReport && documentId !== null ? (
+          <ConfirmModal
+            onCancel={handleCancelSave}
+            onConfirm={handleSave}
+            buttonLabelText="Confirm Save"
+            modalText={
+              "Are you sure?  This will overrwrite any previously-saved edits."
+            }
+          />
+        ) : null}
+        {showSaveModal && isReport && documentId !== null ? (
+          <ConfirmModal
+            isReport={isReport}
+            onCancel={handleCancelSave}
+            onConfirm={handleReport}
+            buttonLabelText="Report Issue"
+            documentId={documentId}
+            caseId={caseId}
+            appUserId={appUserId}
+            issuetext={issueText}
+            setIssueText={setIssueText}
+            modalText={
+              "Date/time and document id automatically logged. Support will address this within 24 hours."
+            }
+          />
+        ) : null}
+        {showErrorModal ? (
+          <ConfirmModal
+            onCancel={() => setShowErrorModal(false)}
+            onConfirm={() => setShowErrorModal(false)}
+            buttonLabelText="Confirm"
+            modalText={
+              "There was a problem. Support was notified and will respond within 24 hours."
+            }
+          />
+        ) : null}
+      </>
+    );
+  };
+
+  const readyToEdit = fetchedCase && responses.length > 1;
+
   return (
     <div>
-      <div> {headerPicker(state, fetchedCase, onScrollClick)}</div>
+      <div> </div>
     </div>
   );
 };
 
 export default RequestEditPage;
+
+/*
+
+{headerPicker(state, fetchedCase, onScrollClick)}
+*/