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

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

@ -28,6 +28,7 @@ import SignCompletionScreen from "./SignCompletionScreen";
import api from "../../config/api";
import RightSideBar from "../process/processStepTwo/rightSideBar/RightSideBar";
import { RiDragMoveFill } from "react-icons/ri";
import { handleGroupBorderPosition } from "../../utlity/tagGroupConUtils";
@ -71,7 +72,7 @@ interface TransactionType {
interface TagSubmitData {
id: string;
type?: string;
subType: string;
subType?: string;
signed: boolean;
value: string;
}
@ -152,7 +153,7 @@ const SignDocument = () => {
const [tagJson, setTagJson] = useState<DroppedItem[] | []>([]);
const [transaction, setTransaction] = useState<TransactionType | null>(null);
const [recSignStatus, setRecSignStatus] = useState<string | null>(null);
const [droppedItems, setDroppedItems] = useState([]);
const [droppedItems, setDroppedItems] = useState<DroppedItem[]>([]);
const [signTagId, setSignTagId] = useState<number>(0)
const [stamp, setStamp] = useState<StampTypeObj>({ open: false, blob: "" });
@ -373,8 +374,8 @@ const SignDocument = () => {
const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const handleFormSubmit = () => {
// e.preventDefault();
const submitData: TagsSubmitDataObj = {
tags: []
}
@ -444,7 +445,7 @@ const SignDocument = () => {
const tagData: TagSubmitData = {
id: tag.id as string,
type: tag.type,
subType: tag.subType ? tag.subType : "",
// subType: tag.subType ? tag.subType : "",
signed: true,
value: tag.value ? tag.value as string : ""
}
@ -612,6 +613,8 @@ const SignDocument = () => {
event.preventDefault();
const data = window.dragElemData;
window.dragElemData = null;
if (!data) return;
const dragElemData = JSON.parse(data); // Get the dropped label
@ -629,12 +632,40 @@ const SignDocument = () => {
const key = `${docId}_${pageIndex}`;
// const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
// let prepData = {
// properties: data.properties,
// icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,
// type: dragElemData.label.toUpperCase(),
// subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
// label: dragElemData.label,
// dimensions: {
// left: x,
// top: y,
// width: dragElemData.width,
// height: dragElemData.height,
// },
// styles: dragElemData.label === "text" ? {
// "font": "Great Vibes",
// "italic": false,
// "bold": false,
// "underline": false,
// "color": "black",
// "textSize": 14.0
// } : null,
// documentId: docId,
// pageIndex: pageIndex,
// recipientId: dragElemData.recipientId,
// recipientIndx: dragElemData.recipientIndx,
// update: true,
// isDeleted: false
// }
let prepData = {
properties: data.properties,
...data.properties,
icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,
type: dragElemData.label.toUpperCase(),
subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
label: dragElemData.label,
// subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
dimensions: {
left: x,
top: y,
@ -653,6 +684,7 @@ const SignDocument = () => {
pageIndex: pageIndex,
recipientId: dragElemData.recipientId,
recipientIndx: dragElemData.recipientIndx,
required: (dragElemData.label !== TagsTypes.SIGNATURE && dragElemData.label !== TagsTypes.INITIALS) ? false : true,
update: true,
isDeleted: false
}
@ -669,7 +701,7 @@ const SignDocument = () => {
// }
}
if (prepData.type === "temporal") {
if (prepData.type.toLowerCase() === "temporal") {
prepData.currentTimeStamp = true;
}
@ -811,7 +843,10 @@ const SignDocument = () => {
// Updated handleRemoveTag function with your existing API logic and group handling
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;
console.log(tag, "line 776");
@ -819,7 +854,7 @@ const SignDocument = () => {
(async () => {
if ("id" in tag) {
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"
} catch (err) {
return;
@ -887,12 +922,10 @@ const SignDocument = () => {
// }, 100);
}
} else {
console.log("Listening to 895")
// Handle non-group item removal (your existing logic)
setDroppedItems(prevState => ({
...prevState,
[key]: prevState[key].map((item, index) =>
index === targetIndex ? { ...item, isDeleted: true } : item
)
setDroppedItems(prevState => prevState.filter((item, idx) => {
return idx !== targetIndex;
}));
}
})()
@ -907,8 +940,8 @@ const SignDocument = () => {
<>
{/* <TermsModal showTerms={showTerms} setShowTerms={setShowTerms} recipientId={recipientId || ""} /> */}
{showCompletionScreen && <SignCompletionScreen />}
<form className="bg-slate-100"
onSubmit={(e: React.FormEvent<HTMLFormElement>) => handleFormSubmit(e)}
<div className="bg-slate-100"
// onSubmit={(e: React.FormEvent<HTMLFormElement>) => handleFormSubmit(e)}
>
{/* Nav Two - Options - START */}
<div className='flex justify-between items-center px-4 py-1 bg-white'>
@ -997,6 +1030,7 @@ const SignDocument = () => {
// 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'>
<p
onClick={handleFormSubmit}
id="sign-client-side-btn"
className='tracking-wide text-white'>
Sign
@ -1046,6 +1080,7 @@ const SignDocument = () => {
doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => {
const key = `${doc.documentId}_${page.index}`;
// const tagJsonData = [...droppedItems];
// debugger
const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index)
return (
<div
@ -1072,7 +1107,6 @@ const SignDocument = () => {
}
}
key={item.id}
// draggable="false"
// onPointerDown={(e) => handleTagMouseDown(e, key, index)}
className="absolute rounded dropped-item text-sm"
// onClick={() => handleTagClick(key, index)}
@ -1085,7 +1119,7 @@ const SignDocument = () => {
// display: `${hideTags ? 'none' : 'block'}`
}}
>
{provideTags && !transparentTags && !hideTags &&<div
{provideTags && !transparentTags && !hideTags && <div
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"
title="Drag"
@ -1134,7 +1168,7 @@ const SignDocument = () => {
</input> */}
{
!item.multiLine && <p
!item.multiLine && !item.maskType && <p
// name={item.id}
// style={{ height: item.dimensions.height + "px" }}
onInput={(e) => {
@ -1149,15 +1183,14 @@ const SignDocument = () => {
></p>
}
{
item.multiLine && <p
item.multiLine && !item.maskType && <p
onInput={(e) => {
const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string);
}}
contentEditable={true}
className="w-full outline-none max-h-max"
>
</p>
></p>
}
{
"maskType" in item && "maskCharacter" in item && item.maskType && <p
@ -1172,7 +1205,7 @@ const SignDocument = () => {
// }}
onBlur={(e) => {
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, "");
e.target.textContent = maskUtils(item.maskType, val, item.maskCharacter)
}
@ -1270,6 +1303,25 @@ const SignDocument = () => {
{/* 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 */}
{
@ -1434,13 +1486,13 @@ const SignDocument = () => {
className="outline-none"
>
<option value="">Select</option>
{item.options && item.options.map((val, indx) => {
{item.options && item.options.map((obj, indx) => {
return (
<option
key={indx}
value={val}
value={obj.value}
>
{val}
{obj.label}
</option>
)
})
@ -1465,7 +1517,7 @@ const SignDocument = () => {
<p
style={{ opacity: `${item.id === isDateOpen ? "0" : "100"}` }}
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>
<input
name={item.id}
@ -1477,7 +1529,7 @@ const SignDocument = () => {
let val = e.target.value;
// 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;
setIsDateOpen(null);
@ -1491,7 +1543,7 @@ const SignDocument = () => {
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>
@ -1633,7 +1685,7 @@ const SignDocument = () => {
{/* Document Container End */}
</form>
</div>
</>
@ -1651,10 +1703,6 @@ const SignDocument = () => {
<StampUpload stamp={stamp.blob} setStamp={setStamp} />
</div>
{/* <SignatureCon recipientId={recipientId as string} openSign={openSign} setOpenSign={setOpenSign} savedSignature={savedSignature} setSavedSignature={setSavedSignature} />
<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
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
>
<IoMdClose
@ -158,7 +158,7 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
</div>
</div>
) : (
<FaFileAlt className="text-red-600 text-5xl mb-1" />
<FaFileAlt className="text-[var(--primary)] text-5xl mb-1" />
)}
</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 handleNextClick = async (isSendNow: boolean, saveAndClose: boolean = false) => {
const handleNextClick = async (saveAndClose: boolean = false) => {
let formError = {
documents: false,
recipients: false,
@ -298,41 +298,38 @@ const ProcessStepOne = () => {
status: "CREATED"
})
if (isSendNow) {
dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS));
setTimeout(() => {
// navigate("/");
}, 1000);
}
else {
setTimeout(() => {
dispatch(resetDocuments())
dispatch(resetRecipients())
dispatch(hideLoader());
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
console.log(`/process-step-two/${accountId}/template/${transactionId}`)
if (!saveAndClose) {
navigate(`/process-step-two/${accountId}/template/${transactionId}`)
} else {
navigate(`/templates`)
// if (isSendNow) {
// dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS));
// }
// else {
// setTimeout(() => {
dispatch(resetDocuments())
dispatch(resetRecipients())
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
dispatch(hideLoader());
if (!saveAndClose) {
navigate(`/process-step-two/${accountId}/template/${transactionId}`)
} else {
navigate(`/templates`)
}
} else {
if (signType === SignTypeEnum.selfSign) {
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) {
(async () => {
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);
})()
} else {
navigate(`/process-step-two/${accountId}/${transactionId}`);
}
}
// }, 1000);
// }
} catch (error) {
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 }
let tagsData = []
// const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
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]) {
let mask = null
// // if ("format" in dropTag) {
// // 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") {
// console.log(dropTag)
mask = {
"type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null,
"character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null
}
// }
// if (`${dropTag.type}`.toLowerCase() === "number") {
// updatedTagData.decimalPlace = dropTag.decimalPlace
// updatedTagData.isCurrency = dropTag.isCurrency
// }
// 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 = {
"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 ("maskType" in dropTag) {
// updatedTagData.maskCharacter = mask.character
// updatedTagData.maskType = mask.type
// }
// }
// if ("format" in dropTag) {
// updatedTagData.format = `${dropTag.subType}`.toUpperCase();
// updatedTagData.dateFormat = dropTag.format;
// updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
// }
// // if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required;
if("format" in dropTag && dropTag.format) {
updatedTagData.subType = dropTag.format.toLowerCase();
updatedTagData.format = dropTag.dateFormat;
}
// if (updatedTagData.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT"
// if (updatedTagData.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT"
if (`${dropTag.type}`.toLowerCase() === "number") {
updatedTagData.decimalPlace = dropTag.decimalPlace
updatedTagData.isCurrency = dropTag.isCurrency
}
// if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options;
if (dropTag.type === "TEXT") {
// updatedTagData.multiLine = dropTag.subType === "paragraph"
// if (!updatedTagData.id) delete updatedTagData.id;
if(dropTag.multiLine) {
updatedTagData.subtype = TEXT.PARAGRAPH
} 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)
}
}
}
// if (!isDeleted) {
// // sendTags.mod.push(updatedTagData);
// tagsData.push(updatedTagData)
// }
// }
// }
setDroppedItems(recTags)
// Handle your response here
@ -261,6 +255,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
}
if (updateTags.length && "update" in updateTags[updateTags.length - 1]) {
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
const handleDrop = (event: React.DragEvent<HTMLDivElement>, docId: string, documentId: number, pageIndex: number) => {
console.log("// HANDLE DROP - START")
event.preventDefault();
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(() => {
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
if (isSignSend) {
navigate(`./../../../sign/${selfUserSign.recipientId}`,{ replace: true });
// navigate(`./../../../sign/${selfUserSign.recipientId}`,{ replace: true });
}
else {
navigate(`/document-completion-screen/${accountId}/${transactionId}`, { replace: true })
// navigate(`/document-completion-screen/${accountId}/${transactionId}`, { replace: true })
}
} else {
navigate(`/templates`);

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

@ -1,18 +1,79 @@
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 {
selectedType: any;
subType: string | undefined;
// subType: string | undefined;
selectedTag: DroppedItem;
dropDownToggle: DROPDOWNTOGGLE | null;
setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>;
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 (
<div className="flex flex-col">
@ -20,21 +81,98 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({selectedType, subT
<div
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.TYPE ? null : DROPDOWNTOGGLE.TYPE)}
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 />
</div>
{dropDownToggle === DROPDOWNTOGGLE.TYPE &&
<div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
{Object.keys(selectedType).map((val, indx) => (
<div
key={indx}
onClick={() => handlePropertyChange("subType", 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>
))}
{Object.keys(selectedType).map((val, indx) => {
console.log(selectedType, val, "Line 90")
let value = val.toLowerCase() as keyof typeof selectedType | number | boolean;
let isCurrency = false;
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>

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

@ -32,7 +32,7 @@ const MaskTypePassAttr: React.FC<MaskTypePassAttrInt> = ({ maskType, maskCharact
(
<div
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"
>
{(MASKTYPE[val]).replace("_", " ")}
@ -71,7 +71,7 @@ const MaskTypePassAttr: React.FC<MaskTypePassAttrInt> = ({ maskType, maskCharact
(
<div
key={indx}
onClick={() => handlePropertyChange("maskCharacter", MASKCHARACTER[val])}
onClick={() => handlePropertyChange("maskCharacter", MASKCHARACTER[val].toUpperCase())}
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 { dateFormats, dateTimeFormats, timeFormats } from "../../../../utlity/dateTimeFormats";
import { DroppedItem } from "../../../../utlity/types";
import { DroppedItem, StylesInterface } from "../../../../utlity/types";
import { IoIosArrowDown } from "react-icons/io";
import { TagsTypes } from "../../../../utlity/types";
@ -29,7 +29,7 @@ import DirectionalControls from "./DirectionalControls";
export interface DroppedItemProps {
droppedItems: DroppedItem[]
selectedTag: DroppedItem
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>> | React.Dispatch<React.SetStateAction<DroppedItem[]>>
selTagKey: string,
selTagIndx: number,
signClient: boolean,
@ -94,7 +94,7 @@ export enum DROPDOWNTOGGLE {
DDMMYY_FORMAT
}
const defaultStyles = {
const defaultStyles: StylesInterface = {
font: "",
italic: false,
bold: false,
@ -106,163 +106,192 @@ const defaultStyles = {
const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, setDroppedItems, selTagKey, selTagIndx, signClient = false }) => {
console.log("Right SideBar Called", selectedTag, selTagKey, selTagIndx, droppedItems)
const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap];
const selectedType = selectedTag.type.toLowerCase() in enumMap && enumMap[selectedTag.type.toLowerCase() as keyof typeof enumMap];
const [styles, setStyles] = useState(defaultStyles);
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 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)
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) {
setDroppedItems((prev) => (
{
...prev,
[selTagKey]: Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) =>
i === selTagIndx ? { ...item, [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true } : item
)
: [],
// if (!signClient) {
// setDroppedItems((prev) => (
// {
// ...prev,
// [selTagKey]: Array.isArray(prev[selTagKey])
// ? prev[selTagKey].map((item, i) =>
// 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 }
}
));
} 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;
})
}
return item;
}))
})
}
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)
}
useEffect(() => {
if (selectedTag.subType === TEMPORAL.DATE || selectedTag.subType === TEMPORAL.DATE_TIME || selectedTag.subType === TEMPORAL.TIME) {
// useEffect(() => {
// if (selectedTag.dateFormat === TEMPORAL.DATE || selectedTag.dateFormat === TEMPORAL.DATE_TIME || selectedTag.dateFormat === TEMPORAL.TIME) {
if (selectedTag.subType === TEMPORAL.DATE) {
handlePropertyChange("format", dateFormats[0].format)
}
else if (selectedTag.subType === TEMPORAL.DATE_TIME) {
handlePropertyChange("format", dateTimeFormats[0].format)
}
else if (selectedTag.subType === TEMPORAL.TIME) {
handlePropertyChange("format", timeFormats[0].format)
}
}
}, [selectedTag.subType])
// if (selectedTag.dateFormat === TEMPORAL.DATE) {
// handlePropertyChange("format", dateFormats[0].format)
// }
// else if (selectedTag.dateFormat === TEMPORAL.DATE_TIME) {
// handlePropertyChange("format", dateTimeFormats[0].format)
// }
// else if (selectedTag.dateFormat === TEMPORAL.TIME) {
// handlePropertyChange("format", timeFormats[0].format)
// }
// }
// }, [selectedTag.dateFormat])
useEffect(() => {
if (selectedTag.label === "temporal") {
handlePropertyChange("subType", TEMPORAL.DATE);
if (selectedTag.label === "temporal" && !("dateFormat" in selectedTag)) {
handlePropertyChange("dateFormat", TEMPORAL.DATE);
handlePropertyChange("format", "DD/MM/YY");
}
if (selectedTag.label === TagsTypes.TEXT && !("multiLine" in selectedTag)) {
handlePropertyChange("multiLine", true);
}
}, [])
const handleDecimalPlace = (e: React.ChangeEvent<HTMLInputElement>) => {
@ -271,6 +300,12 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
handlePropertyChange("decimalPlace", val)
}
useEffect(() => {
if (selectedTag.decimalPlace === undefined) return;
if (selectedTag.decimalPlace === decimalPlace) return;
setDecimalPlace(selectedTag.decimalPlace ?? 0)
}, [selectedTag.decimalPlace ?? 0])
// useEffect(() => {
// if ("styles" in selectedTag) {
// console.log("styles" in selectedTag)
@ -300,23 +335,25 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
}
// Optional subType logic
const fontSize = selectedTag?.styles?.textSize || defaultStyles.textSize;
const tagHeight = selectedTag?.dimensions?.height - 18;
if (
selectedTag.type === TagsTypes.TEXT &&
selectedTag.subType !== TEXT.PASSWORD &&
selectedTag.subType !== TEXT.PARAGRAPH &&
tagHeight > fontSize * 2
) {
handlePropertyChange("subType", TEXT.PARAGRAPH);
} else if (
selectedTag.subType !== TEXT.PASSWORD &&
selectedTag.subType !== TEXT.SINGLE_LINE &&
tagHeight <= fontSize * 2
) {
handlePropertyChange("subType", TEXT.SINGLE_LINE);
}
// const fontSize = selectedTag?.styles?.textSize || defaultStyles.textSize;
// const tagHeight = selectedTag?.dimensions?.height - 18;
// if (
// selectedTag.type === TagsTypes.TEXT &&
// selectedTag.subType !== TEXT.PASSWORD &&
// selectedTag.subType !== TEXT.PARAGRAPH &&
// tagHeight > fontSize * 2
// ) {
// handlePropertyChange("subType", TEXT.PARAGRAPH);
// } else if (
// selectedTag.subType !== TEXT.PASSWORD &&
// selectedTag.subType !== TEXT.SINGLE_LINE &&
// tagHeight <= fontSize * 2
// ) {
// handlePropertyChange("subType", TEXT.SINGLE_LINE);
// }
}, [selectedTag]);
const handleStyleChange = (key, value) => {
@ -411,14 +448,14 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
setDroppedItems((prev) => {
const updated = [...prev];
updated[selTagIndx] = {
...item,
dimensions: {
...item.dimensions,
left: clampedLeft,
top: clampedTop
},
update: true
}
...item,
dimensions: {
...item.dimensions,
left: clampedLeft,
top: clampedTop
},
update: true
}
return updated
})
}
@ -433,6 +470,10 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
}
console.log(selectedType, "line 434");
return (
<>
{/* Right Side Bar Start */}
@ -468,7 +509,8 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
selectedType && Object.keys(selectedType).length > 0 &&
<CommonAttrDropDown
selectedType={selectedType}
subType={selectedTag.subType}
// subType={selectedTag.subType}
selectedTag={selectedTag}
dropDownToggle={dropDownToggle}
setDropDownToggle={setDropDownToggle}
handlePropertyChange={handlePropertyChange} />
@ -476,7 +518,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
{/* Mask Type */}
{
selectedTag?.subType === TEXT.PASSWORD &&
selectedTag.maskType && selectedTag.maskType?.length > 0 &&
<MaskTypePassAttr
maskType={selectedTag.maskType ? selectedTag.maskType : MASKTYPE.ALL}
maskCharacter={selectedTag.maskCharacter ? selectedTag.maskCharacter : MASKCHARACTER.ASTERISK}
@ -488,12 +530,13 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
{/* TEMPORAL DATE FORMAT - START */}
{
(selectedTag?.subType === TEMPORAL.DATE ||
selectedTag?.subType === TEMPORAL.TIME ||
selectedTag?.subType === TEMPORAL.DATE_TIME) &&
selectedTag && (selectedTag?.dateFormat === TEMPORAL.DATE ||
selectedTag?.dateFormat === TEMPORAL.TIME ||
selectedTag?.dateFormat === TEMPORAL.DATE_TIME) &&
<TemporalDateAttr
subType={selectedTag.subType}
dateFormat={selectedTag.dateFormat ?? TEMPORAL.DATE_TIME}
format={selectedTag.format}
selectedTag={selectedTag}
dropDownToggle={dropDownToggle}
setDropDownToggle={setDropDownToggle}
handlePropertyChange={handlePropertyChange} />
@ -502,7 +545,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
{/* NUMBER - DECIMAL PLACES */}
{
selectedTag?.subType === NUMBER.DECIMAL &&
selectedTag?.type.toLowerCase() === TagsTypes.NUMBER &&
<div>
<label htmlFor="" className="">Decimal Places</label>
<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
options={selectedTag.options}
options={selectedTag.options ?? []}
selTagKey={selTagKey}
selTagIndx={selTagIndx}
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 { DroppedItemsObj } from "../DocumentContainer";
import { IoMdClose } from "react-icons/io";
import { TagOptionAttrType } from "../../../../utlity/types";
import { DroppedItem } from "../../../../store/slices/droppedItemsSlice";
interface SelectTagAttrInt {
options: string[] | undefined;
options: TagOptionAttrType[];
selTagKey: string;
selTagIndx: number;
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>;
@ -12,28 +14,43 @@ interface SelectTagAttrInt {
}
const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagIndx, setDroppedItems, handlePropertyChange }) => {
const [selectedOption, setSelectedOption] = useState<string>()
const [selectedOption, setSelectedOption] = useState<TagOptionAttrType>({ label: "", value: "" });
const handleAddSelectOption = () => {
if (selectedOption && selectedOption.length) {
setDroppedItems((prev) => {
console.log("Previous droppedItems:", prev);
if (selectedOption && selectedOption.label && selectedOption.value) {
const 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;
})
: [],
};
setDroppedItems((prev) => {
let newState: DroppedItem | {} = {};
if (Array.isArray(prev)) {
newState = prev.map((item, indx) => {
if (indx === selTagIndx) {
return {
...item,
options: item.options ? [...item.options, { ...selectedOption }] : [{ ...selectedOption }],
update: true,
};
}
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);
return newState;
@ -43,19 +60,35 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
const handleSelectOptionDel = (indx: number) => {
setDroppedItems((prev) => (
{
...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;
})
: [],
setDroppedItems((prev) => {
let newState = {};
if (Array.isArray(prev)) {
newState = prev.map((item, indx) => {
if (indx === selTagIndx) {
return {
...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 (
@ -64,7 +97,7 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
<label htmlFor="" className="">Add Options</label>
<input
type="text"
onChange={(e) => setSelectedOption(e.target.value)}
onChange={(e) => setSelectedOption({ label: e.target.value, value: e.target.value })}
// value={selectedOption}
onKeyUp={(e) => {
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" />
<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
key={indx}
className="flex justify-between items-center px-2 py-1 my-1 rounded bg-slate-100">
<p>{val}</p>
<p>{obj.label}</p>
<IoMdClose
onClick={() =>
// 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 { MdKeyboardArrowDown } from "react-icons/md";
import dayjs from "dayjs";
import { DroppedItem } from "../../../../utlity/types";
const dateTimeFormatMap = {
"date": dateFormats,
@ -14,28 +15,29 @@ const dateTimeFormatMap = {
}
interface TemporalDateAttrInt {
subType: string;
dateFormat: string;
format: string | undefined;
selectedTag: DroppedItem;
dropDownToggle: DROPDOWNTOGGLE | null;
setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>;
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 handleIs24HrsClick = (checked: boolean) => {
console.log(is24Hrs, checked, "line 30")
if (subType === TEMPORAL.TIME) {
if (dateFormat === TEMPORAL.TIME) {
if (!checked) {
handlePropertyChange("format", timeFormats[1].format, is24Hrs)
} else {
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)
}
setIs24Hrs(checked)
@ -53,7 +55,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
<div>
<div className="flex justify-between">
<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">
<input
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">
<p className="cursor-pointer py-1">
{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>
<MdKeyboardArrowDown />
</div>
@ -80,10 +82,10 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
{
dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT &&
<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 = valObj["format"]
if (subType === TEMPORAL.DATE_TIME) {
if (dateFormat === TEMPORAL.DATE_TIME) {
if (is24Hrs) {
val = val + " " + timeFormats[0].format;
} else {
@ -94,7 +96,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
return (
<div
key={indx}
onClick={() => handlePropertyChange("format", valObj["format"], is24Hrs)}
onClick={() => handlePropertyChange("format", val, is24Hrs)}
className="px-2 py-1 hover:bg-slate-200 cursor-pointer"
>
{val}

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

@ -55,7 +55,7 @@ interface AddSignatureModalProps {
setOpenSign: React.Dispatch<React.SetStateAction<boolean>>;
saved: SaveType;
setSaved: React.Dispatch<React.SetStateAction<SaveType>>;
signTagId: boolean
signTagId: number
}
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 => {
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 => {
switch (changeWith) {
case MASKCHARACTER.ASTERISK:
changeWith = "*";
break;
case MASKCHARACTER.DOT:
changeWith = ".";
break;
case MASKCHARACTER.X:
changeWith = "x";
break;
}
switch (type) {
case "ALL":
return type_all(original, changeWith);

56
src/utlity/types.tsx
View File

@ -97,6 +97,7 @@ export interface TagsProperties {
"currentTimeStamp"?: boolean;
"decimalPlace"?: number;
"multiSelect"?: boolean;
"isCurrency"?: boolean;
}
@ -127,7 +128,7 @@ export enum SignTypeEnum {
interface StylesInterface {
export interface StylesInterface {
font: string,
italic: boolean,
bold: boolean,
@ -136,6 +137,15 @@ interface StylesInterface {
textSize: number
}
export interface TagOptionAttrType{
label: string;
value: string;
pageIndex?: number;
selected?: boolean;
readOnly?: boolean;
dimensions?: Record<string, any>;
}
export interface DroppedItem {
id?: string;
@ -143,12 +153,44 @@ export interface DroppedItem {
label?: 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: {
left: number;
top: number;
width: number;
height: number;
}
styles?: StylesInterface;
recipientId: number;
documentId: string;
@ -159,25 +201,13 @@ export interface DroppedItem {
required?: boolean;
maskType?: string;
maskCharacter?: string;
format?: string;
selectedValue?: string | null;
radioGroups?: DroppedItem[];
options?: string[]
focusElementIndx?: number;
value?: string | number;
validation?: {
minLength: number;
maxLength: number;
error: string;
regex: string[];
};
isDeleted: boolean;
}