hotKeys shortcuts in progress

src/components/process/processStepTwo/DocumentContainer.tsx

@@ -67,6 +67,44 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
     const [droppedItems, setDroppedItems] = useState<DroppedItemsObj>({});
 
 
+    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<HotKeysObj>(hotKeysObjInitial);
+
+
     useEffect(() => {
         selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
         selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
@@ -312,25 +350,91 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
     // HANDLE DROP - END
 
     useEffect(() => {
-        // Initialize group borders for all existing groups after component updates
+        if (!hotKeysObj.isActive) return
-        const timeoutId = setTimeout(() => {
-            const allGroupElements = document.querySelectorAll('[group]');
-            const groupIds = new Set<string>();
 
-            allGroupElements.forEach((element) => {
+        const docCon = document.getElementById("doc-con");
-                const groupId = element.getAttribute('group');
+
-                if (groupId) {
+        switch (hotKeysObj.hotKey) {
-                    groupIds.add(groupId);
+            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<DocumentContainerProps> = ({ transactionSaving
                     selectedDocuments.length > 0 ? selectedDocuments.map((doc, indxDoc) => {
                         return (
                             <div key={indxDoc} className='flex flex-col'>
-                                <div className='py-2 text-sm'>
+                                <div
+                                    className='py-2 text-sm'>
                                     <p className='text-center'>{doc.name}</p>
                                 </div>
 
@@ -351,8 +456,9 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
                                             const key = `${doc.id}_${page.index}`;
                                             return (
                                                 <div
+                                                    tabIndex={-1}
+                                                    onFocus={() => handleDocumentFocus(key)}
                                                     key={indx}
-
                                                     id={`${doc.id}${indx}`}
                                                     onDrop={(e) => handleDrop(e, doc.id, indxDoc, page.index)}
                                                     onDragOver={handleDragOver}

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<DroppedItemsTagsConProps> = ({
 
     // HANDLE EXPAND TAG - START
     const handleExpandTag = (event: React.MouseEvent<HTMLDivElement>, 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<DroppedItemsTagsConProps> = ({
         }, 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<string>();
+
+            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<DroppedItemsTagsConProps> = ({
                         <div
                             // key={index}
                             draggable="false"
+                            data-tag-id={index}
+                            data-tag-selected={index === selectedTag?.index}
                             className="absolute rounded dropped-item"
                             onClick={() => handleTagClick(pageIdkey, index)}
                             style={{

src/components/process/processStepTwo/FieldList.tsx

@@ -84,7 +84,7 @@ const FieldList: React.FC<FieldListProps> = ({ 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
                 });
 

src/components/process/processStepTwo/NavTwo.tsx

@@ -128,10 +128,10 @@ const NavTwo: React.FC<NavTwoProps> = ({ 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`);