From 6abe33350151e5cece1a4ab0b9ec4ef76616dcd8 Mon Sep 17 00:00:00 2001 From: =bhagwanSingh <=bhagwan.r@hicglobalsolutions.com> Date: Sun, 17 Aug 2025 22:15:56 +0530 Subject: [PATCH] Tag attribute update according to new API --- src/components/client/SignDocument.tsx | 3 +- src/components/home/StartSection.tsx | 4 +- .../process/processStepOne/ProcessStepOne.tsx | 70 ++++---- .../processStepTwo/DocumentContainer.tsx | 168 +++++++++--------- .../process/processStepTwo/NavTwo.tsx | 4 +- .../rightSideBar/CommonAttrDropDown.tsx | 141 +++++++++++++-- .../rightSideBar/RightSideBar.tsx | 44 +++-- .../rightSideBar/SelectTagAttr.tsx | 17 +- .../rightSideBar/TemporalDateAttr.tsx | 22 +-- src/utlity/types.tsx | 55 ++++-- 10 files changed, 335 insertions(+), 193 deletions(-) diff --git a/src/components/client/SignDocument.tsx b/src/components/client/SignDocument.tsx index d731e3d..0bf4285 100644 --- a/src/components/client/SignDocument.tsx +++ b/src/components/client/SignDocument.tsx @@ -612,6 +612,8 @@ const SignDocument = () => { event.preventDefault(); const data = window.dragElemData; + window.dragElemData = null; + if (!data) return; const dragElemData = JSON.parse(data); // Get the dropped label @@ -1072,7 +1074,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)} diff --git a/src/components/home/StartSection.tsx b/src/components/home/StartSection.tsx index 02d4237..748ade4 100644 --- a/src/components/home/StartSection.tsx +++ b/src/components/home/StartSection.tsx @@ -84,7 +84,7 @@ const StartSection = () => {

Get Started

-
+
@@ -124,7 +124,7 @@ const StartSection = () => {
-

Recent Activities

+

Recent Activities

diff --git a/src/components/process/processStepOne/ProcessStepOne.tsx b/src/components/process/processStepOne/ProcessStepOne.tsx index 0be9217..e3a4f7c 100644 --- a/src/components/process/processStepOne/ProcessStepOne.tsx +++ b/src/components/process/processStepOne/ProcessStepOne.tsx @@ -139,12 +139,12 @@ 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, subject: false, - recipientEmailAndLastName:false + recipientEmailAndLastName: false } if (transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) { @@ -161,7 +161,7 @@ const ProcessStepOne = () => { if (!isValid) { // alert('All recipients must have both Email and Last Name filled.'); - formError.recipientEmailAndLastName = true; + formError.recipientEmailAndLastName = true; } } if (!emailDtls.subject.length) { @@ -291,6 +291,7 @@ 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, @@ -298,41 +299,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()); diff --git a/src/components/process/processStepTwo/DocumentContainer.tsx b/src/components/process/processStepTwo/DocumentContainer.tsx index e0c2881..61655f9 100644 --- a/src/components/process/processStepTwo/DocumentContainer.tsx +++ b/src/components/process/processStepTwo/DocumentContainer.tsx @@ -96,110 +96,104 @@ const DocumentContainer: React.FC = ({ 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 = ({ 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 = ({ transactionSaving // HANDLE DROP - START const handleDrop = (event: React.DragEvent, docId: string, documentId: number, pageIndex: number) => { - console.log("// HANDLE DROP - START") event.preventDefault(); const data = window.dragElemData; diff --git a/src/components/process/processStepTwo/NavTwo.tsx b/src/components/process/processStepTwo/NavTwo.tsx index 2845fd0..e500160 100644 --- a/src/components/process/processStepTwo/NavTwo.tsx +++ b/src/components/process/processStepTwo/NavTwo.tsx @@ -126,10 +126,10 @@ const NavTwo: React.FC = ({ 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`); diff --git a/src/components/process/processStepTwo/rightSideBar/CommonAttrDropDown.tsx b/src/components/process/processStepTwo/rightSideBar/CommonAttrDropDown.tsx index 6d2c5d6..af8dfb6 100644 --- a/src/components/process/processStepTwo/rightSideBar/CommonAttrDropDown.tsx +++ b/src/components/process/processStepTwo/rightSideBar/CommonAttrDropDown.tsx @@ -1,18 +1,74 @@ import { MdKeyboardArrowDown } from 'react-icons/md'; -import { DROPDOWNTOGGLE } from './RightSideBar'; +import { DROPDOWNTOGGLE, 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>; handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void; } -const CommonAttrDropDown: React.FC = ({selectedType, subType, dropDownToggle, setDropDownToggle, handlePropertyChange}) => { +const CommonAttrDropDown: React.FC = ({ 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": + if (selectedTag.multiLine === undefined) { + subType = TEXT.PARAGRAPH + } else if (selectedTag.multiLine !== undefined && selectedTag.multiLine) { + subType = TEXT.PARAGRAPH; + } else if (selectedTag.maxLength !== undefined && !selectedTag.multiLine) { + subType = TEXT.SINGLE_LINE; + } + 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(subType, selectedTag.isCurrency, "line 63"); return (
@@ -20,21 +76,78 @@ const CommonAttrDropDown: React.FC = ({selectedType, subT
setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.TYPE ? null : DROPDOWNTOGGLE.TYPE)} className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200"> -

{subType ? (subType === "date_time" ? "Date Time" : subType) : selectedType[Object.keys(selectedType)[0] as keyof typeof selectedType]}

+

{subType}

+ {/*

{subType ? (subType === "date_time" ? "Date Time" : subType) : selectedType[Object.keys(selectedType)[0] as keyof typeof selectedType]}

*/}
{dropDownToggle === DROPDOWNTOGGLE.TYPE &&
- {Object.keys(selectedType).map((val, indx) => ( -
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]} -
- ))} + {Object.keys(selectedType).map((val, indx) => { + let value = val.toLowerCase() as keyof typeof selectedType | number | boolean; + let isCurrency = 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 === "multiSelect") { + if (value === "multi_select") { + value = true; + } else { + value = false + } + } + // Handling TEXT - END + + console.log(subTypeKey, subType, value, "line 1223"); + + return ( +
{ + 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) { + + console.log(selectedTag.type, subTypeKey, value, "Line 126") + + 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]} +
+ ) + })}
}
diff --git a/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx b/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx index 4afa689..7a4d30c 100644 --- a/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx +++ b/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx @@ -106,15 +106,12 @@ const defaultStyles = { const RightSideBar: React.FC = ({ 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(null); - const [decimalPlace, setDecimalPlace] = useState(2) + const [decimalPlace, setDecimalPlace] = useState(selectedTag.decimalPlace ?? 0); const [styleOpen, setStyleOpen] = useState(false); const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => { @@ -271,6 +268,12 @@ const RightSideBar: React.FC = ({ 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) @@ -411,14 +414,14 @@ const RightSideBar: React.FC = ({ 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 +436,10 @@ const RightSideBar: React.FC = ({ droppedItems, selectedTag, s } + console.log(selectedType, "line 434"); + + + return ( <> {/* Right Side Bar Start */} @@ -468,7 +475,8 @@ const RightSideBar: React.FC = ({ droppedItems, selectedTag, s selectedType && Object.keys(selectedType).length > 0 && @@ -492,7 +500,7 @@ const RightSideBar: React.FC = ({ droppedItems, selectedTag, s selectedTag?.subType === TEMPORAL.TIME || selectedTag?.subType === TEMPORAL.DATE_TIME) && = ({ droppedItems, selectedTag, s {/* NUMBER - DECIMAL PLACES */} { - selectedTag?.subType === NUMBER.DECIMAL && + selectedTag?.type.toLowerCase() === TagsTypes.NUMBER &&
= ({ droppedItems, selectedTag, s } { - (selectedTag?.subType === SELECT.SINGLE_SELECT || selectedTag?.subType === SELECT.MULTI_SELECT) && + (selectedTag.type.toLowerCase() === TagsTypes.SELECT) && >; @@ -12,10 +13,10 @@ interface SelectTagAttrInt { } const SelectTagAttr: React.FC = ({ options, selTagKey, selTagIndx, setDroppedItems, handlePropertyChange }) => { - const [selectedOption, setSelectedOption] = useState() + const [selectedOption, setSelectedOption] = useState({label: "", value: ""}); const handleAddSelectOption = () => { - if (selectedOption && selectedOption.length) { + if (selectedOption && selectedOption.label && selectedOption.value) { setDroppedItems((prev) => { console.log("Previous droppedItems:", prev); @@ -26,7 +27,7 @@ const SelectTagAttr: React.FC = ({ options, selTagKey, selTagI if (i === selTagIndx) { return { ...item, - options: item.options ? [...item.options, selectedOption] : [selectedOption], + options: item.options ? [...item.options, {...selectedOption}] : [{...selectedOption}], update: true, }; } @@ -64,7 +65,7 @@ const SelectTagAttr: React.FC = ({ options, selTagKey, selTagI 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 +75,13 @@ const SelectTagAttr: React.FC = ({ options, selTagKey, selTagI }} className="bg-slate-100 w-full outline-none p-2 rounded" /> -
+
{ - options && options.map((val, indx) => ( + options && options.map((obj, indx) => (
-

{val}

+

{obj.label}

// setSelectedOptions(prev => diff --git a/src/components/process/processStepTwo/rightSideBar/TemporalDateAttr.tsx b/src/components/process/processStepTwo/rightSideBar/TemporalDateAttr.tsx index f8977df..038e6a0 100644 --- a/src/components/process/processStepTwo/rightSideBar/TemporalDateAttr.tsx +++ b/src/components/process/processStepTwo/rightSideBar/TemporalDateAttr.tsx @@ -14,28 +14,28 @@ const dateTimeFormatMap = { } interface TemporalDateAttrInt { - subType: string; + dateFormat: string; format: string | undefined; dropDownToggle: DROPDOWNTOGGLE | null; setDropDownToggle: React.Dispatch>; handlePropertyChange: (changeTo: string, changeWith: string | boolean | number, is24Hrs: boolean) => void; } -const TemporalDateAttr: React.FC = ({ subType, format, dropDownToggle, setDropDownToggle, handlePropertyChange }) => { - +const TemporalDateAttr: React.FC = ({ dateFormat, format, dropDownToggle, setDropDownToggle, handlePropertyChange }) => { + + console.log(dateFormat, format, "dateFormat Line 26") const [is24Hrs, setIs24Hrs] = useState(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 +53,7 @@ const TemporalDateAttr: React.FC = ({ subType, format, drop
- {(subType === TEMPORAL.DATE_TIME || subType === TEMPORAL.TIME) && + {(dateFormat === TEMPORAL.DATE_TIME || dateFormat === TEMPORAL.TIME) &&
= ({ subType, format, drop className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">

{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) : ""} */}

@@ -80,10 +80,10 @@ const TemporalDateAttr: React.FC = ({ subType, format, drop { dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT &&
- {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 +94,7 @@ const TemporalDateAttr: React.FC = ({ subType, format, drop return (
handlePropertyChange("format", valObj["format"], is24Hrs)} + onClick={() => handlePropertyChange("format", val, is24Hrs)} className="px-2 py-1 hover:bg-slate-200 cursor-pointer" > {val} diff --git a/src/utlity/types.tsx b/src/utlity/types.tsx index cec7038..50d6d23 100644 --- a/src/utlity/types.tsx +++ b/src/utlity/types.tsx @@ -97,6 +97,7 @@ export interface TagsProperties { "currentTimeStamp"?: boolean; "decimalPlace"?: number; "multiSelect"?: boolean; + "isCurrency"?: boolean; } @@ -136,6 +137,15 @@ interface StylesInterface { textSize: number } +export interface TagOptionAttrType{ + label: string; + value: string; + pageIndex?: number; + selected?: boolean; + readOnly?: boolean; + dimensions?: Record; +} + export interface DroppedItem { id?: string; @@ -143,6 +153,35 @@ 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; @@ -158,26 +197,14 @@ export interface DroppedItem { allowSenderToDelete: true; 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; } \ No newline at end of file