Client Side Fill Tags and Attribute Update

This commit is contained in:
=bhagwanSingh 2025-08-19 18:47:29 +05:30
parent 69a9ec9fcf
commit 6981d0fc10
4 changed files with 50 additions and 23 deletions

View File

@ -28,6 +28,7 @@ import SignCompletionScreen from "./SignCompletionScreen";
import api from "../../config/api";
import RightSideBar from "../process/processStepTwo/rightSideBar/RightSideBar";
import { RiDragMoveFill } from "react-icons/ri";
import { handleGroupBorderPosition } from "../../utlity/tagGroupConUtils";
@ -71,7 +72,7 @@ interface TransactionType {
interface TagSubmitData {
id: string;
type?: string;
subType: string;
subType?: string;
signed: boolean;
value: string;
}
@ -152,7 +153,7 @@ const SignDocument = () => {
const [tagJson, setTagJson] = useState<DroppedItem[] | []>([]);
const [transaction, setTransaction] = useState<TransactionType | null>(null);
const [recSignStatus, setRecSignStatus] = useState<string | null>(null);
const [droppedItems, setDroppedItems] = useState([]);
const [droppedItems, setDroppedItems] = useState<DroppedItem[]>([]);
const [signTagId, setSignTagId] = useState<number>(0)
const [stamp, setStamp] = useState<StampTypeObj>({ open: false, blob: "" });
@ -444,7 +445,7 @@ const SignDocument = () => {
const tagData: TagSubmitData = {
id: tag.id as string,
type: tag.type,
subType: tag.subType ? tag.subType : "",
// subType: tag.subType ? tag.subType : "",
signed: true,
value: tag.value ? tag.value as string : ""
}
@ -662,7 +663,7 @@ const SignDocument = () => {
let prepData = {
...data.properties,
icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,
type: dragElemData.label,
type: dragElemData.label.toUpperCase(),
label: dragElemData.label,
// subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
dimensions: {
@ -700,7 +701,7 @@ const SignDocument = () => {
// }
}
if (prepData.type === "temporal") {
if (prepData.type.toLowerCase() === "temporal") {
prepData.currentTimeStamp = true;
}
@ -853,10 +854,7 @@ const SignDocument = () => {
(async () => {
if ("id" in tag) {
try {
const accountId = 4;
const transactionId = 23;
const response = await api.delete(`/api/accounts/${accountId}/transactions/${transactionId}/recipients/${recipientId}/tags/${tag.id}`)
const response = await api.delete(`/api/sign/tags?recipientId=${recipientId}`, { data: [ { tagId: tag.id } ] })
if (response.status !== 200) throw "Tag Deletion error"
} catch (err) {
return;
@ -1170,7 +1168,7 @@ const SignDocument = () => {
</input> */}
{
!item.multiLine && <p
!item.multiLine && !item.maskType && <p
// name={item.id}
// style={{ height: item.dimensions.height + "px" }}
onInput={(e) => {
@ -1185,15 +1183,14 @@ const SignDocument = () => {
></p>
}
{
item.multiLine && <p
item.multiLine && !item.maskType && <p
onInput={(e) => {
const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string);
}}
contentEditable={true}
className="w-full outline-none max-h-max"
>
</p>
></p>
}
{
"maskType" in item && "maskCharacter" in item && item.maskType && <p
@ -1208,7 +1205,7 @@ const SignDocument = () => {
// }}
onBlur={(e) => {
let val = e.target.textContent;
if (typeof item.maskType === "string" && typeof val === "string") {
if (typeof item.maskType === "string" && typeof val === "string" && item.maskCharacter) {
val = val.replace(/ /g, "");
e.target.textContent = maskUtils(item.maskType, val, item.maskCharacter)
}
@ -1306,6 +1303,25 @@ const SignDocument = () => {
{/* NAME FIELD - END */}
{/* NUMBER FIELD - START */}
{
item.type === "NUMBER" &&
<div
id={item.id}
tabIndex={1}
className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
>
{
<input
type="number"
className="outline-none h-full max-w-max"
/>
}
</div>
}
{/* NUMBER FIELD - END */}
{/* COMPANY FIELD - START */}
{
@ -1501,7 +1517,7 @@ const SignDocument = () => {
<p
style={{ opacity: `${item.id === isDateOpen ? "0" : "100"}` }}
className="w-full h-full rounded pl-1 pt-1 whitespace-nowrap">
{(item.id && item.id in dateValues) ? dateValues[item.id] : item.subType?.toLowerCase()}
{(item.id && item.id in dateValues) ? dateValues[item.id] : item.dateFormat?.toLowerCase()}
</p>
<input
name={item.id}
@ -1513,7 +1529,7 @@ const SignDocument = () => {
let val = e.target.value;
// Adding dummy time in case of time as it giving Invalid date without that
if (item.subType?.toLowerCase() === "time") val = "09/02/2025 " + val
if (item.dateFormat?.toLowerCase() === "time") val = "09/02/2025 " + val
if (!item.id) return;
setIsDateOpen(null);
@ -1527,7 +1543,7 @@ const SignDocument = () => {
onClick={() => {
}}
type={`${item.subType?.toLowerCase() === "date" ? "date" : (item.subType?.toLowerCase() === "time" ? "time" : "datetime-local")}`}
type={`${item.dateFormat?.toLowerCase() === "date" ? "date" : (item.dateFormat?.toLowerCase() === "time" ? "time" : "datetime-local")}`}
/>
</div>
@ -1687,10 +1703,6 @@ const SignDocument = () => {
<StampUpload stamp={stamp.blob} setStamp={setStamp} />
</div>
{/* <SignatureCon recipientId={recipientId as string} openSign={openSign} setOpenSign={setOpenSign} savedSignature={savedSignature} setSavedSignature={setSavedSignature} />
<InitialCon openInitial={openInitial} setOpenInitial={setOpenInitial} savedInitial={savedInitial} setSavedInitial={setSavedInitial} /> */}

View File

@ -29,7 +29,7 @@ import DirectionalControls from "./DirectionalControls";
export interface DroppedItemProps {
droppedItems: DroppedItem[]
selectedTag: DroppedItem
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>> | React.Dispatch<React.SetStateAction<DroppedItem[]>>
selTagKey: string,
selTagIndx: number,
signClient: boolean,

View File

@ -55,7 +55,7 @@ interface AddSignatureModalProps {
setOpenSign: React.Dispatch<React.SetStateAction<boolean>>;
saved: SaveType;
setSaved: React.Dispatch<React.SetStateAction<SaveType>>;
signTagId: boolean
signTagId: number
}
interface Account {

View File

@ -1,3 +1,5 @@
import { MASKCHARACTER } from "../components/process/processStepTwo/rightSideBar/RightSideBar";
const type_all = (str: string, changeWith: string): string => {
return str.replace(/./g, changeWith);
};
@ -38,6 +40,19 @@ const type_social_insurance = (str: string, changeWith: string): string => {
};
const maskUtils = (type: string, original: string, changeWith: string): string => {
switch (changeWith) {
case MASKCHARACTER.ASTERISK:
changeWith = "*";
break;
case MASKCHARACTER.DOT:
changeWith = ".";
break;
case MASKCHARACTER.X:
changeWith = "x";
break;
}
switch (type) {
case "ALL":
return type_all(original, changeWith);