diff --git a/src/components/process/processStepTwo/DocumentContainer.tsx b/src/components/process/processStepTwo/DocumentContainer.tsx index 8e02ea4..29c111d 100644 --- a/src/components/process/processStepTwo/DocumentContainer.tsx +++ b/src/components/process/processStepTwo/DocumentContainer.tsx @@ -67,6 +67,44 @@ const DocumentContainer: React.FC = ({ transactionSaving const [droppedItems, setDroppedItems] = useState({}); + interface HotKeysObj { + isActive: boolean; + key: string | null; + tagId?: string | null; + hotKey?: string | null; + + } + + + + // const hotKeysObjInitial: HotKeysObj = { + // "CtrlA": { + // enabled: false, + // key: null + // }, + // "Delete": { + // enabled: false, + // key: null + // }, + // "CtrlC": { + // enabled: false, + // key: null, + // tagId: null + // } + // } + + const hotKeysObjInitial: HotKeysObj = { + isActive: false, + key: null, + tagId: null, + hotKey: null + } + + + + const [hotKeysObj, setHotKeysObj] = useState(hotKeysObjInitial); + + useEffect(() => { selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId })); selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId })); @@ -305,32 +343,98 @@ const DocumentContainer: React.FC = ({ transactionSaving setTimeout(() => { const tagIndex = key in droppedItems ? droppedItems[key].length : 0; console.log(tagIndex, "line 307", key); - + setSelectedTag({ key, tagIndex }) }, 0) }; // HANDLE DROP - END useEffect(() => { - // Initialize group borders for all existing groups after component updates - const timeoutId = setTimeout(() => { - const allGroupElements = document.querySelectorAll('[group]'); - const groupIds = new Set(); + if (!hotKeysObj.isActive) return - allGroupElements.forEach((element) => { - const groupId = element.getAttribute('group'); - if (groupId) { - groupIds.add(groupId); - } + const docCon = document.getElementById("doc-con"); + + switch (hotKeysObj.hotKey) { + case "Ctrl+c": + // Handle Ctrl+C + break; + case "Ctrl+v": + // Handle Ctrl+V + break; + case "Ctrl+x": + // Handle Ctrl+V + break; + case "Ctrl+z": + // Handle Ctrl+V + break; + case "Ctrl+y": + // Handle Ctrl+V + break; + case "Ctrl+a": + docCon?.querySelectorAll("[data-tag-id]").forEach(tag => { + tag.classList.add("border-2", "border-slate-800") + tag.setAttribute("all-select-group", "true") + + docCon.addEventListener("click", () => { + console.log("focus in", tag) + tag.classList.remove("border-2", "border-slate-800") + tag.removeAttribute("all-select-group") + }) + // docCon.addEventListener("focusout", () => { + // console.log("focus out", tag) + // tag.classList.remove("border-2", "border-slate-800") + // tag.removeAttribute("all-select-group") + // }) + }); + break; + case "delete": + docCon?.querySelectorAll("[all-select-group]").forEach((tag) => { + console.log(tag, "TAGID") + }) + break; + + default: + break; + } + }, [hotKeysObj]) + + const handleDocumentFocus = (key: string) => { + const id = key.replace("_", ""); + const targetCon = document.getElementById(id); + + targetCon?.addEventListener("keydown", (event) => { + event.preventDefault(); + const ctrl = event.ctrlKey; + const alt = event.altKey; + const metaKey = event.metaKey; + const shift = event.shiftKey; + const pressedKey = event.key.toLowerCase(); + + let hotKey = pressedKey + + + if (ctrl) { + hotKey = "Ctrl+" + pressedKey; + } else if (alt) { + hotKey = "Alt" + pressedKey; + } else if (metaKey) { + hotKey = "Meta+" + pressedKey; + } else if (shift) { + hotKey = "Shift+" + pressedKey; + } + + setHotKeysObj({ + isActive: true, + key: pressedKey, + tagId: null, + hotKey: hotKey }); - groupIds.forEach((groupId) => { - handleIGroupBorderPosition(groupId); - }); - }, 100); + }); - return () => clearTimeout(timeoutId); - }, [droppedItems]); // Re-run when droppedItems changes + + // return () => targetCon?.removeEventListener("keydown"); + } return ( <> @@ -341,7 +445,8 @@ const DocumentContainer: React.FC = ({ transactionSaving selectedDocuments.length > 0 ? selectedDocuments.map((doc, indxDoc) => { return (
-
+

{doc.name}

@@ -351,8 +456,9 @@ const DocumentContainer: React.FC = ({ transactionSaving const key = `${doc.id}_${page.index}`; return (
handleDocumentFocus(key)} key={indx} - id={`${doc.id}${indx}`} onDrop={(e) => handleDrop(e, doc.id, indxDoc, page.index)} onDragOver={handleDragOver} diff --git a/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx b/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx index 01a1d6c..22e545a 100644 --- a/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx +++ b/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx @@ -8,7 +8,7 @@ // -- handleGroupBorderPosition // -- handleAddGroupItemClicked -import React, { useRef } from 'react' +import React, { useEffect, useRef } from 'react' import { DroppedItemsObj } from './DocumentContainer'; import typeToIconMap from '../../../helper/iconMap'; import { IoMdClose } from 'react-icons/io'; @@ -254,7 +254,6 @@ const DroppedItemsTagsCon: React.FC = ({ // HANDLE EXPAND TAG - START const handleExpandTag = (event: React.MouseEvent, key: string, index: number) => { - console.log("HANDLE EXPAND TAG - START") event.preventDefault(); // Prevent text selection issues const expandingElemIcon = event.currentTarget; @@ -501,6 +500,27 @@ const DroppedItemsTagsCon: React.FC = ({ }, 50); // Slightly longer timeout to ensure DOM updates }; + useEffect(() => { + // Initialize group borders for all existing groups after component updates + const timeoutId = setTimeout(() => { + const allGroupElements = document.querySelectorAll('[group]'); + const groupIds = new Set(); + + allGroupElements.forEach((element) => { + const groupId = element.getAttribute('group'); + if (groupId) { + groupIds.add(groupId); + } + }); + + groupIds.forEach((groupId) => { + handleIGroupBorderPosition(groupId); + }); + }, 0); + + return () => clearTimeout(timeoutId); + }, [droppedItems]); + return ( <> {/* DROPPED ITEMS - Render only the dropped items for this specific docId and page - STARTS */} @@ -515,6 +535,8 @@ const DroppedItemsTagsCon: React.FC = ({
handleTagClick(pageIdkey, index)} style={{ diff --git a/src/components/process/processStepTwo/FieldList.tsx b/src/components/process/processStepTwo/FieldList.tsx index f944994..0802340 100644 --- a/src/components/process/processStepTwo/FieldList.tsx +++ b/src/components/process/processStepTwo/FieldList.tsx @@ -84,7 +84,7 @@ const FieldList: React.FC = ({ color, recipientId, recipientIndx const priorityOrder = ['SIGNATURE', 'INITIALS', 'STAMP']; const data = res.data.filter((obj, indx) => { - if (obj.type === "STAMP" || obj.type === "RADIO" || obj.type === "CHECKBOX" || obj.type === "ATTACHMENT") return false + // if (obj.type === "STAMP" || obj.type === "RADIO" || obj.type === "CHECKBOX" || obj.type === "ATTACHMENT") return false return true }); diff --git a/src/components/process/processStepTwo/NavTwo.tsx b/src/components/process/processStepTwo/NavTwo.tsx index 89c1a48..5be3af9 100644 --- a/src/components/process/processStepTwo/NavTwo.tsx +++ b/src/components/process/processStepTwo/NavTwo.tsx @@ -128,10 +128,10 @@ const NavTwo: React.FC = ({ transactionSaving, isFields, setIsField setTimeout(() => { if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) { if (isSignSend) { - // window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self"); + window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self"); } else { - // navigate(`/document-completion-screen/${accountId}/${transactionId}`, { replace: true }) + navigate(`/document-completion-screen/${accountId}/${transactionId}`, { replace: true }) } } else { navigate(`/templates`);