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

Changes according to new API ProcessStepTwo

This commit is contained in:
=bhagwanSingh 2025-08-19 12:40:29 +05:30
parent fbacd2507c
commit 69a9ec9fcf
9 changed files with 359 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -373,8 +373,8 @@ const SignDocument = () => {
const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleFormSubmit = () => {
e.preventDefault(); // e.preventDefault();
const submitData: TagsSubmitDataObj = { const submitData: TagsSubmitDataObj = {
tags: [] tags: []
} }
@ -631,12 +631,40 @@ const SignDocument = () => {
const key = `${docId}_${pageIndex}`; const key = `${docId}_${pageIndex}`;
// const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />; // const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
// let prepData = {
// properties: data.properties,
// icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,
// type: dragElemData.label.toUpperCase(),
// subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
// label: dragElemData.label,
// dimensions: {
// left: x,
// top: y,
// width: dragElemData.width,
// height: dragElemData.height,
// },
// styles: dragElemData.label === "text" ? {
// "font": "Great Vibes",
// "italic": false,
// "bold": false,
// "underline": false,
// "color": "black",
// "textSize": 14.0
// } : null,
// documentId: docId,
// pageIndex: pageIndex,
// recipientId: dragElemData.recipientId,
// recipientIndx: dragElemData.recipientIndx,
// update: true,
// isDeleted: false
// }
let prepData = { let prepData = {
properties: data.properties, ...data.properties,
icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />, icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,
type: dragElemData.label.toUpperCase(), type: dragElemData.label,
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,
@ -655,6 +683,7 @@ const SignDocument = () => {
pageIndex: pageIndex, pageIndex: pageIndex,
recipientId: dragElemData.recipientId, recipientId: dragElemData.recipientId,
recipientIndx: dragElemData.recipientIndx, recipientIndx: dragElemData.recipientIndx,
required: (dragElemData.label !== TagsTypes.SIGNATURE && dragElemData.label !== TagsTypes.INITIALS) ? false : true,
update: true, update: true,
isDeleted: false isDeleted: false
} }
@ -813,7 +842,10 @@ const SignDocument = () => {
// Updated handleRemoveTag function with your existing API logic and group handling // Updated handleRemoveTag function with your existing API logic and group handling
const handleRemoveTag = (key: string, targetIndex: number) => { const handleRemoveTag = (key: string, targetIndex: number) => {
const tag = droppedItems[key][targetIndex];
console.log("Removing tag:", key, targetIndex, droppedItems);
const tag: DroppedItem = droppedItems[targetIndex];
const recipientId = tag.recipientId; const recipientId = tag.recipientId;
console.log(tag, "line 776"); console.log(tag, "line 776");
@ -821,7 +853,10 @@ const SignDocument = () => {
(async () => { (async () => {
if ("id" in tag) { if ("id" in tag) {
try { try {
const response = await api.delete(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags/${tag.id}`) const accountId = 4;
const transactionId = 23;
const response = await api.delete(`/api/accounts/${accountId}/transactions/${transactionId}/recipients/${recipientId}/tags/${tag.id}`)
if (response.status !== 200) throw "Tag Deletion error" if (response.status !== 200) throw "Tag Deletion error"
} catch (err) { } catch (err) {
return; return;
@ -889,12 +924,10 @@ const SignDocument = () => {
// }, 100); // }, 100);
} }
} else { } else {
console.log("Listening to 895")
// Handle non-group item removal (your existing logic) // Handle non-group item removal (your existing logic)
setDroppedItems(prevState => ({ setDroppedItems(prevState => prevState.filter((item, idx) => {
...prevState, return idx !== targetIndex;
[key]: prevState[key].map((item, index) =>
index === targetIndex ? { ...item, isDeleted: true } : item
)
})); }));
} }
})() })()
@ -909,8 +942,8 @@ const SignDocument = () => {
<> <>
{/* <TermsModal showTerms={showTerms} setShowTerms={setShowTerms} recipientId={recipientId || ""} /> */} {/* <TermsModal showTerms={showTerms} setShowTerms={setShowTerms} recipientId={recipientId || ""} /> */}
{showCompletionScreen && <SignCompletionScreen />} {showCompletionScreen && <SignCompletionScreen />}
<form className="bg-slate-100" <div className="bg-slate-100"
onSubmit={(e: React.FormEvent<HTMLFormElement>) => handleFormSubmit(e)} // onSubmit={(e: React.FormEvent<HTMLFormElement>) => handleFormSubmit(e)}
> >
{/* Nav Two - Options - START */} {/* Nav Two - Options - START */}
<div className='flex justify-between items-center px-4 py-1 bg-white'> <div className='flex justify-between items-center px-4 py-1 bg-white'>
@ -999,6 +1032,7 @@ const SignDocument = () => {
// onClick={() => handleFormSubmitBtnClick()} // onClick={() => handleFormSubmitBtnClick()}
className='flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)] outline-none'> className='flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)] outline-none'>
<p <p
onClick={handleFormSubmit}
id="sign-client-side-btn" id="sign-client-side-btn"
className='tracking-wide text-white'> className='tracking-wide text-white'>
Sign Sign
@ -1048,6 +1082,7 @@ const SignDocument = () => {
doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => { doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => {
const key = `${doc.documentId}_${page.index}`; const key = `${doc.documentId}_${page.index}`;
// const tagJsonData = [...droppedItems]; // const tagJsonData = [...droppedItems];
// debugger
const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index) const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index)
return ( return (
<div <div
@ -1086,7 +1121,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"
@ -1435,13 +1470,13 @@ const SignDocument = () => {
className="outline-none" className="outline-none"
> >
<option value="">Select</option> <option value="">Select</option>
{item.options && item.options.map((val, indx) => { {item.options && item.options.map((obj, indx) => {
return ( return (
<option <option
key={indx} key={indx}
value={val} value={obj.value}
> >
{val} {obj.label}
</option> </option>
) )
}) })
@ -1634,7 +1669,7 @@ const SignDocument = () => {
{/* Document Container End */} {/* Document Container End */}
</form> </div>
</> </>

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

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

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

@ -291,7 +291,6 @@ const ProcessStepOne = () => {
await dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId })); await dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
} }
dispatch(showLoader("Processing Message...")); dispatch(showLoader("Processing Message..."));
debugger
let res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { let res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, {
name: templateName, name: templateName,

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

@ -1,6 +1,6 @@
import { MdKeyboardArrowDown } from 'react-icons/md'; import { MdKeyboardArrowDown } from 'react-icons/md';
import { DROPDOWNTOGGLE, MASKTYPE, NUMBER, SELECT, TEMPORAL, TEXT } from './RightSideBar'; import { DROPDOWNTOGGLE, MASKCHARACTER, MASKTYPE, NUMBER, SELECT, TEMPORAL, TEXT } from './RightSideBar';
import { DroppedItem, TagsTypes } from '../../../../utlity/types'; import { DroppedItem, TagsTypes } from '../../../../utlity/types';
interface CommonAttrDropDownInt { interface CommonAttrDropDownInt {
@ -36,13 +36,18 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
} }
break; break;
case "text": case "text":
console.log("Line 444", selectedTag);
if (selectedTag.multiLine === undefined) { if (selectedTag.multiLine === undefined) {
subType = TEXT.PARAGRAPH subType = TEXT.PARAGRAPH
} else if (selectedTag.multiLine !== undefined && selectedTag.multiLine) { } else if (selectedTag.multiLine) {
subType = TEXT.PARAGRAPH; subType = TEXT.PARAGRAPH;
} else if (selectedTag.maxLength !== undefined && !selectedTag.multiLine) { } else if (!selectedTag.multiLine) {
subType = TEXT.SINGLE_LINE; subType = TEXT.SINGLE_LINE;
} }
if ("maskType" in selectedTag && selectedTag.maskType !== null && selectedTag.maskType?.length) subType = TEXT.PASSWORD;
subTypeKey = "multiLine";
break; break;
case "temporal": case "temporal":
if (selectedTag.dateFormat === undefined) { if (selectedTag.dateFormat === undefined) {
@ -68,7 +73,7 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
break; break;
} }
console.log(subType, selectedTag.isCurrency, "line 63"); console.log(selectedTag, "line 63");
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
@ -84,8 +89,13 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
{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) => {
console.log(selectedType, val, "Line 90")
let value = val.toLowerCase() as keyof typeof selectedType | number | boolean; let value = val.toLowerCase() as keyof typeof selectedType | number | boolean;
let isCurrency = false; let isCurrency = false;
let isPassword = false;
// Handling NUMBER - START // Handling NUMBER - START
if (value === NUMBER.INTEGER || value === NUMBER.CURRENCY) { if (value === NUMBER.INTEGER || value === NUMBER.CURRENCY) {
@ -110,11 +120,15 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
// Handling SELECT - END // Handling SELECT - END
// Handling TEXT - START // Handling TEXT - START
if (subTypeKey === "multiSelect") { if (subTypeKey === "multiLine") {
if (value === "multi_select") { if (value === "single_line") {
value = true; value = false;
} else { } else {
value = false value = true;
}
if (val.toLowerCase() === TEXT.PASSWORD) {
isPassword = true;
} }
} }
// Handling TEXT - END // Handling TEXT - END
@ -135,10 +149,21 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
} else if (selectedTag.type.toLowerCase() === TagsTypes.SELECT) { } else if (selectedTag.type.toLowerCase() === TagsTypes.SELECT) {
console.log(selectedTag.type, subTypeKey, value, "Line 126")
handlePropertyChange(subTypeKey, value as boolean); 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 { } else {
handlePropertyChange("maskType", null);
handlePropertyChange("maskCharacter", null);
}
handlePropertyChange(subTypeKey, value as boolean);
}
else {
handlePropertyChange(subTypeKey, selectedType[val as keyof typeof selectedType]); handlePropertyChange(subTypeKey, selectedType[val as keyof typeof selectedType]);
} }
}} }}

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

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

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

@ -2,7 +2,7 @@ import { DroppedItemsObj } from "../DocumentContainer";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { dateFormats, dateTimeFormats, timeFormats } from "../../../../utlity/dateTimeFormats"; import { dateFormats, dateTimeFormats, timeFormats } from "../../../../utlity/dateTimeFormats";
import { DroppedItem } from "../../../../utlity/types"; import { DroppedItem, StylesInterface } from "../../../../utlity/types";
import { IoIosArrowDown } from "react-icons/io"; import { IoIosArrowDown } from "react-icons/io";
import { TagsTypes } from "../../../../utlity/types"; import { TagsTypes } from "../../../../utlity/types";
@ -94,7 +94,7 @@ export enum DROPDOWNTOGGLE {
DDMMYY_FORMAT DDMMYY_FORMAT
} }
const defaultStyles = { const defaultStyles: StylesInterface = {
font: "", font: "",
italic: false, italic: false,
bold: false, bold: false,
@ -114,104 +114,124 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
const [decimalPlace, setDecimalPlace] = useState<number>(selectedTag.decimalPlace ?? 0); const [decimalPlace, setDecimalPlace] = useState<number>(selectedTag.decimalPlace ?? 0);
const [styleOpen, setStyleOpen] = useState(false); const [styleOpen, setStyleOpen] = useState(false);
const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => { const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number | StylesInterface, is24Hrs = null) => {
console.log("changeTo", changeTo, "changeWith", changeWith) console.log("changeTo", changeTo, "changeWith", changeWith)
if (changeTo === '' || changeWith === '') return if (changeTo === '') return
if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") { // if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
if (!signClient) { // if (!signClient) {
setDroppedItems((prev) => ( // setDroppedItems((prev) => (
{ // {
...prev, // ...prev,
[selTagKey]: Array.isArray(prev[selTagKey]) // [selTagKey]: Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) => // ? prev[selTagKey].map((item, i) =>
i === selTagIndx ? { ...item, [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true } : item // i === selTagIndx ? { ...item, [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true } : item
) // )
: [], // : [],
} // }
)); // ));
} else { // } else {
setDroppedItems((prev) => { // setDroppedItems((prev) => {
const updated = [...prev]; // const updated = [...prev];
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true } // updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true }
return updated; // return updated;
}) // })
} // }
} else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) { // } else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) {
let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace; // let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace;
const isCurrency = changeWith === NUMBER.CURRENCY; // const isCurrency = changeWith === NUMBER.CURRENCY;
// const currencyType = null // // const currencyType = null
if (!signClient) { // if (!signClient) {
setDroppedItems((prev) => ( // setDroppedItems((prev) => (
{ // {
...prev, // ...prev,
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array // [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
? prev[selTagKey].map((item, i) => // ? prev[selTagKey].map((item, i) =>
i === selTagIndx ? { ...item, [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true } : item // i === selTagIndx ? { ...item, [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true } : item
) // )
: [], // : [],
}// Provide a fallback in case it's undefined or not an array // }// Provide a fallback in case it's undefined or not an array
)); // ));
} else { // } else {
setDroppedItems((prev) => { // setDroppedItems((prev) => {
const updated = [...prev]; // const updated = [...prev];
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true } // updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true }
return updated; // 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;
// } // }
// }
// else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
if (!signClient) { // let val = timeFormats[0].format;
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 { // if (is24Hrs === null) {
...prev, // val = timeFormats[0].format
[selTagKey]: updatedArray, // } else if (!is24Hrs) {
}; // val = timeFormats[1].format
}); // } else {
} else { // val = timeFormats[0].format
setDroppedItems((prev) => { // }
const updated = [...prev]; // // console.log("val", val, is24Hrs)
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith + " " + val, update: true }
return updated;
})
}
}
else { // // 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) { if (!signClient) {
setDroppedItems((prev) => { setDroppedItems((prev) => {
@ -228,38 +248,50 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
}; };
}); });
} else { } else {
// setDroppedItems((prev) => {
// const updated = [...prev];
// updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
// return updated;
// })
setDroppedItems((prev) => { setDroppedItems((prev) => {
const updated = [...prev]; return (prev.map((item, idx) => {
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true } console.log(prev, "Prev lIne 258")
return updated; if (idx === selTagIndx) {
return { ...item, [changeTo]: changeWith, update: true }
}
return item;
}))
}) })
} }
}
setDropDownToggle(null) setDropDownToggle(null)
} }
useEffect(() => { // useEffect(() => {
if (selectedTag.subType === TEMPORAL.DATE || selectedTag.subType === TEMPORAL.DATE_TIME || selectedTag.subType === TEMPORAL.TIME) { // if (selectedTag.dateFormat === TEMPORAL.DATE || selectedTag.dateFormat === TEMPORAL.DATE_TIME || selectedTag.dateFormat === TEMPORAL.TIME) {
if (selectedTag.subType === TEMPORAL.DATE) { // if (selectedTag.dateFormat === TEMPORAL.DATE) {
handlePropertyChange("format", dateFormats[0].format) // handlePropertyChange("format", dateFormats[0].format)
} // }
else if (selectedTag.subType === TEMPORAL.DATE_TIME) { // else if (selectedTag.dateFormat === TEMPORAL.DATE_TIME) {
handlePropertyChange("format", dateTimeFormats[0].format) // handlePropertyChange("format", dateTimeFormats[0].format)
} // }
else if (selectedTag.subType === TEMPORAL.TIME) { // else if (selectedTag.dateFormat === TEMPORAL.TIME) {
handlePropertyChange("format", timeFormats[0].format) // handlePropertyChange("format", timeFormats[0].format)
} // }
} // }
}, [selectedTag.subType]) // }, [selectedTag.dateFormat])
useEffect(() => { useEffect(() => {
if (selectedTag.label === "temporal") { if (selectedTag.label === "temporal" && !("dateFormat" in selectedTag)) {
handlePropertyChange("subType", TEMPORAL.DATE); handlePropertyChange("dateFormat", TEMPORAL.DATE);
handlePropertyChange("format", "DD/MM/YY"); handlePropertyChange("format", "DD/MM/YY");
} }
if (selectedTag.label === TagsTypes.TEXT && !("multiLine" in selectedTag)) {
handlePropertyChange("multiLine", true);
}
}, []) }, [])
const handleDecimalPlace = (e: React.ChangeEvent<HTMLInputElement>) => { const handleDecimalPlace = (e: React.ChangeEvent<HTMLInputElement>) => {
@ -303,23 +335,25 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
} }
// Optional subType logic // Optional subType logic
const fontSize = selectedTag?.styles?.textSize || defaultStyles.textSize;
const tagHeight = selectedTag?.dimensions?.height - 18;
if ( // const fontSize = selectedTag?.styles?.textSize || defaultStyles.textSize;
selectedTag.type === TagsTypes.TEXT && // const tagHeight = selectedTag?.dimensions?.height - 18;
selectedTag.subType !== TEXT.PASSWORD &&
selectedTag.subType !== TEXT.PARAGRAPH && // if (
tagHeight > fontSize * 2 // selectedTag.type === TagsTypes.TEXT &&
) { // selectedTag.subType !== TEXT.PASSWORD &&
handlePropertyChange("subType", TEXT.PARAGRAPH); // selectedTag.subType !== TEXT.PARAGRAPH &&
} else if ( // tagHeight > fontSize * 2
selectedTag.subType !== TEXT.PASSWORD && // ) {
selectedTag.subType !== TEXT.SINGLE_LINE && // handlePropertyChange("subType", TEXT.PARAGRAPH);
tagHeight <= fontSize * 2 // } else if (
) { // selectedTag.subType !== TEXT.PASSWORD &&
handlePropertyChange("subType", TEXT.SINGLE_LINE); // selectedTag.subType !== TEXT.SINGLE_LINE &&
} // tagHeight <= fontSize * 2
// ) {
// handlePropertyChange("subType", TEXT.SINGLE_LINE);
// }
}, [selectedTag]); }, [selectedTag]);
const handleStyleChange = (key, value) => { const handleStyleChange = (key, value) => {
@ -484,7 +518,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
{/* Mask Type */} {/* Mask Type */}
{ {
selectedTag?.subType === TEXT.PASSWORD && selectedTag.maskType && selectedTag.maskType?.length > 0 &&
<MaskTypePassAttr <MaskTypePassAttr
maskType={selectedTag.maskType ? selectedTag.maskType : MASKTYPE.ALL} maskType={selectedTag.maskType ? selectedTag.maskType : MASKTYPE.ALL}
maskCharacter={selectedTag.maskCharacter ? selectedTag.maskCharacter : MASKCHARACTER.ASTERISK} maskCharacter={selectedTag.maskCharacter ? selectedTag.maskCharacter : MASKCHARACTER.ASTERISK}
@ -496,12 +530,13 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
{/* TEMPORAL DATE FORMAT - START */} {/* TEMPORAL DATE FORMAT - START */}
{ {
(selectedTag?.subType === TEMPORAL.DATE || selectedTag && (selectedTag?.dateFormat === TEMPORAL.DATE ||
selectedTag?.subType === TEMPORAL.TIME || selectedTag?.dateFormat === TEMPORAL.TIME ||
selectedTag?.subType === TEMPORAL.DATE_TIME) && selectedTag?.dateFormat === TEMPORAL.DATE_TIME) &&
<TemporalDateAttr <TemporalDateAttr
dateFormat={selectedTag.dateFormat ?? TEMPORAL.DATE} dateFormat={selectedTag.dateFormat ?? TEMPORAL.DATE_TIME}
format={selectedTag.format} format={selectedTag.format}
selectedTag={selectedTag}
dropDownToggle={dropDownToggle} dropDownToggle={dropDownToggle}
setDropDownToggle={setDropDownToggle} setDropDownToggle={setDropDownToggle}
handlePropertyChange={handlePropertyChange} /> handlePropertyChange={handlePropertyChange} />
@ -524,7 +559,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
{ {
(selectedTag.type.toLowerCase() === TagsTypes.SELECT) && (selectedTag.type.toLowerCase() === TagsTypes.SELECT) &&
<SelectTagAttr <SelectTagAttr
options={selectedTag.options?? []} options={selectedTag.options ?? []}
selTagKey={selTagKey} selTagKey={selTagKey}
selTagIndx={selTagIndx} selTagIndx={selTagIndx}
setDroppedItems={setDroppedItems} setDroppedItems={setDroppedItems}

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

@ -3,6 +3,7 @@ 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 { TagOptionAttrType } from "../../../../utlity/types";
import { DroppedItem } from "../../../../store/slices/droppedItemsSlice";
interface SelectTagAttrInt { interface SelectTagAttrInt {
options: TagOptionAttrType[]; options: TagOptionAttrType[];
@ -13,21 +14,35 @@ 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<TagOptionAttrType>({ label: "", value: "" });
const handleAddSelectOption = () => { const handleAddSelectOption = () => {
if (selectedOption && selectedOption.label && selectedOption.value) { if (selectedOption && selectedOption.label && selectedOption.value) {
setDroppedItems((prev) => {
console.log("Previous droppedItems:", prev);
const newState = {
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, ...prev,
[selTagKey]: Array.isArray(prev[selTagKey]) [selTagKey]: Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) => { ? prev[selTagKey].map((item, i) => {
if (i === selTagIndx) { if (i === selTagIndx) {
return { return {
...item, ...item,
options: item.options ? [...item.options, {...selectedOption}] : [{...selectedOption}], options: item.options ? [...item.options, { ...selectedOption }] : [{ ...selectedOption }],
update: true, update: true,
}; };
} }
@ -35,6 +50,7 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
}) })
: [], : [],
}; };
}
console.log("New droppedItems state:", newState); console.log("New droppedItems state:", newState);
return newState; return newState;
@ -44,8 +60,21 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
const handleSelectOptionDel = (indx: number) => { const handleSelectOptionDel = (indx: number) => {
setDroppedItems((prev) => ( 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, ...prev,
[selTagKey]: Array.isArray(prev[selTagKey]) [selTagKey]: Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) => { ? prev[selTagKey].map((item, i) => {
@ -55,8 +84,11 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
return item; return item;
}) })
: [], : [],
};
} }
));
return newState
});
} }
return ( return (
@ -65,7 +97,7 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
<label htmlFor="" className="">Add Options</label> <label htmlFor="" className="">Add Options</label>
<input <input
type="text" type="text"
onChange={(e) => setSelectedOption({label: e.target.value, value: e.target.value})} onChange={(e) => setSelectedOption({ label: e.target.value, value: e.target.value })}
// value={selectedOption} // value={selectedOption}
onKeyUp={(e) => { onKeyUp={(e) => {
if (e.code === "Enter") { if (e.code === "Enter") {

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

@ -3,6 +3,7 @@ import { dateFormats, dateTimeFormats, monthFormats, timeFormats, weekFormats, y
import { DROPDOWNTOGGLE, TEMPORAL } from "./RightSideBar"; import { DROPDOWNTOGGLE, TEMPORAL } from "./RightSideBar";
import { MdKeyboardArrowDown } from "react-icons/md"; import { MdKeyboardArrowDown } from "react-icons/md";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { DroppedItem } from "../../../../utlity/types";
const dateTimeFormatMap = { const dateTimeFormatMap = {
"date": dateFormats, "date": dateFormats,
@ -16,14 +17,15 @@ const dateTimeFormatMap = {
interface TemporalDateAttrInt { interface TemporalDateAttrInt {
dateFormat: string; dateFormat: string;
format: string | undefined; format: string | undefined;
selectedTag: DroppedItem;
dropDownToggle: DROPDOWNTOGGLE | null; dropDownToggle: DROPDOWNTOGGLE | null;
setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>; setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>;
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number, is24Hrs: boolean) => void; handlePropertyChange: (changeTo: string, changeWith: string | boolean | number, is24Hrs: boolean) => void;
} }
const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, dropDownToggle, setDropDownToggle, handlePropertyChange }) => { const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, selectedTag, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
console.log(dateFormat, format, "dateFormat Line 26") console.log(dateFormat, format, "dateFormat Line 26", selectedTag)
const [is24Hrs, setIs24Hrs] = useState<boolean>(true); const [is24Hrs, setIs24Hrs] = useState<boolean>(true);

5
src/utlity/types.tsx
View File

@ -128,7 +128,7 @@ export enum SignTypeEnum {
interface StylesInterface { export interface StylesInterface {
font: string, font: string,
italic: boolean, italic: boolean,
bold: boolean, bold: boolean,
@ -188,6 +188,9 @@ export interface DroppedItem {
width: number; width: number;
height: number; height: number;
} }
styles?: StylesInterface;
recipientId: number; recipientId: number;
documentId: string; documentId: string;