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

Tags Update and style update client side 16-10

This commit is contained in:
=bhagwanSingh 2025-10-16 17:52:27 +05:30
parent 759468ed84
commit 950601171c
6 changed files with 169 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
src/components/client/TagsCon.tsx
View File

@ -392,7 +392,7 @@ const TagsCon: React.FC<TagsConProps> = ({
<div <div
id={item.navigationOrder} id={item.navigationOrder}
tabIndex={1} tabIndex={1}
className={`max-h-max 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`} 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`}
// style={{ height: item.dimensions.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
> >
@ -414,7 +414,14 @@ const TagsCon: React.FC<TagsConProps> = ({
if (e.key == "Enter") e.preventDefault(); if (e.key == "Enter") e.preventDefault();
}} }}
contentEditable={true} contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max" className={`outline-none whitespace-nowrap w-full`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none"
}}
>{item.value ?? ""}</p> >{item.value ?? ""}</p>
} }
{ {
@ -425,7 +432,14 @@ const TagsCon: React.FC<TagsConProps> = ({
handleTagUpdate(item.originalIndex, val as string); handleTagUpdate(item.originalIndex, val as string);
}} }}
contentEditable={true} contentEditable={true}
className="w-full outline-none max-h-max" className={`w-full outline-none`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none"
}}
>{item.value ?? ""}</p> >{item.value ?? ""}</p>
} }
{ {
@ -448,7 +462,14 @@ const TagsCon: React.FC<TagsConProps> = ({
} }
}} }}
contentEditable={true} contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max" className={`outline-none whitespace-nowrap w-full`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none"
}}
></p> ></p>
} }
</div> </div>
@ -498,7 +519,14 @@ const TagsCon: React.FC<TagsConProps> = ({
} }
}} }}
// contentEditable={true} // contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max" className={`outline-none whitespace-nowrap w-full max-h-max`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none"
}}
> >
{item.value ?? ""} {item.value ?? ""}
</p> </p>
@ -534,7 +562,14 @@ const TagsCon: React.FC<TagsConProps> = ({
}} }}
// contentEditable={true} // contentEditable={true}
className={`outline-none whitespace-nowrap w-full max-h-max text-[${item.color}] text-[${item.textSize}px] ${item.italic ? "italic" : ""} ${item.bold ? "font-semibold" : ""} ${item.underline ? "underline" : ""}`} className={`outline-none whitespace-nowrap w-full max-h-max`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none"
}}
> >
{item.value ?? ""} {item.value ?? ""}
</p> </p>
@ -564,7 +599,14 @@ const TagsCon: React.FC<TagsConProps> = ({
handleTagUpdate(item.originalIndex, val as string); handleTagUpdate(item.originalIndex, val as string);
}} }}
type="number" type="number"
className="outline-none h-full max-w-max" className={`outline-none max-w-max`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none"
}}
/> />
} }
</div> </div>
@ -599,7 +641,14 @@ const TagsCon: React.FC<TagsConProps> = ({
}} }}
contentEditable={true} contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max" className={`outline-none whitespace-nowrap w-full max-h-max`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none"
}}
></p> ></p>
} }
</div> </div>
@ -618,7 +667,14 @@ const TagsCon: React.FC<TagsConProps> = ({
<input <input
name={item.id} name={item.id}
// style={{ height: item.dimensions.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
className="w-full px-2 outline-none" className={`w-full px-2 outline-none`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none"
}}
type="checkbox" /> type="checkbox" />
</div> </div>
} }
@ -649,7 +705,21 @@ const TagsCon: React.FC<TagsConProps> = ({
)) ? ( )) ? (
<FaSignature className="text-lg text-slate-600" /> <FaSignature className="text-lg text-slate-600" />
) : saved && saved.saveType != null && saved.saveType == "SELECT" ? ( ) : saved && saved.saveType != null && saved.saveType == "SELECT" ? (
<><span className='absolute left-0 bottom-0' style={{ fontFamily: saved?.font, fontSize: "42px" }}>{saved.signature}</span></> <>
<span
className={`absolute left-0 bottom-0`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none",
fontFamily: saved?.font
}}
>
{saved.signature}
</span>
</>
) : ( ) : (
<img <img
style={{ style={{
@ -689,7 +759,21 @@ const TagsCon: React.FC<TagsConProps> = ({
)) ? )) ?
<TbSignature className="text-lg text-slate-600" /> <TbSignature className="text-lg text-slate-600" />
: saved && saved.saveType != null && saved.saveType == "SELECT" ? ( : saved && saved.saveType != null && saved.saveType == "SELECT" ? (
<><span className='absolute left-0 bottom-0' style={{ fontFamily: saved?.font, fontSize: "42px" }}>{saved.initial}</span></> <>
<span
className={`absolute left-0 bottom-0`}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none",
fontFamily: saved?.font
}}
>
{saved.initial}
</span>
</>
) : ) :
(<img (<img
style={{ style={{
@ -760,6 +844,13 @@ const TagsCon: React.FC<TagsConProps> = ({
const val = e.currentTarget.value; const val = e.currentTarget.value;
handleTagUpdate(item.originalIndex, val as string); handleTagUpdate(item.originalIndex, val as string);
}} }}
style={{
color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none"
}}
> >
<option value="">Select</option> <option value="">Select</option>
{item.options && item.options.map((obj, indx) => { {item.options && item.options.map((obj, indx) => {
@ -788,11 +879,18 @@ const TagsCon: React.FC<TagsConProps> = ({
<div <div
id={item.navigationOrder} id={item.navigationOrder}
tabIndex={1} tabIndex={1}
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"}`} className={`flex justify-end items-end h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100"}`}
> >
<p <p
style={{ opacity: `${item.id == isDateOpen ? "0" : "100"}` }} style={{
className="w-full h-full rounded pl-1 pt-1 whitespace-nowrap"> color: item.styles.color,
fontSize: `${item.styles?.textSize}px`,
fontStyle: item.styles.italic ? "italic" : "normal",
fontWeight: item.styles.bold ? "600" : "400",
textDecoration: item.styles.underline ? "underline" : "none",
opacity: `${item.id == isDateOpen ? "0" : "100"}`
}}
className="w-full rounded whitespace-nowrap">
{(item.id && item.id in dateValues) ? dateValues[item.id] : item.value ? item.value : item.dateFormat?.toLowerCase()} {(item.id && item.id in dateValues) ? dateValues[item.id] : item.value ? item.value : item.dateFormat?.toLowerCase()}
</p> </p>
<input <input
@ -809,6 +907,15 @@ const TagsCon: React.FC<TagsConProps> = ({
if (!item.id) return; if (!item.id) return;
setIsDateOpen(null); setIsDateOpen(null);
if (!val) {
setDateValues({
...dateValues,
[item.id as string]: item.value ? item.value as string : ""
});
return;
}
setDateValues({ setDateValues({
...dateValues, ...dateValues,
[item.id as string]: dayjs(val).format(item.format) [item.id as string]: dayjs(val).format(item.format)
@ -819,7 +926,7 @@ const TagsCon: React.FC<TagsConProps> = ({
handleTagUpdate(item.originalIndex, val as string); handleTagUpdate(item.originalIndex, val as string);
}} }}
style={{ opacity: `${item.id == isDateOpen ? "100" : "0"}` }} style={{ opacity: `${item.id == isDateOpen ? "100" : "0"}` }}
className="w-full px-2 outline-none absolute" className="w-full outline-none absolute"
onClick={() => { onClick={() => {
}} }}

24
src/components/home/StartNow.tsx
View File

@ -21,6 +21,7 @@ const StartNow = () => {
isActive: true isActive: true
}); });
const [filesError, setFilesError] = useState<string>("");
const userData = useSelector((state: RootState) => state.user); const userData = useSelector((state: RootState) => state.user);
@ -74,10 +75,30 @@ const StartNow = () => {
} }
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => { const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
setFilesError("");
await dispatch(resetRecipients()) await dispatch(resetRecipients())
await dispatch(resetDocuments()) await dispatch(resetDocuments())
const selectedFiles = e.target.files ? Array.from(e.target.files) : []; const selectedFiles = e.target.files ? Array.from(e.target.files) : [];
if (selectedFiles.length > 0) { if (selectedFiles.length > 0) {
const maxSize = 10 * 1024 * 1024; // 10 MB in bytes
const oversizedFiles = selectedFiles.filter(file => file.size > maxSize);
// Check for non-PDF files
const nonPdfFiles = selectedFiles.filter(file => file.type !== "application/pdf");
if (nonPdfFiles.length > 0) {
const fileNames = nonPdfFiles.map(file => file.name).join(", ");
setFilesError(`The following file(s) are not PDFs:\n${fileNames}`);
return;
}
// Check for oversized files
if (oversizedFiles.length > 0) {
const fileNames = oversizedFiles.map(file => file.name).join(", ");
setFilesError(`The following file(s) exceed 10MB:\n${fileNames}`);
return;
}
setFiles((prev) => [...selectedFiles]); setFiles((prev) => [...selectedFiles]);
// handleUpload(selectedFiles); // handleUpload(selectedFiles);
if (transactionModal.isActive && selectedFiles.length > 1) { if (transactionModal.isActive && selectedFiles.length > 1) {
@ -152,13 +173,14 @@ const StartNow = () => {
Upload File Upload File
</button> </button>
{filesError && <span className="text-red-500 text-xs">{filesError}</span>}
<input <input
type="file" type="file"
ref={fileInputRef} ref={fileInputRef}
className="hidden" className="hidden"
onChange={handleFileChange} onChange={handleFileChange}
accept=".pdf,.doc,.docx,.jpg,.png,.jpeg,.txt" accept=".pdf"
multiple multiple
/> />

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

@ -229,6 +229,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
) )
setDroppedItems(droppedItemsUpdateFalse); setDroppedItems(droppedItemsUpdateFalse);
return responses;
} catch (error) { } catch (error) {
console.error("Error submitting recipient tags:", error); console.error("Error submitting recipient tags:", error);
} }
@ -254,7 +255,8 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
} }
let tagsData = groupByRecipientId(updatedTags); let tagsData = groupByRecipientId(updatedTags);
await sendTagsToRecipients(tagsData, accountId, transactionId); const responses = await sendTagsToRecipients(tagsData, accountId, transactionId);
if(responses && "status" in responses && responses?.status !== 200) return
// return // return
// SENDING Transaction - START // SENDING Transaction - START
if (!save) { if (!save) {
@ -372,14 +374,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
width: dragElemData.width, width: dragElemData.width,
height: dragElemData.height, height: dragElemData.height,
}, },
styles: dragElemData.label == "text" ? { styles: null,
"font": "Great Vibes",
"italic": false,
"bold": false,
"underline": false,
"color": "black",
"textSize": data.fontSize
} : null,
documentId: docId, documentId: docId,
pageIndex: pageIndex, pageIndex: pageIndex,
recipientId: dragElemData.recipientId, recipientId: dragElemData.recipientId,

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

@ -135,7 +135,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
const priorityOrder = ['SIGNATURE', 'INITIALS', 'STAMP']; const priorityOrder = ['SIGNATURE', 'INITIALS', 'STAMP'];
const data = res.data.filter((obj, indx) => { const data = res.data.filter((obj, indx) => {
if (obj.type == "STAMP" || obj.type == "RADIO" || obj.type == "CHECKBOX" || obj.type == "ATTACHMENT") return false if (obj.type == "STAMP" || obj.type == "RADIO" || obj.type == "CHECKBOX" || obj.type == "ATTACHMENT" || obj.type == "SELECT") return false
return true return true
}); });
@ -254,7 +254,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
const priorityOrder = ['SIGNATURE', 'INITIALS', 'STAMP']; const priorityOrder = ['SIGNATURE', 'INITIALS', 'STAMP'];
data = data.filter((obj, indx) => { data = data.filter((obj, indx) => {
if (obj.type == "STAMP" || obj.type == "RADIO" || obj.type == "CHECKBOX" || obj.type == "ATTACHMENT") return false if (obj.type == "STAMP" || obj.type == "RADIO" || obj.type == "CHECKBOX" || obj.type == "ATTACHMENT" || obj.type == "SELECT") return false
return true return true
}); });

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

@ -166,12 +166,22 @@ const RightSideBar: React.FC<DroppedItemProps> = (
useEffect(() => { useEffect(() => {
if (!selectedTag) return; if (!selectedTag) return;
if (selectedTag.type.toLowerCase() === TagsTypes.SIGNATURE || selectedTag.type.toLowerCase() === TagsTypes.INITIALS) {
if (!selectedTag.styles) {
handlePropertyChange("styles", { ...defaultStyles, textSize: 40 });
setStyles({ ...defaultStyles, textSize: 40 });
} else {
setStyles({ ...defaultStyles, ...selectedTag.styles });
}
} else {
if (!selectedTag.styles) { if (!selectedTag.styles) {
handlePropertyChange("styles", defaultStyles); handlePropertyChange("styles", defaultStyles);
setStyles(defaultStyles); setStyles(defaultStyles);
} else { } else {
setStyles({ ...defaultStyles, ...selectedTag.styles }); setStyles({ ...defaultStyles, ...selectedTag.styles });
} }
}
}, [selectedTag]); }, [selectedTag]);

4
src/components/templates/TemplateDeleteWarnModal.tsx
View File

@ -12,9 +12,9 @@ const TemplateDeleteWarnModal = ({ setShowTemplateDeleteWarnModal, onConfirm }:
return ( return (
<div className="fixed inset-0 backdrop-blur-sm bg-black/30 flex items-center justify-center z-50"> <div className="fixed inset-0 backdrop-blur-sm bg-black/30 flex items-center justify-center z-50">
<div className="bg-white rounded-lg shadow-xl p-6 w-100"> <div className="bg-white rounded-lg shadow-xl p-6 w-100">
<h3 className="text-lg font-medium text-gray-800 mb-4">Confirm Self Sign</h3> <h3 className="text-lg font-medium text-gray-800 mb-4">Delete Confirmation.</h3>
<p className="text-gray-600 mb-6"> <p className="text-gray-600 mb-6">
Are you sure you want to proceed with self sign? This will remove all the recipient that you added. Are you sure you want to proceed with deleting this template? This action cannot be undone.
</p> </p>
<div className="flex justify-end gap-3"> <div className="flex justify-end gap-3">
<button <button