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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

2
src/components/signature/SignCon.tsx
View File

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

15
src/utlity/maskUtils.ts
View File

@ -1,3 +1,5 @@
import { MASKCHARACTER } from "../components/process/processStepTwo/rightSideBar/RightSideBar";
const type_all = (str: string, changeWith: string): string => { const type_all = (str: string, changeWith: string): string => {
return str.replace(/./g, changeWith); 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 => { 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) { switch (type) {
case "ALL": case "ALL":
return type_all(original, changeWith); return type_all(original, changeWith);