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

Compare commits

base: BhawanSingh:13885abfda5c9973bdbf8816f7c0cd321871608e
Branches Tags
BhawanSingh:master
BhawanSingh:fontAdded
BhawanSingh:main
BhawanSingh:remove_ps1
BhawanSingh:jai
BhawanSingh:bhagwan
BhawanSingh:bhagwanSingh
...
compare: BhawanSingh:a496f9d20771c9d4d511766da5acb03baed9fa10
Branches Tags
BhawanSingh:fontAdded
BhawanSingh:main
BhawanSingh:remove_ps1
BhawanSingh:jai
BhawanSingh:bhagwan
BhawanSingh:master
BhawanSingh:bhagwanSingh

5 Commits
13885abfda ... a496f9d207

Author SHA1 Message Date
=bhagwanSingh a496f9d207 Merge remote-tracking branch 'origin/main' 2025-08-19 18:50:28 +05:30
=bhagwanSingh 6981d0fc10 Client Side Fill Tags and Attribute Update 2025-08-19 18:47:29 +05:30
=bhagwanSingh 69a9ec9fcf Changes according to new API ProcessStepTwo 2025-08-19 12:40:29 +05:30
=bhagwanSingh fbacd2507c Merge remote-tracking branch 'origin/main' 2025-08-17 22:19:00 +05:30
=bhagwanSingh 6abe333501 Tag attribute update according to new API 2025-08-17 22:15:56 +05:30
13 changed files with 712 additions and 412 deletions
Show Stats Expand all files Collapse all files

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

@ -28,6 +28,7 @@ import SignCompletionScreen from "./SignCompletionScreen";
import api from "../../config/api"; import api from "../../config/api";
import RightSideBar from "../process/processStepTwo/rightSideBar/RightSideBar"; import RightSideBar from "../process/processStepTwo/rightSideBar/RightSideBar";
import { RiDragMoveFill } from "react-icons/ri"; import { RiDragMoveFill } from "react-icons/ri";
import { handleGroupBorderPosition } from "../../utlity/tagGroupConUtils";
@ -71,7 +72,7 @@ interface TransactionType {
interface TagSubmitData { interface TagSubmitData {
id: string; id: string;
type?: string; type?: string;
subType: string; subType?: string;
signed: boolean; signed: boolean;
value: string; value: string;
} }
@ -152,7 +153,7 @@ const SignDocument = () => {
const [tagJson, setTagJson] = useState<DroppedItem[] | []>([]); const [tagJson, setTagJson] = useState<DroppedItem[] | []>([]);
const [transaction, setTransaction] = useState<TransactionType | null>(null); const [transaction, setTransaction] = useState<TransactionType | null>(null);
const [recSignStatus, setRecSignStatus] = useState<string | null>(null); const [recSignStatus, setRecSignStatus] = useState<string | null>(null);
const [droppedItems, setDroppedItems] = useState([]); const [droppedItems, setDroppedItems] = useState<DroppedItem[]>([]);
const [signTagId, setSignTagId] = useState<number>(0) const [signTagId, setSignTagId] = useState<number>(0)
const [stamp, setStamp] = useState<StampTypeObj>({ open: false, blob: "" }); const [stamp, setStamp] = useState<StampTypeObj>({ open: false, blob: "" });
@ -373,8 +374,8 @@ const SignDocument = () => {
const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleFormSubmit = () => {
e.preventDefault(); // e.preventDefault();
const submitData: TagsSubmitDataObj = { const submitData: TagsSubmitDataObj = {
tags: [] tags: []
} }
@ -444,7 +445,7 @@ const SignDocument = () => {
const tagData: TagSubmitData = { const tagData: TagSubmitData = {
id: tag.id as string, id: tag.id as string,
type: tag.type, type: tag.type,
subType: tag.subType ? tag.subType : "", // subType: tag.subType ? tag.subType : "",
signed: true, signed: true,
value: tag.value ? tag.value as string : "" value: tag.value ? tag.value as string : ""
} }
@ -612,6 +613,8 @@ const SignDocument = () => {
event.preventDefault(); event.preventDefault();
const data = window.dragElemData; const data = window.dragElemData;
window.dragElemData = null;
if (!data) return; if (!data) return;
const dragElemData = JSON.parse(data); // Get the dropped label const dragElemData = JSON.parse(data); // Get the dropped label
@ -629,12 +632,40 @@ const SignDocument = () => {
const key = `${docId}_${pageIndex}`; const key = `${docId}_${pageIndex}`;
// const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />; // 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
// }
let prepData = { let prepData = {
properties: data.properties, ...data.properties,
icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />, icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,
type: dragElemData.label.toUpperCase(), type: dragElemData.label.toUpperCase(),
subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
label: dragElemData.label, label: dragElemData.label,
// subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
dimensions: { dimensions: {
left: x, left: x,
top: y, top: y,
@ -653,6 +684,7 @@ const SignDocument = () => {
pageIndex: pageIndex, pageIndex: pageIndex,
recipientId: dragElemData.recipientId, recipientId: dragElemData.recipientId,
recipientIndx: dragElemData.recipientIndx, recipientIndx: dragElemData.recipientIndx,
required: (dragElemData.label !== TagsTypes.SIGNATURE && dragElemData.label !== TagsTypes.INITIALS) ? false : true,
update: true, update: true,
isDeleted: false isDeleted: false
} }
@ -669,7 +701,7 @@ const SignDocument = () => {
// } // }
} }
if (prepData.type === "temporal") { if (prepData.type.toLowerCase() === "temporal") {
prepData.currentTimeStamp = true; prepData.currentTimeStamp = true;
} }
@ -811,7 +843,10 @@ const SignDocument = () => {
// Updated handleRemoveTag function with your existing API logic and group handling // Updated handleRemoveTag function with your existing API logic and group handling
const handleRemoveTag = (key: string, targetIndex: number) => { const handleRemoveTag = (key: string, targetIndex: number) => {
const tag = droppedItems[key][targetIndex];
console.log("Removing tag:", key, targetIndex, droppedItems);
const tag: DroppedItem = droppedItems[targetIndex];
const recipientId = tag.recipientId; const recipientId = tag.recipientId;
console.log(tag, "line 776"); console.log(tag, "line 776");
@ -819,7 +854,7 @@ const SignDocument = () => {
(async () => { (async () => {
if ("id" in tag) { if ("id" in tag) {
try { try {
const response = await api.delete(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags/${tag.id}`) const response = await api.delete(`/api/sign/tags?recipientId=${recipientId}`, { data: [ { tagId: tag.id } ] })
if (response.status !== 200) throw "Tag Deletion error" if (response.status !== 200) throw "Tag Deletion error"
} catch (err) { } catch (err) {
return; return;
@ -887,12 +922,10 @@ const SignDocument = () => {
// }, 100); // }, 100);
} }
} else { } else {
console.log("Listening to 895")
// Handle non-group item removal (your existing logic) // Handle non-group item removal (your existing logic)
setDroppedItems(prevState => ({ setDroppedItems(prevState => prevState.filter((item, idx) => {
...prevState, return idx !== targetIndex;
[key]: prevState[key].map((item, index) =>
index === targetIndex ? { ...item, isDeleted: true } : item
)
})); }));
} }
})() })()
@ -907,8 +940,8 @@ const SignDocument = () => {
<> <>
{/* <TermsModal showTerms={showTerms} setShowTerms={setShowTerms} recipientId={recipientId || ""} /> */} {/* <TermsModal showTerms={showTerms} setShowTerms={setShowTerms} recipientId={recipientId || ""} /> */}
{showCompletionScreen && <SignCompletionScreen />} {showCompletionScreen && <SignCompletionScreen />}
<form className="bg-slate-100" <div className="bg-slate-100"
onSubmit={(e: React.FormEvent<HTMLFormElement>) => handleFormSubmit(e)} // onSubmit={(e: React.FormEvent<HTMLFormElement>) => handleFormSubmit(e)}
> >
{/* Nav Two - Options - START */} {/* Nav Two - Options - START */}
<div className='flex justify-between items-center px-4 py-1 bg-white'> <div className='flex justify-between items-center px-4 py-1 bg-white'>
@ -997,6 +1030,7 @@ const SignDocument = () => {
// onClick={() => handleFormSubmitBtnClick()} // onClick={() => handleFormSubmitBtnClick()}
className='flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)] outline-none'> className='flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)] outline-none'>
<p <p
onClick={handleFormSubmit}
id="sign-client-side-btn" id="sign-client-side-btn"
className='tracking-wide text-white'> className='tracking-wide text-white'>
Sign Sign
@ -1046,6 +1080,7 @@ const SignDocument = () => {
doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => { doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => {
const key = `${doc.documentId}_${page.index}`; const key = `${doc.documentId}_${page.index}`;
// const tagJsonData = [...droppedItems]; // const tagJsonData = [...droppedItems];
// debugger
const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index) const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index)
return ( return (
<div <div
@ -1072,7 +1107,6 @@ const SignDocument = () => {
} }
} }
key={item.id} key={item.id}
// draggable="false"
// onPointerDown={(e) => handleTagMouseDown(e, key, index)} // onPointerDown={(e) => handleTagMouseDown(e, key, index)}
className="absolute rounded dropped-item text-sm" className="absolute rounded dropped-item text-sm"
// onClick={() => handleTagClick(key, index)} // onClick={() => handleTagClick(key, index)}
@ -1085,7 +1119,7 @@ const SignDocument = () => {
// display: `${hideTags ? 'none' : 'block'}` // display: `${hideTags ? 'none' : 'block'}`
}} }}
> >
{provideTags && !transparentTags && !hideTags &&<div {provideTags && !transparentTags && !hideTags && <div
onPointerDown={(e) => handleTagMouseDown(e, key, index)} onPointerDown={(e) => handleTagMouseDown(e, key, index)}
// className="absolute top-[-15px] left-[-15px] w-4 h-4 bg-blue-600 rounded-tr cursor-move z-30" // className="absolute top-[-15px] left-[-15px] w-4 h-4 bg-blue-600 rounded-tr cursor-move z-30"
title="Drag" title="Drag"
@ -1134,7 +1168,7 @@ const SignDocument = () => {
</input> */} </input> */}
{ {
!item.multiLine && <p !item.multiLine && !item.maskType && <p
// name={item.id} // name={item.id}
// style={{ height: item.dimensions.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
onInput={(e) => { onInput={(e) => {
@ -1149,15 +1183,14 @@ const SignDocument = () => {
></p> ></p>
} }
{ {
item.multiLine && <p item.multiLine && !item.maskType && <p
onInput={(e) => { onInput={(e) => {
const val = e.currentTarget.textContent; const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string); handleTagUpdate(index, val as string);
}} }}
contentEditable={true} contentEditable={true}
className="w-full outline-none max-h-max" className="w-full outline-none max-h-max"
> ></p>
</p>
} }
{ {
"maskType" in item && "maskCharacter" in item && item.maskType && <p "maskType" in item && "maskCharacter" in item && item.maskType && <p
@ -1172,7 +1205,7 @@ const SignDocument = () => {
// }} // }}
onBlur={(e) => { onBlur={(e) => {
let val = e.target.textContent; let val = e.target.textContent;
if (typeof item.maskType === "string" && typeof val === "string") { if (typeof item.maskType === "string" && typeof val === "string" && item.maskCharacter) {
val = val.replace(/ /g, ""); val = val.replace(/ /g, "");
e.target.textContent = maskUtils(item.maskType, val, item.maskCharacter) e.target.textContent = maskUtils(item.maskType, val, item.maskCharacter)
} }
@ -1259,7 +1292,7 @@ const SignDocument = () => {
}} }}
onBlur={(e) => { onBlur={(e) => {
}} }}
contentEditable={true} contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max" className="outline-none whitespace-nowrap w-full max-h-max"
@ -1270,6 +1303,25 @@ const SignDocument = () => {
{/* NAME FIELD - END */} {/* NAME FIELD - END */}
{/* NUMBER FIELD - START */}
{
item.type === "NUMBER" &&
<div
id={item.id}
tabIndex={1}
className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
>
{
<input
type="number"
className="outline-none h-full max-w-max"
/>
}
</div>
}
{/* NUMBER FIELD - END */}
{/* COMPANY FIELD - START */} {/* COMPANY FIELD - START */}
{ {
@ -1294,7 +1346,7 @@ const SignDocument = () => {
}} }}
onBlur={(e) => { onBlur={(e) => {
}} }}
contentEditable={true} contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max" className="outline-none whitespace-nowrap w-full max-h-max"
@ -1434,13 +1486,13 @@ const SignDocument = () => {
className="outline-none" className="outline-none"
> >
<option value="">Select</option> <option value="">Select</option>
{item.options && item.options.map((val, indx) => { {item.options && item.options.map((obj, indx) => {
return ( return (
<option <option
key={indx} key={indx}
value={val} value={obj.value}
> >
{val} {obj.label}
</option> </option>
) )
}) })
@ -1465,7 +1517,7 @@ const SignDocument = () => {
<p <p
style={{ opacity: `${item.id === isDateOpen ? "0" : "100"}` }} style={{ opacity: `${item.id === isDateOpen ? "0" : "100"}` }}
className="w-full h-full rounded pl-1 pt-1 whitespace-nowrap"> className="w-full h-full rounded pl-1 pt-1 whitespace-nowrap">
{(item.id && item.id in dateValues) ? dateValues[item.id] : item.subType?.toLowerCase()} {(item.id && item.id in dateValues) ? dateValues[item.id] : item.dateFormat?.toLowerCase()}
</p> </p>
<input <input
name={item.id} name={item.id}
@ -1477,7 +1529,7 @@ const SignDocument = () => {
let val = e.target.value; let val = e.target.value;
// Adding dummy time in case of time as it giving Invalid date without that // Adding dummy time in case of time as it giving Invalid date without that
if (item.subType?.toLowerCase() === "time") val = "09/02/2025 " + val if (item.dateFormat?.toLowerCase() === "time") val = "09/02/2025 " + val
if (!item.id) return; if (!item.id) return;
setIsDateOpen(null); setIsDateOpen(null);
@ -1491,7 +1543,7 @@ const SignDocument = () => {
onClick={() => { onClick={() => {
}} }}
type={`${item.subType?.toLowerCase() === "date" ? "date" : (item.subType?.toLowerCase() === "time" ? "time" : "datetime-local")}`} type={`${item.dateFormat?.toLowerCase() === "date" ? "date" : (item.dateFormat?.toLowerCase() === "time" ? "time" : "datetime-local")}`}
/> />
</div> </div>
@ -1633,7 +1685,7 @@ const SignDocument = () => {
{/* Document Container End */} {/* Document Container End */}
</form> </div>
</> </>
@ -1651,10 +1703,6 @@ const SignDocument = () => {
<StampUpload stamp={stamp.blob} setStamp={setStamp} /> <StampUpload stamp={stamp.blob} setStamp={setStamp} />
</div> </div>
{/* <SignatureCon recipientId={recipientId as string} openSign={openSign} setOpenSign={setOpenSign} savedSignature={savedSignature} setSavedSignature={setSavedSignature} /> {/* <SignatureCon recipientId={recipientId as string} openSign={openSign} setOpenSign={setOpenSign} savedSignature={savedSignature} setSavedSignature={setSavedSignature} />
<InitialCon openInitial={openInitial} setOpenInitial={setOpenInitial} savedInitial={savedInitial} setSavedInitial={setSavedInitial} /> */} <InitialCon openInitial={openInitial} setOpenInitial={setOpenInitial} savedInitial={savedInitial} setSavedInitial={setSavedInitial} /> */}

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

@ -114,7 +114,7 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
<div <div
key={id} key={id}
className="relative w-[160px] h-[170px] bg-white rounded-xl shadow-sm hover:shadow-md transition p-4 flex flex-col items-center justify-between" className="relative w-[160px] h-[170px] bg-white rounded-xl shadow-sm hover:shadow-md transition p-4 flex flex-col items-center justify-evenly"
draggable draggable
> >
<IoMdClose <IoMdClose
@ -158,7 +158,7 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
</div> </div>
</div> </div>
) : ( ) : (
<FaFileAlt className="text-red-600 text-5xl mb-1" /> <FaFileAlt className="text-[var(--primary)] text-5xl mb-1" />
)} )}
</div> </div>

65
src/components/process/processStepOne/ProcessStepOne.tsx
View File

@ -139,7 +139,7 @@ const ProcessStepOne = () => {
const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
const handleNextClick = async (isSendNow: boolean, saveAndClose: boolean = false) => { const handleNextClick = async (saveAndClose: boolean = false) => {
let formError = { let formError = {
documents: false, documents: false,
recipients: false, recipients: false,
@ -298,41 +298,38 @@ const ProcessStepOne = () => {
status: "CREATED" status: "CREATED"
}) })
if (isSendNow) { // if (isSendNow) {
dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS)); // dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS));
setTimeout(() => { // }
// navigate("/"); // else {
}, 1000); // setTimeout(() => {
} dispatch(resetDocuments())
else { dispatch(resetRecipients())
setTimeout(() => { if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
dispatch(resetDocuments()) dispatch(hideLoader());
dispatch(resetRecipients()) if (!saveAndClose) {
dispatch(hideLoader()); navigate(`/process-step-two/${accountId}/template/${transactionId}`)
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) { } else {
console.log(`/process-step-two/${accountId}/template/${transactionId}`) navigate(`/templates`)
if (!saveAndClose) { }
navigate(`/process-step-two/${accountId}/template/${transactionId}`) } else {
} else { if (signType === SignTypeEnum.selfSign) {
navigate(`/templates`) dispatch(showLoader("Processing eSignature..."));
(async () => {
try {
await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
dispatch(hideLoader());
navigate(`/sign/${recipientId}/self_sign`);
} catch (err) {
console.log("Error Transaction Sent", err.message);
} }
} else { })()
if (signType === SignTypeEnum.selfSign) { } else {
(async () => { navigate(`/process-step-two/${accountId}/${transactionId}`);
try { }
const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
console.log(res, "Check123");
navigate(`/sign/${recipientId}/self_sign`);
} catch (err) {
console.log("Error Transaction Sent", err.message);
}
})()
} else {
navigate(`/process-step-two/${accountId}/${transactionId}`);
}
}
}, 1000);
} }
// }, 1000);
// }
} catch (error) { } catch (error) {
dispatch(hideLoader()); dispatch(hideLoader());

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

@ -96,110 +96,104 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
} }
} }
// let updatedTags = { ...recTags }
// let tagsData = []
// for (const dropPageIds of Object.keys(updatedTags)) {
// for (const dropTag of updatedTags[dropPageIds]) {
// let mask = null
// // console.log(dropTag, "line 132")
// // if (dropTag.subType?.toLowerCase() === "password") {
// // console.log(dropTag)
// mask = {
// "type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null,
// "character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null
// }
// // }
// // console.log(dropTag, "line 204")
let updatedTags = { ...recTags } // const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
let tagsData = []
for (const dropPageIds of Object.keys(updatedTags)) { // const updatedTagData = {
// "id": "id" in dropTag ? dropTag.id : null,
// "label": dropTag.label,
// "dimensions": dropTag.dimensions,
// "type": dropTag.type.toUpperCase(),
// // "subType": (dropTag.subType ? dropTag.subType.toUpperCase() : null),
// "minLength": "minLength" in dropTag ? dropTag.minLength : 0,
// "maxLength": "maxLength" in dropTag ? dropTag.maxLength : 0,
// "error": ("error" in dropTag && dropTag.error) ? `${dropTag.error}`.toUpperCase() : "error",
// "regex": "regex" in dropTag ? dropTag.regex : []
// // }
// ,
// "documentId": dropTag.documentId,
// "options": ("options" in dropTag) ? dropTag.options : [],
// "pageIndex": dropTag.pageIndex,
// "recipientId": dropTag.recipientId,
// "styles": "styles" in dropTag ? dropTag.styles : {
// "font": "",
// "italic": false,
// "bold": false,
// "underline": false,
// "color": "black",
// "textSize": 0
// },
// "required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true,
// // "required": "required" in dropTag ? dropTag.required : ,
// "update": "update" in dropTag ? dropTag.update : false,
// "readOnly": false,
// }
for (const dropTag of updatedTags[dropPageIds]) { // // if ("format" in dropTag) {
let mask = null // // updatedTagData.format = `${dropTag.subType}`.toUpperCase();
// // updatedTagData.dateFormat = dropTag.format;
// // updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
// // }
// console.log(dropTag, "line 132") // if("format" in dropTag && dropTag.format) {
// updatedTagData.subType = dropTag.format.toLowerCase();
// updatedTagData.format = dropTag.dateFormat;
// }
// if (dropTag.subType?.toLowerCase() === "password") { // if (`${dropTag.type}`.toLowerCase() === "number") {
// console.log(dropTag) // updatedTagData.decimalPlace = dropTag.decimalPlace
mask = { // updatedTagData.isCurrency = dropTag.isCurrency
"type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null, // }
"character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null
}
// }
// console.log(dropTag, "line 204") // if (dropTag.type === "TEXT") {
// // updatedTagData.multiLine = dropTag.subType === "paragraph"
const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false // if(dropTag.multiLine) {
// updatedTagData.subtype = TEXT.PARAGRAPH
// } else {
// updatedTagData.subtype = TEXT.SINGLE_LINE
// }
const updatedTagData = { // if ("maskType" in dropTag) {
"id": "id" in dropTag ? dropTag.id : null, // updatedTagData.maskCharacter = mask.character
"label": dropTag.label, // updatedTagData.maskType = mask.type
"dimensions": dropTag.dimensions, // }
"type": dropTag.type.toUpperCase(), // }
// "subType": (dropTag.subType ? dropTag.subType.toUpperCase() : null),
"minLength": "minLength" in dropTag ? dropTag.minLength : 0,
"maxLength": "maxLength" in dropTag ? dropTag.maxLength : 0,
"error": ("error" in dropTag && dropTag.error) ? `${dropTag.error}`.toUpperCase() : "error",
"regex": "regex" in dropTag ? dropTag.regex : []
// }
,
"documentId": dropTag.documentId,
"options": ("options" in dropTag) ? dropTag.options : [],
"pageIndex": dropTag.pageIndex,
"recipientId": dropTag.recipientId,
"styles": "styles" in dropTag ? dropTag.styles : {
"font": "",
"italic": false,
"bold": false,
"underline": false,
"color": "black",
"textSize": 0
},
"required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true,
// "required": "required" in dropTag ? dropTag.required : ,
"update": "update" in dropTag ? dropTag.update : false,
"readOnly": false,
}
// if ("format" in dropTag) { // // if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required;
// updatedTagData.format = `${dropTag.subType}`.toUpperCase();
// updatedTagData.dateFormat = dropTag.format;
// updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
// }
if("format" in dropTag && dropTag.format) { // if (updatedTagData.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT"
updatedTagData.subType = dropTag.format.toLowerCase(); // if (updatedTagData.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT"
updatedTagData.format = dropTag.dateFormat;
}
if (`${dropTag.type}`.toLowerCase() === "number") { // if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options;
updatedTagData.decimalPlace = dropTag.decimalPlace
updatedTagData.isCurrency = dropTag.isCurrency
}
if (dropTag.type === "TEXT") { // if (!updatedTagData.id) delete updatedTagData.id;
// updatedTagData.multiLine = dropTag.subType === "paragraph"
if(dropTag.multiLine) { // if (!isDeleted) {
updatedTagData.subtype = TEXT.PARAGRAPH // // sendTags.mod.push(updatedTagData);
} else { // tagsData.push(updatedTagData)
updatedTagData.subtype = TEXT.SINGLE_LINE // }
} // }
// }
if ("maskType" in dropTag) {
updatedTagData.maskCharacter = mask.character
updatedTagData.maskType = mask.type
}
}
// if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required;
if (updatedTagData.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT"
if (updatedTagData.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT"
if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options;
if (!updatedTagData.id) delete updatedTagData.id;
if (!isDeleted) {
// sendTags.mod.push(updatedTagData);
tagsData.push(updatedTagData)
}
}
}
setDroppedItems(recTags) setDroppedItems(recTags)
// Handle your response here // Handle your response here
@ -261,6 +255,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
} }
if (updateTags.length && "update" in updateTags[updateTags.length - 1]) { if (updateTags.length && "update" in updateTags[updateTags.length - 1]) {
delete updateTags[updateTags.length - 1].update delete updateTags[updateTags.length - 1].update
delete updateTags[updateTags.length - 1].icon
} }
} }
@ -456,7 +451,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
// HANDLE DROP - START // HANDLE DROP - START
const handleDrop = (event: React.DragEvent<HTMLDivElement>, docId: string, documentId: number, pageIndex: number) => { const handleDrop = (event: React.DragEvent<HTMLDivElement>, docId: string, documentId: number, pageIndex: number) => {
console.log("// HANDLE DROP - START")
event.preventDefault(); event.preventDefault();
const data = window.dragElemData; const data = window.dragElemData;

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

@ -126,10 +126,10 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
setTimeout(() => { setTimeout(() => {
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) { if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
if (isSignSend) { if (isSignSend) {
navigate(`./../../../sign/${selfUserSign.recipientId}`,{ replace: true }); // navigate(`./../../../sign/${selfUserSign.recipientId}`,{ replace: true });
} }
else { else {
navigate(`/document-completion-screen/${accountId}/${transactionId}`, { replace: true }) // navigate(`/document-completion-screen/${accountId}/${transactionId}`, { replace: true })
} }
} else { } else {
navigate(`/templates`); navigate(`/templates`);

166
src/components/process/processStepTwo/rightSideBar/CommonAttrDropDown.tsx
View File

@ -1,18 +1,79 @@
import { MdKeyboardArrowDown } from 'react-icons/md'; import { MdKeyboardArrowDown } from 'react-icons/md';
import { DROPDOWNTOGGLE } from './RightSideBar'; import { DROPDOWNTOGGLE, MASKCHARACTER, MASKTYPE, NUMBER, SELECT, TEMPORAL, TEXT } from './RightSideBar';
import { DroppedItem, TagsTypes } from '../../../../utlity/types';
interface CommonAttrDropDownInt { interface CommonAttrDropDownInt {
selectedType: any; selectedType: any;
subType: string | undefined; // subType: string | undefined;
selectedTag: DroppedItem;
dropDownToggle: DROPDOWNTOGGLE | null; dropDownToggle: DROPDOWNTOGGLE | null;
setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>; setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>;
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void; handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
} }
const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({selectedType, subType, dropDownToggle, setDropDownToggle, handlePropertyChange}) => { const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, selectedTag, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
console.log("selectedType, subType,",selectedType, subType) let subType = "";
let subTypeKey = ""
console.log(selectedType, selectedTag, "line 20");
switch (selectedTag.type.toLowerCase()) {
case "number":
if (selectedTag.decimalPlace === undefined) {
subType = NUMBER.INTEGER;
subTypeKey = "decimalPlace";
} else if (selectedTag.isCurrency !== undefined && selectedTag.isCurrency) {
subType = NUMBER.CURRENCY;
subTypeKey = "isCurrency";
} else if (selectedTag.decimalPlace === 0) {
subType = NUMBER.INTEGER;
subTypeKey = "decimalPlace";
} else if (selectedTag.decimalPlace > 0) {
subType = NUMBER.DECIMAL;
subTypeKey = "decimalPlace";
}
break;
case "text":
console.log("Line 444", selectedTag);
if (selectedTag.multiLine === undefined) {
subType = TEXT.PARAGRAPH
} else if (selectedTag.multiLine) {
subType = TEXT.PARAGRAPH;
} else if (!selectedTag.multiLine) {
subType = TEXT.SINGLE_LINE;
}
if ("maskType" in selectedTag && selectedTag.maskType !== null && selectedTag.maskType?.length) subType = TEXT.PASSWORD;
subTypeKey = "multiLine";
break;
case "temporal":
if (selectedTag.dateFormat === undefined) {
subType = TEMPORAL.DATE;
} else {
subType = TEMPORAL[selectedTag.dateFormat.toUpperCase() as keyof typeof TEMPORAL];
}
subTypeKey = "dateFormat";
break;
case "select":
if (selectedTag.multiSelect !== undefined && selectedTag.multiSelect) {
subType = SELECT.MULTI_SELECT;
} else {
subType = SELECT.SINGLE_SELECT;
}
subTypeKey = "multiSelect";
break;
case "checkbox":
console.log("Date type selected");
break;
case "radio":
console.log("Date type selected");
break;
}
console.log(selectedTag, "line 63");
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
@ -20,21 +81,98 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({selectedType, subT
<div <div
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.TYPE ? null : DROPDOWNTOGGLE.TYPE)} onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.TYPE ? null : DROPDOWNTOGGLE.TYPE)}
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200"> className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
<p className="capitalize cursor-pointer">{subType ? (subType === "date_time" ? "Date Time" : subType) : selectedType[Object.keys(selectedType)[0] as keyof typeof selectedType]}</p> <p className="capitalize cursor-pointer">{subType}</p>
{/* <p className="capitalize cursor-pointer">{subType ? (subType === "date_time" ? "Date Time" : subType) : selectedType[Object.keys(selectedType)[0] as keyof typeof selectedType]}</p> */}
<MdKeyboardArrowDown /> <MdKeyboardArrowDown />
</div> </div>
{dropDownToggle === DROPDOWNTOGGLE.TYPE && {dropDownToggle === DROPDOWNTOGGLE.TYPE &&
<div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded"> <div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
{Object.keys(selectedType).map((val, indx) => ( {Object.keys(selectedType).map((val, indx) => {
<div
key={indx}
onClick={() => handlePropertyChange("subType", selectedType[val as keyof typeof selectedType])} console.log(selectedType, val, "Line 90")
className={`capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer`}
> let value = val.toLowerCase() as keyof typeof selectedType | number | boolean;
{selectedType[val as keyof typeof selectedType] === "date_time" ? "Date Time" : selectedType[val as keyof typeof selectedType]} let isCurrency = false;
</div> let isPassword = false;
))}
// Handling NUMBER - START
if (value === NUMBER.INTEGER || value === NUMBER.CURRENCY) {
if (value === NUMBER.CURRENCY) {
isCurrency = true;
}
value = 0;
}
if (value === NUMBER.DECIMAL) {
value = selectedTag.decimalPlace ?? 0 > 0 ? selectedTag.decimalPlace ?? 2 : 2;
}
// Handling NUMBER - END
// Handling SELECT - START
if (subTypeKey === "multiSelect") {
if (value === "multi_select") {
value = true;
} else {
value = false
}
}
// Handling SELECT - END
// Handling TEXT - START
if (subTypeKey === "multiLine") {
if (value === "single_line") {
value = false;
} else {
value = true;
}
if (val.toLowerCase() === TEXT.PASSWORD) {
isPassword = true;
}
}
// Handling TEXT - END
console.log(subTypeKey, subType, value, "line 1223");
return (
<div
key={indx}
onClick={() => {
if (selectedTag.type.toLowerCase() === TagsTypes.NUMBER) {
if (isCurrency) {
handlePropertyChange("isCurrency", true);
return;
}
handlePropertyChange(subTypeKey, value as number);
if (selectedTag.isCurrency) handlePropertyChange("isCurrency", false)
} else if (selectedTag.type.toLowerCase() === TagsTypes.SELECT) {
handlePropertyChange(subTypeKey, value as boolean);
} else if (selectedTag.type.toLowerCase() === TagsTypes.TEXT) {
if (isPassword) {
handlePropertyChange("maskType", MASKTYPE.ALL.toUpperCase());
handlePropertyChange("maskCharacter", MASKCHARACTER.ASTERISK.toUpperCase());
} else {
handlePropertyChange("maskType", null);
handlePropertyChange("maskCharacter", null);
}
handlePropertyChange(subTypeKey, value as boolean);
}
else {
handlePropertyChange(subTypeKey, selectedType[val as keyof typeof selectedType]);
}
}}
className={`capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer`}
>
{selectedType[val as keyof typeof selectedType] === "date_time" ? "Date Time" : selectedType[val as keyof typeof selectedType]}
</div>
)
})}
</div> </div>
} }
</div> </div>

4
src/components/process/processStepTwo/rightSideBar/MaskTypePassAttr.tsx
View File

@ -32,7 +32,7 @@ const MaskTypePassAttr: React.FC<MaskTypePassAttrInt> = ({ maskType, maskCharact
( (
<div <div
key={indx} key={indx}
onClick={() => handlePropertyChange("maskType", MASKTYPE[val])} onClick={() => handlePropertyChange("maskType", MASKTYPE[val].toUpperCase())}
className="capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer" className="capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer"
> >
{(MASKTYPE[val]).replace("_", " ")} {(MASKTYPE[val]).replace("_", " ")}
@ -71,7 +71,7 @@ const MaskTypePassAttr: React.FC<MaskTypePassAttrInt> = ({ maskType, maskCharact
( (
<div <div
key={indx} key={indx}
onClick={() => handlePropertyChange("maskCharacter", MASKCHARACTER[val])} onClick={() => handlePropertyChange("maskCharacter", MASKCHARACTER[val].toUpperCase())}
className="capitalize p-2 hover:bg-slate-200 cursor-pointer" className="capitalize p-2 hover:bg-slate-200 cursor-pointer"
> >
{ {

387
src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx
View File

@ -2,7 +2,7 @@ import { DroppedItemsObj } from "../DocumentContainer";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { dateFormats, dateTimeFormats, timeFormats } from "../../../../utlity/dateTimeFormats"; import { dateFormats, dateTimeFormats, timeFormats } from "../../../../utlity/dateTimeFormats";
import { DroppedItem } from "../../../../utlity/types"; import { DroppedItem, StylesInterface } from "../../../../utlity/types";
import { IoIosArrowDown } from "react-icons/io"; import { IoIosArrowDown } from "react-icons/io";
import { TagsTypes } from "../../../../utlity/types"; import { TagsTypes } from "../../../../utlity/types";
@ -29,7 +29,7 @@ import DirectionalControls from "./DirectionalControls";
export interface DroppedItemProps { export interface DroppedItemProps {
droppedItems: DroppedItem[] droppedItems: DroppedItem[]
selectedTag: DroppedItem selectedTag: DroppedItem
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>> setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>> | React.Dispatch<React.SetStateAction<DroppedItem[]>>
selTagKey: string, selTagKey: string,
selTagIndx: number, selTagIndx: number,
signClient: boolean, signClient: boolean,
@ -94,7 +94,7 @@ export enum DROPDOWNTOGGLE {
DDMMYY_FORMAT DDMMYY_FORMAT
} }
const defaultStyles = { const defaultStyles: StylesInterface = {
font: "", font: "",
italic: false, italic: false,
bold: false, bold: false,
@ -106,163 +106,192 @@ const defaultStyles = {
const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, setDroppedItems, selTagKey, selTagIndx, signClient = false }) => { const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, setDroppedItems, selTagKey, selTagIndx, signClient = false }) => {
const selectedType = selectedTag.type.toLowerCase() in enumMap && enumMap[selectedTag.type.toLowerCase() as keyof typeof enumMap];
console.log("Right SideBar Called", selectedTag, selTagKey, selTagIndx, droppedItems)
const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap];
const [styles, setStyles] = useState(defaultStyles); const [styles, setStyles] = useState(defaultStyles);
const [dropDownToggle, setDropDownToggle] = useState<DROPDOWNTOGGLE | null>(null); const [dropDownToggle, setDropDownToggle] = useState<DROPDOWNTOGGLE | null>(null);
const [decimalPlace, setDecimalPlace] = useState<number>(2) const [decimalPlace, setDecimalPlace] = useState<number>(selectedTag.decimalPlace ?? 0);
const [styleOpen, setStyleOpen] = useState(false); const [styleOpen, setStyleOpen] = useState(false);
const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => { const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number | StylesInterface, is24Hrs = null) => {
console.log("changeTo", changeTo, "changeWith", changeWith) console.log("changeTo", changeTo, "changeWith", changeWith)
if (changeTo === '' || changeWith === '') return if (changeTo === '') return
if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") { // if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
if (!signClient) { // if (!signClient) {
setDroppedItems((prev) => ( // setDroppedItems((prev) => (
{ // {
...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", update: true } : item // i === selTagIndx ? { ...item, [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true } : item
) // )
: [], // : [],
// }
// ));
// } else {
// setDroppedItems((prev) => {
// const updated = [...prev];
// updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true }
// return updated;
// })
// }
// } else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) {
// let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace;
// const isCurrency = changeWith === NUMBER.CURRENCY;
// // const currencyType = null
// if (!signClient) {
// setDroppedItems((prev) => (
// {
// ...prev,
// [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
// ? prev[selTagKey].map((item, i) =>
// i === selTagIndx ? { ...item, [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true } : item
// )
// : [],
// }// Provide a fallback in case it's undefined or not an array
// ));
// } else {
// setDroppedItems((prev) => {
// const updated = [...prev];
// updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true }
// return updated;
// })
// }
// }
// else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
// let val = timeFormats[0].format;
// if (is24Hrs === null) {
// val = timeFormats[0].format
// } else if (!is24Hrs) {
// val = timeFormats[1].format
// } else {
// val = timeFormats[0].format
// }
// // console.log("val", val, is24Hrs)
// // if(is24Hrs === null) {
// // changeWith = changeWith + " " + val;
// // }
// if (!signClient) {
// setDroppedItems((prev) => {
// const updatedArray = Array.isArray(prev[selTagKey])
// ? prev[selTagKey].map((item, i) => {
// if (i === selTagIndx) {
// const updatedItem = { ...item, [changeTo]: changeWith + " " + val, update: true };
// console.log('Updating item at index', i, 'with:', updatedItem);
// return updatedItem;
// }
// return item;
// })
// : [];
// return {
// ...prev,
// [selTagKey]: updatedArray,
// };
// });
// } else {
// setDroppedItems((prev) => {
// const updated = [...prev];
// updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith + " " + val, update: true }
// return updated;
// })
// }
// }
// else {
// if (!signClient) {
// setDroppedItems((prev) => {
// const updatedItems = Array.isArray(prev[selTagKey])
// ? prev[selTagKey].map((item, i) =>
// i === selTagIndx ? { ...item, [changeTo]: changeWith, update: true } : item
// )
// : [];
// return {
// ...prev,
// [selTagKey]: updatedItems,
// };
// });
// } else {
// setDroppedItems((prev) => {
// const updated = [...prev];
// updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
// return updated;
// })
// }
// }
if (!signClient) {
setDroppedItems((prev) => {
const updatedItems = Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) =>
i === selTagIndx ? { ...item, [changeTo]: changeWith, update: true } : item
)
: [];
return {
...prev,
[selTagKey]: updatedItems,
};
});
} else {
// setDroppedItems((prev) => {
// const updated = [...prev];
// updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
// return updated;
// })
setDroppedItems((prev) => {
return (prev.map((item, idx) => {
console.log(prev, "Prev lIne 258")
if (idx === selTagIndx) {
return { ...item, [changeTo]: changeWith, update: true }
} }
)); return item;
} else { }))
setDroppedItems((prev) => { })
const updated = [...prev];
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true }
return updated;
})
}
} else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) {
let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace;
const isCurrency = changeWith === NUMBER.CURRENCY;
// const currencyType = null
if (!signClient) {
setDroppedItems((prev) => (
{
...prev,
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
? prev[selTagKey].map((item, i) =>
i === selTagIndx ? { ...item, [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true } : item
)
: [],
}// Provide a fallback in case it's undefined or not an array
));
} else {
setDroppedItems((prev) => {
const updated = [...prev];
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true }
return updated;
})
}
} }
else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
let val = timeFormats[0].format;
if (is24Hrs === null) {
val = timeFormats[0].format
} else if (!is24Hrs) {
val = timeFormats[1].format
} else {
val = timeFormats[0].format
}
// console.log("val", val, is24Hrs)
// if(is24Hrs === null) {
// changeWith = changeWith + " " + val;
// }
if (!signClient) {
setDroppedItems((prev) => {
const updatedArray = Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) => {
if (i === selTagIndx) {
const updatedItem = { ...item, [changeTo]: changeWith + " " + val, update: true };
console.log('Updating item at index', i, 'with:', updatedItem);
return updatedItem;
}
return item;
})
: [];
return {
...prev,
[selTagKey]: updatedArray,
};
});
} else {
setDroppedItems((prev) => {
const updated = [...prev];
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith + " " + val, update: true }
return updated;
})
}
}
else {
if (!signClient) {
setDroppedItems((prev) => {
const updatedItems = Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) =>
i === selTagIndx ? { ...item, [changeTo]: changeWith, update: true } : item
)
: [];
return {
...prev,
[selTagKey]: updatedItems,
};
});
} else {
setDroppedItems((prev) => {
const updated = [...prev];
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
return updated;
})
}
}
setDropDownToggle(null) setDropDownToggle(null)
} }
useEffect(() => { // useEffect(() => {
if (selectedTag.subType === TEMPORAL.DATE || selectedTag.subType === TEMPORAL.DATE_TIME || selectedTag.subType === TEMPORAL.TIME) { // if (selectedTag.dateFormat === TEMPORAL.DATE || selectedTag.dateFormat === TEMPORAL.DATE_TIME || selectedTag.dateFormat === TEMPORAL.TIME) {
if (selectedTag.subType === TEMPORAL.DATE) { // if (selectedTag.dateFormat === TEMPORAL.DATE) {
handlePropertyChange("format", dateFormats[0].format) // handlePropertyChange("format", dateFormats[0].format)
} // }
else if (selectedTag.subType === TEMPORAL.DATE_TIME) { // else if (selectedTag.dateFormat === TEMPORAL.DATE_TIME) {
handlePropertyChange("format", dateTimeFormats[0].format) // handlePropertyChange("format", dateTimeFormats[0].format)
} // }
else if (selectedTag.subType === TEMPORAL.TIME) { // else if (selectedTag.dateFormat === TEMPORAL.TIME) {
handlePropertyChange("format", timeFormats[0].format) // handlePropertyChange("format", timeFormats[0].format)
} // }
} // }
}, [selectedTag.subType]) // }, [selectedTag.dateFormat])
useEffect(() => { useEffect(() => {
if (selectedTag.label === "temporal") { if (selectedTag.label === "temporal" && !("dateFormat" in selectedTag)) {
handlePropertyChange("subType", TEMPORAL.DATE); handlePropertyChange("dateFormat", TEMPORAL.DATE);
handlePropertyChange("format", "DD/MM/YY"); handlePropertyChange("format", "DD/MM/YY");
} }
if (selectedTag.label === TagsTypes.TEXT && !("multiLine" in selectedTag)) {
handlePropertyChange("multiLine", true);
}
}, []) }, [])
const handleDecimalPlace = (e: React.ChangeEvent<HTMLInputElement>) => { const handleDecimalPlace = (e: React.ChangeEvent<HTMLInputElement>) => {
@ -271,6 +300,12 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
handlePropertyChange("decimalPlace", val) handlePropertyChange("decimalPlace", val)
} }
useEffect(() => {
if (selectedTag.decimalPlace === undefined) return;
if (selectedTag.decimalPlace === decimalPlace) return;
setDecimalPlace(selectedTag.decimalPlace ?? 0)
}, [selectedTag.decimalPlace ?? 0])
// useEffect(() => { // useEffect(() => {
// if ("styles" in selectedTag) { // if ("styles" in selectedTag) {
// console.log("styles" in selectedTag) // console.log("styles" in selectedTag)
@ -300,23 +335,25 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
} }
// Optional subType logic // Optional subType logic
const fontSize = selectedTag?.styles?.textSize || defaultStyles.textSize;
const tagHeight = selectedTag?.dimensions?.height - 18;
if ( // const fontSize = selectedTag?.styles?.textSize || defaultStyles.textSize;
selectedTag.type === TagsTypes.TEXT && // const tagHeight = selectedTag?.dimensions?.height - 18;
selectedTag.subType !== TEXT.PASSWORD &&
selectedTag.subType !== TEXT.PARAGRAPH && // if (
tagHeight > fontSize * 2 // selectedTag.type === TagsTypes.TEXT &&
) { // selectedTag.subType !== TEXT.PASSWORD &&
handlePropertyChange("subType", TEXT.PARAGRAPH); // selectedTag.subType !== TEXT.PARAGRAPH &&
} else if ( // tagHeight > fontSize * 2
selectedTag.subType !== TEXT.PASSWORD && // ) {
selectedTag.subType !== TEXT.SINGLE_LINE && // handlePropertyChange("subType", TEXT.PARAGRAPH);
tagHeight <= fontSize * 2 // } else if (
) { // selectedTag.subType !== TEXT.PASSWORD &&
handlePropertyChange("subType", TEXT.SINGLE_LINE); // selectedTag.subType !== TEXT.SINGLE_LINE &&
} // tagHeight <= fontSize * 2
// ) {
// handlePropertyChange("subType", TEXT.SINGLE_LINE);
// }
}, [selectedTag]); }, [selectedTag]);
const handleStyleChange = (key, value) => { const handleStyleChange = (key, value) => {
@ -411,14 +448,14 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
setDroppedItems((prev) => { setDroppedItems((prev) => {
const updated = [...prev]; const updated = [...prev];
updated[selTagIndx] = { updated[selTagIndx] = {
...item, ...item,
dimensions: { dimensions: {
...item.dimensions, ...item.dimensions,
left: clampedLeft, left: clampedLeft,
top: clampedTop top: clampedTop
}, },
update: true update: true
} }
return updated return updated
}) })
} }
@ -433,6 +470,10 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
} }
console.log(selectedType, "line 434");
return ( return (
<> <>
{/* Right Side Bar Start */} {/* Right Side Bar Start */}
@ -468,7 +509,8 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
selectedType && Object.keys(selectedType).length > 0 && selectedType && Object.keys(selectedType).length > 0 &&
<CommonAttrDropDown <CommonAttrDropDown
selectedType={selectedType} selectedType={selectedType}
subType={selectedTag.subType} // subType={selectedTag.subType}
selectedTag={selectedTag}
dropDownToggle={dropDownToggle} dropDownToggle={dropDownToggle}
setDropDownToggle={setDropDownToggle} setDropDownToggle={setDropDownToggle}
handlePropertyChange={handlePropertyChange} /> handlePropertyChange={handlePropertyChange} />
@ -476,7 +518,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
{/* Mask Type */} {/* Mask Type */}
{ {
selectedTag?.subType === TEXT.PASSWORD && selectedTag.maskType && selectedTag.maskType?.length > 0 &&
<MaskTypePassAttr <MaskTypePassAttr
maskType={selectedTag.maskType ? selectedTag.maskType : MASKTYPE.ALL} maskType={selectedTag.maskType ? selectedTag.maskType : MASKTYPE.ALL}
maskCharacter={selectedTag.maskCharacter ? selectedTag.maskCharacter : MASKCHARACTER.ASTERISK} maskCharacter={selectedTag.maskCharacter ? selectedTag.maskCharacter : MASKCHARACTER.ASTERISK}
@ -488,12 +530,13 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
{/* TEMPORAL DATE FORMAT - START */} {/* TEMPORAL DATE FORMAT - START */}
{ {
(selectedTag?.subType === TEMPORAL.DATE || selectedTag && (selectedTag?.dateFormat === TEMPORAL.DATE ||
selectedTag?.subType === TEMPORAL.TIME || selectedTag?.dateFormat === TEMPORAL.TIME ||
selectedTag?.subType === TEMPORAL.DATE_TIME) && selectedTag?.dateFormat === TEMPORAL.DATE_TIME) &&
<TemporalDateAttr <TemporalDateAttr
subType={selectedTag.subType} dateFormat={selectedTag.dateFormat ?? TEMPORAL.DATE_TIME}
format={selectedTag.format} format={selectedTag.format}
selectedTag={selectedTag}
dropDownToggle={dropDownToggle} dropDownToggle={dropDownToggle}
setDropDownToggle={setDropDownToggle} setDropDownToggle={setDropDownToggle}
handlePropertyChange={handlePropertyChange} /> handlePropertyChange={handlePropertyChange} />
@ -502,7 +545,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
{/* NUMBER - DECIMAL PLACES */} {/* NUMBER - DECIMAL PLACES */}
{ {
selectedTag?.subType === NUMBER.DECIMAL && selectedTag?.type.toLowerCase() === TagsTypes.NUMBER &&
<div> <div>
<label htmlFor="" className="">Decimal Places</label> <label htmlFor="" className="">Decimal Places</label>
<input <input
@ -514,9 +557,9 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
} }
{ {
(selectedTag?.subType === SELECT.SINGLE_SELECT || selectedTag?.subType === SELECT.MULTI_SELECT) && (selectedTag.type.toLowerCase() === TagsTypes.SELECT) &&
<SelectTagAttr <SelectTagAttr
options={selectedTag.options} options={selectedTag.options ?? []}
selTagKey={selTagKey} selTagKey={selTagKey}
selTagIndx={selTagIndx} selTagIndx={selTagIndx}
setDroppedItems={setDroppedItems} setDroppedItems={setDroppedItems}

105
src/components/process/processStepTwo/rightSideBar/SelectTagAttr.tsx
View File

@ -2,9 +2,11 @@ import { useState } from "react";
import { DROPDOWNTOGGLE } from "./RightSideBar"; import { DROPDOWNTOGGLE } from "./RightSideBar";
import { DroppedItemsObj } from "../DocumentContainer"; import { DroppedItemsObj } from "../DocumentContainer";
import { IoMdClose } from "react-icons/io"; import { IoMdClose } from "react-icons/io";
import { TagOptionAttrType } from "../../../../utlity/types";
import { DroppedItem } from "../../../../store/slices/droppedItemsSlice";
interface SelectTagAttrInt { interface SelectTagAttrInt {
options: string[] | undefined; options: TagOptionAttrType[];
selTagKey: string; selTagKey: string;
selTagIndx: number; selTagIndx: number;
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>; setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>;
@ -12,28 +14,43 @@ interface SelectTagAttrInt {
} }
const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagIndx, setDroppedItems, handlePropertyChange }) => { const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagIndx, setDroppedItems, handlePropertyChange }) => {
const [selectedOption, setSelectedOption] = useState<string>() const [selectedOption, setSelectedOption] = useState<TagOptionAttrType>({ label: "", value: "" });
const handleAddSelectOption = () => { const handleAddSelectOption = () => {
if (selectedOption && selectedOption.length) { if (selectedOption && selectedOption.label && selectedOption.value) {
setDroppedItems((prev) => {
console.log("Previous droppedItems:", prev);
const newState = {
...prev, setDroppedItems((prev) => {
[selTagKey]: Array.isArray(prev[selTagKey]) let newState: DroppedItem | {} = {};
? prev[selTagKey].map((item, i) => {
if (i === selTagIndx) { if (Array.isArray(prev)) {
return { newState = prev.map((item, indx) => {
...item, if (indx === selTagIndx) {
options: item.options ? [...item.options, selectedOption] : [selectedOption], return {
update: true, ...item,
}; options: item.options ? [...item.options, { ...selectedOption }] : [{ ...selectedOption }],
} update: true,
return item; };
}) }
: [], return item;
}; })
} else {
newState = {
...prev,
[selTagKey]: Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) => {
if (i === selTagIndx) {
return {
...item,
options: item.options ? [...item.options, { ...selectedOption }] : [{ ...selectedOption }],
update: true,
};
}
return item;
})
: [],
};
}
console.log("New droppedItems state:", newState); console.log("New droppedItems state:", newState);
return newState; return newState;
@ -43,19 +60,35 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
const handleSelectOptionDel = (indx: number) => { const handleSelectOptionDel = (indx: number) => {
setDroppedItems((prev) => ( setDroppedItems((prev) => {
{ let newState = {};
...prev,
[selTagKey]: Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) => { if (Array.isArray(prev)) {
if (i === selTagIndx) { newState = prev.map((item, indx) => {
return { ...item, options: item.options ? item.options.filter((_, i) => i !== indx) : [] }; if (indx === selTagIndx) {
} return {
return item; ...item, options: item.options ? item.options.filter((_, i) => i !== indx) : []
}) };
: [], }
return item;
})
} else {
newState = {
...prev,
[selTagKey]: Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) => {
if (i === selTagIndx) {
return { ...item, options: item.options ? item.options.filter((_, i) => i !== indx) : [] };
}
return item;
})
: [],
};
} }
));
return newState
});
} }
return ( return (
@ -64,7 +97,7 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
<label htmlFor="" className="">Add Options</label> <label htmlFor="" className="">Add Options</label>
<input <input
type="text" type="text"
onChange={(e) => setSelectedOption(e.target.value)} onChange={(e) => setSelectedOption({ label: e.target.value, value: e.target.value })}
// value={selectedOption} // value={selectedOption}
onKeyUp={(e) => { onKeyUp={(e) => {
if (e.code === "Enter") { if (e.code === "Enter") {
@ -74,13 +107,13 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
}} }}
className="bg-slate-100 w-full outline-none p-2 rounded" /> className="bg-slate-100 w-full outline-none p-2 rounded" />
<div className="h-[150px] mt-1 overflow-hidden overflow-y-auto"> <div className="max-h-[150px] mt-1 overflow-hidden overflow-y-auto">
{ {
options && options.map((val, indx) => ( options && options.map((obj, indx) => (
<div <div
key={indx} key={indx}
className="flex justify-between items-center px-2 py-1 my-1 rounded bg-slate-100"> className="flex justify-between items-center px-2 py-1 my-1 rounded bg-slate-100">
<p>{val}</p> <p>{obj.label}</p>
<IoMdClose <IoMdClose
onClick={() => onClick={() =>
// setSelectedOptions(prev => // setSelectedOptions(prev =>

22
src/components/process/processStepTwo/rightSideBar/TemporalDateAttr.tsx
View File

@ -3,6 +3,7 @@ import { dateFormats, dateTimeFormats, monthFormats, timeFormats, weekFormats, y
import { DROPDOWNTOGGLE, TEMPORAL } from "./RightSideBar"; import { DROPDOWNTOGGLE, TEMPORAL } from "./RightSideBar";
import { MdKeyboardArrowDown } from "react-icons/md"; import { MdKeyboardArrowDown } from "react-icons/md";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { DroppedItem } from "../../../../utlity/types";
const dateTimeFormatMap = { const dateTimeFormatMap = {
"date": dateFormats, "date": dateFormats,
@ -14,28 +15,29 @@ const dateTimeFormatMap = {
} }
interface TemporalDateAttrInt { interface TemporalDateAttrInt {
subType: string; dateFormat: string;
format: string | undefined; format: string | undefined;
selectedTag: DroppedItem;
dropDownToggle: DROPDOWNTOGGLE | null; dropDownToggle: DROPDOWNTOGGLE | null;
setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>; setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>;
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number, is24Hrs: boolean) => void; handlePropertyChange: (changeTo: string, changeWith: string | boolean | number, is24Hrs: boolean) => void;
} }
const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, dropDownToggle, setDropDownToggle, handlePropertyChange }) => { const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, selectedTag, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
console.log(dateFormat, format, "dateFormat Line 26", selectedTag)
const [is24Hrs, setIs24Hrs] = useState<boolean>(true); const [is24Hrs, setIs24Hrs] = useState<boolean>(true);
const handleIs24HrsClick = (checked: boolean) => { const handleIs24HrsClick = (checked: boolean) => {
console.log(is24Hrs, checked, "line 30") if (dateFormat === TEMPORAL.TIME) {
if (subType === TEMPORAL.TIME) {
if (!checked) { if (!checked) {
handlePropertyChange("format", timeFormats[1].format, is24Hrs) handlePropertyChange("format", timeFormats[1].format, is24Hrs)
} else { } else {
handlePropertyChange("format", timeFormats[0].format, is24Hrs) handlePropertyChange("format", timeFormats[0].format, is24Hrs)
} }
} }
else if (subType === TEMPORAL.DATE_TIME) { else if (dateFormat === TEMPORAL.DATE_TIME) {
handlePropertyChange("format", (format.split(" ").slice(0, -1).join(" ")), !is24Hrs) handlePropertyChange("format", (format.split(" ").slice(0, -1).join(" ")), !is24Hrs)
} }
setIs24Hrs(checked) setIs24Hrs(checked)
@ -53,7 +55,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
<div> <div>
<div className="flex justify-between"> <div className="flex justify-between">
<label htmlFor="" className="">Formats</label> <label htmlFor="" className="">Formats</label>
{(subType === TEMPORAL.DATE_TIME || subType === TEMPORAL.TIME) && {(dateFormat === TEMPORAL.DATE_TIME || dateFormat === TEMPORAL.TIME) &&
<div className="flex justify-center items-center gap-1.5"> <div className="flex justify-center items-center gap-1.5">
<input <input
checked={is24Hrs ? is24Hrs : false} checked={is24Hrs ? is24Hrs : false}
@ -72,7 +74,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200"> className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
<p className="cursor-pointer py-1"> <p className="cursor-pointer py-1">
{format ? format : dateTimeFormatMap['date'][0].format} {format ? format : dateTimeFormatMap['date'][0].format}
{/* {(subType !== TEMPORAL.DATE && subType !== TEMPORAL.TIME) ? (is24Hrs ? " " + timeFormats[0].format : " " + timeFormats[1].format) : ""} */} {/* {(dateFormat !== TEMPORAL.DATE && dateFormat !== TEMPORAL.TIME) ? (is24Hrs ? " " + timeFormats[0].format : " " + timeFormats[1].format) : ""} */}
</p> </p>
<MdKeyboardArrowDown /> <MdKeyboardArrowDown />
</div> </div>
@ -80,10 +82,10 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
{ {
dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT && dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT &&
<div className="shadow bg-slate-100 mt-1 border-[1px] max-h-[200px] overflow-y-auto border-slate-100 rounded"> <div className="shadow bg-slate-100 mt-1 border-[1px] max-h-[200px] overflow-y-auto border-slate-100 rounded">
{dateTimeFormatMap[subType].map((valObj, indx) => { {dateTimeFormatMap[dateFormat].map((valObj, indx) => {
// let val = showFormatEg ? valObj["example"] : valObj["format"] // let val = showFormatEg ? valObj["example"] : valObj["format"]
let val = valObj["format"] let val = valObj["format"]
if (subType === TEMPORAL.DATE_TIME) { if (dateFormat === TEMPORAL.DATE_TIME) {
if (is24Hrs) { if (is24Hrs) {
val = val + " " + timeFormats[0].format; val = val + " " + timeFormats[0].format;
} else { } else {
@ -94,7 +96,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
return ( return (
<div <div
key={indx} key={indx}
onClick={() => handlePropertyChange("format", valObj["format"], is24Hrs)} onClick={() => handlePropertyChange("format", val, is24Hrs)}
className="px-2 py-1 hover:bg-slate-200 cursor-pointer" className="px-2 py-1 hover:bg-slate-200 cursor-pointer"
> >
{val} {val}

2
src/components/signature/SignCon.tsx
View File

@ -55,7 +55,7 @@ interface AddSignatureModalProps {
setOpenSign: React.Dispatch<React.SetStateAction<boolean>>; setOpenSign: React.Dispatch<React.SetStateAction<boolean>>;
saved: SaveType; saved: SaveType;
setSaved: React.Dispatch<React.SetStateAction<SaveType>>; setSaved: React.Dispatch<React.SetStateAction<SaveType>>;
signTagId: boolean signTagId: number
} }
interface Account { interface Account {

15
src/utlity/maskUtils.ts
View File

@ -1,3 +1,5 @@
import { MASKCHARACTER } from "../components/process/processStepTwo/rightSideBar/RightSideBar";
const type_all = (str: string, changeWith: string): string => { const type_all = (str: string, changeWith: string): string => {
return str.replace(/./g, changeWith); return str.replace(/./g, changeWith);
}; };
@ -38,6 +40,19 @@ const type_social_insurance = (str: string, changeWith: string): string => {
}; };
const maskUtils = (type: string, original: string, changeWith: string): string => { const maskUtils = (type: string, original: string, changeWith: string): string => {
switch (changeWith) {
case MASKCHARACTER.ASTERISK:
changeWith = "*";
break;
case MASKCHARACTER.DOT:
changeWith = ".";
break;
case MASKCHARACTER.X:
changeWith = "x";
break;
}
switch (type) { switch (type) {
case "ALL": case "ALL":
return type_all(original, changeWith); return type_all(original, changeWith);

60
src/utlity/types.tsx
View File

@ -97,6 +97,7 @@ export interface TagsProperties {
"currentTimeStamp"?: boolean; "currentTimeStamp"?: boolean;
"decimalPlace"?: number; "decimalPlace"?: number;
"multiSelect"?: boolean; "multiSelect"?: boolean;
"isCurrency"?: boolean;
} }
@ -127,7 +128,7 @@ export enum SignTypeEnum {
interface StylesInterface { export interface StylesInterface {
font: string, font: string,
italic: boolean, italic: boolean,
bold: boolean, bold: boolean,
@ -136,6 +137,15 @@ interface StylesInterface {
textSize: number textSize: number
} }
export interface TagOptionAttrType{
label: string;
value: string;
pageIndex?: number;
selected?: boolean;
readOnly?: boolean;
dimensions?: Record<string, any>;
}
export interface DroppedItem { export interface DroppedItem {
id?: string; id?: string;
@ -143,12 +153,44 @@ export interface DroppedItem {
label?: string; label?: string;
type: string; type: string;
// TagsProperties - Other Properties depend on tag type - START
navigationOrder: number;
editable: boolean;
lastName?: boolean;
firstName?: boolean;
maxLength?: number;
minLength?: number;
dateFormat?: string;
format?: string;
currentTimeStamp?: boolean;
decimalPlace?: number;
isCurrency?: boolean;
multiLine?: boolean;
maskType?: string;
maskCharacter?: string;
multiSelect?: boolean;
options?: TagOptionAttrType[];
readOnly?: boolean;
error: string;
regex?: string[];
// TagsProperties - Other Properties depend on tag type - END
dimensions: { dimensions: {
left: number; left: number;
top: number; top: number;
width: number; width: number;
height: number; height: number;
} }
styles?: StylesInterface;
recipientId: number; recipientId: number;
documentId: string; documentId: string;
@ -158,26 +200,14 @@ export interface DroppedItem {
allowSenderToDelete: true; allowSenderToDelete: true;
required?: boolean; required?: boolean;
maskType?: string;
maskCharacter?: string;
format?: string;
selectedValue?: string | null; selectedValue?: string | null;
radioGroups?: DroppedItem[]; radioGroups?: DroppedItem[];
options?: string[]
focusElementIndx?: number; focusElementIndx?: number;
value?: string | number; value?: string | number;
validation?: {
minLength: number;
maxLength: number;
error: string;
regex: string[];
};
isDeleted: boolean; isDeleted: boolean;
} }