Compare commits
3 Commits
772dec4858
...
3b08c04463
| Author | SHA1 | Date |
|---|---|---|
 JaiPandey425
|
3b08c04463 | |
=bhagwanSingh
|
313217eded | |
|
=bhagwanSingh
|
b6c08123f0 |
|
|
@ -0,0 +1,63 @@
|
|||
import React from 'react'
|
||||
import { MdKeyboardArrowDown } from 'react-icons/md';
|
||||
|
||||
interface DocumentPagesInterface {
|
||||
selectedDocuments: DocumentType[];
|
||||
setDropDownTogglePage: React.Dispatch<React.SetStateAction<string>>;
|
||||
dropDownTogglePage: string;
|
||||
}
|
||||
|
||||
const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownTogglePage }: DocumentPagesInterface) => {
|
||||
return (
|
||||
<div className='col-span-2 bg-white h-full p-4 overflow-y-auto'>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
{selectedDocuments && selectedDocuments.length && selectedDocuments.map((document, indx) => {
|
||||
return (
|
||||
<div
|
||||
key={indx}
|
||||
// tabIndex={1}
|
||||
// onBlur={() => setDropDownTogglePage('')}
|
||||
>
|
||||
<div
|
||||
onClick={() => (`${(dropDownTogglePage === 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)}
|
||||
className={`p-2 ${(dropDownTogglePage === 'pageDropDown' + indx) ? "bg-[var(--primary)]" : "bg-slate-200"} flex flex-col justify-center items-center gap-2 rounded`}>
|
||||
{
|
||||
document.images != undefined && <img
|
||||
key={indx}
|
||||
className='rounded-sm shadow'
|
||||
src={document.images[0].src}
|
||||
alt="" />
|
||||
}
|
||||
|
||||
<div
|
||||
className={`flex items-center justify-between w-full text-xs rounded-sm cursor-pointer ${(dropDownTogglePage === 'pageDropDown' + indx) ? "text-slate-100" : "text-slate-600"}`}>
|
||||
<p className={`whitespace-nowrap overflow-hidden text-ellipsis max-w-[18ch]`}>{document.name}</p>
|
||||
<MdKeyboardArrowDown className={`${(dropDownTogglePage === 'pageDropDown' + indx) ? 'rotate-180' : ''}`} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{
|
||||
dropDownTogglePage === 'pageDropDown' + indx &&
|
||||
<div className='my-1 flex justify-center items-center gap-1 flex-wrap'>
|
||||
{document.images != undefined && document.images.map((img, indx) => (
|
||||
<a
|
||||
href={"#" + document.documentId + indx}
|
||||
className='max-w-max px-4 py-2 shadow cursor-pointer border-1 rounded-sm border-slate-200 hover:border-[var(--primary)] transition-all duration-300 bg-slate-300'
|
||||
>
|
||||
<p className='text-center text-xs text-slate-600'>{indx + 1}</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DocumentPages
|
||||
|
|
@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
|
|||
import axios from "axios"
|
||||
import { RootState } from "../../store/store";
|
||||
import { useParams } from "react-router-dom"
|
||||
import { DroppedItem } from "../../utlity/types";
|
||||
import { DroppedItem, DroppedItemsObj } from "../../utlity/types";
|
||||
|
||||
import Loader from "../dashboard/Loader";
|
||||
import SignCon from "../signature/SignCon";
|
||||
|
|
@ -11,7 +11,7 @@ import { Bounce, toast } from "react-toastify";
|
|||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { hideLoader, showLoader } from "../../store/slices/loaderSlice";
|
||||
|
||||
import { FaRegImage, FaFileAlt, FaSignature, FaStamp, FaCheck } from 'react-icons/fa'
|
||||
import { FaRegImage, FaFileAlt, FaSignature, FaStamp, FaCheck, FaQuestionCircle } from 'react-icons/fa'
|
||||
import { IoIosDocument } from 'react-icons/io'
|
||||
import { MdKeyboardArrowDown } from 'react-icons/md'
|
||||
import { TbChevronsDownLeft, TbSignature } from "react-icons/tb";
|
||||
|
|
@ -20,6 +20,10 @@ import dayjs from "dayjs";
|
|||
import maskUtils from "../../utlity/maskUtils";
|
||||
import StampUpload from "../stamp/StampUpload";
|
||||
import TermsModal from "./TermsModal";
|
||||
import DocumentPages from "./DocumentPages";
|
||||
import FieldList from "../process/processStepTwo/FieldList";
|
||||
import typeToIconMap from "../../helper/iconMap";
|
||||
import { droppedTagsDefaultField } from "../process/processStepTwo/DocumentContainer";
|
||||
|
||||
|
||||
|
||||
|
|
@ -139,9 +143,13 @@ const SignDocument = () => {
|
|||
const [tagJson, setTagJson] = useState<DroppedItem[] | []>([]);
|
||||
const [transaction, setTransaction] = useState<TransactionType | null>(null);
|
||||
const [recSignStatus, setRecSignStatus] = useState<string | null>(null);
|
||||
const [droppedItems, setDroppedItems] = useState([]);
|
||||
const[signTagId , setSignTagId] = useState<number>(0)
|
||||
|
||||
const [stamp, setStamp] = useState<StampTypeObj>({ open: false, blob: "" });
|
||||
|
||||
console.log(recipient, "recipient Line 145")
|
||||
|
||||
// Handling Date Opacity
|
||||
const [dateValues, setDateValues] = useState<{ [key: string]: string }>({});
|
||||
const [isDateOpen, setIsDateOpen] = useState<string | null>(null);
|
||||
|
|
@ -171,8 +179,12 @@ const SignDocument = () => {
|
|||
initial: null,
|
||||
});
|
||||
|
||||
|
||||
|
||||
const [signConfObj, setSignConfObj] = useState<SignConfTypeObj | {}>({});
|
||||
|
||||
console.log("signConfObj",signConfObj)
|
||||
|
||||
const zoom = (percentage: number, contentClass: string) => {
|
||||
const content = document.querySelector(`.${contentClass}`);
|
||||
if (content) {
|
||||
|
|
@ -195,11 +207,11 @@ const SignDocument = () => {
|
|||
|
||||
useEffect(() => {
|
||||
if (!focusElement) {
|
||||
if (tagJson && tagJson.length) {
|
||||
setFocusElement({ ...tagJson[0], focusElementIndx: 0 });
|
||||
if (droppedItems && droppedItems.length) {
|
||||
setFocusElement({ ...droppedItems[0], focusElementIndx: 0 });
|
||||
}
|
||||
}
|
||||
}, [tagJson])
|
||||
}, [droppedItems])
|
||||
|
||||
console.log(saved, "Line 162")
|
||||
|
||||
|
|
@ -232,7 +244,9 @@ const SignDocument = () => {
|
|||
}
|
||||
}, [saved])
|
||||
|
||||
const handleSignClick = (index: number) => {
|
||||
const handleSignClick = (index: number , id:number) => {
|
||||
console.log("IDNumber" , id)
|
||||
setSignTagId(id)
|
||||
if (saved.save) {
|
||||
if (index in signConfObj) {
|
||||
setOpenSign(true);
|
||||
|
|
@ -256,8 +270,11 @@ const SignDocument = () => {
|
|||
}
|
||||
}
|
||||
setSignConfObj({ ...newObj })
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
const handleStampClick = (index: number) => {
|
||||
console.log("Stamp Clicked", index)
|
||||
setStamp({
|
||||
|
|
@ -282,9 +299,12 @@ const SignDocument = () => {
|
|||
.then((res) => {
|
||||
console.dir(res)
|
||||
if (res.status === 200) {
|
||||
|
||||
console.log(res, "Line 288")
|
||||
|
||||
setSelectedDocuments(res.data.documents)
|
||||
setRecipient(res.data.recipient)
|
||||
setTagJson(res.data.tagJsons)
|
||||
setDroppedItems(res.data.tagJsons)
|
||||
setTransaction(res.data.transaction)
|
||||
setRecSignStatus(res.data.status)
|
||||
|
||||
|
|
@ -301,7 +321,7 @@ const SignDocument = () => {
|
|||
}
|
||||
|
||||
|
||||
console.log(tagJson, "Line 261")
|
||||
console.log(droppedItems, "Line 261")
|
||||
|
||||
const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
|
@ -309,7 +329,7 @@ const SignDocument = () => {
|
|||
tags: []
|
||||
}
|
||||
|
||||
if (!tagJson) return;
|
||||
if (!droppedItems) return;
|
||||
|
||||
// const form = e.currentTarget;
|
||||
// const formData = new FormData(form);
|
||||
|
|
@ -321,8 +341,8 @@ const SignDocument = () => {
|
|||
// });
|
||||
|
||||
let signInitialsCount = 0;
|
||||
for (let i = 0; i < tagJson.length; i++) {
|
||||
if (tagJson[i].type === "SIGNATURE" || tagJson[i].type === "INITIALS") {
|
||||
for (let i = 0; i < droppedItems.length; i++) {
|
||||
if (droppedItems[i].type === "SIGNATURE" || droppedItems[i].type === "INITIALS") {
|
||||
signInitialsCount += 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -344,7 +364,7 @@ const SignDocument = () => {
|
|||
return;
|
||||
}
|
||||
|
||||
for (const tag of tagJson) {
|
||||
for (const tag of droppedItems) {
|
||||
console.log(tag, "Tag Data")
|
||||
|
||||
// if ((tag.type === "SIGNATURE" || tag.subType === "INITIALS") && !tag.value) {
|
||||
|
|
@ -492,11 +512,12 @@ const SignDocument = () => {
|
|||
|
||||
const fetchSignatureData = async (signatureId: string) => {
|
||||
try {
|
||||
const response = await axios.get(`${import.meta.env.VITE_BASE_URI}/api/sign/signatures/${signatureId}`, {
|
||||
const response = await axios.get(`${import.meta.env.VITE_BASE_URI}/api/sign/signatures/${signatureId}?recipientId=${recipientId}`, {
|
||||
headers: { "ngrok-skip-browser-warning": "69420" }
|
||||
});
|
||||
if (response.status === 200) {
|
||||
return response.data.signature;
|
||||
console.log("line 516" , response.data)
|
||||
return response.data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching signature data:", error);
|
||||
|
|
@ -506,21 +527,21 @@ const SignDocument = () => {
|
|||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
if (tagJson) {
|
||||
for (const tag of tagJson) {
|
||||
if (droppedItems) {
|
||||
for (const tag of droppedItems) {
|
||||
if (tag.type === "SIGNATURE" && "value" in tag) {
|
||||
const signatureData = await fetchSignatureData(tag.value);
|
||||
console.log(signatureData);
|
||||
console.log("Currnet Signature",signatureData);
|
||||
}
|
||||
}
|
||||
}
|
||||
})()
|
||||
}, [tagJson])
|
||||
}, [droppedItems])
|
||||
|
||||
|
||||
const handleTagUpdate = (updateIndx: number, updateValue: string) => {
|
||||
if (tagJson && tagJson.length) {
|
||||
const updatedTag = tagJson.map((val, indx) => {
|
||||
if (droppedItems && droppedItems.length) {
|
||||
const updatedTag = droppedItems.map((val, indx) => {
|
||||
if (indx === updateIndx) {
|
||||
return {
|
||||
...val,
|
||||
|
|
@ -529,7 +550,7 @@ const SignDocument = () => {
|
|||
}
|
||||
return val;
|
||||
})
|
||||
setTagJson(updatedTag);
|
||||
setDroppedItems(updatedTag);
|
||||
}
|
||||
|
||||
// setTagJson((prev) => {
|
||||
|
|
@ -541,6 +562,198 @@ const SignDocument = () => {
|
|||
// });
|
||||
}
|
||||
|
||||
|
||||
// HANDLE DROP - START
|
||||
const handleDrop = (event: React.DragEvent<HTMLDivElement>, docId: string, documentId: number, pageIndex: number) => {
|
||||
console.log("// HANDLE DROP - START")
|
||||
event.preventDefault();
|
||||
|
||||
const data = window.dragElemData;
|
||||
if (!data) return;
|
||||
|
||||
const dragElemData = JSON.parse(data); // Get the dropped label
|
||||
|
||||
const field = { ...dragElemData }
|
||||
if (!field.label) return;
|
||||
|
||||
// const field = fields.find((item) => item.label === dragElemData.label); // Find corresponding field
|
||||
// if (!field) return; // If not found, exit
|
||||
|
||||
const dropZone = event.currentTarget.getBoundingClientRect();
|
||||
const x = event.clientX - dropZone.left - dragElemData.offsetX;
|
||||
const y = event.clientY - dropZone.top - dragElemData.offsetY;
|
||||
|
||||
const key = `${docId}_${pageIndex}`;
|
||||
// const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
|
||||
|
||||
let prepData = {
|
||||
properties: data.properties,
|
||||
icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,
|
||||
type: dragElemData.label.toUpperCase(),
|
||||
subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
|
||||
label: dragElemData.label,
|
||||
dimensions: {
|
||||
left: x,
|
||||
top: y,
|
||||
width: dragElemData.width,
|
||||
height: dragElemData.height,
|
||||
},
|
||||
styles: dragElemData.label === "text" ? {
|
||||
"font": "Great Vibes",
|
||||
"italic": false,
|
||||
"bold": false,
|
||||
"underline": false,
|
||||
"color": "black",
|
||||
"textSize": 14.0
|
||||
} : null,
|
||||
documentId: docId,
|
||||
pageIndex: pageIndex,
|
||||
recipientId: dragElemData.recipientId,
|
||||
recipientIndx: dragElemData.recipientIndx,
|
||||
update: true,
|
||||
isDeleted: false
|
||||
}
|
||||
|
||||
if ("group" in dragElemData) {
|
||||
prepData.group = dragElemData.group;
|
||||
prepData.isGroupExist = false;
|
||||
|
||||
// if(uniqGroupIds.includes(dragElemData.group)) {
|
||||
// prepData.isGroupExist = true;
|
||||
// } else {
|
||||
// prepData.isGroupExist = false;
|
||||
// setUniqGroupIds([...uniqGroupIds, dragElemData.group]);
|
||||
// }
|
||||
}
|
||||
|
||||
if (prepData.type === "temporal") {
|
||||
prepData.currentTimeStamp = true;
|
||||
}
|
||||
|
||||
if (prepData.type.toLowerCase() === "number") {
|
||||
prepData.decimalPlace = 0;
|
||||
prepData.isCurrency = false;
|
||||
}
|
||||
|
||||
// const dataToSet: DroppedItemsObj = {
|
||||
// ...droppedItems,
|
||||
// [key]: [...(droppedItems[key] || []),
|
||||
// prepData],
|
||||
// }
|
||||
|
||||
// const dataToSet: DroppedItemsObj = {
|
||||
// ...droppedItems,
|
||||
// [key]: [...(droppedItems[key] || []),
|
||||
// {
|
||||
// ...prepData,
|
||||
// radioGroups: dragElemData.label === "radio" ?
|
||||
// [
|
||||
// {
|
||||
// ...prepData,
|
||||
// dimensions: {
|
||||
// ...prepData.dimensions, top: 8, left: 10
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// ...prepData, dimensions: {
|
||||
// ...prepData.dimensions,
|
||||
// top: 8,
|
||||
// left: 10
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// :
|
||||
// []
|
||||
// }],
|
||||
// }
|
||||
|
||||
// if (dragElemData.label === "radio") {
|
||||
// setDroppedItems(dataToSet);
|
||||
// } else {
|
||||
// setDroppedItems(dataToSet);
|
||||
// }
|
||||
|
||||
setDroppedItems((prev) => [...prev, prepData]);
|
||||
// setDroppedItemsCounter((prev) => prev + 1);
|
||||
|
||||
// setTimeout(() => {
|
||||
// const tagIndex = key in droppedItems ? droppedItems[key].length : 0;
|
||||
// handleTagClick(key, tagIndex)
|
||||
// }, 0)
|
||||
};
|
||||
// HANDLE DROP - END
|
||||
|
||||
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault(); // Allows the drop event to work
|
||||
};
|
||||
|
||||
// HANDLE TAG MOUSE DOWN - START
|
||||
const handleTagMouseDown = (event: React.MouseEvent<HTMLDivElement>, key: string, index: number) => {
|
||||
event.preventDefault();
|
||||
|
||||
let targetContainer = event?.currentTarget?.parentElement?.parentElement;
|
||||
let targetElement = event?.currentTarget;
|
||||
|
||||
if (!targetContainer || !targetElement) return;
|
||||
|
||||
const containerRect = targetContainer.getBoundingClientRect();
|
||||
const elementRect = targetElement.getBoundingClientRect();
|
||||
|
||||
// Calculate the initial offset (where the mouse was clicked inside the element)
|
||||
const offsetX = event.clientX - elementRect.left;
|
||||
const offsetY = event.clientY - elementRect.top;
|
||||
|
||||
const conScrollWidth = targetContainer?.scrollWidth;
|
||||
const conScrollHeight = targetContainer?.scrollHeight;
|
||||
|
||||
let isGroupAttr = event.currentTarget.hasAttribute("group");
|
||||
let groupId = null;
|
||||
if (isGroupAttr) {
|
||||
groupId = event.currentTarget.getAttribute("group");
|
||||
}
|
||||
|
||||
let groupElements: NodeListOf<HTMLElement> | null = null
|
||||
if (isGroupAttr && groupId) {
|
||||
groupElements = document.querySelectorAll(`div[group="${groupId}"]`);
|
||||
}
|
||||
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
// Get new X and Y positions relative to the container
|
||||
let left = event.clientX - containerRect.left - offsetX;
|
||||
let top = event.clientY - containerRect.top - offsetY;
|
||||
|
||||
|
||||
// **Restrict movement within container bounds**
|
||||
left = Math.max(0, Math.min(left, conScrollWidth - elementRect.width));
|
||||
top = Math.max(0, Math.min(top, conScrollHeight - elementRect.height));
|
||||
|
||||
console.log(left, top, "LEFTTOP")
|
||||
|
||||
if (groupElements != null && groupElements.length) handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY);
|
||||
|
||||
// Apply the movement to the element
|
||||
setDroppedItems(
|
||||
droppedItems.map((item, i) =>
|
||||
i === index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item
|
||||
)
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
document.removeEventListener("pointermove", handleMouseMove);
|
||||
document.removeEventListener("pointerup", handleMouseUp);
|
||||
};
|
||||
|
||||
// Add event listeners
|
||||
document.addEventListener("pointermove", handleMouseMove);
|
||||
document.addEventListener("pointerup", handleMouseUp);
|
||||
};
|
||||
// HANDLE TAG MOUSE DOWN - END
|
||||
|
||||
|
||||
console.log(droppedItems, "DROPPED ITEMS LINE 680")
|
||||
|
||||
// const [showTerms, setShowTerms] = useState<boolean>(true);
|
||||
return (
|
||||
<div className={`w-full h-screen overflow-hidden relative ${(globalLoader.isLoading) ? 'pointer-events-none overflow-hidden' : ''}`}>
|
||||
|
|
@ -642,9 +855,6 @@ const SignDocument = () => {
|
|||
|
||||
<p>{recipient && recipient.firstName} {recipient && recipient.lastName}</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
{/* Right Side - ENDS */}
|
||||
</div>
|
||||
|
|
@ -655,65 +865,23 @@ const SignDocument = () => {
|
|||
|
||||
{/* Left Side pages start */}
|
||||
{/* <div className="lg:col-span-2 bg-slate-100 h-full p-4 overflow-y-auto"></div> */}
|
||||
|
||||
<div className='col-span-2 bg-white h-full p-4 overflow-y-auto'>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
{selectedDocuments && selectedDocuments.length && selectedDocuments.map((document, indx) => {
|
||||
return (
|
||||
<div
|
||||
key={indx}
|
||||
// tabIndex={1}
|
||||
// onBlur={() => setDropDownTogglePage('')}
|
||||
>
|
||||
<div
|
||||
onClick={() => setDropDownTogglePage(`${(dropDownTogglePage === 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)}
|
||||
className={`p-2 ${(dropDownTogglePage === 'pageDropDown' + indx) ? "bg-[var(--primary)]" : "bg-slate-200"} flex flex-col justify-center items-center gap-2 rounded`}>
|
||||
{
|
||||
document.images != undefined && <img
|
||||
key={indx}
|
||||
className='rounded-sm shadow'
|
||||
src={document.images[0].src}
|
||||
alt="" />
|
||||
}
|
||||
|
||||
<div
|
||||
className={`flex items-center justify-between w-full text-xs rounded-sm cursor-pointer ${(dropDownTogglePage === 'pageDropDown' + indx) ? "text-slate-100" : "text-slate-600"}`}>
|
||||
<p className={`whitespace-nowrap overflow-hidden text-ellipsis max-w-[18ch]`}>{document.name}</p>
|
||||
<MdKeyboardArrowDown className={`${(dropDownTogglePage === 'pageDropDown' + indx) ? 'rotate-180' : ''}`} />
|
||||
</div>
|
||||
{recipientId && <FieldList color={"#8f87f1"} recipientId={Number(recipientId)} recipientIndx={0} acntId={"1"} />}
|
||||
</div>
|
||||
|
||||
|
||||
{
|
||||
dropDownTogglePage === 'pageDropDown' + indx &&
|
||||
<div className='my-1 flex justify-center items-center gap-1 flex-wrap'>
|
||||
{document.images != undefined && document.images.map((img, indx) => (
|
||||
<a
|
||||
href={"#" + document.documentId + indx}
|
||||
className='max-w-max px-4 py-2 shadow cursor-pointer border-1 rounded-sm border-slate-200 hover:border-[var(--primary)] transition-all duration-300 bg-slate-300'
|
||||
>
|
||||
<p className='text-center text-xs text-slate-600'>{indx + 1}</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{/* Pages - END */}
|
||||
|
||||
{/* Main container */}
|
||||
<div
|
||||
id="doc-con"
|
||||
className="zoom-con relative col-span-10 px-4 bg-slate-100 h-full w-full overflow-auto scroll-smooth"
|
||||
className="zoom-con relative col-span-8 px-4 bg-slate-100 h-full w-full overflow-auto scroll-smooth"
|
||||
>
|
||||
|
||||
{
|
||||
selectedDocuments && selectedDocuments.length > 0 && selectedDocuments.map((doc) => {
|
||||
console.log(tagJson, "tagJsontagJsontagJson")
|
||||
console.log(droppedItems, "tagJsontagJsontagJson")
|
||||
return (
|
||||
<div key={doc.documentId} className='flex flex-col'>
|
||||
<div className='py-2 text-sm'>
|
||||
|
|
@ -722,16 +890,20 @@ const SignDocument = () => {
|
|||
|
||||
<div className='flex flex-col gap-3 max-w-max relative left-[50%] translate-x-[-50%]'>
|
||||
{
|
||||
tagJson && tagJson.length > 0 && doc.images && doc.images.length > 0 && doc.images.map((page, indx) => {
|
||||
doc.images && doc.images.length > 0 && doc.images.map((page, indx) => {
|
||||
const key = `${doc.documentId}_${page.index}`;
|
||||
const currDocTags = tagJson.filter((val) => val.pageIndex === page.index)
|
||||
console.log(currDocTags, tagJson, page, doc, "innnnnnnnnnnnn")
|
||||
console.log(droppedItems, "line 820")
|
||||
// const tagJsonData = [...droppedItems];
|
||||
// console.log(tagJsonData, "Line 821")
|
||||
|
||||
const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index)
|
||||
console.log(currDocTags, droppedItems, page, doc, "innnnnnnnnnnnn")
|
||||
return (
|
||||
<div
|
||||
key={indx}
|
||||
id={doc.documentId + indx}
|
||||
// onDrop={(e) => handleDrop(e, doc.documentId, doc.documentId, page.index)}
|
||||
// onDragOver={handleDragOver}
|
||||
onDrop={(e) => handleDrop(e, doc.documentId, doc.documentId, page.index)}
|
||||
onDragOver={(e) => handleDragOver(e)}
|
||||
className='drop-page-in shadow-md relative'
|
||||
>
|
||||
|
||||
|
|
@ -739,13 +911,15 @@ const SignDocument = () => {
|
|||
|
||||
|
||||
{currDocTags.map((item, index) => {
|
||||
console.log(item, "micCheck 842")
|
||||
if (item.pageIndex !== page.index) return;
|
||||
return (
|
||||
<div
|
||||
tabIndex={1}
|
||||
onFocus={() => setFocusElement({ ...item, focusElementIndx: index })}
|
||||
key={item.id}
|
||||
draggable="false"
|
||||
// draggable="false"
|
||||
onPointerDown={(e) => handleTagMouseDown(e, key, index)}
|
||||
className="absolute rounded dropped-item text-sm"
|
||||
// onClick={() => handleTagClick(key, index)}
|
||||
style={{
|
||||
|
|
@ -849,7 +1023,7 @@ const SignDocument = () => {
|
|||
<div
|
||||
tabIndex={1}
|
||||
id={item.id}
|
||||
onClick={() => handleSignClick(index)}
|
||||
onClick={() => handleSignClick(index , item.id)}
|
||||
className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none bg-transparent" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
|
||||
// style={{ height: item.dimensions.height + "px" }}
|
||||
>
|
||||
|
|
@ -865,7 +1039,9 @@ const SignDocument = () => {
|
|||
width: `${item.dimensions.width}px`,
|
||||
height: `${item.dimensions.height}px`,
|
||||
}}
|
||||
src={saved.signature as string} />
|
||||
// src={saved.signature as string} />
|
||||
src={`data:image/png;base64,${saved.signature}`}
|
||||
/>
|
||||
}
|
||||
</div>}
|
||||
{/* SIGNATURE FIELD - END */}
|
||||
|
|
@ -876,7 +1052,7 @@ const SignDocument = () => {
|
|||
<div
|
||||
tabIndex={1}
|
||||
id={item.id}
|
||||
onClick={() => handleSignClick(index)}
|
||||
onClick={() => handleSignClick(index , item.id)}
|
||||
className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
|
||||
// style={{ height: item.dimensions.height + "px" }}
|
||||
>
|
||||
|
|
@ -889,7 +1065,9 @@ const SignDocument = () => {
|
|||
height: `${item.dimensions.height}px`,
|
||||
}}
|
||||
className="w-[100%] h-full"
|
||||
src={saved.initial as string} />
|
||||
// src={saved.initial as string}
|
||||
src={`data:image/png;base64,${saved.initial}`}
|
||||
/>
|
||||
}
|
||||
</div>}
|
||||
{/* INITIALS FIELD - END */}
|
||||
|
|
@ -1074,6 +1252,10 @@ const SignDocument = () => {
|
|||
|
||||
</div>
|
||||
|
||||
|
||||
<DocumentPages selectedDocuments={selectedDocuments} setDropDownTogglePage={setDropDownTogglePage} dropDownTogglePage={dropDownTogglePage} />
|
||||
|
||||
|
||||
{/* Right Side - START */}
|
||||
{/* <div className="col-span-2 bg-slate-100 h-full p-4 overflow-y-auto">
|
||||
{
|
||||
|
|
@ -1091,7 +1273,7 @@ const SignDocument = () => {
|
|||
|
||||
|
||||
<div style={{ display: `${openSign ? 'block' : 'none'}` }}>
|
||||
<SignCon recipientId={recipientId as string} setOpenSign={setOpenSign} saved={saved} setSaved={setSaved} />
|
||||
<SignCon recipientId={recipientId as string} setOpenSign={setOpenSign} saved={saved} setSaved={setSaved} signTagId={signTagId}/>
|
||||
</div>
|
||||
|
||||
<div style={{ display: `${stamp.open ? 'block' : 'none'}` }}>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import typeToIconMap from '../../../helper/iconMap';
|
|||
import { IoAdd } from 'react-icons/io5';
|
||||
import Loader from '../../dashboard/Loader';
|
||||
import { TRANSACTION_TEMPLATE_TOGGLE } from "../../../store/slices/selectedRecipientsSlice";
|
||||
import { handleGroupBorderPosition } from '../../../utlity/tagGroupConUtils';
|
||||
|
||||
export interface DroppedItemsObj {
|
||||
[key: string]: DroppedItem[]
|
||||
|
|
@ -27,7 +28,7 @@ interface DroppedTagsDefaultFieldType {
|
|||
[key: string]: string
|
||||
}
|
||||
|
||||
const droppedTagsDefaultField: DroppedTagsDefaultFieldType = {
|
||||
export const droppedTagsDefaultField: DroppedTagsDefaultFieldType = {
|
||||
text: "paragraph",
|
||||
temporal: "date",
|
||||
number: "integer",
|
||||
|
|
@ -64,6 +65,8 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
// const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments)
|
||||
const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
|
||||
|
||||
// const [uniqGroupIds, setUniqGroupIds] = useState<string[]>([]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
|
||||
|
|
@ -143,7 +146,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
// debugger
|
||||
|
||||
for (const [recipientId, tags] of Object.entries(tagsData)) {
|
||||
console.log(recipientId, tags, "line 133")
|
||||
// console.log(recipientId, tags, "line 133")
|
||||
const updateTags = []
|
||||
for (const tag of tags) {
|
||||
if ("update" in tag && tag.update) {
|
||||
|
|
@ -202,7 +205,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
let mask = null
|
||||
|
||||
|
||||
console.log(dropTag, "line 132")
|
||||
// console.log(dropTag, "line 132")
|
||||
|
||||
// if (dropTag.subType?.toLowerCase() === "password") {
|
||||
// console.log(dropTag)
|
||||
|
|
@ -212,7 +215,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
}
|
||||
// }
|
||||
|
||||
console.log(dropTag, "line 204")
|
||||
// console.log(dropTag, "line 204")
|
||||
|
||||
const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
|
||||
|
||||
|
|
@ -289,6 +292,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
|
||||
(async () => {
|
||||
const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
|
||||
// const res = await api.put(`/api/accounts/${accountId}/transactions/${transactionId}`, { status: "SENT" })
|
||||
console.log(res, "Check123")
|
||||
})()
|
||||
}, [isSend])
|
||||
|
|
@ -349,6 +353,18 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
isDeleted: false
|
||||
}
|
||||
|
||||
if ("group" in dragElemData) {
|
||||
prepData.group = dragElemData.group;
|
||||
prepData.isGroupExist = false;
|
||||
|
||||
// if(uniqGroupIds.includes(dragElemData.group)) {
|
||||
// prepData.isGroupExist = true;
|
||||
// } else {
|
||||
// prepData.isGroupExist = false;
|
||||
// setUniqGroupIds([...uniqGroupIds, dragElemData.group]);
|
||||
// }
|
||||
}
|
||||
|
||||
if (prepData.type === "temporal") {
|
||||
prepData.currentTimeStamp = true;
|
||||
}
|
||||
|
|
@ -361,36 +377,44 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
const dataToSet: DroppedItemsObj = {
|
||||
...droppedItems,
|
||||
[key]: [...(droppedItems[key] || []),
|
||||
{
|
||||
...prepData,
|
||||
radioGroups: dragElemData.label === "radio" ?
|
||||
[
|
||||
{
|
||||
...prepData,
|
||||
dimensions: {
|
||||
...prepData.dimensions, top: 8, left: 10
|
||||
}
|
||||
},
|
||||
{
|
||||
...prepData, dimensions: {
|
||||
...prepData.dimensions,
|
||||
top: 8,
|
||||
left: 10
|
||||
}
|
||||
}
|
||||
]
|
||||
:
|
||||
[]
|
||||
}],
|
||||
prepData],
|
||||
}
|
||||
|
||||
if (dragElemData.label === "radio") {
|
||||
setDroppedItems(dataToSet);
|
||||
} else {
|
||||
setDroppedItems(dataToSet);
|
||||
}
|
||||
// const dataToSet: DroppedItemsObj = {
|
||||
// ...droppedItems,
|
||||
// [key]: [...(droppedItems[key] || []),
|
||||
// {
|
||||
// ...prepData,
|
||||
// radioGroups: dragElemData.label === "radio" ?
|
||||
// [
|
||||
// {
|
||||
// ...prepData,
|
||||
// dimensions: {
|
||||
// ...prepData.dimensions, top: 8, left: 10
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// ...prepData, dimensions: {
|
||||
// ...prepData.dimensions,
|
||||
// top: 8,
|
||||
// left: 10
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// :
|
||||
// []
|
||||
// }],
|
||||
// }
|
||||
|
||||
// if (dragElemData.label === "radio") {
|
||||
// setDroppedItems(dataToSet);
|
||||
// } else {
|
||||
// setDroppedItems(dataToSet);
|
||||
// }
|
||||
|
||||
setDroppedItems(dataToSet);
|
||||
setDroppedItemsCounter((prev) => prev + 1);
|
||||
|
||||
setTimeout(() => {
|
||||
const tagIndex = key in droppedItems ? droppedItems[key].length : 0;
|
||||
handleTagClick(key, tagIndex)
|
||||
|
|
@ -403,6 +427,9 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
event.preventDefault();
|
||||
|
||||
let targetContainer = event?.currentTarget?.parentElement?.parentElement;
|
||||
|
||||
console.log(targetContainer, "targetContainer line 421")
|
||||
|
||||
let targetElement = event?.currentTarget?.parentElement;
|
||||
|
||||
if (!targetContainer || !targetElement) return;
|
||||
|
|
@ -417,16 +444,29 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
const conScrollWidth = targetContainer?.scrollWidth;
|
||||
const conScrollHeight = targetContainer?.scrollHeight;
|
||||
|
||||
let isGroupAttr = event.currentTarget.hasAttribute("group");
|
||||
let groupId = null;
|
||||
if (isGroupAttr) {
|
||||
groupId = event.currentTarget.getAttribute("group");
|
||||
}
|
||||
|
||||
let groupElements: NodeListOf<HTMLElement> | null = null
|
||||
if (isGroupAttr && groupId) {
|
||||
groupElements = document.querySelectorAll(`div[group="${groupId}"]`);
|
||||
}
|
||||
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
// Get new X and Y positions relative to the container
|
||||
let left = event.clientX - containerRect.left - offsetX;
|
||||
let top = event.clientY - containerRect.top - offsetY;
|
||||
|
||||
|
||||
// **Restrict movement within container bounds**
|
||||
left = Math.max(0, Math.min(left, conScrollWidth - elementRect.width));
|
||||
top = Math.max(0, Math.min(top, conScrollHeight - elementRect.height));
|
||||
|
||||
if (groupElements != null && groupElements.length) handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY);
|
||||
|
||||
// Apply the movement to the element
|
||||
setDroppedItems({
|
||||
...droppedItems,
|
||||
|
|
@ -534,9 +574,34 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
})()
|
||||
}
|
||||
|
||||
|
||||
const handleAddRadioClick = (key: string) => {
|
||||
console.log("Handle Radio Clicled", key)
|
||||
console.log(droppedItems, "line 525")
|
||||
// const handleAddRadioClick = (key: string) => {
|
||||
// console.log("Handle Radio Clicled", key)
|
||||
// console.log(droppedItems, "line 525")
|
||||
// }
|
||||
|
||||
const handleAddGroupItemClicked = (key: string, item) => {
|
||||
|
||||
|
||||
const groupId = item.group;
|
||||
|
||||
item = { ...item, dimensions: { ...item.dimensions, top: item.dimensions.top + item.dimensions.height + 20 } }
|
||||
|
||||
// dimensions: { ...item.dimensions, left: newLeft, top: newTop }
|
||||
|
||||
setTimeout(() => {
|
||||
handleIGroupBorderPosition(item.group)
|
||||
}, 0)
|
||||
|
||||
setDroppedItems({
|
||||
...droppedItems,
|
||||
[key]: [...droppedItems[key], { ...item, isGroupExist: true }],
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// const handleAddRadio = (e: React.MouseEvent<HTMLElement>, key: string, index: number) => {
|
||||
|
|
@ -685,6 +750,23 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
};
|
||||
|
||||
|
||||
|
||||
|
||||
function handleIGroupBorderPosition(groupId: string) {
|
||||
|
||||
const groupElements: NodeListOf<HTMLElement> = document.querySelectorAll(`div[group="${groupId}"]`);
|
||||
|
||||
let targetContainer = groupElements[0].parentElement?.parentElement;
|
||||
console.log(targetContainer, "targetContainer line 421")
|
||||
let targetElement = groupElements[0].parentElement;
|
||||
|
||||
if (!targetContainer || !targetElement) return;
|
||||
const containerRect = targetContainer.getBoundingClientRect();
|
||||
|
||||
handleGroupBorderPosition(groupElements, containerRect, 40, 40);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Center Doc Container - START */}
|
||||
|
|
@ -715,10 +797,12 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
{/* DROPPED ITEMS - Render only the dropped items for this specific docId and page - STARTS */}
|
||||
{droppedItems[key]?.map((item, index) => {
|
||||
if (item.isDeleted) return;
|
||||
|
||||
const type = item.type.toUpperCase();
|
||||
const IconComponent = typeToIconMap[type] || <FaQuestionCircle />;
|
||||
const selectedRecipient = selectedRecipients.filter((obj, indx) => obj.id === item.recipientId);
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
key={index}
|
||||
draggable="false"
|
||||
|
|
@ -762,55 +846,42 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
</div>}
|
||||
{/* Expand Circle - ENDS */}
|
||||
|
||||
{/* Tag - START */}
|
||||
{
|
||||
<div
|
||||
{...("group" in item && item.group ? { "group": item.group } : {})}
|
||||
onPointerDown={(e) => handleTagMouseDown(e, key, index)}
|
||||
className='p-2 rounded-sm h-full shadow opacity-40 cursor-grab w-full'
|
||||
style={{ background: selectedRecipient[0]?.color }}
|
||||
>
|
||||
<p
|
||||
className={`flex justify-center items-center w-full text-xl text-white h-full`}
|
||||
// style={{ color: selectedRecipients[item.recipientIndx]?.color }}
|
||||
>
|
||||
{IconComponent}
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
{/* Tag - END */}
|
||||
|
||||
</div>
|
||||
|
||||
{
|
||||
item.type !== "radio" ?
|
||||
<div
|
||||
onPointerDown={(e) => handleTagMouseDown(e, key, index)}
|
||||
// style={{ width: `${item.width}px !important` }}
|
||||
className='p-2 rounded-sm h-full shadow opacity-40 cursor-grab w-full'
|
||||
style={{ background: selectedRecipient[0]?.color }}
|
||||
>
|
||||
<p
|
||||
className={`flex justify-center items-center w-full text-xl text-white h-full`}
|
||||
// style={{ color: selectedRecipients[item.recipientIndx]?.color }}
|
||||
>
|
||||
{IconComponent}
|
||||
</p>
|
||||
</div>
|
||||
:
|
||||
"group" in item && item.group && "isGroupExist" in item && !item.isGroupExist &&
|
||||
<>
|
||||
<div>
|
||||
{/* Radio - Container - START */}
|
||||
<div>
|
||||
|
||||
{/* Radio- Item - START */}
|
||||
<div
|
||||
onPointerDown={(e) => handleTagMouseDown(e, key, index)}
|
||||
// style={{ width: `${item.width}px !important` }}
|
||||
className='p-2 rounded-sm h-full shadow opacity-40 cursor-grab w-full'
|
||||
style={{ background: selectedRecipient[0]?.color }}
|
||||
>
|
||||
<p
|
||||
className={`flex justify-center items-center w-full text-xl text-white h-full`}
|
||||
// style={{ color: selectedRecipients[item.recipientIndx]?.color }}
|
||||
>
|
||||
{IconComponent}
|
||||
</p>
|
||||
|
||||
<div className="group-border" border-group={item.group} border-pos="top"></div>
|
||||
<div className="group-border" border-group={item.group} border-pos="right"></div>
|
||||
<div className="group-border bottom-border" border-group={item.group} border-pos="bottom">
|
||||
<div onClick={() => handleAddGroupItemClicked(key, item)}><IoAdd /></div>
|
||||
</div>
|
||||
{/* Radio- Item - END */}
|
||||
|
||||
</div>
|
||||
{/* Radio - Container - END */}
|
||||
|
||||
|
||||
<IoAdd onClick={() => handleAddRadioClick(key)} className='ml-[50%] translate-x-[-50%] cursor-pointer' />
|
||||
</div>
|
||||
|
||||
<div className="group-border" border-group={item.group} border-pos="left"></div>
|
||||
</>
|
||||
|
||||
}
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import fields from '../../../helper/fieldsListData';
|
||||
import api from '../../../config/api';
|
||||
// import api from '../../../config/api';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import typeToIconMap from '../../../helper/iconMap';
|
||||
import { FaQuestionCircle } from 'react-icons/fa';
|
||||
import { TagsProperties } from '../../../utlity/types';
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import axios from 'axios';
|
||||
|
||||
const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string, recipientId: number, recipientIndx: number, tagsProperties: TagsProperties) => {
|
||||
const dragElemRect = event.currentTarget.getBoundingClientRect();
|
||||
|
|
@ -31,6 +33,8 @@ const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string
|
|||
properties: tagsProperties
|
||||
}
|
||||
|
||||
if (obj.label.toLowerCase() === "radio" || obj.label.toLowerCase() === "checkbox") obj.group = uuidv4();
|
||||
|
||||
window.dragElemData = JSON.stringify(obj);
|
||||
}
|
||||
|
||||
|
|
@ -38,21 +42,31 @@ interface FieldListProps {
|
|||
color: string;
|
||||
recipientId: number;
|
||||
recipientIndx: number;
|
||||
acntId?: string | null;
|
||||
}
|
||||
|
||||
const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx }) => {
|
||||
const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx, acntId = null }) => {
|
||||
|
||||
const [tagsData, setTagsData] = useState<TagsProperties[]>([]);
|
||||
|
||||
const { accountId } = useParams<{ accountId: string }>();
|
||||
let { accountId } = useParams<{ accountId: string }>();
|
||||
|
||||
if(acntId) {
|
||||
accountId = acntId;
|
||||
}
|
||||
|
||||
if (!accountId) {
|
||||
window.location.href = "/";
|
||||
return null;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
api
|
||||
.get(`/api/accounts/${accountId}/tags`)
|
||||
axios
|
||||
.get(`${import.meta.env.VITE_BASE_URI}/api/accounts/${accountId}/tags`, {
|
||||
headers: {
|
||||
"ngrok-skip-browser-warning": "69420",
|
||||
}
|
||||
})
|
||||
.then((res) => {
|
||||
const priorityOrder = ['SIGNATURE', 'INITIALS', 'STAMP'];
|
||||
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
|
|||
|
||||
const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap];
|
||||
|
||||
console.log("selectedTag", selectedTag, selectedType)
|
||||
// console.log("selectedTag", selectedTag, selectedType)
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -26,6 +26,9 @@ import { FaSpinner } from "react-icons/fa";
|
|||
import { GrCheckboxSelected } from "react-icons/gr";
|
||||
import { Bounce, toast } from "react-toastify";
|
||||
import axios from 'axios';
|
||||
import { SaveType } from '../client/SignDocument';
|
||||
import { CiSaveDown1 } from 'react-icons/ci';
|
||||
import api from '../../config/api';
|
||||
|
||||
interface Signature {
|
||||
id: string;
|
||||
|
|
@ -44,9 +47,15 @@ interface Signature {
|
|||
}
|
||||
|
||||
interface AddSignatureModalProps {
|
||||
setShowAddSignature?: (value: boolean) => void;
|
||||
getAllSignatures: () => Promise<void>;
|
||||
editingSignature?: Signature | null;
|
||||
// setShowAddSignature?: (value: boolean) => void;
|
||||
// getAllSignatures: () => Promise<void>;
|
||||
// editingSignature?: Signature | null;
|
||||
|
||||
recipientId?: string;
|
||||
setOpenSign: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
saved: SaveType;
|
||||
setSaved: React.Dispatch<React.SetStateAction<SaveType>>;
|
||||
signTagId: boolean
|
||||
}
|
||||
|
||||
interface Account {
|
||||
|
|
@ -70,11 +79,15 @@ interface SelectStyle {
|
|||
}
|
||||
|
||||
const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
||||
setShowAddSignature,
|
||||
getAllSignatures,
|
||||
editingSignature
|
||||
setOpenSign,
|
||||
recipientId,
|
||||
saved,
|
||||
setSaved,
|
||||
signTagId
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState<'SELECT' | 'DRAW' | 'UPLOAD'>('SELECT');
|
||||
|
||||
console.log("savedModal", saved)
|
||||
const [activeTab, setActiveTab] = useState<'TYPED' | 'DRAW' | 'UPLOAD' | 'SAVED'>('TYPED');
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [initials, setInitials] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
|
||||
|
|
@ -92,18 +105,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
{ id: 6, name: 'classic', initials: 'LA', style: 'classic' },
|
||||
];
|
||||
|
||||
const [selectedSignature, setSelectedSignature] = useState<SelectStyle>(
|
||||
signatureOptions.length > 0 ? { id: signatureOptions[0].id, style: signatureOptions[0].style } : { id: 0, style: "" }
|
||||
);
|
||||
|
||||
// Store the actual file
|
||||
const [file1, setFile1] = useState<File | null>(null);
|
||||
const [file2, setFile2] = useState<File | null>(null);
|
||||
|
||||
// Store the preview URL
|
||||
const [preview1, setPreview1] = useState<string | null>(null);
|
||||
const [preview2, setPreview2] = useState<string | null>(null);
|
||||
|
||||
// User data
|
||||
const [user, setUser] = useState<UserData>({
|
||||
id: "",
|
||||
|
|
@ -118,48 +119,52 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
},
|
||||
});
|
||||
|
||||
const isEditMode = !!editingSignature;
|
||||
console.log("User data", user)
|
||||
|
||||
const [selectedSignature, setSelectedSignature] = useState<SelectStyle>(
|
||||
signatureOptions.length > 0 ? { id: signatureOptions[0].id, style: signatureOptions[0].style } : { id: 0, style: "" }
|
||||
);
|
||||
|
||||
// Store the actual file
|
||||
const [file1, setFile1] = useState<File | null>(null);
|
||||
const [file2, setFile2] = useState<File | null>(null);
|
||||
|
||||
// Store the preview URL
|
||||
const [preview1, setPreview1] = useState<string | null>(null);
|
||||
const [preview2, setPreview2] = useState<string | null>(null);
|
||||
|
||||
const [preSaveSignatures, setPreSaveSignatures] = useState([])
|
||||
|
||||
|
||||
// Navigation items
|
||||
const navigationItems = [
|
||||
{ id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> },
|
||||
{ id: 'TYPED', label: 'TYPED', icon: <GrCheckboxSelected className="w-4 h-4" /> },
|
||||
{ id: 'DRAW', label: 'DRAW', icon: <AiOutlineEdit className="w-5 h-5" /> },
|
||||
{ id: 'UPLOAD', label: 'UPLOAD', icon: <AiOutlineUpload className="w-5 h-5" /> },
|
||||
{ id: 'SAVED', label: 'SAVED', icon: <CiSaveDown1 className="w-5 h-5" /> },
|
||||
];
|
||||
|
||||
// Initialize form with editing signature data
|
||||
useEffect(() => {
|
||||
if (editingSignature) {
|
||||
setFullName(`${editingSignature.firstName} ${editingSignature.lastName}`);
|
||||
setInitials(`${editingSignature.firstName.slice(0, 1)}${editingSignature.lastName.slice(0, 1)}`);
|
||||
setActiveTab(editingSignature.signatureType as 'SELECT' | 'DRAW' | 'UPLOAD');
|
||||
|
||||
// Set font for SELECT tab
|
||||
const fontOption = signatureOptions.find(option => option.style === editingSignature.font);
|
||||
if (fontOption) {
|
||||
setSelectedSignature({ id: fontOption.id, style: fontOption.style });
|
||||
}
|
||||
|
||||
// Set signature blobs for all tabs
|
||||
if (editingSignature.signatureBlob && editingSignature.initialsBlob) {
|
||||
setSignatures({
|
||||
fullSignature: `data:image/png;base64,${editingSignature.signatureBlob}`,
|
||||
initials: `data:image/png;base64,${editingSignature.initialsBlob}`
|
||||
});
|
||||
|
||||
// Set preview URLs for UPLOAD tab
|
||||
if (editingSignature.signatureType === 'UPLOAD') {
|
||||
setPreview1(`data:image/png;base64,${editingSignature.signatureBlob}`);
|
||||
setPreview2(`data:image/png;base64,${editingSignature.initialsBlob}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [editingSignature]);
|
||||
|
||||
const handleSignatureChange = (data: { fullSignature: string | null; initials: string | null }) => {
|
||||
setSignatures(data);
|
||||
};
|
||||
|
||||
// Getting Signatures - START
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const res = await axios.get(`${import.meta.env.VITE_BASE_URI}/api/sign/signatures?recipientId=${recipientId}`, {
|
||||
headers: {
|
||||
"ngrok-skip-browser-warning": "69420"
|
||||
}
|
||||
})
|
||||
if (res?.data) {
|
||||
let preSavedSignatures = res?.data
|
||||
setPreSaveSignatures(preSavedSignatures)
|
||||
}
|
||||
})()
|
||||
}, [])
|
||||
// Getting Signatures - END
|
||||
|
||||
// Cleanup preview URLs when component unmounts or image changes
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
|
|
@ -202,7 +207,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
|
||||
const handleSubmit = async () => {
|
||||
setIsSubmitting(true);
|
||||
|
||||
console.log("handleSubmit Called")
|
||||
if (!signatures.fullSignature || !signatures.initials) {
|
||||
alert('Please provide both signature and initials');
|
||||
setIsSubmitting(false);
|
||||
|
|
@ -211,38 +216,47 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
|
||||
try {
|
||||
const payload = {
|
||||
signatureType: activeTab,
|
||||
signatureBase64: signatures.fullSignature,
|
||||
initialsBase64: signatures.initials,
|
||||
tagId: signTagId,
|
||||
// signatureId: signatureId,
|
||||
type: activeTab,
|
||||
firstName: fullName.split(' ')[0] || user.firstName,
|
||||
lastName: fullName.split(' ')[1] || user.lastName,
|
||||
initials: "",
|
||||
initialsBase64: signatures.initials,
|
||||
signatureBase64: signatures.fullSignature,
|
||||
font: selectedSignature.style
|
||||
};
|
||||
|
||||
let res;
|
||||
if (isEditMode && editingSignature) {
|
||||
// Update existing signature
|
||||
const updatePayload = {
|
||||
...payload,
|
||||
signatureId: editingSignature.id
|
||||
};
|
||||
res = await axios.put(`${import.meta.env.VITE_BASE_URI}/api/user/signatures`, updatePayload);
|
||||
console.log("handleUpdate", res);
|
||||
console.log("payload", payload)
|
||||
// if (isEditMode && editingSignature) {
|
||||
// // Update existing signature
|
||||
// const updatePayload = {
|
||||
// ...payload,
|
||||
// signatureId: editingSignature.id
|
||||
// };
|
||||
// res = await axios.put(`${import.meta.env.VITE_BASE_URI}/api/user/signatures`, updatePayload);
|
||||
// console.log("handleUpdate", res);
|
||||
|
||||
toast.success("Signature Updated Successfully", {
|
||||
position: "top-center",
|
||||
autoClose: 500,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
} else {
|
||||
// toast.success("Signature Updated Successfully", {
|
||||
// position: "top-center",
|
||||
// autoClose: 500,
|
||||
// hideProgressBar: false,
|
||||
// closeOnClick: false,
|
||||
// pauseOnHover: true,
|
||||
// draggable: true,
|
||||
// progress: undefined,
|
||||
// theme: "light",
|
||||
// transition: Bounce,
|
||||
// });
|
||||
// } else {
|
||||
// Create new signature
|
||||
res = await api.post(`/api/user/signatures`, payload);
|
||||
let res = await axios.post(`${import.meta.env.VITE_BASE_URI}/api/sign/signatures?recipientId=${recipientId}`,
|
||||
payload,
|
||||
{
|
||||
headers: {
|
||||
"ngrok-skip-browser-warning": "69420"
|
||||
}
|
||||
});
|
||||
console.log("handleSubmit", res);
|
||||
|
||||
toast.success("Signature Created Successfully", {
|
||||
|
|
@ -256,25 +270,35 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
}
|
||||
// }
|
||||
|
||||
if (res?.data) {
|
||||
await getAllSignatures();
|
||||
setShowAddSignature?.(false);
|
||||
setSignatures({
|
||||
fullSignature:"",
|
||||
initials:"",
|
||||
})
|
||||
setSaved({
|
||||
saveType: res.data.signatureType ?? null,
|
||||
save: true,
|
||||
signature: res.data.signatureBlob ?? null,
|
||||
initial: res.data.initialsBlob ?? null,
|
||||
});
|
||||
setOpenSign(false);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error submitting signature:", error);
|
||||
toast.error(isEditMode ? "Failed to update signature" : "Failed to create signature", {
|
||||
position: "top-center",
|
||||
autoClose: 2000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
// toast.error(isEditMode ? "Failed to update signature" : "Failed to create signature", {
|
||||
// position: "top-center",
|
||||
// autoClose: 2000,
|
||||
// hideProgressBar: false,
|
||||
// closeOnClick: false,
|
||||
// pauseOnHover: true,
|
||||
// draggable: true,
|
||||
// progress: undefined,
|
||||
// theme: "light",
|
||||
// transition: Bounce,
|
||||
// });
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
|
|
@ -282,7 +306,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
|
||||
const renderContent = () => {
|
||||
switch (activeTab) {
|
||||
case 'SELECT':
|
||||
case 'TYPED':
|
||||
return (
|
||||
<div className="h-full flex flex-col ">
|
||||
<div className="mb-6">
|
||||
|
|
@ -340,7 +364,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
return (
|
||||
<DrawSignatureCanvas
|
||||
onSignatureChange={handleSignatureChange}
|
||||
initialSignatures={isEditMode ? signatures : undefined}
|
||||
// initialSignatures={isEditMode ? signatures : undefined}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
@ -402,6 +426,78 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
case 'SAVED':
|
||||
return (
|
||||
<div className="h-full flex flex-col ">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-2">Saved Signature's</h2>
|
||||
{/* <p className="text-sm text-gray-600">Select from pre-designed signature styles</p> */}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="space-y-4">
|
||||
{preSaveSignatures.map((signature) => (
|
||||
<div key={signature?.id} className="grid grid-cols-12 gap-4 px-6 py-9 hover:bg-gray-50 transition-colors duration-150">
|
||||
{/* Signature Column */}
|
||||
<div className="col-span-5">
|
||||
<div className="flex flex-col space-y-2 relative ps-6 border-l-3 border-blue-600 rounded-bl-2xl rounded-tl-2xl">
|
||||
<div className="text-sm text-gray-600 font-medium mb-1">
|
||||
Signed by:
|
||||
</div>
|
||||
|
||||
{/* Signature Image or Fallback Text */}
|
||||
<div className="bg-white rounded-lg p-1 flex items-center justify-center">
|
||||
{signature?.signatureBlob ? (
|
||||
<img
|
||||
src={`data:${signature?.signatureMimeType || "image/png"};base64,${signature?.signatureBlob}`}
|
||||
className="h-[50px] w-[250px] object-contain"
|
||||
alt="Signature"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-gray-400 italic text-sm">No Signature</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div className="text-xs text-gray-500 truncate">
|
||||
{signature?.signatureHash ?? ' '}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Initial Column */}
|
||||
<div className="col-span-5">
|
||||
<div className="flex flex-col space-y-2 relative ps-6 border-l-3 border-green-600 rounded-bl-2xl rounded-tl-2xl">
|
||||
<div className="text-sm text-gray-600 font-medium mb-1">
|
||||
Initials
|
||||
</div>
|
||||
|
||||
{/* Initials Image */}
|
||||
<div className="bg-white rounded-lg p-1 flex items-center justify-center">
|
||||
{signature?.initialsBlob ? (
|
||||
<img
|
||||
src={`data:image/png;base64,${signature?.initialsBlob}`}
|
||||
className="h-[50px] object-contain"
|
||||
alt="Initials"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-gray-400 italic text-sm">No Initials</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Optional initials hash or font */}
|
||||
<div className="text-xs text-gray-500 truncate">
|
||||
{signature?.initialsHash || " "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return null;
|
||||
|
|
@ -415,11 +511,8 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
let currUser = res?.data;
|
||||
setUser(currUser);
|
||||
|
||||
// Only set default values if not in edit mode
|
||||
if (!isEditMode) {
|
||||
setFullName(currUser.firstName + " " + currUser.lastName);
|
||||
setInitials(currUser.firstName.slice(0, 1) + currUser.lastName.slice(0, 1));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching user details:", error);
|
||||
}
|
||||
|
|
@ -439,7 +532,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
<div className="px-4 py-4 border-b border-gray-200">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className='px-1 py-1'>
|
||||
<h3 className="text-md font-semibold text-gray-900">Add Signature</h3>
|
||||
<h3 className="text-md font-semibold text-gray-900">Add Signature Sign</h3>
|
||||
<p className="text-xs text-gray-500">Create your digital signature</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -482,7 +575,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
{navigationItems.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => setActiveTab(item.id as 'SELECT' | 'DRAW' | 'UPLOAD')}
|
||||
onClick={() => setActiveTab(item.id as 'TYPED' | 'DRAW' | 'UPLOAD' | 'SAVED')}
|
||||
className={`w-full flex items-center space-x-3 px-2 py-2 text-sm font-medium rounded-lg cursor-pointer transition-colors ${activeTab === item.id
|
||||
? 'bg-blue-50 text-blue-700 border border-blue-200'
|
||||
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
|
||||
|
|
@ -519,7 +612,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
<div className="p-4 border-t border-gray-200 flex justify-end gap-3">
|
||||
<button
|
||||
className="cursor-pointer px-4 py-2 text-sm font-medium rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
onClick={() => setShowAddSignature?.(false)}
|
||||
onClick={() => setOpenSign?.(false)}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
CANCEL
|
||||
|
|
@ -532,10 +625,13 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
{isSubmitting ? (
|
||||
<>
|
||||
<FaSpinner className="animate-spin" />
|
||||
{isEditMode ? 'UPDATING...' : 'CREATING...'}
|
||||
{/* {isEditMode ? 'UPDATING...' : 'CREATING...'} */}
|
||||
</>
|
||||
) : (
|
||||
isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE'
|
||||
<>
|
||||
CREATE SIGNATURE
|
||||
{/* isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE' */}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -62,37 +62,64 @@
|
|||
|
||||
canvas {
|
||||
touch-action: none;
|
||||
-ms-touch-action: none; /* For older IE/Edge */
|
||||
-ms-touch-action: none;
|
||||
/* For older IE/Edge */
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@keyframes textColorChange {
|
||||
0%, 100% {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
color: white;
|
||||
}
|
||||
|
||||
50% {
|
||||
color: #41644A; /* Tailwind blue-500 */
|
||||
color: #41644A;
|
||||
/* Tailwind blue-500 */
|
||||
}
|
||||
}
|
||||
|
||||
.animate-text {
|
||||
animation: textColorChange 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none;
|
||||
/* IE and Edge */
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
}
|
||||
}
|
||||
|
||||
/* Group Border - START */
|
||||
.group-border {
|
||||
position: absolute;
|
||||
border: 1px dashed var(--primary);
|
||||
/* pointer-events: none; */
|
||||
}
|
||||
|
||||
.bottom-border>div {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 50;
|
||||
background-color: var(--primary);
|
||||
color: var(--primaryLight);
|
||||
padding: 2px 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
<<<<<<< HEAD
|
||||
/* Loader CSS */
|
||||
/* From Uiverse.io by Juanes200122 */
|
||||
.pl {
|
||||
|
|
@ -299,3 +326,15 @@ canvas {
|
|||
stroke-dashoffset: -440;
|
||||
}
|
||||
}
|
||||
=======
|
||||
.bottom-border>div:hover {
|
||||
background-color: var(--primaryLight2) ;
|
||||
opacity: 0.9;
|
||||
transition: all 0.3s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Group Border - END */
|
||||
|
||||
/* Loader CSS */
|
||||
>>>>>>> 313217eded9cceb45db39bd86d6886f199fec226
|
||||
|
|
|
|||
|
|
@ -0,0 +1,91 @@
|
|||
interface Dimension {
|
||||
maxTop: number | null;
|
||||
minTop: number | null;
|
||||
maxLeft: number | null;
|
||||
minLeft: number | null;
|
||||
}
|
||||
|
||||
const getGroupDimension = (
|
||||
group: NodeListOf<HTMLElement>,
|
||||
containerRect: DOMRect,
|
||||
offsetX: number,
|
||||
offsetY: number
|
||||
) => {
|
||||
let dimension: Dimension = { maxTop: null, minTop: null, maxLeft: null, minLeft: null };
|
||||
|
||||
group.forEach((element: HTMLElement) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
|
||||
dimension.minTop = Math.min(dimension.minTop ?? Infinity, rect.top);
|
||||
dimension.maxTop = Math.max(dimension.maxTop ?? 0, rect.bottom);
|
||||
|
||||
dimension.minLeft = Math.min(dimension.minLeft ?? Infinity, rect.left);
|
||||
dimension.maxLeft = Math.max(dimension.maxLeft ?? 0, rect.right);
|
||||
});
|
||||
|
||||
dimension.maxTop = dimension.maxTop !== null ? dimension.maxTop - containerRect.top + (offsetY - 10) : null;
|
||||
dimension.minTop = dimension.minTop !== null ? dimension.minTop - containerRect.top - (offsetY - 10) : null;
|
||||
|
||||
dimension.maxLeft = dimension.maxLeft !== null ? dimension.maxLeft - containerRect.left + (offsetX - 10) : null;
|
||||
dimension.minLeft = dimension.minLeft !== null ? dimension.minLeft - containerRect.left - (offsetX - 10) : null;
|
||||
|
||||
return dimension;
|
||||
}
|
||||
|
||||
|
||||
const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, containerRect: DOMRect, offsetX: number, offsetY: number) => {
|
||||
const dimension = getGroupDimension(groupElements, containerRect, offsetX, offsetY);
|
||||
const borderTop: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='top']");
|
||||
const borderRight: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='right']");
|
||||
const borderBottom: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='bottom']");
|
||||
const borderLeft: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='left']");
|
||||
|
||||
if (borderTop !== null && dimension.maxLeft !== null && dimension.minLeft !== null) {
|
||||
borderTop.style.width = (dimension.maxLeft - dimension.minLeft) + "px";
|
||||
borderTop.style.height = "1px";
|
||||
borderTop.style.top = dimension.minTop + "px";
|
||||
borderTop.style.left = dimension.minLeft + "px";
|
||||
}
|
||||
|
||||
if (borderRight !== null && dimension.maxTop !== null && dimension.minTop !== null) {
|
||||
borderRight.style.width = "1px";
|
||||
borderRight.style.height = (dimension.maxTop - dimension.minTop) + "px";
|
||||
borderRight.style.top = dimension.minTop + "px";
|
||||
borderRight.style.left = dimension.maxLeft + "px";
|
||||
}
|
||||
|
||||
if (borderBottom !== null && dimension.maxLeft !== null && dimension.minLeft !== null) {
|
||||
borderBottom.style.width = (dimension.maxLeft - dimension.minLeft) + "px";
|
||||
borderBottom.style.height = "1px";
|
||||
borderBottom.style.top = dimension.maxTop + "px";
|
||||
borderBottom.style.left = dimension.minLeft + "px";
|
||||
}
|
||||
|
||||
if (borderLeft !== null && dimension.maxTop !== null && dimension.minTop !== null) {
|
||||
borderLeft.style.width = "1px";
|
||||
borderLeft.style.height = (dimension.maxTop - dimension.minTop) + "px";
|
||||
borderLeft.style.top = dimension.minTop + "px";
|
||||
borderLeft.style.left = dimension.minLeft + "px";
|
||||
}
|
||||
}
|
||||
|
||||
// const handleTargetBorderEventListener = (groupId: string, containerRect: DOMRect) => {
|
||||
// console.log("handleTargetBorderEventListener called for groupId:", groupId);
|
||||
// if (groupId) {
|
||||
// const groupElements: NodeListOf<HTMLElement> = document.querySelectorAll(`div[group="${groupId}"]`);
|
||||
// handleGroupBorderPosition(groupElements, containerRect);
|
||||
// }
|
||||
// }
|
||||
|
||||
const handleInitialGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, containerRect: DOMRect, offsetX: number, offsetY: number) => {
|
||||
setTimeout(() => {
|
||||
handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
export {
|
||||
getGroupDimension,
|
||||
handleGroupBorderPosition,
|
||||
handleInitialGroupBorderPosition
|
||||
// handleTargetBorderEventListener
|
||||
}
|
||||
Loading…
Reference in New Issue