{
{currDocTags.map((item, index) => {
- console.log(item, "micCheck 842")
- if (item.pageIndex !== page.index) return;
+ if (item.pageIndex !== page.index || item.documentId != doc.documentId) return <>;
return (
+ <>
-
setFocusElement({ ...item, focusElementIndx: index })}
- key={item.id}
- // draggable="false"
- onPointerDown={(e) => handleTagMouseDown(e, key, index)}
- className="absolute rounded dropped-item text-sm"
- // onClick={() => handleTagClick(key, index)}
- style={{
- left: `${item.dimensions.left}px`,
- top: `${item.dimensions.top}px`,
- width: `${item.dimensions.width}px`,
- height: `${item.dimensions.height}px`,
- border: `${((!hideTags && focusElement) && !transparentTags && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) ? '2px dashed #1c398e' : 'none'}`,
- // display: `${hideTags ? 'none' : 'block'}`
- }}
- >
+
setFocusElement({ ...item, focusElementIndx: index })}
+ key={item.id}
+ // draggable="false"
+ onPointerDown={(e) => handleTagMouseDown(e, key, index)}
+ className="absolute rounded dropped-item text-sm"
+ // onClick={() => handleTagClick(key, index)}
+ style={{
+ left: `${item.dimensions.left}px`,
+ top: `${item.dimensions.top}px`,
+ width: `${item.dimensions.width}px`,
+ height: `${item.dimensions.height}px`,
+ border: `${((!hideTags && focusElement) && !transparentTags && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) ? '2px dashed #1c398e' : 'none'}`,
+ // display: `${hideTags ? 'none' : 'block'}`
+ }}
+ >
- <>
- {selectedTag?.key && selectedTag.key === key && selectedTag.index === index &&
-
-
-
-
- {/*
+ {selectedTag?.key && selectedTag.key === key && selectedTag.index === index &&
+
+
+
+
+ {/*
{IconComponent}
*/}
-
{item.label}
-
{
- e.stopPropagation();
- handleRemoveTag(key, index)
- }} className='cursor-pointer' />
-
-
}
-
+
{item.label}
+
{
+ console.log("Handle Remove Tag Called");
- {/* TEXT FIELD - START */}
- {
- item.type === "TEXT" &&
-
+ e.stopPropagation();
+ handleRemoveTag(key, index)
+ }} className='cursor-pointer' />
+
+ }
+
- {/*
+
+ {/*
*/}
- {
- item.subType === "SINGLE_LINE" &&
{
+ const val = e.currentTarget.textContent;
+ handleTagUpdate(index, val as string);
+ }}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") e.preventDefault();
+ }}
+ contentEditable={true}
+ className="outline-none whitespace-nowrap w-full max-h-max"
+ >
+ }
+ {
+ item.subType === "PARAGRAPH" &&
{
+ const val = e.currentTarget.textContent;
+ handleTagUpdate(index, val as string);
+ }}
+ contentEditable={true}
+ className="w-full outline-none max-h-max"
+ >
+
+ }
+ {
+ item.subType === "PASSWORD" && item.mask &&
{
+ const val = e.currentTarget.textContent;
+ handleTagUpdate(index, val as string);
+ }}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") e.preventDefault();
+ }}
+ onFocus={() => {
+ }}
+ onBlur={(e) => {
+ let val = e.target.textContent;
+ if (typeof item.mask?.maskType === "string" && typeof val === "string") {
+ val = val.replace(/ /g, "");
+ e.target.textContent = maskUtils((item.mask as { maskType: string }).maskType, val, (item.mask as { maskCharacter: string }).maskCharacter)
+ }
+ }}
+ contentEditable={true}
+ className="outline-none whitespace-nowrap w-full max-h-max"
+ >
+ }
+
+ }
+ {/* TEXT FIELD - END */}
+
+
+ {/* CHECKBOX FIELD - START */}
+ {
+ item.type === "CHECKBOX" &&
+
+
{
- const val = e.currentTarget.textContent;
- handleTagUpdate(index, val as string);
- }}
- onKeyDown={(e) => {
- if (e.key === "Enter") e.preventDefault();
- }}
- contentEditable={true}
- className="outline-none whitespace-nowrap w-full max-h-max"
- >
- }
- {
- item.subType === "PARAGRAPH" &&
{
- const val = e.currentTarget.textContent;
- handleTagUpdate(index, val as string);
- }}
- contentEditable={true}
- className="w-full outline-none max-h-max"
- >
-
- }
- {
- item.subType === "PASSWORD" && item.mask &&
{
- const val = e.currentTarget.textContent;
- handleTagUpdate(index, val as string);
- }}
- onKeyDown={(e) => {
- if (e.key === "Enter") e.preventDefault();
- }}
- onFocus={() => {
- console.log("focus")
- }}
- onBlur={(e) => {
- let val = e.target.textContent;
- console.log(item.mask, val, "Line 586")
- if (typeof item.mask?.maskType === "string" && typeof val === "string") {
- val = val.replace(/ /g, "");
- console.log("onBlur", item.mask.maskCharacter, maskUtils((item.mask as { maskType: string }).maskType, val, (item.mask as { maskCharacter: string }).maskCharacter))
- e.target.textContent = maskUtils((item.mask as { maskType: string }).maskType, val, (item.mask as { maskCharacter: string }).maskCharacter)
- }
- }}
- contentEditable={true}
- className="outline-none whitespace-nowrap w-full max-h-max"
- >
- }
-
- }
- {/* TEXT FIELD - END */}
+ className="w-full px-2 outline-none"
+ type="checkbox" />
+
+ }
+ {/* CHECKBOX FIELD - END */}
- {/* CHECKBOX FIELD - START */}
- {
- item.type === "CHECKBOX" &&
-
-
-
- }
- {/* CHECKBOX FIELD - END */}
+ {/* SIGNATURE FIELD - START */}
+ {
+ item.type === "SIGNATURE" &&
+
handleSignClick(index, item.id)}
+ className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none bg-transparent" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
+ // style={{ height: item.dimensions.height + "px" }}
+ >
+ {/*
*/}
+ {
+ (!transparentTags && !hideTags && !(saved.save && (index in signConfObj && signConfObj[index].accepted))) ?
+ <>
+
+
+ :
+
+ src={`data:image/png;base64,${saved.signature}`}
+ />
+ }
+
+ }
+ {/* SIGNATURE FIELD - END */}
- {/* SIGNATURE FIELD - START */}
- {
- item.type === "SIGNATURE" &&
-
handleSignClick(index, item.id)}
- className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none bg-transparent" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
- // style={{ height: item.dimensions.height + "px" }}
- >
- {/*
*/}
- {
- (!transparentTags && !hideTags && !(saved.save && (index in signConfObj && signConfObj[index].accepted))) ?
- <>
-
-
+ {/* INITIALS FIELD - START */}
+ {
+ item.type === "INITIALS" &&
+
handleSignClick(index, item.id)}
+ className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
+ // style={{ height: item.dimensions.height + "px" }}
+ >
+ {((!transparentTags && !hideTags) && !(saved.save && (index in signConfObj) && signConfObj[index].accepted)) ?
+
:
- src={`data:image/png;base64,${saved.signature}`}
+ className="w-[100%] h-full"
+ // src={saved.initial as string}
+ src={`data:image/png;base64,${saved.initial}`}
/>
- }
-
- }
- {/* SIGNATURE FIELD - END */}
-
-
- {/* INITIALS FIELD - START */}
- {
- item.type === "INITIALS" &&
-
handleSignClick(index, item.id)}
- className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
- // style={{ height: item.dimensions.height + "px" }}
- >
- {((!transparentTags && !hideTags) && !(saved.save && (index in signConfObj) && signConfObj[index].accepted)) ?
-
- :
-
- }
-
- }
- {/* INITIALS FIELD - END */}
-
-
- {/* STAMP FIELD - START */}
- {
- item.type === "STAMP" &&
-
handleStampClick(index)}
- className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
- // style={{ height: item.dimensions.height + "px" }}
- >
- {!transparentTags && !hideTags ?
-
- :
-
- }
-
- }
- {/* STAMP FIELD - END */}
-
- {/* IMAGE FIELD - START */}
- {
- item.type === "FILE" &&
-
handleSignClick(index)}
- className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
- // style={{ height: item.dimensions.height + "px" }}
- >
- {!transparentTags && !hideTags ?
-
- :
-
- }
-
- }
- {/* IMAGE FIELD - END */}
-
-
- {/* SELECT FIELD - START */}
- {
- item.type === "SELECT" &&
-
-
-
- }
- {/* SELECT FIELD - END */}
+
+ }
+ {/* INITIALS FIELD - END */}
+ {/* STAMP FIELD - START */}
+ {
+ item.type === "STAMP" &&
+
handleStampClick(index)}
+ className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
+ // style={{ height: item.dimensions.height + "px" }}
+ >
+ {!transparentTags && !hideTags ?
+
+ :
+
+ }
+
+ }
+ {/* STAMP FIELD - END */}
+
+ {/* IMAGE FIELD - START */}
+ {
+ item.type === "FILE" &&
+
handleSignClick(index)}
+ className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
+ // style={{ height: item.dimensions.height + "px" }}
+ >
+ {!transparentTags && !hideTags ?
+
+ :
+
+ }
+
+ }
+ {/* IMAGE FIELD - END */}
- {/* TEMPORAL FIELD - START */}
-
- {
- item.type === "TEMPORAL" &&
-
-
- {(item.id && item.id in dateValues) ? dateValues[item.id] : item.subType?.toLowerCase()}
-
-
{
- e.target.showPicker?.()
- if (item.id) setIsDateOpen(item.id)
- }}
- onBlur={(e) => {
- 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.id) return;
- setIsDateOpen(null);
- setDateValues({
- ...dateValues,
- [item.id as string]: dayjs(val).format(item.format)
+ {/* SELECT FIELD - START */}
+ {
+ item.type === "SELECT" &&
+
+
- }
-
- {/* TEMPORAL FIELD - END */}
-
-
- {/* Attachment Field - START */}
- {
- item.type.toLowerCase() === TagsTypes.ATTACHMENT &&
-
handleStampClick(index)}
- className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
- // style={{ height: item.dimensions.height + "px" }}
- >
- {!transparentTags && !hideTags ?
- (
-
- {typeToIconMap.ATTACHMENT}
-
- )
- :
- (
-
- {typeToIconMap.ATTACHMENT}
-
- )
- }
-
- }
- {/* Attachment Field - END */}
-
-
-
- {/* Focus Show Element */}
- {
- (!transparentTags && !hideTags) && (focusElement && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) &&
- <>
-
-
{focusElement.label}
+ }
+
+ }
+ {/* SELECT FIELD - END */}
+
+
+
+
+ {/* TEMPORAL FIELD - START */}
+
+ {
+ item.type === "TEMPORAL" &&
- {/*
+
+ {(item.id && item.id in dateValues) ? dateValues[item.id] : item.subType?.toLowerCase()}
+
+
{
+ e.target.showPicker?.()
+ if (item.id) setIsDateOpen(item.id)
+ }}
+ onBlur={(e) => {
+ 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.id) return;
+ setIsDateOpen(null);
+ setDateValues({
+ ...dateValues,
+ [item.id as string]: dayjs(val).format(item.format)
+ })
+ }}
+ style={{ opacity: `${item.id === isDateOpen ? "100" : "0"}` }}
+ className="w-full px-2 outline-none absolute"
+ onClick={() => {
+
+ }}
+ type={`${item.subType?.toLowerCase() === "date" ? "date" : (item.subType?.toLowerCase() === "time" ? "time" : "datetime-local")}`}
+ />
+
+
+ }
+
+ {/* TEMPORAL FIELD - END */}
+
+
+ {/* Attachment Field - START */}
+ {
+ item.type.toLowerCase() === TagsTypes.ATTACHMENT &&
+
handleStampClick(index)}
+ className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
+ // style={{ height: item.dimensions.height + "px" }}
+ >
+ {!transparentTags && !hideTags ?
+ (
+
+ {typeToIconMap.ATTACHMENT}
+
+ )
+ :
+ (
+
+ {typeToIconMap.ATTACHMENT}
+
+ )
+ }
+
+ }
+ {/* Attachment Field - END */}
+
+
+
+ {/* Focus Show Element */}
+ {
+ (!transparentTags && !hideTags) && (focusElement && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) &&
+ <>
+
+
+ {/*
*/}
-
-
-
- }
-
-
+
+
+
+ }
+