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

Compare commits

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

No commits in common. "a496f9d20771c9d4d511766da5acb03baed9fa10" and "13885abfda5c9973bdbf8816f7c0cd321871608e" have entirely different histories.
a496f9d207 ... 13885abfda

13 changed files with 412 additions and 712 deletions
Show Stats Expand all files Collapse all files

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

@ -28,7 +28,6 @@ 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";
@ -72,7 +71,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;
} }
@ -153,7 +152,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<DroppedItem[]>([]); const [droppedItems, setDroppedItems] = useState([]);
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: "" });
@ -374,8 +373,8 @@ const SignDocument = () => {
const handleFormSubmit = () => { const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
// e.preventDefault(); e.preventDefault();
const submitData: TagsSubmitDataObj = { const submitData: TagsSubmitDataObj = {
tags: [] tags: []
} }
@ -445,7 +444,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 : ""
} }
@ -613,8 +612,6 @@ 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
@ -632,40 +629,12 @@ 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 = {
...data.properties, 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,
@ -684,7 +653,6 @@ 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
} }
@ -701,7 +669,7 @@ const SignDocument = () => {
// } // }
} }
if (prepData.type.toLowerCase() === "temporal") { if (prepData.type === "temporal") {
prepData.currentTimeStamp = true; prepData.currentTimeStamp = true;
} }
@ -843,10 +811,7 @@ 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");
@ -854,7 +819,7 @@ const SignDocument = () => {
(async () => { (async () => {
if ("id" in tag) { if ("id" in tag) {
try { try {
const response = await api.delete(`/api/sign/tags?recipientId=${recipientId}`, { data: [ { tagId: tag.id } ] }) const response = await api.delete(`/api/accounts/${accountId}/${transactionTemplateToggle}/${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) {
return; return;
@ -922,10 +887,12 @@ 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 => prevState.filter((item, idx) => { setDroppedItems(prevState => ({
return idx !== targetIndex; ...prevState,
[key]: prevState[key].map((item, index) =>
index === targetIndex ? { ...item, isDeleted: true } : item
)
})); }));
} }
})() })()
@ -940,8 +907,8 @@ const SignDocument = () => {
<> <>
{/* <TermsModal showTerms={showTerms} setShowTerms={setShowTerms} recipientId={recipientId || ""} /> */} {/* <TermsModal showTerms={showTerms} setShowTerms={setShowTerms} recipientId={recipientId || ""} /> */}
{showCompletionScreen && <SignCompletionScreen />} {showCompletionScreen && <SignCompletionScreen />}
<div className="bg-slate-100" <form 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'>
@ -1030,7 +997,6 @@ 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
@ -1080,7 +1046,6 @@ 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
@ -1107,6 +1072,7 @@ 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)}
@ -1119,7 +1085,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"
@ -1168,7 +1134,7 @@ const SignDocument = () => {
</input> */} </input> */}
{ {
!item.multiLine && !item.maskType && <p !item.multiLine && <p
// name={item.id} // name={item.id}
// style={{ height: item.dimensions.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
onInput={(e) => { onInput={(e) => {
@ -1183,14 +1149,15 @@ const SignDocument = () => {
></p> ></p>
} }
{ {
item.multiLine && !item.maskType && <p item.multiLine && <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
@ -1205,7 +1172,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" && item.maskCharacter) { if (typeof item.maskType === "string" && typeof val === "string") {
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)
} }
@ -1292,7 +1259,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"
@ -1303,25 +1270,6 @@ 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 */}
{ {
@ -1346,7 +1294,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"
@ -1486,13 +1434,13 @@ const SignDocument = () => {
className="outline-none" className="outline-none"
> >
<option value="">Select</option> <option value="">Select</option>
{item.options && item.options.map((obj, indx) => { {item.options && item.options.map((val, indx) => {
return ( return (
<option <option
key={indx} key={indx}
value={obj.value} value={val}
> >
{obj.label} {val}
</option> </option>
) )
}) })
@ -1517,7 +1465,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.dateFormat?.toLowerCase()} {(item.id && item.id in dateValues) ? dateValues[item.id] : item.subType?.toLowerCase()}
</p> </p>
<input <input
name={item.id} name={item.id}
@ -1529,7 +1477,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.dateFormat?.toLowerCase() === "time") val = "09/02/2025 " + val if (item.subType?.toLowerCase() === "time") val = "09/02/2025 " + val
if (!item.id) return; if (!item.id) return;
setIsDateOpen(null); setIsDateOpen(null);
@ -1543,7 +1491,7 @@ const SignDocument = () => {
onClick={() => { onClick={() => {
}} }}
type={`${item.dateFormat?.toLowerCase() === "date" ? "date" : (item.dateFormat?.toLowerCase() === "time" ? "time" : "datetime-local")}`} type={`${item.subType?.toLowerCase() === "date" ? "date" : (item.subType?.toLowerCase() === "time" ? "time" : "datetime-local")}`}
/> />
</div> </div>
@ -1685,7 +1633,7 @@ const SignDocument = () => {
{/* Document Container End */} {/* Document Container End */}
</div> </form>
</> </>
@ -1703,6 +1651,10 @@ 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-evenly" 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"
draggable draggable
> >
<IoMdClose <IoMdClose
@ -158,7 +158,7 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
</div> </div>
</div> </div>
) : ( ) : (
<FaFileAlt className="text-[var(--primary)] text-5xl mb-1" /> <FaFileAlt className="text-red-600 text-5xl mb-1" />
)} )}
</div> </div>

67
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 (saveAndClose: boolean = false) => { const handleNextClick = async (isSendNow: boolean, saveAndClose: boolean = false) => {
let formError = { let formError = {
documents: false, documents: false,
recipients: false, recipients: false,
@ -298,38 +298,41 @@ 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(() => {
// else { // navigate("/");
// setTimeout(() => { }, 1000);
dispatch(resetDocuments()) }
dispatch(resetRecipients()) else {
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) { setTimeout(() => {
dispatch(hideLoader()); dispatch(resetDocuments())
if (!saveAndClose) { dispatch(resetRecipients())
navigate(`/process-step-two/${accountId}/template/${transactionId}`) dispatch(hideLoader());
} else { if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
navigate(`/templates`) console.log(`/process-step-two/${accountId}/template/${transactionId}`)
} if (!saveAndClose) {
} else { navigate(`/process-step-two/${accountId}/template/${transactionId}`)
if (signType === SignTypeEnum.selfSign) { } else {
dispatch(showLoader("Processing eSignature...")); navigate(`/templates`)
(async () => { }
try { } else {
await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" }) if (signType === SignTypeEnum.selfSign) {
dispatch(hideLoader()); (async () => {
navigate(`/sign/${recipientId}/self_sign`); try {
} catch (err) { const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
console.log("Error Transaction Sent", err.message); console.log(res, "Check123");
} navigate(`/sign/${recipientId}/self_sign`);
})() } catch (err) {
} else { console.log("Error Transaction Sent", err.message);
navigate(`/process-step-two/${accountId}/${transactionId}`); }
} })()
} 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,104 +96,110 @@ 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")
// const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false let updatedTags = { ...recTags }
let tagsData = []
// const updatedTagData = { for (const dropPageIds of Object.keys(updatedTags)) {
// "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,
// }
// // if ("format" in dropTag) { for (const dropTag of updatedTags[dropPageIds]) {
// // updatedTagData.format = `${dropTag.subType}`.toUpperCase(); let mask = null
// // updatedTagData.dateFormat = dropTag.format;
// // updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
// // }
// if("format" in dropTag && dropTag.format) { // console.log(dropTag, "line 132")
// updatedTagData.subType = dropTag.format.toLowerCase();
// updatedTagData.format = dropTag.dateFormat;
// }
// if (`${dropTag.type}`.toLowerCase() === "number") { // if (dropTag.subType?.toLowerCase() === "password") {
// updatedTagData.decimalPlace = dropTag.decimalPlace // console.log(dropTag)
// updatedTagData.isCurrency = dropTag.isCurrency mask = {
// } "type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null,
"character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null
}
// }
// if (dropTag.type === "TEXT") { // console.log(dropTag, "line 204")
// // updatedTagData.multiLine = dropTag.subType === "paragraph"
// if(dropTag.multiLine) { const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
// updatedTagData.subtype = TEXT.PARAGRAPH
// } else {
// updatedTagData.subtype = TEXT.SINGLE_LINE
// }
// if ("maskType" in dropTag) { const updatedTagData = {
// updatedTagData.maskCharacter = mask.character "id": "id" in dropTag ? dropTag.id : null,
// updatedTagData.maskType = mask.type "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,
}
// // if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required; // if ("format" in dropTag) {
// updatedTagData.format = `${dropTag.subType}`.toUpperCase();
// updatedTagData.dateFormat = dropTag.format;
// updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
// }
// if (updatedTagData.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT" if("format" in dropTag && dropTag.format) {
// if (updatedTagData.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT" updatedTagData.subType = dropTag.format.toLowerCase();
updatedTagData.format = dropTag.dateFormat;
}
// if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options; if (`${dropTag.type}`.toLowerCase() === "number") {
updatedTagData.decimalPlace = dropTag.decimalPlace
updatedTagData.isCurrency = dropTag.isCurrency
}
// if (!updatedTagData.id) delete updatedTagData.id; if (dropTag.type === "TEXT") {
// updatedTagData.multiLine = dropTag.subType === "paragraph"
// if (!isDeleted) { if(dropTag.multiLine) {
// // sendTags.mod.push(updatedTagData); updatedTagData.subtype = TEXT.PARAGRAPH
// tagsData.push(updatedTagData) } else {
// } 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
@ -255,7 +261,6 @@ 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
} }
} }
@ -451,6 +456,7 @@ 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,79 +1,18 @@
import { MdKeyboardArrowDown } from 'react-icons/md'; import { MdKeyboardArrowDown } from 'react-icons/md';
import { DROPDOWNTOGGLE, MASKCHARACTER, MASKTYPE, NUMBER, SELECT, TEMPORAL, TEXT } from './RightSideBar'; import { DROPDOWNTOGGLE } 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, selectedTag, dropDownToggle, setDropDownToggle, handlePropertyChange }) => { const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({selectedType, subType, dropDownToggle, setDropDownToggle, handlePropertyChange}) => {
let subType = ""; console.log("selectedType, subType,",selectedType, 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">
@ -81,98 +20,21 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
<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}</p> <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 ? (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}
console.log(selectedType, val, "Line 90") onClick={() => handlePropertyChange("subType", selectedType[val as keyof typeof selectedType])}
className={`capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer`}
let value = val.toLowerCase() as keyof typeof selectedType | number | boolean; >
let isCurrency = false; {selectedType[val as keyof typeof selectedType] === "date_time" ? "Date Time" : selectedType[val as keyof typeof selectedType]}
let isPassword = false; </div>
))}
// 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].toUpperCase())} onClick={() => handlePropertyChange("maskType", MASKTYPE[val])}
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].toUpperCase())} onClick={() => handlePropertyChange("maskCharacter", MASKCHARACTER[val])}
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, StylesInterface } from "../../../../utlity/types"; import { DroppedItem } 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>> | React.Dispatch<React.SetStateAction<DroppedItem[]>> setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>
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: StylesInterface = { const defaultStyles = {
font: "", font: "",
italic: false, italic: false,
bold: false, bold: false,
@ -106,192 +106,163 @@ const defaultStyles: StylesInterface = {
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>(selectedTag.decimalPlace ?? 0); const [decimalPlace, setDecimalPlace] = useState<number>(2)
const [styleOpen, setStyleOpen] = useState(false); const [styleOpen, setStyleOpen] = useState(false);
const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number | StylesInterface, is24Hrs = null) => { const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => {
console.log("changeTo", changeTo, "changeWith", changeWith) console.log("changeTo", changeTo, "changeWith", changeWith)
if (changeTo === '') return if (changeTo === '' || changeWith === '') 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.dateFormat === TEMPORAL.DATE || selectedTag.dateFormat === TEMPORAL.DATE_TIME || selectedTag.dateFormat === TEMPORAL.TIME) { if (selectedTag.subType === TEMPORAL.DATE || selectedTag.subType === TEMPORAL.DATE_TIME || selectedTag.subType === TEMPORAL.TIME) {
// if (selectedTag.dateFormat === TEMPORAL.DATE) { if (selectedTag.subType === TEMPORAL.DATE) {
// handlePropertyChange("format", dateFormats[0].format) handlePropertyChange("format", dateFormats[0].format)
// } }
// else if (selectedTag.dateFormat === TEMPORAL.DATE_TIME) { else if (selectedTag.subType === TEMPORAL.DATE_TIME) {
// handlePropertyChange("format", dateTimeFormats[0].format) handlePropertyChange("format", dateTimeFormats[0].format)
// } }
// else if (selectedTag.dateFormat === TEMPORAL.TIME) { else if (selectedTag.subType === TEMPORAL.TIME) {
// handlePropertyChange("format", timeFormats[0].format) handlePropertyChange("format", timeFormats[0].format)
// } }
// } }
// }, [selectedTag.dateFormat]) }, [selectedTag.subType])
useEffect(() => { useEffect(() => {
if (selectedTag.label === "temporal" && !("dateFormat" in selectedTag)) { if (selectedTag.label === "temporal") {
handlePropertyChange("dateFormat", TEMPORAL.DATE); handlePropertyChange("subType", 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>) => {
@ -300,12 +271,6 @@ 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)
@ -335,25 +300,23 @@ 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;
// const fontSize = selectedTag?.styles?.textSize || defaultStyles.textSize; if (
// const tagHeight = selectedTag?.dimensions?.height - 18; selectedTag.type === TagsTypes.TEXT &&
selectedTag.subType !== TEXT.PASSWORD &&
// if ( selectedTag.subType !== TEXT.PARAGRAPH &&
// selectedTag.type === TagsTypes.TEXT && tagHeight > fontSize * 2
// selectedTag.subType !== TEXT.PASSWORD && ) {
// selectedTag.subType !== TEXT.PARAGRAPH && handlePropertyChange("subType", TEXT.PARAGRAPH);
// tagHeight > fontSize * 2 } else if (
// ) { selectedTag.subType !== TEXT.PASSWORD &&
// handlePropertyChange("subType", TEXT.PARAGRAPH); selectedTag.subType !== TEXT.SINGLE_LINE &&
// } else if ( tagHeight <= fontSize * 2
// selectedTag.subType !== TEXT.PASSWORD && ) {
// selectedTag.subType !== TEXT.SINGLE_LINE && handlePropertyChange("subType", TEXT.SINGLE_LINE);
// tagHeight <= fontSize * 2 }
// ) {
// handlePropertyChange("subType", TEXT.SINGLE_LINE);
// }
}, [selectedTag]); }, [selectedTag]);
const handleStyleChange = (key, value) => { const handleStyleChange = (key, value) => {
@ -448,14 +411,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
}) })
} }
@ -470,10 +433,6 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
} }
console.log(selectedType, "line 434");
return ( return (
<> <>
{/* Right Side Bar Start */} {/* Right Side Bar Start */}
@ -509,8 +468,7 @@ 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} />
@ -518,7 +476,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
{/* Mask Type */} {/* Mask Type */}
{ {
selectedTag.maskType && selectedTag.maskType?.length > 0 && selectedTag?.subType === TEXT.PASSWORD &&
<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}
@ -530,13 +488,12 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
{/* TEMPORAL DATE FORMAT - START */} {/* TEMPORAL DATE FORMAT - START */}
{ {
selectedTag && (selectedTag?.dateFormat === TEMPORAL.DATE || (selectedTag?.subType === TEMPORAL.DATE ||
selectedTag?.dateFormat === TEMPORAL.TIME || selectedTag?.subType === TEMPORAL.TIME ||
selectedTag?.dateFormat === TEMPORAL.DATE_TIME) && selectedTag?.subType === TEMPORAL.DATE_TIME) &&
<TemporalDateAttr <TemporalDateAttr
dateFormat={selectedTag.dateFormat ?? TEMPORAL.DATE_TIME} subType={selectedTag.subType}
format={selectedTag.format} format={selectedTag.format}
selectedTag={selectedTag}
dropDownToggle={dropDownToggle} dropDownToggle={dropDownToggle}
setDropDownToggle={setDropDownToggle} setDropDownToggle={setDropDownToggle}
handlePropertyChange={handlePropertyChange} /> handlePropertyChange={handlePropertyChange} />
@ -545,7 +502,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
{/* NUMBER - DECIMAL PLACES */} {/* NUMBER - DECIMAL PLACES */}
{ {
selectedTag?.type.toLowerCase() === TagsTypes.NUMBER && selectedTag?.subType === NUMBER.DECIMAL &&
<div> <div>
<label htmlFor="" className="">Decimal Places</label> <label htmlFor="" className="">Decimal Places</label>
<input <input
@ -557,9 +514,9 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
} }
{ {
(selectedTag.type.toLowerCase() === TagsTypes.SELECT) && (selectedTag?.subType === SELECT.SINGLE_SELECT || selectedTag?.subType === SELECT.MULTI_SELECT) &&
<SelectTagAttr <SelectTagAttr
options={selectedTag.options ?? []} options={selectedTag.options}
selTagKey={selTagKey} selTagKey={selTagKey}
selTagIndx={selTagIndx} selTagIndx={selTagIndx}
setDroppedItems={setDroppedItems} setDroppedItems={setDroppedItems}

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

@ -2,11 +2,9 @@ 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: TagOptionAttrType[]; options: string[] | undefined;
selTagKey: string; selTagKey: string;
selTagIndx: number; selTagIndx: number;
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>; setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>;
@ -14,43 +12,28 @@ 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<TagOptionAttrType>({ label: "", value: "" }); const [selectedOption, setSelectedOption] = useState<string>()
const handleAddSelectOption = () => { const handleAddSelectOption = () => {
if (selectedOption && selectedOption.label && selectedOption.value) { if (selectedOption && selectedOption.length) {
setDroppedItems((prev) => { setDroppedItems((prev) => {
let newState: DroppedItem | {} = {}; console.log("Previous droppedItems:", prev);
if (Array.isArray(prev)) { const newState = {
newState = prev.map((item, indx) => { ...prev,
if (indx === selTagIndx) { [selTagKey]: Array.isArray(prev[selTagKey])
return { ? prev[selTagKey].map((item, i) => {
...item, if (i === selTagIndx) {
options: item.options ? [...item.options, { ...selectedOption }] : [{ ...selectedOption }], return {
update: true, ...item,
}; options: item.options ? [...item.options, selectedOption] : [selectedOption],
} update: true,
return item; };
}) }
} else { return item;
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;
@ -60,35 +43,19 @@ 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])
if (Array.isArray(prev)) { ? prev[selTagKey].map((item, i) => {
newState = prev.map((item, indx) => { if (i === selTagIndx) {
if (indx === selTagIndx) { return { ...item, options: item.options ? item.options.filter((_, i) => i !== indx) : [] };
return { }
...item, options: item.options ? item.options.filter((_, i) => i !== indx) : [] 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.filter((_, i) => i !== indx) : [] };
}
return item;
})
: [],
};
} }
));
return newState
});
} }
return ( return (
@ -97,7 +64,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({ label: e.target.value, value: e.target.value })} onChange={(e) => setSelectedOption(e.target.value)}
// value={selectedOption} // value={selectedOption}
onKeyUp={(e) => { onKeyUp={(e) => {
if (e.code === "Enter") { if (e.code === "Enter") {
@ -107,13 +74,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="max-h-[150px] mt-1 overflow-hidden overflow-y-auto"> <div className="h-[150px] mt-1 overflow-hidden overflow-y-auto">
{ {
options && options.map((obj, indx) => ( options && options.map((val, 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>{obj.label}</p> <p>{val}</p>
<IoMdClose <IoMdClose
onClick={() => onClick={() =>
// setSelectedOptions(prev => // setSelectedOptions(prev =>

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

@ -3,7 +3,6 @@ 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,
@ -15,29 +14,28 @@ const dateTimeFormatMap = {
} }
interface TemporalDateAttrInt { interface TemporalDateAttrInt {
dateFormat: string; subType: 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> = ({ dateFormat, format, selectedTag, dropDownToggle, setDropDownToggle, handlePropertyChange }) => { const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, 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) => {
if (dateFormat === TEMPORAL.TIME) { console.log(is24Hrs, checked, "line 30")
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 (dateFormat === TEMPORAL.DATE_TIME) { else if (subType === 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)
@ -55,7 +53,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, s
<div> <div>
<div className="flex justify-between"> <div className="flex justify-between">
<label htmlFor="" className="">Formats</label> <label htmlFor="" className="">Formats</label>
{(dateFormat === TEMPORAL.DATE_TIME || dateFormat === TEMPORAL.TIME) && {(subType === TEMPORAL.DATE_TIME || subType === 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}
@ -74,7 +72,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, s
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}
{/* {(dateFormat !== TEMPORAL.DATE && dateFormat !== TEMPORAL.TIME) ? (is24Hrs ? " " + timeFormats[0].format : " " + timeFormats[1].format) : ""} */} {/* {(subType !== TEMPORAL.DATE && subType !== TEMPORAL.TIME) ? (is24Hrs ? " " + timeFormats[0].format : " " + timeFormats[1].format) : ""} */}
</p> </p>
<MdKeyboardArrowDown /> <MdKeyboardArrowDown />
</div> </div>
@ -82,10 +80,10 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, s
{ {
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[dateFormat].map((valObj, indx) => { {dateTimeFormatMap[subType].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 (dateFormat === TEMPORAL.DATE_TIME) { if (subType === TEMPORAL.DATE_TIME) {
if (is24Hrs) { if (is24Hrs) {
val = val + " " + timeFormats[0].format; val = val + " " + timeFormats[0].format;
} else { } else {
@ -96,7 +94,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, s
return ( return (
<div <div
key={indx} key={indx}
onClick={() => handlePropertyChange("format", val, is24Hrs)} onClick={() => handlePropertyChange("format", valObj["format"], 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: number signTagId: boolean
} }
interface Account { interface Account {

15
src/utlity/maskUtils.ts
View File

@ -1,5 +1,3 @@
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);
}; };
@ -40,19 +38,6 @@ 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,7 +97,6 @@ export interface TagsProperties {
"currentTimeStamp"?: boolean; "currentTimeStamp"?: boolean;
"decimalPlace"?: number; "decimalPlace"?: number;
"multiSelect"?: boolean; "multiSelect"?: boolean;
"isCurrency"?: boolean;
} }
@ -128,7 +127,7 @@ export enum SignTypeEnum {
export interface StylesInterface { interface StylesInterface {
font: string, font: string,
italic: boolean, italic: boolean,
bold: boolean, bold: boolean,
@ -137,15 +136,6 @@ export 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;
@ -153,44 +143,12 @@ 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;
@ -200,14 +158,26 @@ 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;
} }