diff --git a/src/components/client/SignDocument.tsx b/src/components/client/SignDocument.tsx index 0bf4285..845bde3 100644 --- a/src/components/client/SignDocument.tsx +++ b/src/components/client/SignDocument.tsx @@ -373,8 +373,8 @@ const SignDocument = () => { - const handleFormSubmit = (e: React.FormEvent) => { - e.preventDefault(); + const handleFormSubmit = () => { + // e.preventDefault(); const submitData: TagsSubmitDataObj = { tags: [] } @@ -613,7 +613,7 @@ const SignDocument = () => { const data = window.dragElemData; window.dragElemData = null; - + if (!data) return; const dragElemData = JSON.parse(data); // Get the dropped label @@ -631,12 +631,40 @@ const SignDocument = () => { const key = `${docId}_${pageIndex}`; // const IconComponent = typeToIconMap[field.type] || ; + // let prepData = { + // properties: data.properties, + // icon: typeToIconMap[field.label.toUpperCase()] || , + // 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()] || , - type: dragElemData.label.toUpperCase(), - subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '', + type: dragElemData.label, label: dragElemData.label, + // subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '', dimensions: { left: x, top: y, @@ -655,6 +683,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 } @@ -813,7 +842,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"); @@ -821,7 +853,10 @@ const SignDocument = () => { (async () => { if ("id" in tag) { 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" } catch (err) { return; @@ -889,12 +924,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; })); } })() @@ -909,8 +942,8 @@ const SignDocument = () => { <> {/* */} {showCompletionScreen && } -
) => handleFormSubmit(e)} +
) => handleFormSubmit(e)} > {/* Nav Two - Options - START */}
@@ -999,6 +1032,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'>

Sign @@ -1048,6 +1082,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 (

{ // display: `${hideTags ? 'none' : 'block'}` }} > - {provideTags && !transparentTags && !hideTags &&
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" @@ -1260,7 +1295,7 @@ const SignDocument = () => { }} onBlur={(e) => { - + }} contentEditable={true} className="outline-none whitespace-nowrap w-full max-h-max" @@ -1295,7 +1330,7 @@ const SignDocument = () => { }} onBlur={(e) => { - + }} contentEditable={true} className="outline-none whitespace-nowrap w-full max-h-max" @@ -1435,13 +1470,13 @@ const SignDocument = () => { className="outline-none" > - {item.options && item.options.map((val, indx) => { + {item.options && item.options.map((obj, indx) => { return ( ) }) @@ -1634,7 +1669,7 @@ const SignDocument = () => { {/* Document Container End */} - +
diff --git a/src/components/process/processStepOne/DocumentCard.tsx b/src/components/process/processStepOne/DocumentCard.tsx index ee0e2a4..394eb5f 100644 --- a/src/components/process/processStepOne/DocumentCard.tsx +++ b/src/components/process/processStepOne/DocumentCard.tsx @@ -114,7 +114,7 @@ const DocumentCard: React.FC = ({ id, name, isCompleted , tra
= ({ id, name, isCompleted , tra
) : ( - + )}
diff --git a/src/components/process/processStepOne/ProcessStepOne.tsx b/src/components/process/processStepOne/ProcessStepOne.tsx index 55e886b..b67ea7a 100644 --- a/src/components/process/processStepOne/ProcessStepOne.tsx +++ b/src/components/process/processStepOne/ProcessStepOne.tsx @@ -291,7 +291,6 @@ const ProcessStepOne = () => { await dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId })); } dispatch(showLoader("Processing Message...")); - debugger let res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { name: templateName, diff --git a/src/components/process/processStepTwo/rightSideBar/CommonAttrDropDown.tsx b/src/components/process/processStepTwo/rightSideBar/CommonAttrDropDown.tsx index af8dfb6..6430b1f 100644 --- a/src/components/process/processStepTwo/rightSideBar/CommonAttrDropDown.tsx +++ b/src/components/process/processStepTwo/rightSideBar/CommonAttrDropDown.tsx @@ -1,6 +1,6 @@ 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'; interface CommonAttrDropDownInt { @@ -36,13 +36,18 @@ const CommonAttrDropDown: React.FC = ({ selectedType, sel } break; case "text": + console.log("Line 444", selectedTag); if (selectedTag.multiLine === undefined) { subType = TEXT.PARAGRAPH - } else if (selectedTag.multiLine !== undefined && selectedTag.multiLine) { + } else if (selectedTag.multiLine) { subType = TEXT.PARAGRAPH; - } else if (selectedTag.maxLength !== undefined && !selectedTag.multiLine) { + } 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) { @@ -68,7 +73,7 @@ const CommonAttrDropDown: React.FC = ({ selectedType, sel break; } - console.log(subType, selectedTag.isCurrency, "line 63"); + console.log(selectedTag, "line 63"); return (
@@ -84,8 +89,13 @@ const CommonAttrDropDown: React.FC = ({ selectedType, sel {dropDownToggle === DROPDOWNTOGGLE.TYPE &&
{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) { @@ -110,11 +120,15 @@ const CommonAttrDropDown: React.FC = ({ selectedType, sel // Handling SELECT - END // Handling TEXT - START - if (subTypeKey === "multiSelect") { - if (value === "multi_select") { - value = true; + if (subTypeKey === "multiLine") { + if (value === "single_line") { + value = false; } else { - value = false + value = true; + } + + if (val.toLowerCase() === TEXT.PASSWORD) { + isPassword = true; } } // Handling TEXT - END @@ -135,10 +149,21 @@ const CommonAttrDropDown: React.FC = ({ selectedType, sel } else if (selectedTag.type.toLowerCase() === TagsTypes.SELECT) { - console.log(selectedTag.type, subTypeKey, value, "Line 126") - handlePropertyChange(subTypeKey, value as boolean); - } else { + + } 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]); } }} diff --git a/src/components/process/processStepTwo/rightSideBar/MaskTypePassAttr.tsx b/src/components/process/processStepTwo/rightSideBar/MaskTypePassAttr.tsx index 69d9e6e..4114f16 100644 --- a/src/components/process/processStepTwo/rightSideBar/MaskTypePassAttr.tsx +++ b/src/components/process/processStepTwo/rightSideBar/MaskTypePassAttr.tsx @@ -32,7 +32,7 @@ const MaskTypePassAttr: React.FC = ({ maskType, maskCharact (
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 = ({ maskType, maskCharact (
handlePropertyChange("maskCharacter", MASKCHARACTER[val])} + onClick={() => handlePropertyChange("maskCharacter", MASKCHARACTER[val].toUpperCase())} className="capitalize p-2 hover:bg-slate-200 cursor-pointer" > { diff --git a/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx b/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx index 7a4d30c..6d9bc24 100644 --- a/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx +++ b/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx @@ -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"; @@ -94,7 +94,7 @@ export enum DROPDOWNTOGGLE { DDMMYY_FORMAT } -const defaultStyles = { +const defaultStyles: StylesInterface = { font: "", italic: false, bold: false, @@ -114,152 +114,184 @@ const RightSideBar: React.FC = ({ droppedItems, selectedTag, s const [decimalPlace, setDecimalPlace] = useState(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) => { @@ -303,23 +335,25 @@ const RightSideBar: React.FC = ({ 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) => { @@ -484,7 +518,7 @@ const RightSideBar: React.FC = ({ droppedItems, selectedTag, s {/* Mask Type */} { - selectedTag?.subType === TEXT.PASSWORD && + selectedTag.maskType && selectedTag.maskType?.length > 0 && = ({ 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) && @@ -524,7 +559,7 @@ const RightSideBar: React.FC = ({ droppedItems, selectedTag, s { (selectedTag.type.toLowerCase() === TagsTypes.SELECT) && = ({ options, selTagKey, selTagIndx, setDroppedItems, handlePropertyChange }) => { - const [selectedOption, setSelectedOption] = useState({label: "", value: ""}); + const [selectedOption, setSelectedOption] = useState({ label: "", value: "" }); const handleAddSelectOption = () => { if (selectedOption && selectedOption.label && selectedOption.value) { - setDroppedItems((prev) => { - console.log("Previous droppedItems:", prev); - 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; @@ -44,19 +60,35 @@ const SelectTagAttr: React.FC = ({ 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 ( @@ -65,7 +97,7 @@ const SelectTagAttr: React.FC = ({ options, selTagKey, selTagI setSelectedOption({label: e.target.value, value: e.target.value})} + onChange={(e) => setSelectedOption({ label: e.target.value, value: e.target.value })} // value={selectedOption} onKeyUp={(e) => { if (e.code === "Enter") { diff --git a/src/components/process/processStepTwo/rightSideBar/TemporalDateAttr.tsx b/src/components/process/processStepTwo/rightSideBar/TemporalDateAttr.tsx index 038e6a0..d937163 100644 --- a/src/components/process/processStepTwo/rightSideBar/TemporalDateAttr.tsx +++ b/src/components/process/processStepTwo/rightSideBar/TemporalDateAttr.tsx @@ -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, @@ -16,14 +17,15 @@ const dateTimeFormatMap = { interface TemporalDateAttrInt { dateFormat: string; format: string | undefined; + selectedTag: DroppedItem; dropDownToggle: DROPDOWNTOGGLE | null; setDropDownToggle: React.Dispatch>; handlePropertyChange: (changeTo: string, changeWith: string | boolean | number, is24Hrs: boolean) => void; } -const TemporalDateAttr: React.FC = ({ dateFormat, format, dropDownToggle, setDropDownToggle, handlePropertyChange }) => { - - console.log(dateFormat, format, "dateFormat Line 26") +const TemporalDateAttr: React.FC = ({ dateFormat, format, selectedTag, dropDownToggle, setDropDownToggle, handlePropertyChange }) => { + + console.log(dateFormat, format, "dateFormat Line 26", selectedTag) const [is24Hrs, setIs24Hrs] = useState(true); diff --git a/src/utlity/types.tsx b/src/utlity/types.tsx index 50d6d23..46eea1a 100644 --- a/src/utlity/types.tsx +++ b/src/utlity/types.tsx @@ -128,7 +128,7 @@ export enum SignTypeEnum { -interface StylesInterface { +export interface StylesInterface { font: string, italic: boolean, bold: boolean, @@ -188,6 +188,9 @@ export interface DroppedItem { width: number; height: number; } + + styles?: StylesInterface; + recipientId: number; documentId: string;