BhawanSingh
/
SME-Web
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

hotKeys shortcuts in progress

This commit is contained in:
=bhagwanSingh 2025-08-28 16:59:11 +05:30
parent 566765df51
commit e8b83910a7
4 changed files with 151 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
src/components/process/processStepTwo/DocumentContainer.tsx
View File

@ -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 }));
@ -305,32 +343,98 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ 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<string>();
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<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}

26
src/components/process/processStepTwo/DroppedItemsTagsCon.tsx
View File

@ -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={{

2
src/components/process/processStepTwo/FieldList.tsx
View File

@ -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
});

4
src/components/process/processStepTwo/NavTwo.tsx
View File

@ -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`);