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

Bhagwan Changes

This commit is contained in:
= 2025-07-02 16:28:11 +05:30
parent 9f40388c57
commit 902964881c
8 changed files with 156 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/auth/LoginForm.tsx
View File

@ -109,14 +109,14 @@ function LoginForm() {
console.log(res.status, "Response Status Line 42 LoginForm.tsx", res); console.log(res.status, "Response Status Line 42 LoginForm.tsx", res);
if (res.status === 200) { if (res.status === 200) {
toast.dismiss(); toast.dismiss();
console.log('User Logined Successfully Line 45 LoginForm.tsx headerCookie:', res.headers.authorization); // console.log('User Logined Successfully Line 45 LoginForm.tsx headerCookie:', res.headers.authorization);
// Cookies.set("authorization", res.headers.authorization, { // Cookies.set("authorization", res.headers.authorization, {
// path: "/", // path: "/",
// secure: true, // Required for HTTPS // secure: true, // Required for HTTPS
// sameSite: "Lax", // Required for cross-origin requests // sameSite: "Lax", // Required for cross-origin requests
// }); // });
dispatch(updateUser({ ...res.data, authorized: true, accessToken: res.headers.authorization })); // dispatch(updateUser({ ...res.data, authorized: true, accessToken: res.headers.authorization }));
setTimeout(() => navigate('/'), 1000); // Redirect after 1 second setTimeout(() => navigate('/'), 1000); // Redirect after 1 second
toast.success("Login Successful", { toast.success("Login Successful", {
position: "top-center", position: "top-center",

2
src/components/auth/RegisterForm.tsx
View File

@ -65,7 +65,7 @@ function RegisterForm() {
console.log(res, "line 58"); console.log(res, "line 58");
toast.dismiss(); toast.dismiss();
// dispatch(updateUser({ ...res.data, authorized: true, accessToken: res.headers.authorization })); // dispatch(updateUser({ ...res.data, authorized: true, accessToken: res.headers.authorization }));
dispatch(updateUser({ ...res.data, authorized: true })); // dispatch(updateUser({ ...res.data, authorized: true }));
navigate('/') navigate('/')
} }
}) })

52
src/components/client/SignDocument.tsx
View File

@ -258,6 +258,8 @@ const SignDocument = () => {
} }
console.log(tagJson, "Line 261")
const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
const submitData: TagsSubmitDataObj = { const submitData: TagsSubmitDataObj = {
@ -615,9 +617,10 @@ const SignDocument = () => {
> >
{ {
selectedDocuments && selectedDocuments.length > 0 && selectedDocuments.map((doc, indxDoc) => { selectedDocuments && selectedDocuments.length > 0 && selectedDocuments.map((doc) => {
console.log(tagJson, "tagJsontagJsontagJson")
return ( return (
<div key={indxDoc} className='flex flex-col'> <div key={doc.documentId} className='flex flex-col'>
<div className='py-2 text-sm'> <div className='py-2 text-sm'>
<p className='text-center'>{doc.name}</p> <p className='text-center'>{doc.name}</p>
</div> </div>
@ -626,12 +629,13 @@ const SignDocument = () => {
{ {
tagJson && tagJson.length > 0 && doc.images && doc.images.length > 0 && doc.images.map((page, indx) => { tagJson && tagJson.length > 0 && doc.images && doc.images.length > 0 && doc.images.map((page, indx) => {
const key = `${doc.documentId}_${page.index}`; const key = `${doc.documentId}_${page.index}`;
const currDocTags = tagJson.filter((val, indx) => val.documentIndex === indxDoc) const currDocTags = tagJson.filter((val) => val.pageIndex === page.index)
console.log(currDocTags, tagJson, page, doc, "innnnnnnnnnnnn")
return ( return (
<div <div
key={indx} key={indx}
id={doc.documentId + indx} id={doc.documentId + indx}
// onDrop={(e) => handleDrop(e, doc.documentId, indxDoc, page.index)} // onDrop={(e) => handleDrop(e, doc.documentId, doc.documentId, page.index)}
// onDragOver={handleDragOver} // onDragOver={handleDragOver}
className='drop-page-in shadow-md relative' className='drop-page-in shadow-md relative'
> >
@ -640,7 +644,7 @@ const SignDocument = () => {
{currDocTags.map((item, index) => { {currDocTags.map((item, index) => {
if (item.pageNumber !== page.index) return; if (item.pageIndex !== page.index) return;
return ( return (
<div <div
tabIndex={1} tabIndex={1}
@ -650,11 +654,11 @@ const SignDocument = () => {
className="absolute rounded dropped-item text-sm" className="absolute rounded dropped-item text-sm"
// onClick={() => handleTagClick(key, index)} // onClick={() => handleTagClick(key, index)}
style={{ style={{
left: `${item.dimension.left}px`, left: `${item.dimensions.left}px`,
top: `${item.dimension.top}px`, top: `${item.dimensions.top}px`,
width: `${item.dimension.width}px`, width: `${item.dimensions.width}px`,
height: `${item.dimension.height}px`, height: `${item.dimensions.height}px`,
border: `${((!hideTags && focusElement) && !transparentTags && focusElement.documentIndex === item.documentIndex && focusElement.focusElementIndx === index) ? '2px dashed #1c398e' : 'none'}`, border: `${((!hideTags && focusElement) && !transparentTags && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) ? '2px dashed #1c398e' : 'none'}`,
// display: `${hideTags ? 'none' : 'block'}` // display: `${hideTags ? 'none' : 'block'}`
}} }}
> >
@ -665,7 +669,7 @@ const SignDocument = () => {
id={item.id} id={item.id}
tabIndex={1} tabIndex={1}
className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-none" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`} className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-none" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
// style={{ height: item.dimension.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
> >
{/* <input {/* <input
@ -677,7 +681,7 @@ const SignDocument = () => {
{ {
item.subType === "SINGLE_LINE" && <p item.subType === "SINGLE_LINE" && <p
// name={item.id} // name={item.id}
// style={{ height: item.dimension.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
onInput={(e) => { onInput={(e) => {
const val = e.currentTarget.textContent; const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string); handleTagUpdate(index, val as string);
@ -734,11 +738,11 @@ const SignDocument = () => {
<div <div
id={item.id} id={item.id}
className={`h-full w-full rounded flex justify-center items-center ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`} className={`h-full w-full rounded flex justify-center items-center ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
// style={{ height: item.dimension.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
> >
<input <input
name={item.id} name={item.id}
// style={{ height: item.dimension.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
className="w-full px-2 outline-none" className="w-full px-2 outline-none"
type="checkbox" /> type="checkbox" />
</div>} </div>}
@ -752,7 +756,7 @@ const SignDocument = () => {
id={item.id} id={item.id}
onClick={() => handleSignClick(index)} onClick={() => handleSignClick(index)}
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"}`} 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.dimension.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
> >
{/* <input type="checkbox" className="" /> */} {/* <input type="checkbox" className="" /> */}
{ {
@ -763,8 +767,8 @@ const SignDocument = () => {
: :
<img <img
style={{ style={{
width: `${item.dimension.width}px`, width: `${item.dimensions.width}px`,
height: `${item.dimension.height}px`, height: `${item.dimensions.height}px`,
}} }}
src={saved.signature as string} /> src={saved.signature as string} />
} }
@ -779,15 +783,15 @@ const SignDocument = () => {
id={item.id} id={item.id}
onClick={() => handleSignClick(index)} onClick={() => handleSignClick(index)}
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"}`} 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.dimension.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
> >
{((!transparentTags && !hideTags) && !(saved.save && (index in signConfObj) && signConfObj[index].accepted)) ? {((!transparentTags && !hideTags) && !(saved.save && (index in signConfObj) && signConfObj[index].accepted)) ?
<TbSignature className="text-lg text-slate-600" /> <TbSignature className="text-lg text-slate-600" />
: :
<img <img
style={{ style={{
width: `${item.dimension.width}px`, width: `${item.dimensions.width}px`,
height: `${item.dimension.height}px`, height: `${item.dimensions.height}px`,
}} }}
className="w-[100%] h-full" className="w-[100%] h-full"
src={saved.initial as string} /> src={saved.initial as string} />
@ -803,7 +807,7 @@ const SignDocument = () => {
id={item.id} id={item.id}
onClick={() => handleStampClick(index)} onClick={() => handleStampClick(index)}
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"}`} 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.dimension.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
> >
{!transparentTags && !hideTags ? {!transparentTags && !hideTags ?
<FaStamp className="text-lg text-slate-600" /> <FaStamp className="text-lg text-slate-600" />
@ -820,7 +824,7 @@ const SignDocument = () => {
id={item.id} id={item.id}
// onClick={() => handleSignClick(index)} // onClick={() => handleSignClick(index)}
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"}`} 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.dimension.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
> >
{!transparentTags && !hideTags ? {!transparentTags && !hideTags ?
<FaFileAlt className="text-lg text-slate-600" /> <FaFileAlt className="text-lg text-slate-600" />
@ -909,7 +913,7 @@ const SignDocument = () => {
{/* Focus Show Element */} {/* Focus Show Element */}
{(!transparentTags && !hideTags) && (focusElement && focusElement.documentIndex === item.documentIndex && focusElement.focusElementIndx === index) && {(!transparentTags && !hideTags) && (focusElement && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) &&
<> <>
<div <div
className="absolute left-0 z-50 bg-blue-900 text-xs text-slate-100 px-2 py-[2px] rounded-sm whitespace-nowrap" className="absolute left-0 z-50 bg-blue-900 text-xs text-slate-100 px-2 py-[2px] rounded-sm whitespace-nowrap"
@ -919,7 +923,7 @@ const SignDocument = () => {
</div> </div>
<div <div
className="absolute left-[-10px] z-50 flex max-w-max" className="absolute left-[-10px] z-50 flex max-w-max"
style={{ left: -(item.dimension.left + 20) + "px", top: ((item.dimension.height / 2) - 18) + "px" }} style={{ left: -(item.dimensions.left + 20) + "px", top: ((item.dimensions.height / 2) - 18) + "px" }}
> >
{/* <FaArrowRight className="text-[var(--primary)] text-xl" /> {/* <FaArrowRight className="text-[var(--primary)] text-xl" />
*/} */}

2
src/components/dashboard/Dashboard.tsx
View File

@ -40,7 +40,7 @@ function Dashboard() {
// window.location.href = '/login'; // window.location.href = '/login';
// return; // return;
// } // }
console.log("OUT MIC CHECK", transactionStatus, TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS, TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED); // console.log("OUT MIC CHECK", transactionStatus, TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS, TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED);
// Clear all if transaction success // Clear all if transaction success
if (transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_FAILURE) { if (transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_FAILURE) {

7
src/components/process/processStepOne/DocumentCard.tsx
View File

@ -8,6 +8,7 @@ import { AppDispatch } from '../../../store/store'
import { IoMdClose } from 'react-icons/io' import { IoMdClose } from 'react-icons/io'
import api from '../../../config/api' import api from '../../../config/api'
import { useParams } from 'react-router-dom' import { useParams } from 'react-router-dom'
import axios from 'axios'
interface DocumentCardProps { interface DocumentCardProps {
id: string; id: string;
@ -33,7 +34,7 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted }) =>
let isCompleted = false; let isCompleted = false;
let updateTimeout: ReturnType<typeof setTimeout> | null = null; let updateTimeout: ReturnType<typeof setTimeout> | null = null;
let lastUpdate = 0; let lastUpdate = 0;
const delay = 2000; const delay = 1000;
const docProgSSE = new EventSource(`http://192.168.2.112:8083/api/progress/${id}`); const docProgSSE = new EventSource(`http://192.168.2.112:8083/api/progress/${id}`);
@ -66,6 +67,8 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted }) =>
lastUpdate = Date.now(); lastUpdate = Date.now();
}, delay - sinceLast); }, delay - sinceLast);
} }
}); });
docProgSSE.onerror = (error) => { docProgSSE.onerror = (error) => {
@ -112,7 +115,7 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted }) =>
draggable draggable
> >
<IoMdClose <IoMdClose
onClick={() => setDocumentDel({ docId: id, isDel: false }) } onClick={() => setDocumentDel({ docId: id, isDel: false })}
className='absolute right-2.5 top-2.5 text-slate-400 text-xl hover:text-red-500 cursor-pointer transition-all' /> className='absolute right-2.5 top-2.5 text-slate-400 text-xl hover:text-red-500 cursor-pointer transition-all' />
{/* Draggable handle */} {/* Draggable handle */}
<RiDraggable <RiDraggable

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

@ -45,8 +45,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
return null; return null;
} }
// const transactionId = useSelector((state: RootState) => state.transaction.transactionId) // const transactionId = useSelector((state: RootState) => state.transaction.transactionId)
const navigate = useNavigate(); const navigate = useNavigate();
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -127,7 +125,29 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
accountId: string, accountId: string,
transactionId: string transactionId: string
) => { ) => {
const requests = Object.entries(tagsData).map(([recipientId, tags]) => { // tagsData = tagsData.filter((tag, indx) => (("update" in tag && tag.update) || !("id" in tag)) )
// Filter Tags that needs to update
const updatedData = {}
// debugger
for (const [recipientId, tags] of Object.entries(tagsData)) {
console.log(recipientId, tags, "line 133")
const updateTags = []
for (const tag of tags) {
if ("update" in tag && tag.update) {
updateTags.push(tag)
}
if (updateTags.length && "update" in updateTags[updateTags.length - 1]) {
delete updateTags[updateTags.length - 1].update
}
}
updatedData[recipientId] = updateTags
}
const requests = Object.entries(updatedData).map(([recipientId, tags]) => {
return api.put( return api.put(
`/api/accounts/${accountId}/transactions/${transactionId}/recipients/${recipientId}/tags`, `/api/accounts/${accountId}/transactions/${transactionId}/recipients/${recipientId}/tags`,
tags tags
@ -136,7 +156,12 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
try { try {
const responses = await Promise.all(requests); const responses = await Promise.all(requests);
console.log("All recipient tags submitted:", responses); const droppedItemsUpdateFalse = Object.fromEntries(
Object.entries(droppedItems).map(([recipientId, tags]) => {
return [recipientId, tags.map(tag => ({ ...tag, update: false }))];
})
)
setDroppedItems(droppedItemsUpdateFalse);
} catch (error) { } catch (error) {
console.error("Error submitting recipient tags:", error); console.error("Error submitting recipient tags:", error);
} }
@ -205,6 +230,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
}, },
// "required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true, // "required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true,
"required": false, "required": false,
"update": "update" in dropTag ? dropTag.update : false,
"readOnly": false, "readOnly": false,
} }
@ -301,6 +327,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
pageIndex: pageIndex, pageIndex: pageIndex,
recipientId: dragElemData.recipientId, recipientId: dragElemData.recipientId,
recipientIndx: dragElemData.recipientIndx, recipientIndx: dragElemData.recipientIndx,
update: true,
isDeleted: false isDeleted: false
} }
@ -387,7 +414,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
...droppedItems, ...droppedItems,
[key]: Array.isArray(droppedItems[key]) // Ensure it's an array [key]: Array.isArray(droppedItems[key]) // Ensure it's an array
? droppedItems[key].map((item, i) => ? droppedItems[key].map((item, i) =>
i === index ? { ...item, dimensions: { ...item.dimensions, left, top } } : item i === index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item
) )
: [], // Provide a fallback in case it's undefined or not an array : [], // Provide a fallback in case it's undefined or not an array
}); });
@ -443,7 +470,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
...droppedItems, ...droppedItems,
[key]: Array.isArray(droppedItems[key]) // Ensure it's an array [key]: Array.isArray(droppedItems[key]) // Ensure it's an array
? droppedItems[key].map((item, i) => ? droppedItems[key].map((item, i) =>
i === index ? { ...item, dimensions: { ...item.dimensions, width: newWidth, height: newHeight } } : item i === index ? { ...item, dimensions: { ...item.dimensions, width: newWidth, height: newHeight }, update: true } : item
) )
: [], // Provide a fallback in case it's undefined or not an array : [], // Provide a fallback in case it's undefined or not an array
}); });
@ -471,11 +498,11 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
if ("id" in tag) { if ("id" in tag) {
try { try {
const response = await api.delete(`/api/accounts/${accountId}/transactions/${transactionId}/recipients/${recipientId}/tags/${tag.id}`) const response = await api.delete(`/api/accounts/${accountId}/transactions/${transactionId}/recipients/${recipientId}/tags/${tag.id}`)
if(response.status !== 200) throw "Tag Deletion error" if (response.status !== 200) throw "Tag Deletion error"
} catch (err) { } catch (err) {
console.error("Tag Deletion error") console.error("Tag Deletion error")
return; return;
} }
} }
setSelectedTag(null) setSelectedTag(null)
setDroppedItems(prevState => ({ setDroppedItems(prevState => ({
@ -485,109 +512,108 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
) )
})); }));
})() })()
} }
const handleAddRadio = (e: React.MouseEvent<HTMLElement>, key: string, index: number) => { // const handleAddRadio = (e: React.MouseEvent<HTMLElement>, key: string, index: number) => {
// const dataToSet: DroppedItemsObj = { // // const dataToSet: DroppedItemsObj = {
// ...droppedItems, // // ...droppedItems,
// [key]: [...(droppedItems[key] || []), // // [key]: [...(droppedItems[key] || []),
// { // // {
// ...prepData, // // ...prepData,
// radioGroups: dragElemData.label === "radio" ? [{ ...prepData }] : [] // // radioGroups: dragElemData.label === "radio" ? [{ ...prepData }] : []
// }], // // }],
// } // // }
// const lastRadioElemRect = e.currentTarget?.parentElement.previousSibling.getBoundingClientRect(); // // const lastRadioElemRect = e.currentTarget?.parentElement.previousSibling.getBoundingClientRect();
// console.log(lastRadioElemRect, "lastRadioElemRect") // // console.log(lastRadioElemRect, "lastRadioElemRect")
const setNewData = droppedItems; // const setNewData = droppedItems;
if (Array.isArray(setNewData[key][index].radioGroups) && setNewData[key][index].radioGroups?.length > 0) { // if (Array.isArray(setNewData[key][index].radioGroups) && setNewData[key][index].radioGroups?.length > 0) {
setNewData[key][index].radioGroups?.push(setNewData[key][index].radioGroups[0]) // setNewData[key][index].radioGroups?.push(setNewData[key][index].radioGroups[0])
} // }
setDroppedItems(setNewData); // setDroppedItems(setNewData);
}; // };
const handleRadioTagMouseDown = (event: React.MouseEvent<HTMLDivElement>, key: string, index: number, radioIndex: number) => { // const handleRadioTagMouseDown = (event: React.MouseEvent<HTMLDivElement>, key: string, index: number, radioIndex: number) => {
event.preventDefault(); // event.preventDefault();
let targetContainer = event?.currentTarget?.parentElement; // let targetContainer = event?.currentTarget?.parentElement;
let targetElement = event?.currentTarget; // let targetElement = event?.currentTarget;
if (!targetContainer || !targetElement) return; // if (!targetContainer || !targetElement) return;
const containerRect = targetContainer.getBoundingClientRect(); // const containerRect = targetContainer.getBoundingClientRect();
const elementRect = targetElement.getBoundingClientRect(); // const elementRect = targetElement.getBoundingClientRect();
// Calculate the initial offset (where the mouse was clicked inside the element) // // Calculate the initial offset (where the mouse was clicked inside the element)
const offsetX = event.clientX - elementRect.left; // const offsetX = event.clientX - elementRect.left;
const offsetY = event.clientY - elementRect.top; // const offsetY = event.clientY - elementRect.top;
const handleMouseMove = (event: PointerEvent) => { // const handleMouseMove = (event: PointerEvent) => {
// Get new X and Y positions relative to the container // // Get new X and Y positions relative to the container
// let x = offsetX; // // let x = offsetX;
// let y = offsetY; // // let y = offsetY;
let x = event.clientX - elementRect.left; // let x = event.clientX - elementRect.left;
let y = event.clientY - elementRect.top; // let y = event.clientY - elementRect.top;
const newData = droppedItems; // const newData = droppedItems;
if (newData[key][index].radioGroups && newData[key][index].radioGroups.length > 0) { // if (newData[key][index].radioGroups && newData[key][index].radioGroups.length > 0) {
newData[key][index].radioGroups[radioIndex].dimensions.left = x; // newData[key][index].radioGroups[radioIndex].dimensions.left = x;
newData[key][index].radioGroups[radioIndex].dimensions.top = y; // newData[key][index].radioGroups[radioIndex].dimensions.top = y;
let topMin = Number.POSITIVE_INFINITY; // let topMin = Number.POSITIVE_INFINITY;
let topMax = Number.NEGATIVE_INFINITY; // let topMax = Number.NEGATIVE_INFINITY;
let leftMin = Number.POSITIVE_INFINITY; // let leftMin = Number.POSITIVE_INFINITY;
let leftMax = Number.NEGATIVE_INFINITY; // let leftMax = Number.NEGATIVE_INFINITY;
for (const radio of newData[key][index].radioGroups) { // for (const radio of newData[key][index].radioGroups) {
if (radio.dimensions.left < leftMin) { // if (radio.dimensions.left < leftMin) {
leftMin = radio.dimensions.left; // leftMin = radio.dimensions.left;
} // }
if (radio.dimensions.left > leftMax) { // if (radio.dimensions.left > leftMax) {
leftMax = radio.dimensions.left; // leftMax = radio.dimensions.left;
} // }
if (radio.dimensions.top < topMin) { // if (radio.dimensions.top < topMin) {
topMin = radio.dimensions.top; // topMin = radio.dimensions.top;
} // }
if (radio.dimensions.top > topMax) { // if (radio.dimensions.top > topMax) {
topMax = radio.dimensions.top; // topMax = radio.dimensions.top;
} // }
} // }
newData[key][index].radioPosition = { // newData[key][index].radioPosition = {
topMin: topMin, // topMin: topMin,
topMax: topMax, // topMax: topMax,
leftMin: leftMin, // leftMin: leftMin,
leftMax: leftMax, // leftMax: leftMax,
width: leftMax - leftMin, // width: leftMax - leftMin,
height: topMax - topMin // height: topMax - topMin
} // }
newData[key][index].dimensions.left = x; // newData[key][index].dimensions.left = x;
newData[key][index].dimensions.top = y; // newData[key][index].dimensions.top = y;
} // }
setDroppedItems({ ...newData }); // setDroppedItems({ ...newData });
}; // };
const handleMouseUp = () => { // const handleMouseUp = () => {
document.removeEventListener("pointermove", handleMouseMove); // document.removeEventListener("pointermove", handleMouseMove);
document.removeEventListener("pointerup", handleMouseUp); // document.removeEventListener("pointerup", handleMouseUp);
}; // };
// Add event listeners // // Add event listeners
document.addEventListener("pointermove", handleMouseMove); // document.addEventListener("pointermove", handleMouseMove);
document.addEventListener("pointerup", handleMouseUp); // document.addEventListener("pointerup", handleMouseUp);
} // }
return ( return (

12
src/components/process/processStepTwo/RightSideBar.tsx
View File

@ -126,7 +126,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
...prev, ...prev,
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
? prev[selTagKey].map((item, i) => ? prev[selTagKey].map((item, i) =>
i === selTagIndx ? { ...item, [changeTo]: changeWith || "", format: "" } : item i === selTagIndx ? { ...item, [changeTo]: changeWith || "", format: "", update: "id" in item ? true : false } : item
) )
: [], : [],
}// Provide a fallback in case it's undefined or not an array }// Provide a fallback in case it's undefined or not an array
@ -138,7 +138,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
...prev, ...prev,
[selTagKey]: Array.isArray(prev[selTagKey]) [selTagKey]: Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) => ? prev[selTagKey].map((item, i) =>
i === selTagIndx ? { ...item, [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK" } : item i === selTagIndx ? { ...item, [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: "id" in item ? true : false } : item
) )
: [], : [],
} }
@ -154,7 +154,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
...prev, ...prev,
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
? prev[selTagKey].map((item, i) => ? prev[selTagKey].map((item, i) =>
i === selTagIndx ? { ...item, [changeTo]: changeWith, decimalPlace: decPlace, isCurrency } : item i === selTagIndx ? { ...item, [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: "id" in item ? true : false } : item
) )
: [], : [],
}// Provide a fallback in case it's undefined or not an array }// Provide a fallback in case it's undefined or not an array
@ -170,7 +170,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
...prev, ...prev,
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
? prev[selTagKey].map((item, i) => ? prev[selTagKey].map((item, i) =>
i === selTagIndx ? { ...item, [changeTo]: changeWith + " " + val } : item i === selTagIndx ? { ...item, [changeTo]: changeWith + " " + val, update: "id" in item ? true : false } : item
) )
: [], : [],
}// Provide a fallback in case it's undefined or not an array }// Provide a fallback in case it's undefined or not an array
@ -182,7 +182,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
...prev, ...prev,
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
? prev[selTagKey].map((item, i) => ? prev[selTagKey].map((item, i) =>
i === selTagIndx ? { ...item, [changeTo]: changeWith } : item i === selTagIndx ? { ...item, [changeTo]: changeWith, update: "id" in item ? true : false } : item
) )
: [], : [],
}// Provide a fallback in case it's undefined or not an array }// Provide a fallback in case it's undefined or not an array
@ -274,7 +274,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
[selTagKey]: Array.isArray(prev[selTagKey]) [selTagKey]: Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) => { ? prev[selTagKey].map((item, i) => {
if (i === selTagIndx) { if (i === selTagIndx) {
return { ...item, options: item.options ? [...item.options, selectedOption] : [selectedOption] }; return { ...item, options: item.options ? [...item.options, selectedOption] : [selectedOption], update: "id" in item ? true : false };
} }
return item; return item;
}) })

3
vite.config.ts
View File

@ -10,7 +10,8 @@ export default defineConfig({
allowedHosts: [ allowedHosts: [
'quality-friendly-goldfish.ngrok-free.app', 'quality-friendly-goldfish.ngrok-free.app',
'officially-powerful-goat.ngrok-free.app', 'officially-powerful-goat.ngrok-free.app',
'89f0-49-36-189-120.ngrok-free.app' '89f0-49-36-189-120.ngrok-free.app',
'c8ee-49-36-191-130.ngrok-free.app'
], ],
}, },
build: { build: {