Merge pull request #1208 from bcgov/dev-rook-NK-FOIMOD-3563

Dev rook nk foimod 3563
bcgov · Nov 5, 2024 · 3d817da · 3d817da
2 parents 313dc5a + 61092ff
commit 3d817da
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 2 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -17,6 +17,8 @@ services:
         - REACT_APP_PAGE_SELECT_LIMIT=${PAGE_SELECT_LIMIT}
         - REACT_APP_REDACTION_SELECT_LIMIT=${REDACTION_SELECT_LIMIT}
         - REACT_APP_BIG_HTTP_GET_TIMEOUT=${BIG_HTTP_GET_TIMEOUT}
+        - REACT_APP_SESSION_SECURITY_KEY=${REACT_APP_SESSION_SECURITY_KEY}
+        - REACT_APP_REDLINE_OPACITY=${REACT_APP_REDLINE_OPACITY}
     volumes:
       - ".:/web"
       - "/web/node_modules"

diff --git a/web/Dockerfile b/web/Dockerfile
@@ -14,6 +14,8 @@ ARG FOI_DOCREVIEWER_BASE_API_URL
 ARG REACT_APP_ANNOTATION_PAGE_SIZE
 ARG REACT_APP_PAGE_SELECT_LIMIT
 ARG REACT_APP_REDACTION_SELECT_LIMIT
+ARG REACT_APP_SESSION_SECURITY_KEY
+ARG REACT_APP_REDLINE_OPACITY
 
 
 ENV NODE_ENV ${NODE_ENV}
@@ -25,6 +27,8 @@ ENV FOI_DOCREVIEWER_BASE_API_URL ${FOI_DOCREVIEWER_BASE_API_URL}
 ENV REACT_APP_ANNOTATION_PAGE_SIZE ${REACT_APP_ANNOTATION_PAGE_SIZE}
 ENV REACT_APP_PAGE_SELECT_LIMIT ${REACT_APP_PAGE_SELECT_LIMIT}
 ENV REACT_APP_REDACTION_SELECT_LIMIT ${REACT_APP_REDACTION_SELECT_LIMIT}
+ENV REACT_APP_SESSION_SECURITY_KEY ${REACT_APP_SESSION_SECURITY_KEY}
+ENV REACT_APP_REDLINE_OPACITY ${REACT_APP_REDLINE_OPACITY}
 
 # add `/app/node_modules/.bin` to $PATH
 ENV PATH /web/node_modules/.bin:$PATH

diff --git a/web/Dockerfile.local b/web/Dockerfile.local
@@ -16,6 +16,8 @@ ARG REACT_APP_ANNOTATION_PAGE_SIZE
 ARG REACT_APP_PAGE_SELECT_LIMIT
 ARG REACT_APP_REDACTION_SELECT_LIMIT
 ARG REACT_APP_BIG_HTTP_GET_TIMEOUT
+ARG REACT_APP_SESSION_SECURITY_KEY
+ARG REACT_APP_REDLINE_OPACITY
 
 ENV NODE_ENV ${NODE_ENV}
 ENV GENERATE_SOURCEMAP ${GENERATE_SOURCEMAP}
@@ -27,6 +29,8 @@ ENV REACT_APP_ANNOTATION_PAGE_SIZE ${REACT_APP_ANNOTATION_PAGE_SIZE}
 ENV REACT_APP_PAGE_SELECT_LIMIT ${REACT_APP_PAGE_SELECT_LIMIT}
 ENV REACT_APP_REDACTION_SELECT_LIMIT ${REACT_APP_REDACTION_SELECT_LIMIT}
 ENV BIG_HTTP_GET_TIMEOUT ${REACT_APP_BIG_HTTP_GET_TIMEOUT}
+ENV REACT_APP_SESSION_SECURITY_KEY ${REACT_APP_SESSION_SECURITY_KEY}
+ENV REACT_APP_REDLINE_OPACITY ${REACT_APP_REDLINE_OPACITY}
 
 # add `/app/node_modules/.bin` to $PATH
 ENV PATH /web/node_modules/.bin:$PATH

diff --git a/web/src/components/FOI/Home/Redlining.js b/web/src/components/FOI/Home/Redlining.js
@@ -27,6 +27,7 @@ import {
   ANNOTATION_PAGE_SIZE,
   REDACTION_SELECT_LIMIT,
   BIG_HTTP_GET_TIMEOUT,
+  REDLINE_OPACITY,
 } from "../../../constants/constants";
 import { errorToast } from "../../../helper/helper";
 import { useAppSelector } from "../../../hooks/hook";
@@ -64,6 +65,7 @@ import useSaveResponsePackage from "./CreateResponsePDF/useSaveResponsePackage";
 import {ConfirmationModal} from "./ConfirmationModal";
 import { FOIPPASectionsModal } from "./FOIPPASectionsModal";
 import { NRWarningModal } from "./NRWarningModal";
+import Switch from "@mui/material/Switch";
 
 const Redlining = React.forwardRef(
   (
@@ -84,6 +86,7 @@ const Redlining = React.forwardRef(
     },
     ref
   ) => {
+    const alpha = REDLINE_OPACITY;
 
     const requestnumber = useAppSelector(
       (state) => state.documents?.requestnumber
@@ -159,6 +162,27 @@ const Redlining = React.forwardRef(
       enableSavingFinal,
     } = useSaveResponsePackage();
 
+    const [isRedlineOpaque, setIsRedlineOpaque] = useState(localStorage.getItem('isRedlineOpaque') === 'true')
+
+    useEffect(() => {
+      if (annotManager) {
+        let annotations = annotManager.getAnnotationsList();
+        for (let annotation of annotations) {
+          if (annotation.Subject === 'Redact') {
+            annotation.FillDisplayColor = new docInstance.Core.Annotations.Color(
+              255,
+              255,
+              255,
+              isRedlineOpaque ? alpha : 0
+            );
+            annotManager.redrawAnnotation(annotation)
+          }
+        }
+        localStorage.setItem('isRedlineOpaque', isRedlineOpaque)
+      }
+
+    }, [isRedlineOpaque])
+
     useEffect(() => {
       let initializeWebViewer = async () => {
         let currentDocumentS3Url = currentDocument?.currentDocumentS3Url;
@@ -191,6 +215,7 @@ const Redlining = React.forwardRef(
           } = instance.Core;
           instance.UI.disableElements(PDFVIEWER_DISABLED_FEATURES.split(","));
           instance.UI.enableElements(["attachmentPanelButton"]);
+          instance.UI.enableNoteSubmissionWithEnter();
           documentViewer.setToolMode(
             documentViewer.getTool(instance.Core.Tools.ToolNames.REDACTION)
           );
@@ -231,6 +256,38 @@ const Redlining = React.forwardRef(
               0,
               newCustomElement
             );
+
+
+            const opacityToggle = {
+              type: 'customElement',
+              render: () => (
+                <>
+                <input
+                  style={{"float": "left"}}
+                  type="checkbox"
+                  onChange={(e) => {
+                      setIsRedlineOpaque(e.target.checked)
+                    } 
+                  }
+                  defaultChecked={isRedlineOpaque}
+                  id="isRedlineOpaqueToggle"
+                >
+                </input>
+                <label 
+                  for="isRedlineOpaqueToggle"
+                  style={{"top": "1px", "position": "relative", "margin-right": 10}}
+                >
+                  Toggle Opacity
+                </label>
+                </>
+              )
+            };
+
+            header.headers.default.splice(
+              header.headers.default.length - 4,
+              0,
+              opacityToggle
+            );
           });
 
           instance.UI.setHeaderItems(header => {
@@ -1000,6 +1057,7 @@ const Redlining = React.forwardRef(
                     `${currentLayer.redactionlayerid}`
                   );
                   annotations[i].IsHoverable = false;
+                  annotations[i].FillDisplayColor = new docInstance.Core.Annotations.Color(255, 255, 255, isRedlineOpaque ? alpha : 0);
                 });
                 setPageSelections(pageSelectionList);
                 let annot = annots[0].children[0];
@@ -1338,6 +1396,40 @@ const Redlining = React.forwardRef(
       if (docInstance && documentList.length > 0) {
         const document = docInstance?.UI.iframeWindow.document;
         document.getElementById("create_response_pdf").addEventListener("click", handleCreateResponsePDFClick);
+        docViewer.setWatermark({
+          // Draw custom watermark in middle of the document
+          custom: (ctx, pageNumber, pageWidth, pageHeight) => {
+            // ctx is an instance of CanvasRenderingContext2D
+            // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
+            // Hence being able to leverage those properties
+            let originalPage = pageMappedDocs['stitchedPageLookup'][pageNumber]
+            let doc = pageFlags.find(d => d.documentid === originalPage.docid);
+            let pageFlag = doc.pageflag.find(f => f.page === originalPage.page);
+            if (pageFlag.flagid === pageFlagTypes["Duplicate"]) {
+              ctx.fillStyle = "#ff0000";
+              ctx.font = "20pt Arial";
+              ctx.globalAlpha = 0.4;
+
+              ctx.save();
+              ctx.translate(pageWidth / 2, pageHeight / 2);
+              ctx.rotate(-Math.PI / 4);
+              ctx.fillText("DUPLICATE", 0, 0);
+              ctx.restore();
+            }
+
+            if (pageFlag.flagid === pageFlagTypes["Not Responsive"]) {
+              ctx.fillStyle = "#ff0000";
+              ctx.font = "20pt Arial";
+              ctx.globalAlpha = 0.4;
+
+              ctx.save();
+              ctx.translate(pageWidth / 2, pageHeight / 2);
+              ctx.rotate(-Math.PI / 4);
+              ctx.fillText("NOT RESPONSIVE", 0, 0);
+              ctx.restore();
+            }
+          },
+        });
       }
       //Cleanup Function: removes previous event listeiner to ensure handleCreateResponsePDFClick event is not called multiple times on click
       return () => {
@@ -1452,6 +1544,7 @@ const Redlining = React.forwardRef(
           if (_annotation.Subject === "Redact") {
             _annotation.IsHoverable = false;
             _annotation.NoMove = true;
+            _annotation.FillDisplayColor = new annots.Color(255, 255, 255, isRedlineOpaque ? alpha : 0);
 
             if (_annotation.type === "fullPage") {
               _annotation.NoResize = true;
@@ -2283,7 +2376,6 @@ const Redlining = React.forwardRef(
     return (
       <div>
         <div className="webviewer" ref={viewer}></div>
-        {/* { modalOpen && */}
           <FOIPPASectionsModal
             cancelRedaction={cancelRedaction}
             modalOpen={modalOpen}
@@ -2299,7 +2391,6 @@ const Redlining = React.forwardRef(
             saveDefaultSections={saveDefaultSections}
             clearDefaultSections={clearDefaultSections} 
           />
-        {/* } */}
         {redlineModalOpen && 
           <ConfirmationModal 
           cancelRedaction={cancelRedaction}

diff --git a/web/src/constants/constants.ts b/web/src/constants/constants.ts
@@ -19,3 +19,4 @@ export const ANNOTATION_PAGE_SIZE = window._env_?.REACT_APP_ANNOTATION_PAGE_SIZE
 export const PAGE_SELECT_LIMIT = window._env_?.REACT_APP_PAGE_SELECT_LIMIT ?? process.env.REACT_APP_PAGE_SELECT_LIMIT ?? 250;
 export const REDACTION_SELECT_LIMIT = window._env_?.REACT_APP_REDACTION_SELECT_LIMIT ?? process.env.REACT_APP_REDACTION_SELECT_LIMIT ?? 250;
 export const BIG_HTTP_GET_TIMEOUT = window._env_?.REACT_APP_BIG_HTTP_GET_TIMEOUT ?? process.env.REACT_APP_BIG_HTTP_GET_TIMEOUT ?? 300000;
+export const REDLINE_OPACITY = window._env_?.REACT_APP_REDLINE_OPACITY ?? process.env.REACT_APP_REDLINE_OPACITY ?? 0.5;