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();
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)}

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

@ -84,7 +84,7 @@ const StartSection = () => {
<section className="px-4 pt-2 pb-3 w-full">
<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 />
@ -124,7 +124,7 @@ const StartSection = () => {
</div>
<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>
<TransactionDataTable />
</section>

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

@ -139,7 +139,7 @@ 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,
@ -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,19 +299,15 @@ const ProcessStepOne = () => {
status: "CREATED"
})
if (isSendNow) {
dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS));
setTimeout(() => {
// navigate("/");
}, 1000);
}
else {
setTimeout(() => {
// if (isSendNow) {
// dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS));
// }
// else {
// setTimeout(() => {
dispatch(resetDocuments())
dispatch(resetRecipients())
dispatch(hideLoader());
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
console.log(`/process-step-two/${accountId}/template/${transactionId}`)
dispatch(hideLoader());
if (!saveAndClose) {
navigate(`/process-step-two/${accountId}/template/${transactionId}`)
} else {
@ -318,10 +315,11 @@ const ProcessStepOne = () => {
}
} else {
if (signType === SignTypeEnum.selfSign) {
dispatch(showLoader("Processing eSignature..."));
(async () => {
try {
const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
console.log(res, "Check123");
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);
@ -331,8 +329,8 @@ const ProcessStepOne = () => {
navigate(`/process-step-two/${accountId}/${transactionId}`);
}
}
}, 1000);
}
// }, 1000);
// }
} catch (error) {
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 }
let tagsData = []
// const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
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
}
// 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,
// }
// 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
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 ("format" in dropTag) {
// updatedTagData.format = `${dropTag.subType}`.toUpperCase();
// updatedTagData.dateFormat = dropTag.format;
// updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
// if("format" in dropTag && dropTag.format) {
// updatedTagData.subType = dropTag.format.toLowerCase();
// updatedTagData.format = dropTag.dateFormat;
// }
if("format" in dropTag && dropTag.format) {
updatedTagData.subType = dropTag.format.toLowerCase();
updatedTagData.format = dropTag.dateFormat;
}
// if (`${dropTag.type}`.toLowerCase() === "number") {
// updatedTagData.decimalPlace = dropTag.decimalPlace
// updatedTagData.isCurrency = dropTag.isCurrency
// }
if (`${dropTag.type}`.toLowerCase() === "number") {
updatedTagData.decimalPlace = dropTag.decimalPlace
updatedTagData.isCurrency = dropTag.isCurrency
}
// if (dropTag.type === "TEXT") {
// // updatedTagData.multiLine = dropTag.subType === "paragraph"
if (dropTag.type === "TEXT") {
// updatedTagData.multiLine = dropTag.subType === "paragraph"
// if(dropTag.multiLine) {
// updatedTagData.subtype = TEXT.PARAGRAPH
// } else {
// updatedTagData.subtype = TEXT.SINGLE_LINE
// }
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 ("maskType" in dropTag) {
updatedTagData.maskCharacter = mask.character
updatedTagData.maskType = mask.type
}
}
// // if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required;
// 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.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT"
// if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options;
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);
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<DocumentContainerProps> = ({ 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<DocumentContainerProps> = ({ transactionSaving
// HANDLE DROP - START
const handleDrop = (event: React.DragEvent<HTMLDivElement>, docId: string, documentId: number, pageIndex: number) => {
console.log("// HANDLE DROP - START")
event.preventDefault();
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(() => {
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`);

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

@ -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<React.SetStateAction<DROPDOWNTOGGLE | null>>;
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 (
<div className="flex flex-col">
@ -20,21 +76,78 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({selectedType, subT
<div
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.TYPE ? null : DROPDOWNTOGGLE.TYPE)}
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 />
</div>
{dropDownToggle === DROPDOWNTOGGLE.TYPE &&
<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
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`}
>
{selectedType[val as keyof typeof selectedType] === "date_time" ? "Date Time" : selectedType[val as keyof typeof selectedType]}
</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 }) => {
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<DROPDOWNTOGGLE | null>(null);
const [decimalPlace, setDecimalPlace] = useState<number>(2)
const [decimalPlace, setDecimalPlace] = useState<number>(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<DroppedItemProps> = ({ 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)
@ -433,6 +436,10 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
}
console.log(selectedType, "line 434");
return (
<>
{/* Right Side Bar Start */}
@ -468,7 +475,8 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
selectedType && Object.keys(selectedType).length > 0 &&
<CommonAttrDropDown
selectedType={selectedType}
subType={selectedTag.subType}
// subType={selectedTag.subType}
selectedTag={selectedTag}
dropDownToggle={dropDownToggle}
setDropDownToggle={setDropDownToggle}
handlePropertyChange={handlePropertyChange} />
@ -492,7 +500,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
selectedTag?.subType === TEMPORAL.TIME ||
selectedTag?.subType === TEMPORAL.DATE_TIME) &&
<TemporalDateAttr
subType={selectedTag.subType}
dateFormat={selectedTag.dateFormat ?? TEMPORAL.DATE}
format={selectedTag.format}
dropDownToggle={dropDownToggle}
setDropDownToggle={setDropDownToggle}
@ -502,7 +510,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
{/* NUMBER - DECIMAL PLACES */}
{
selectedTag?.subType === NUMBER.DECIMAL &&
selectedTag?.type.toLowerCase() === TagsTypes.NUMBER &&
<div>
<label htmlFor="" className="">Decimal Places</label>
<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
options={selectedTag.options}
options={selectedTag.options?? []}
selTagKey={selTagKey}
selTagIndx={selTagIndx}
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 { DroppedItemsObj } from "../DocumentContainer";
import { IoMdClose } from "react-icons/io";
import { TagOptionAttrType } from "../../../../utlity/types";
interface SelectTagAttrInt {
options: string[] | undefined;
options: TagOptionAttrType[];
selTagKey: string;
selTagIndx: number;
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>;
@ -12,10 +13,10 @@ interface SelectTagAttrInt {
}
const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagIndx, setDroppedItems, handlePropertyChange }) => {
const [selectedOption, setSelectedOption] = useState<string>()
const [selectedOption, setSelectedOption] = useState<TagOptionAttrType>({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<SelectTagAttrInt> = ({ 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<SelectTagAttrInt> = ({ options, selTagKey, selTagI
<label htmlFor="" className="">Add Options</label>
<input
type="text"
onChange={(e) => 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<SelectTagAttrInt> = ({ options, selTagKey, selTagI
}}
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
key={indx}
className="flex justify-between items-center px-2 py-1 my-1 rounded bg-slate-100">
<p>{val}</p>
<p>{obj.label}</p>
<IoMdClose
onClick={() =>
// setSelectedOptions(prev =>

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

@ -14,28 +14,28 @@ const dateTimeFormatMap = {
}
interface TemporalDateAttrInt {
subType: string;
dateFormat: string;
format: string | undefined;
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> = ({ 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 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<TemporalDateAttrInt> = ({ subType, format, drop
<div>
<div className="flex justify-between">
<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">
<input
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">
<p className="cursor-pointer py-1">
{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>
<MdKeyboardArrowDown />
</div>
@ -80,10 +80,10 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
{
dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT &&
<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 = 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<TemporalDateAttrInt> = ({ subType, format, drop
return (
<div
key={indx}
onClick={() => handlePropertyChange("format", valObj["format"], is24Hrs)}
onClick={() => handlePropertyChange("format", val, is24Hrs)}
className="px-2 py-1 hover:bg-slate-200 cursor-pointer"
>
{val}

51
src/utlity/types.tsx
View File

@ -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<string, any>;
}
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;
@ -159,25 +198,13 @@ export interface DroppedItem {
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;
}