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

Tag attribute update according to new API

This commit is contained in:
=bhagwanSingh 2025-08-17 22:15:56 +05:30
parent ac6c42e50a
commit 6abe333501
10 changed files with 335 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -612,6 +612,8 @@ const SignDocument = () => {
event.preventDefault(); event.preventDefault();
const data = window.dragElemData; const data = window.dragElemData;
window.dragElemData = null;
if (!data) return; if (!data) return;
const dragElemData = JSON.parse(data); // Get the dropped label const dragElemData = JSON.parse(data); // Get the dropped label
@ -1072,7 +1074,6 @@ const SignDocument = () => {
} }
} }
key={item.id} key={item.id}
// draggable="false"
// onPointerDown={(e) => handleTagMouseDown(e, key, index)} // onPointerDown={(e) => handleTagMouseDown(e, key, index)}
className="absolute rounded dropped-item text-sm" className="absolute rounded dropped-item text-sm"
// onClick={() => handleTagClick(key, index)} // onClick={() => handleTagClick(key, index)}

4
src/components/home/StartSection.tsx
View File

@ -84,7 +84,7 @@ const StartSection = () => {
<section className="px-4 pt-2 pb-3 w-full"> <section className="px-4 pt-2 pb-3 w-full">
<h2 className="text-lg font-semibold text-gray-800 mb-2">Get Started</h2> <h2 className="text-lg font-semibold text-gray-800 mb-2">Get Started</h2>
<div className="grid grid-cols-3 gap-4 h-[12vw]"> <div className="grid grid-cols-3 gap-4 min-h-[12vw] h-full">
<StartNow /> <StartNow />
@ -124,7 +124,7 @@ const StartSection = () => {
</div> </div>
<section className='pt-2 pb-3'> <section className='pt-2 pb-3'>
<h2 className="mt-6 text-lg font-semibold text-gray-800 mb-2">Recent Activities</h2> <h2 className="mt-2 text-lg font-semibold text-gray-800 mb-2">Recent Activities</h2>
<section> <section>
<TransactionDataTable /> <TransactionDataTable />
</section> </section>

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

@ -139,12 +139,12 @@ const ProcessStepOne = () => {
const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); 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 = { let formError = {
documents: false, documents: false,
recipients: false, recipients: false,
subject: false, subject: false,
recipientEmailAndLastName:false recipientEmailAndLastName: false
} }
if (transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) { if (transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
@ -291,6 +291,7 @@ 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,
@ -298,19 +299,15 @@ const ProcessStepOne = () => {
status: "CREATED" status: "CREATED"
}) })
if (isSendNow) { // if (isSendNow) {
dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS)); // dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS));
setTimeout(() => { // }
// navigate("/"); // else {
}, 1000); // setTimeout(() => {
}
else {
setTimeout(() => {
dispatch(resetDocuments()) dispatch(resetDocuments())
dispatch(resetRecipients()) dispatch(resetRecipients())
dispatch(hideLoader());
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) { if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
console.log(`/process-step-two/${accountId}/template/${transactionId}`) dispatch(hideLoader());
if (!saveAndClose) { if (!saveAndClose) {
navigate(`/process-step-two/${accountId}/template/${transactionId}`) navigate(`/process-step-two/${accountId}/template/${transactionId}`)
} else { } else {
@ -318,10 +315,11 @@ const ProcessStepOne = () => {
} }
} else { } else {
if (signType === SignTypeEnum.selfSign) { if (signType === SignTypeEnum.selfSign) {
dispatch(showLoader("Processing eSignature..."));
(async () => { (async () => {
try { try {
const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" }) await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
console.log(res, "Check123"); dispatch(hideLoader());
navigate(`/sign/${recipientId}/self_sign`); navigate(`/sign/${recipientId}/self_sign`);
} catch (err) { } catch (err) {
console.log("Error Transaction Sent", err.message); console.log("Error Transaction Sent", err.message);
@ -331,8 +329,8 @@ const ProcessStepOne = () => {
navigate(`/process-step-two/${accountId}/${transactionId}`); navigate(`/process-step-two/${accountId}/${transactionId}`);
} }
} }
}, 1000); // }, 1000);
} // }
} catch (error) { } catch (error) {
dispatch(hideLoader()); dispatch(hideLoader());

164
src/components/process/processStepTwo/DocumentContainer.tsx
View File

@ -96,110 +96,104 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
} }
} }
// let updatedTags = { ...recTags }
// let tagsData = []
// for (const dropPageIds of Object.keys(updatedTags)) {
// for (const dropTag of updatedTags[dropPageIds]) {
// let mask = null
// // console.log(dropTag, "line 132")
// // if (dropTag.subType?.toLowerCase() === "password") {
// // console.log(dropTag)
// mask = {
// "type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null,
// "character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null
// }
// // }
// // console.log(dropTag, "line 204")
let updatedTags = { ...recTags } // const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
let tagsData = []
for (const dropPageIds of Object.keys(updatedTags)) { // const updatedTagData = {
// "id": "id" in dropTag ? dropTag.id : null,
for (const dropTag of updatedTags[dropPageIds]) { // "label": dropTag.label,
let mask = null // "dimensions": dropTag.dimensions,
// "type": dropTag.type.toUpperCase(),
// console.log(dropTag, "line 132") // // "subType": (dropTag.subType ? dropTag.subType.toUpperCase() : null),
// "minLength": "minLength" in dropTag ? dropTag.minLength : 0,
// if (dropTag.subType?.toLowerCase() === "password") { // "maxLength": "maxLength" in dropTag ? dropTag.maxLength : 0,
// console.log(dropTag) // "error": ("error" in dropTag && dropTag.error) ? `${dropTag.error}`.toUpperCase() : "error",
mask = { // "regex": "regex" in dropTag ? dropTag.regex : []
"type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null, // // }
"character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null // ,
} // "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,
// } // }
// console.log(dropTag, "line 204") // // if ("format" in dropTag) {
// // updatedTagData.format = `${dropTag.subType}`.toUpperCase();
// // updatedTagData.dateFormat = dropTag.format;
// // updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
// // }
const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false // if("format" in dropTag && dropTag.format) {
// updatedTagData.subType = dropTag.format.toLowerCase();
const updatedTagData = { // updatedTagData.format = dropTag.dateFormat;
"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 ("format" in dropTag) {
// updatedTagData.format = `${dropTag.subType}`.toUpperCase();
// updatedTagData.dateFormat = dropTag.format;
// updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
// } // }
if("format" in dropTag && dropTag.format) { // if (`${dropTag.type}`.toLowerCase() === "number") {
updatedTagData.subType = dropTag.format.toLowerCase(); // updatedTagData.decimalPlace = dropTag.decimalPlace
updatedTagData.format = dropTag.dateFormat; // updatedTagData.isCurrency = dropTag.isCurrency
} // }
if (`${dropTag.type}`.toLowerCase() === "number") { // if (dropTag.type === "TEXT") {
updatedTagData.decimalPlace = dropTag.decimalPlace // // updatedTagData.multiLine = dropTag.subType === "paragraph"
updatedTagData.isCurrency = dropTag.isCurrency
}
if (dropTag.type === "TEXT") { // if(dropTag.multiLine) {
// updatedTagData.multiLine = dropTag.subType === "paragraph" // updatedTagData.subtype = TEXT.PARAGRAPH
// } else {
// updatedTagData.subtype = TEXT.SINGLE_LINE
// }
if(dropTag.multiLine) { // if ("maskType" in dropTag) {
updatedTagData.subtype = TEXT.PARAGRAPH // updatedTagData.maskCharacter = mask.character
} else { // updatedTagData.maskType = mask.type
updatedTagData.subtype = TEXT.SINGLE_LINE // }
} // }
if ("maskType" in dropTag) { // // if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required;
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.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT" // if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options;
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 (!updatedTagData.id) delete updatedTagData.id; // if (!isDeleted) {
// // sendTags.mod.push(updatedTagData);
if (!isDeleted) { // tagsData.push(updatedTagData)
// sendTags.mod.push(updatedTagData); // }
tagsData.push(updatedTagData) // }
} // }
}
}
setDroppedItems(recTags) setDroppedItems(recTags)
// Handle your response here // Handle your response here
@ -261,6 +255,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
} }
if (updateTags.length && "update" in updateTags[updateTags.length - 1]) { if (updateTags.length && "update" in updateTags[updateTags.length - 1]) {
delete updateTags[updateTags.length - 1].update delete updateTags[updateTags.length - 1].update
delete updateTags[updateTags.length - 1].icon
} }
} }
@ -456,7 +451,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
// HANDLE DROP - START // HANDLE DROP - START
const handleDrop = (event: React.DragEvent<HTMLDivElement>, docId: string, documentId: number, pageIndex: number) => { const handleDrop = (event: React.DragEvent<HTMLDivElement>, docId: string, documentId: number, pageIndex: number) => {
console.log("// HANDLE DROP - START")
event.preventDefault(); event.preventDefault();
const data = window.dragElemData; const data = window.dragElemData;

4
src/components/process/processStepTwo/NavTwo.tsx
View File

@ -126,10 +126,10 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
setTimeout(() => { setTimeout(() => {
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) { if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
if (isSignSend) { if (isSignSend) {
navigate(`./../../../sign/${selfUserSign.recipientId}`,{ replace: true }); // navigate(`./../../../sign/${selfUserSign.recipientId}`,{ replace: true });
} }
else { else {
navigate(`/document-completion-screen/${accountId}/${transactionId}`, { replace: true }) // navigate(`/document-completion-screen/${accountId}/${transactionId}`, { replace: true })
} }
} else { } else {
navigate(`/templates`); navigate(`/templates`);

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

@ -1,18 +1,74 @@
import { MdKeyboardArrowDown } from 'react-icons/md'; 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 { interface CommonAttrDropDownInt {
selectedType: any; selectedType: any;
subType: string | undefined; // subType: 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) => void; handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
} }
const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({selectedType, subType, dropDownToggle, setDropDownToggle, handlePropertyChange}) => { const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, selectedTag, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
console.log("selectedType, subType,",selectedType, subType) let subType = "";
let subTypeKey = ""
console.log(selectedType, selectedTag, "line 20");
switch (selectedTag.type.toLowerCase()) {
case "number":
if (selectedTag.decimalPlace === undefined) {
subType = NUMBER.INTEGER;
subTypeKey = "decimalPlace";
} else if (selectedTag.isCurrency !== undefined && selectedTag.isCurrency) {
subType = NUMBER.CURRENCY;
subTypeKey = "isCurrency";
} else if (selectedTag.decimalPlace === 0) {
subType = NUMBER.INTEGER;
subTypeKey = "decimalPlace";
} else if (selectedTag.decimalPlace > 0) {
subType = NUMBER.DECIMAL;
subTypeKey = "decimalPlace";
}
break;
case "text":
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 ( return (
<div className="flex flex-col"> <div className="flex flex-col">
@ -20,21 +76,78 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({selectedType, subT
<div <div
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.TYPE ? null : DROPDOWNTOGGLE.TYPE)} onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.TYPE ? null : DROPDOWNTOGGLE.TYPE)}
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200"> className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
<p className="capitalize cursor-pointer">{subType ? (subType === "date_time" ? "Date Time" : subType) : selectedType[Object.keys(selectedType)[0] as keyof typeof selectedType]}</p> <p className="capitalize cursor-pointer">{subType}</p>
{/* <p className="capitalize cursor-pointer">{subType ? (subType === "date_time" ? "Date Time" : subType) : selectedType[Object.keys(selectedType)[0] as keyof typeof selectedType]}</p> */}
<MdKeyboardArrowDown /> <MdKeyboardArrowDown />
</div> </div>
{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) => {
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 (
<div <div
key={indx} key={indx}
onClick={() => handlePropertyChange("subType", selectedType[val as keyof typeof selectedType])} onClick={() => {
if (selectedTag.type.toLowerCase() === TagsTypes.NUMBER) {
if (isCurrency) {
handlePropertyChange("isCurrency", true);
return;
}
handlePropertyChange(subTypeKey, value as number);
if (selectedTag.isCurrency) handlePropertyChange("isCurrency", false)
} else if (selectedTag.type.toLowerCase() === TagsTypes.SELECT) {
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`} 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]} {selectedType[val as keyof typeof selectedType] === "date_time" ? "Date Time" : selectedType[val as keyof typeof selectedType]}
</div> </div>
))} )
})}
</div> </div>
} }
</div> </div>

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

@ -106,15 +106,12 @@ const defaultStyles = {
const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, setDroppedItems, selTagKey, selTagIndx, signClient = false }) => { const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, setDroppedItems, selTagKey, selTagIndx, signClient = false }) => {
const selectedType = selectedTag.type.toLowerCase() in enumMap && enumMap[selectedTag.type.toLowerCase() as keyof typeof enumMap];
console.log("Right SideBar Called", selectedTag, selTagKey, selTagIndx, droppedItems)
const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap];
const [styles, setStyles] = useState(defaultStyles); const [styles, setStyles] = useState(defaultStyles);
const [dropDownToggle, setDropDownToggle] = useState<DROPDOWNTOGGLE | null>(null); const [dropDownToggle, setDropDownToggle] = useState<DROPDOWNTOGGLE | null>(null);
const [decimalPlace, setDecimalPlace] = useState<number>(2) const [decimalPlace, setDecimalPlace] = useState<number>(selectedTag.decimalPlace ?? 0);
const [styleOpen, setStyleOpen] = useState(false); const [styleOpen, setStyleOpen] = useState(false);
const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => { const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => {
@ -271,6 +268,12 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
handlePropertyChange("decimalPlace", val) handlePropertyChange("decimalPlace", val)
} }
useEffect(() => {
if (selectedTag.decimalPlace === undefined) return;
if (selectedTag.decimalPlace === decimalPlace) return;
setDecimalPlace(selectedTag.decimalPlace ?? 0)
}, [selectedTag.decimalPlace ?? 0])
// useEffect(() => { // useEffect(() => {
// if ("styles" in selectedTag) { // if ("styles" in selectedTag) {
// console.log("styles" in selectedTag) // console.log("styles" in selectedTag)
@ -433,6 +436,10 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
} }
console.log(selectedType, "line 434");
return ( return (
<> <>
{/* Right Side Bar Start */} {/* Right Side Bar Start */}
@ -468,7 +475,8 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
selectedType && Object.keys(selectedType).length > 0 && selectedType && Object.keys(selectedType).length > 0 &&
<CommonAttrDropDown <CommonAttrDropDown
selectedType={selectedType} selectedType={selectedType}
subType={selectedTag.subType} // subType={selectedTag.subType}
selectedTag={selectedTag}
dropDownToggle={dropDownToggle} dropDownToggle={dropDownToggle}
setDropDownToggle={setDropDownToggle} setDropDownToggle={setDropDownToggle}
handlePropertyChange={handlePropertyChange} /> handlePropertyChange={handlePropertyChange} />
@ -492,7 +500,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
selectedTag?.subType === TEMPORAL.TIME || selectedTag?.subType === TEMPORAL.TIME ||
selectedTag?.subType === TEMPORAL.DATE_TIME) && selectedTag?.subType === TEMPORAL.DATE_TIME) &&
<TemporalDateAttr <TemporalDateAttr
subType={selectedTag.subType} dateFormat={selectedTag.dateFormat ?? TEMPORAL.DATE}
format={selectedTag.format} format={selectedTag.format}
dropDownToggle={dropDownToggle} dropDownToggle={dropDownToggle}
setDropDownToggle={setDropDownToggle} setDropDownToggle={setDropDownToggle}
@ -502,7 +510,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
{/* NUMBER - DECIMAL PLACES */} {/* NUMBER - DECIMAL PLACES */}
{ {
selectedTag?.subType === NUMBER.DECIMAL && selectedTag?.type.toLowerCase() === TagsTypes.NUMBER &&
<div> <div>
<label htmlFor="" className="">Decimal Places</label> <label htmlFor="" className="">Decimal Places</label>
<input <input
@ -514,9 +522,9 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
} }
{ {
(selectedTag?.subType === SELECT.SINGLE_SELECT || selectedTag?.subType === SELECT.MULTI_SELECT) && (selectedTag.type.toLowerCase() === TagsTypes.SELECT) &&
<SelectTagAttr <SelectTagAttr
options={selectedTag.options} options={selectedTag.options?? []}
selTagKey={selTagKey} selTagKey={selTagKey}
selTagIndx={selTagIndx} selTagIndx={selTagIndx}
setDroppedItems={setDroppedItems} setDroppedItems={setDroppedItems}

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

@ -2,9 +2,10 @@ import { useState } from "react";
import { DROPDOWNTOGGLE } from "./RightSideBar"; 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";
interface SelectTagAttrInt { interface SelectTagAttrInt {
options: string[] | undefined; options: TagOptionAttrType[];
selTagKey: string; selTagKey: string;
selTagIndx: number; selTagIndx: number;
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>; setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>;
@ -12,10 +13,10 @@ 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<string>() const [selectedOption, setSelectedOption] = useState<TagOptionAttrType>({label: "", value: ""});
const handleAddSelectOption = () => { const handleAddSelectOption = () => {
if (selectedOption && selectedOption.length) { if (selectedOption && selectedOption.label && selectedOption.value) {
setDroppedItems((prev) => { setDroppedItems((prev) => {
console.log("Previous droppedItems:", prev); console.log("Previous droppedItems:", prev);
@ -26,7 +27,7 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
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,
}; };
} }
@ -64,7 +65,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(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") {
@ -74,13 +75,13 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
}} }}
className="bg-slate-100 w-full outline-none p-2 rounded" /> className="bg-slate-100 w-full outline-none p-2 rounded" />
<div className="h-[150px] mt-1 overflow-hidden overflow-y-auto"> <div className="max-h-[150px] mt-1 overflow-hidden overflow-y-auto">
{ {
options && options.map((val, indx) => ( options && options.map((obj, indx) => (
<div <div
key={indx} key={indx}
className="flex justify-between items-center px-2 py-1 my-1 rounded bg-slate-100"> className="flex justify-between items-center px-2 py-1 my-1 rounded bg-slate-100">
<p>{val}</p> <p>{obj.label}</p>
<IoMdClose <IoMdClose
onClick={() => onClick={() =>
// setSelectedOptions(prev => // setSelectedOptions(prev =>

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

@ -14,28 +14,28 @@ const dateTimeFormatMap = {
} }
interface TemporalDateAttrInt { interface TemporalDateAttrInt {
subType: string; dateFormat: string;
format: string | undefined; format: string | undefined;
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> = ({ subType, format, dropDownToggle, setDropDownToggle, handlePropertyChange }) => { const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
console.log(dateFormat, format, "dateFormat Line 26")
const [is24Hrs, setIs24Hrs] = useState<boolean>(true); const [is24Hrs, setIs24Hrs] = useState<boolean>(true);
const handleIs24HrsClick = (checked: boolean) => { const handleIs24HrsClick = (checked: boolean) => {
console.log(is24Hrs, checked, "line 30") if (dateFormat === TEMPORAL.TIME) {
if (subType === TEMPORAL.TIME) {
if (!checked) { if (!checked) {
handlePropertyChange("format", timeFormats[1].format, is24Hrs) handlePropertyChange("format", timeFormats[1].format, is24Hrs)
} else { } else {
handlePropertyChange("format", timeFormats[0].format, is24Hrs) 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) handlePropertyChange("format", (format.split(" ").slice(0, -1).join(" ")), !is24Hrs)
} }
setIs24Hrs(checked) setIs24Hrs(checked)
@ -53,7 +53,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
<div> <div>
<div className="flex justify-between"> <div className="flex justify-between">
<label htmlFor="" className="">Formats</label> <label htmlFor="" className="">Formats</label>
{(subType === TEMPORAL.DATE_TIME || subType === TEMPORAL.TIME) && {(dateFormat === TEMPORAL.DATE_TIME || dateFormat === TEMPORAL.TIME) &&
<div className="flex justify-center items-center gap-1.5"> <div className="flex justify-center items-center gap-1.5">
<input <input
checked={is24Hrs ? is24Hrs : false} checked={is24Hrs ? is24Hrs : false}
@ -72,7 +72,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200"> className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
<p className="cursor-pointer py-1"> <p className="cursor-pointer py-1">
{format ? format : dateTimeFormatMap['date'][0].format} {format ? format : dateTimeFormatMap['date'][0].format}
{/* {(subType !== TEMPORAL.DATE && subType !== TEMPORAL.TIME) ? (is24Hrs ? " " + timeFormats[0].format : " " + timeFormats[1].format) : ""} */} {/* {(dateFormat !== TEMPORAL.DATE && dateFormat !== TEMPORAL.TIME) ? (is24Hrs ? " " + timeFormats[0].format : " " + timeFormats[1].format) : ""} */}
</p> </p>
<MdKeyboardArrowDown /> <MdKeyboardArrowDown />
</div> </div>
@ -80,10 +80,10 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
{ {
dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT && dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT &&
<div className="shadow bg-slate-100 mt-1 border-[1px] max-h-[200px] overflow-y-auto border-slate-100 rounded"> <div className="shadow bg-slate-100 mt-1 border-[1px] max-h-[200px] overflow-y-auto border-slate-100 rounded">
{dateTimeFormatMap[subType].map((valObj, indx) => { {dateTimeFormatMap[dateFormat].map((valObj, indx) => {
// let val = showFormatEg ? valObj["example"] : valObj["format"] // let val = showFormatEg ? valObj["example"] : valObj["format"]
let val = valObj["format"] let val = valObj["format"]
if (subType === TEMPORAL.DATE_TIME) { if (dateFormat === TEMPORAL.DATE_TIME) {
if (is24Hrs) { if (is24Hrs) {
val = val + " " + timeFormats[0].format; val = val + " " + timeFormats[0].format;
} else { } else {
@ -94,7 +94,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
return ( return (
<div <div
key={indx} key={indx}
onClick={() => handlePropertyChange("format", valObj["format"], is24Hrs)} onClick={() => handlePropertyChange("format", val, is24Hrs)}
className="px-2 py-1 hover:bg-slate-200 cursor-pointer" className="px-2 py-1 hover:bg-slate-200 cursor-pointer"
> >
{val} {val}

51
src/utlity/types.tsx
View File

@ -97,6 +97,7 @@ export interface TagsProperties {
"currentTimeStamp"?: boolean; "currentTimeStamp"?: boolean;
"decimalPlace"?: number; "decimalPlace"?: number;
"multiSelect"?: boolean; "multiSelect"?: boolean;
"isCurrency"?: boolean;
} }
@ -136,6 +137,15 @@ interface StylesInterface {
textSize: number textSize: number
} }
export interface TagOptionAttrType{
label: string;
value: string;
pageIndex?: number;
selected?: boolean;
readOnly?: boolean;
dimensions?: Record<string, any>;
}
export interface DroppedItem { export interface DroppedItem {
id?: string; id?: string;
@ -143,6 +153,35 @@ export interface DroppedItem {
label?: string; label?: string;
type: 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: { dimensions: {
left: number; left: number;
top: number; top: number;
@ -159,25 +198,13 @@ export interface DroppedItem {
required?: boolean; required?: boolean;
maskType?: string;
maskCharacter?: string;
format?: string;
selectedValue?: string | null; selectedValue?: string | null;
radioGroups?: DroppedItem[]; radioGroups?: DroppedItem[];
options?: string[]
focusElementIndx?: number; focusElementIndx?: number;
value?: string | number; value?: string | number;
validation?: {
minLength: number;
maxLength: number;
error: string;
regex: string[];
};
isDeleted: boolean; isDeleted: boolean;
} }