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

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

@ -373,8 +373,8 @@ const SignDocument = () => {
const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const handleFormSubmit = () => {
// e.preventDefault();
const submitData: TagsSubmitDataObj = {
tags: []
}
@ -631,12 +631,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] : '',
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 = () => {
<>
{/* <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'>
@ -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'>
<p
onClick={handleFormSubmit}
id="sign-client-side-btn"
className='tracking-wide text-white'>
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 (
<div
@ -1435,13 +1470,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>
)
})
@ -1634,7 +1669,7 @@ const SignDocument = () => {
{/* 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
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>

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

@ -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,

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

@ -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<CommonAttrDropDownInt> = ({ 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<CommonAttrDropDownInt> = ({ selectedType, sel
break;
}
console.log(subType, selectedTag.isCurrency, "line 63");
console.log(selectedTag, "line 63");
return (
<div className="flex flex-col">
@ -84,8 +89,13 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
{dropDownToggle === DROPDOWNTOGGLE.TYPE &&
<div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
{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<CommonAttrDropDownInt> = ({ 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<CommonAttrDropDownInt> = ({ selectedType, sel
} else if (selectedTag.type.toLowerCase() === TagsTypes.SELECT) {
console.log(selectedTag.type, subTypeKey, value, "Line 126")
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]);
}
}}

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"
>
{

297
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";
@ -94,7 +94,7 @@ export enum DROPDOWNTOGGLE {
DDMMYY_FORMAT
}
const defaultStyles = {
const defaultStyles: StylesInterface = {
font: "",
italic: false,
bold: false,
@ -114,104 +114,124 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
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
)
: [],
}
));
} 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])
// ? 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) => (
// {
// ...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) {
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;
})
: [];
// let val = timeFormats[0].format;
return {
...prev,
[selTagKey]: updatedArray,
};
});
} else {
setDroppedItems((prev) => {
const updated = [...prev];
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith + " " + val, update: true }
return updated;
})
}
}
// if (is24Hrs === null) {
// val = timeFormats[0].format
// } else if (!is24Hrs) {
// val = timeFormats[1].format
// } else {
// val = timeFormats[0].format
// }
// // console.log("val", val, is24Hrs)
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) {
setDroppedItems((prev) => {
@ -228,38 +248,50 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
};
});
} else {
// setDroppedItems((prev) => {
// const updated = [...prev];
// updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
// return updated;
// })
setDroppedItems((prev) => {
const updated = [...prev];
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
return updated;
return (prev.map((item, idx) => {
console.log(prev, "Prev lIne 258")
if (idx === selTagIndx) {
return { ...item, [changeTo]: changeWith, update: true }
}
return item;
}))
})
}
}
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>) => {
@ -303,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) => {
@ -484,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}
@ -496,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
dateFormat={selectedTag.dateFormat ?? TEMPORAL.DATE}
dateFormat={selectedTag.dateFormat ?? TEMPORAL.DATE_TIME}
format={selectedTag.format}
selectedTag={selectedTag}
dropDownToggle={dropDownToggle}
setDropDownToggle={setDropDownToggle}
handlePropertyChange={handlePropertyChange} />

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

@ -3,6 +3,7 @@ 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: TagOptionAttrType[];
@ -17,10 +18,24 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
const handleAddSelectOption = () => {
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,
[selTagKey]: Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) => {
@ -35,6 +50,7 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
})
: [],
};
}
console.log("New droppedItems state:", newState);
return newState;
@ -44,8 +60,21 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
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,
[selTagKey]: Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) => {
@ -55,8 +84,11 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
return item;
})
: [],
};
}
));
return newState
});
}
return (

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 { 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<React.SetStateAction<DROPDOWNTOGGLE | null>>;
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);

5
src/utlity/types.tsx
View File

@ -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;