From ea25eca10af27ea36ce830128bce92cf034ef8dd Mon Sep 17 00:00:00 2001 From: divyav-aot Date: Tue, 26 Sep 2023 11:48:58 -0400 Subject: [PATCH 1/4] updated the multiselectedit changes --- web/src/components/FOI/Home/Redlining.js | 152 +++++++---------------- web/src/components/FOI/Home/utils.js | 24 ++++ 2 files changed, 68 insertions(+), 108 deletions(-) diff --git a/web/src/components/FOI/Home/Redlining.js b/web/src/components/FOI/Home/Redlining.js index 6709acca0..03c2ecf9a 100644 --- a/web/src/components/FOI/Home/Redlining.js +++ b/web/src/components/FOI/Home/Redlining.js @@ -51,6 +51,9 @@ import { getStitchedPageNoFromOriginal, createPageFlagPayload, sortByLastModified, + createRedactionSectionsString, + getSections, + getValidSections, } from "./utils"; import _ from "lodash"; @@ -119,10 +122,8 @@ const Redlining = React.forwardRef( // State variables for Bulk Edit using Multi Selection option const [editRedacts, setEditRedacts] = useState(null); - const [multiSelectedAnnotations, setMultiSelectedAnnotations] = useState( - [] - ); const [multiSelectFooter, setMultiSelectFooter] = useState(null); + const [enableMultiSelect, setEnableMultiSelect] = useState(false); //xml parser const parser = new XMLParser(); @@ -188,15 +189,21 @@ const Redlining = React.forwardRef( isReadyForSignOff() && requestStatus == RequestStates["Response"] ); - //START: Bulk Edit using Multi Select Option - const MultiSelectEdit = () => { - let _selectedAnnotations = multiSelectedAnnotations; - const disableEdit = - _selectedAnnotations.length === 0 || - _selectedAnnotations?.some( + const disableMultiSelectEdit = (_selectedAnnotations) => { + if (_selectedAnnotations && _selectedAnnotations.length > 0) { + return _selectedAnnotations.some( (obj) => obj.Subject !== "Redact" && obj.getCustomData("sections") === "" ); + } + return true; + }; + + //START: Bulk Edit using Multi Select Option + const MultiSelectEdit = () => { + let _selectedAnnotations = + docInstance?.Core?.annotationManager.getSelectedAnnotations(); + const disableEdit = disableMultiSelectEdit(_selectedAnnotations); const _selectedRedactions = _selectedAnnotations?.filter( (obj) => obj.Subject !== "Redact" && obj.getCustomData("sections") !== "" @@ -500,7 +507,7 @@ const Redlining = React.forwardRef( multiDeleteButton?.addEventListener("click", function () { root = null; setMultiSelectFooter(root); - setMultiSelectedAnnotations([]); + setEnableMultiSelect(false); }); } @@ -510,7 +517,7 @@ const Redlining = React.forwardRef( closeButton?.addEventListener("click", function () { root = null; setMultiSelectFooter(root); - setMultiSelectedAnnotations([]); + setEnableMultiSelect(false); }); } @@ -524,7 +531,7 @@ const Redlining = React.forwardRef( if (isActive) { root = null; setMultiSelectFooter(root); - setMultiSelectedAnnotations([]); + setEnableMultiSelect(false); } }); @@ -551,31 +558,7 @@ const Redlining = React.forwardRef( setMultiSelectFooter(root); } checkbox.addEventListener("click", function () { - checkbox = listItem.querySelector('input[type="checkbox"]'); - const spanWrapper = checkbox.parentElement.parentElement; // Get the parent span element - // Check if the span element has the "ui__choice--checked" class - const isChecked = spanWrapper.classList.contains( - "ui__choice--checked" - ); //actual scenario isChecked = true when you uncheck the checkbox - const selectedIdString = checkbox.id?.split("_"); - if (selectedIdString.length > 0) { - const annotationName = selectedIdString[1]; - const _annot = - annotationManager.getAnnotationById(annotationName); - setMultiSelectedAnnotations((prevSelectedAnnotations) => { - const isExists = prevSelectedAnnotations.find( - (_annotation) => _annotation.Id === annotationName - ); - if (isExists === undefined && !isChecked) { - return [...prevSelectedAnnotations, _annot]; - } else if (isExists && isChecked) { - return prevSelectedAnnotations.filter( - (_annotation) => _annotation.Id !== annotationName - ); - } - return prevSelectedAnnotations; - }); - } + setEnableMultiSelect(true); }); } }); @@ -587,15 +570,6 @@ const Redlining = React.forwardRef( }); }, []); - //START: UE to render MultiSelectEdit part of Bulk Edit using Multi Select Option - useEffect(() => { - if (multiSelectFooter) { - multiSelectFooter.render(); - } - }, [multiSelectedAnnotations]); - - //END: UE to render MultiSelectEdit part of Bulk Edit using Multi Select Option - useEffect(() => { const changeLayer = async () => { if (currentLayer) { @@ -970,25 +944,9 @@ const Redlining = React.forwardRef( useEffect(() => { annotManager?.addEventListener("annotationSelected", (annotations) => { - //START - handled grouped annotation selection due to auto multi select issue part of Bulk Edit using Multi Select Option. - // get freetext annotations with redaction sections alone - const _selectedRedactions = annotations.filter( - (obj) => - obj.Subject !== "Redact" && obj.getCustomData("sections") !== "" - ); - let annotationName = _selectedRedactions[0]?.Id; - if (annotationName) { - setMultiSelectedAnnotations((prevSelectedAnnotations) => { - const isExists = prevSelectedAnnotations.find( - (_annotation) => _annotation.Id === annotationName - ); - if (isExists === undefined) { - return [...prevSelectedAnnotations, _selectedRedactions[0]]; - } - return prevSelectedAnnotations; - }); + if (multiSelectFooter && enableMultiSelect) { + multiSelectFooter.render(); } - //END - handled grouped annotation selection due to auto multi select issue part of Bulk Edit using Multi Select Option. }); annotManager?.removeEventListener( @@ -1011,6 +969,8 @@ const Redlining = React.forwardRef( newRedaction, pageSelections, redlineSaving, + multiSelectFooter, + enableMultiSelect, ]); useImperativeHandle(ref, () => ({ @@ -1242,26 +1202,16 @@ const Redlining = React.forwardRef( childAnnotation.Y = _redact.Y; childAnnotation.FontSize = _redact.FontSize; if (redactionSectionsIds.length > 0) { - let redactionSections = sections - .filter((s) => redactionSectionsIds.indexOf(s.id) > -1) - .map((s) => s.section) - .join(", "); - if ( - redactionSectionsIds?.length == 1 && - redactionSectionsIds[0] === 25 - ) { - redactionSections = " "; - } + let redactionSections = createRedactionSectionsString( + sections, + redactionSectionsIds + ); childAnnotation.setContents(redactionSections); const displayedDoc = pageMappedDocs.stitchedPageLookup[Number(node.attributes.page) + 1]; childAnnotation.setCustomData( "sections", - JSON.stringify( - sections - .filter((s) => redactionSectionsIds.indexOf(s.id) > -1) - .map((s) => ({ id: s.id, section: s.section })) - ) + JSON.stringify(getSections(sections, redactionSectionsIds)) ); childAnnotation.setCustomData("docid", displayedDoc.docid); childAnnotation.setCustomData("docversion", displayedDoc.docversion); @@ -1303,7 +1253,7 @@ const Redlining = React.forwardRef( }); } setSelectedSections([]); - setMultiSelectedAnnotations([]); + setEnableMultiSelect(false); setEditRedacts(null); }); @@ -1340,16 +1290,10 @@ const Redlining = React.forwardRef( childAnnotation = getCoordinates(childAnnotation, redaction, X); let redactionSectionsIds = selectedSections; if (redactionSectionsIds.length > 0) { - let redactionSections = sections - .filter((s) => redactionSectionsIds.indexOf(s.id) > -1) - .map((s) => s.section) - .join(", "); - if ( - redactionSectionsIds?.length == 1 && - redactionSectionsIds[0] === 25 - ) { - redactionSections = " "; - } + let redactionSections = createRedactionSectionsString( + sections, + redactionSectionsIds + ); childAnnotation.setContents(redactionSections); const displayedDoc = pageMappedDocs.stitchedPageLookup[ @@ -1357,11 +1301,7 @@ const Redlining = React.forwardRef( ]; childAnnotation.setCustomData( "sections", - JSON.stringify( - sections - .filter((s) => redactionSectionsIds.indexOf(s.id) > -1) - .map((s) => ({ id: s.id, section: s.section })) - ) + JSON.stringify(getSections(sections, redactionSectionsIds)) ); childAnnotation.setCustomData("docid", displayedDoc.docid); childAnnotation.setCustomData( @@ -1446,23 +1386,16 @@ const Redlining = React.forwardRef( annot.Author = user?.name || user?.preferred_username || ""; let redactionSectionsIds = defaultSections.length > 0 ? defaultSections : selectedSections; - let redactionSections = sections.filter( - (s) => redactionSectionsIds.indexOf(s.id) > -1 + let redactionSections = createRedactionSectionsString( + sections, + redactionSectionsIds ); - let redactionSectionsString = redactionSections - .map((s) => s.section) - .join(", "); - if (selectedSections?.length == 1 && selectedSections[0] === 25) { - redactionSectionsString = " "; - } annot.setAutoSizeType("auto"); - annot.setContents(redactionSectionsString); + annot.setContents(redactionSections); annot.setCustomData("parentRedaction", redaction.Id); annot.setCustomData( "sections", - JSON.stringify( - redactionSections.map((s) => ({ id: s.id, section: s.section })) - ) + JSON.stringify(getSections(sections, redactionSectionsIds)) ); const doc = docViewer.getDocument(); const pageInfo = doc.getPageInfo(annot.PageNumber); @@ -1511,7 +1444,10 @@ const Redlining = React.forwardRef( } } - for (let section of redactionSections) { + for (let section of getValidSections( + sections, + redactionSectionsIds + )) { section.count++; } //delete if there are existing fullpage redactions diff --git a/web/src/components/FOI/Home/utils.js b/web/src/components/FOI/Home/utils.js index e5af50971..7aedd0a3a 100644 --- a/web/src/components/FOI/Home/utils.js +++ b/web/src/components/FOI/Home/utils.js @@ -71,3 +71,27 @@ export const getProgramAreas = (pageFlagList) => { // Helper function to sort files by lastmodified date export const sortByLastModified = (files) => files.sort(docSorting); + +export const getValidSections = (sections, redactionSectionsIds) => { + return sections.filter((s) => redactionSectionsIds.indexOf(s.id) > -1); +}; + +export const getSections = (sections, redactionSectionsIds) => { + return getValidSections(sections, redactionSectionsIds).map((s) => ({ + id: s.id, + section: s.section, + })); +}; + +export const createRedactionSectionsString = ( + sections, + redactionSectionsIds +) => { + let redactionSections = getValidSections(sections, redactionSectionsIds) + .map((s) => s.section) + .join(", "); + if (redactionSectionsIds?.length == 1 && redactionSectionsIds[0] === 25) { + redactionSections = " "; + } + return redactionSections; +}; From ce2ed47bbd00faeef78ab5c44b9479c1c4b75b8e Mon Sep 17 00:00:00 2001 From: divyav-aot Date: Tue, 26 Sep 2023 14:54:00 -0400 Subject: [PATCH 2/4] created separate component for MultiSelectEdit --- .../components/FOI/Home/MultiSelectEdit.tsx | 50 +++++++++++++++++++ web/src/components/FOI/Home/Redlining.js | 44 +++------------- 2 files changed, 57 insertions(+), 37 deletions(-) create mode 100644 web/src/components/FOI/Home/MultiSelectEdit.tsx diff --git a/web/src/components/FOI/Home/MultiSelectEdit.tsx b/web/src/components/FOI/Home/MultiSelectEdit.tsx new file mode 100644 index 000000000..1192d0097 --- /dev/null +++ b/web/src/components/FOI/Home/MultiSelectEdit.tsx @@ -0,0 +1,50 @@ +import { ReactComponent as EditLogo } from "../../../assets/images/icon-pencil-line.svg"; + + const disableMultiSelectEdit = (_selectedAnnotations: any) => { + if (_selectedAnnotations && _selectedAnnotations.length > 0) { + return _selectedAnnotations.some( + (obj: any) => + obj.Subject !== "Redact" && obj.getCustomData("sections") === "" + ); + } + return true; + }; + +//START: Bulk Edit using Multi Select Option +const MultiSelectEdit = ({docInstance, editRedactions}: any) => { + let _selectedAnnotations = + docInstance?.Core?.annotationManager.getSelectedAnnotations(); + const disableEdit = disableMultiSelectEdit(_selectedAnnotations); + const _selectedRedactions = _selectedAnnotations?.filter( + (obj: any) => + obj.Subject !== "Redact" && obj.getCustomData("sections") !== "" + ); + return ( + + ); + }; + //END: Bulk Edit using Multi Select Option + + + export default MultiSelectEdit; \ No newline at end of file diff --git a/web/src/components/FOI/Home/Redlining.js b/web/src/components/FOI/Home/Redlining.js index e3917ae32..c89b4cd2d 100644 --- a/web/src/components/FOI/Home/Redlining.js +++ b/web/src/components/FOI/Home/Redlining.js @@ -56,6 +56,7 @@ import { getSections, getValidSections, } from "./utils"; +import MultiSelectEdit from "./MultiSelectEdit"; import _ from "lodash"; const Redlining = React.forwardRef( @@ -201,42 +202,6 @@ const Redlining = React.forwardRef( return true; }; - //START: Bulk Edit using Multi Select Option - const MultiSelectEdit = () => { - let _selectedAnnotations = - docInstance?.Core?.annotationManager.getSelectedAnnotations(); - const disableEdit = disableMultiSelectEdit(_selectedAnnotations); - const _selectedRedactions = _selectedAnnotations?.filter( - (obj) => - obj.Subject !== "Redact" && obj.getCustomData("sections") !== "" - ); - return ( - - ); - }; - //END: Bulk Edit using Multi Select Option - // const [storedannotations, setstoreannotations] = useState(localStorage.getItem("storedannotations") || []) // if using a class, equivalent of componentDidMount useEffect(() => { @@ -960,7 +925,12 @@ const Redlining = React.forwardRef( useEffect(() => { annotManager?.addEventListener("annotationSelected", (annotations) => { if (multiSelectFooter && enableMultiSelect) { - multiSelectFooter.render(); + multiSelectFooter.render( + + ); } }); From 6646cb54c77e4e7a26ea6ab4d5373ee6421c98d7 Mon Sep 17 00:00:00 2001 From: divyav-aot Date: Tue, 26 Sep 2023 15:41:36 -0400 Subject: [PATCH 3/4] created separate component for Edit --- .../Home/{MultiSelectEdit.tsx => Edit.tsx} | 44 +++++++++++++++++-- web/src/components/FOI/Home/Redlining.js | 42 ++---------------- 2 files changed, 45 insertions(+), 41 deletions(-) rename web/src/components/FOI/Home/{MultiSelectEdit.tsx => Edit.tsx} (54%) diff --git a/web/src/components/FOI/Home/MultiSelectEdit.tsx b/web/src/components/FOI/Home/Edit.tsx similarity index 54% rename from web/src/components/FOI/Home/MultiSelectEdit.tsx rename to web/src/components/FOI/Home/Edit.tsx index 1192d0097..1a7cb8f03 100644 --- a/web/src/components/FOI/Home/MultiSelectEdit.tsx +++ b/web/src/components/FOI/Home/Edit.tsx @@ -10,8 +10,8 @@ import { ReactComponent as EditLogo } from "../../../assets/images/icon-pencil-l return true; }; -//START: Bulk Edit using Multi Select Option -const MultiSelectEdit = ({docInstance, editRedactions}: any) => { + //START: Bulk Edit using Multi Select Option + const MultiSelectEdit = ({docInstance, editRedactions}: any) => { let _selectedAnnotations = docInstance?.Core?.annotationManager.getSelectedAnnotations(); const disableEdit = disableMultiSelectEdit(_selectedAnnotations); @@ -47,4 +47,42 @@ const MultiSelectEdit = ({docInstance, editRedactions}: any) => { //END: Bulk Edit using Multi Select Option - export default MultiSelectEdit; \ No newline at end of file + const Edit = ({instance, editAnnotation}: any) => { + let _selectedAnnotations = instance?.Core?.annotationManager.getSelectedAnnotations(); + const disableEdit = _selectedAnnotations.some( + (obj: any) => + obj.Subject !== "Redact" && obj.getCustomData("sections") === "" + ); + const _selectedRedaction = _selectedAnnotations.filter( + (obj: any) => obj.Subject === "Redact" + ); + return ( + + ); + }; + + export { + MultiSelectEdit, + Edit + }; \ No newline at end of file diff --git a/web/src/components/FOI/Home/Redlining.js b/web/src/components/FOI/Home/Redlining.js index c89b4cd2d..9ac19bbee 100644 --- a/web/src/components/FOI/Home/Redlining.js +++ b/web/src/components/FOI/Home/Redlining.js @@ -56,7 +56,7 @@ import { getSections, getValidSections, } from "./utils"; -import MultiSelectEdit from "./MultiSelectEdit"; +import { Edit, MultiSelectEdit } from "./Edit"; import _ from "lodash"; const Redlining = React.forwardRef( @@ -361,46 +361,12 @@ const Redlining = React.forwardRef( ); }); - const Edit = () => { - let _selectedAnnotations = - annotationManager.getSelectedAnnotations(); - const disableEdit = _selectedAnnotations.some( - (obj) => - obj.Subject !== "Redact" && obj.getCustomData("sections") === "" - ); - const _selectedRedaction = _selectedAnnotations.filter( - (obj) => obj.Subject === "Redact" - ); - return ( - - ); - }; - instance.UI.annotationPopup.add({ type: "customElement", title: "Edit", - render: () => , + render: () => ( + + ), }); setDocInstance(instance); From d74e10b5eb7cf37e450bfa939e8b381dbf90608d Mon Sep 17 00:00:00 2001 From: divyav-aot Date: Tue, 26 Sep 2023 16:24:47 -0400 Subject: [PATCH 4/4] removed not used methods --- web/src/components/FOI/Home/Redlining.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/web/src/components/FOI/Home/Redlining.js b/web/src/components/FOI/Home/Redlining.js index 9ac19bbee..8c29df5e0 100644 --- a/web/src/components/FOI/Home/Redlining.js +++ b/web/src/components/FOI/Home/Redlining.js @@ -192,16 +192,6 @@ const Redlining = React.forwardRef( isReadyForSignOff() && requestStatus == RequestStates["Response"] ); - const disableMultiSelectEdit = (_selectedAnnotations) => { - if (_selectedAnnotations && _selectedAnnotations.length > 0) { - return _selectedAnnotations.some( - (obj) => - obj.Subject !== "Redact" && obj.getCustomData("sections") === "" - ); - } - return true; - }; - // const [storedannotations, setstoreannotations] = useState(localStorage.getItem("storedannotations") || []) // if using a class, equivalent of componentDidMount useEffect(() => {