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

checkbox , temporal , radio

This commit is contained in:
JaiPandey425 2025-07-24 12:35:40 +05:30
parent 1ce24675ba
commit 092b7cc0ca
8 changed files with 673 additions and 319 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

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

@ -12,6 +12,8 @@ interface CommonAttrDropDownInt {
const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({selectedType, subType, dropDownToggle, setDropDownToggle, handlePropertyChange}) => {
console.log("selectedType, subType,",selectedType, subType)
return (
<div className="flex flex-col">
<label htmlFor="" className="">Type</label>

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

@ -33,9 +33,9 @@ export interface DroppedItemProps {
selTagIndx: number,
DirectionalControlsProps: {
onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void;
disabled?: boolean;
stepSize?: number;
className?: string;
disabled?: boolean;
stepSize?: number;
className?: string;
}
}
@ -107,7 +107,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap];
// console.log("selectedTag", selectedTag, selectedType)
console.log("selectedTag", selectedTag, selectedType)
@ -118,25 +118,33 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
const [styleOpen, setStyleOpen] = useState(false);
const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => {
console.log("Handle Property Change Called", "changeTo", changeTo, "changeWith", changeWith)
console.log("changeTo", changeTo, "changeWith", changeWith)
if (changeTo === '' || changeWith === '') return
if (changeWith === "paragraph") {
return
}
if (changeTo === "subType" && (changeWith === TEMPORAL.DATE || changeWith === TEMPORAL.DATE_TIME || changeWith === TEMPORAL.TIME)) {
// let change: string = changeWith;
// if (change === "DATE TIME") {
// change = "DATE_TIME"
// }
setDroppedItems((prev) => (
{
setDroppedItems((prev) => {
console.log("Temporal30", prev);
return {
...prev,
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
? prev[selTagKey].map((item, i) =>
i === selTagIndx ? { ...item, [changeTo]: changeWith || "", format: "", update: true } : item
)
: [],
}// Provide a fallback in case it's undefined or not an array
));
: [], // Fallback in case it's undefined or not an array
};
});
} else if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
console.log("Second check")
console.log("Line 161")
setDroppedItems((prev) => (
{
@ -150,6 +158,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
));
}
else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) {
console.log("Third check")
let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace;
const isCurrency = changeWith === NUMBER.CURRENCY;
// const currencyType = null
@ -166,6 +175,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
));
} else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
console.log("Fourth Check")
let val = timeFormats[0].format;
if (!is24Hrs) {
val = timeFormats[1].format
@ -183,7 +193,6 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
} else {
setDroppedItems((prev) => {
console.log('Previous state:', prev);
const updatedItems = Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) =>
@ -302,7 +311,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
<RecipientsAttrCon selectedRecipientId={selectedTag.recipientId} handlePropertyChange={handlePropertyChange} />
}
<DirectionalControls {...DirectionalControlsProps} selectedType={selectedTag.dimensions}/>
<DirectionalControls {...DirectionalControlsProps} selectedType={selectedTag.dimensions} />
{selectedTag.label &&

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

@ -22,6 +22,8 @@ interface TemporalDateAttrInt {
}
const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
const [is24Hrs, setIs24Hrs] = useState<boolean>(true);
const handleIs24HrsClick = (checked: boolean) => {

43
src/components/setting/Signature/AddSignatureModal.tsx
View File

@ -6,6 +6,7 @@ import DrawSignatureCanvas from './DrawSignatureCanvas';
import { FaSpinner } from "react-icons/fa";
import { GrCheckboxSelected } from "react-icons/gr";
import { Bounce, toast } from "react-toastify";
import { FiCheck } from 'react-icons/fi';
interface Signature {
id: string;
@ -72,6 +73,10 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
{ id: 6, name: 'classic', initials: 'LA', style: 'classic' },
];
const [checked, setChecked] = useState(false);
const toggleCheckbox = () => setChecked(!checked);
const [selectedSignature, setSelectedSignature] = useState<SelectStyle>(
signatureOptions.length > 0 ? { id: signatureOptions[0].id, style: signatureOptions[0].style } : { id: 0, style: "" }
);
@ -134,6 +139,10 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
setPreview2(`data:image/png;base64,${editingSignature.initialsBlob}`);
}
}
if (editingSignature.default) {
setChecked(editingSignature.default)
}
}
}, [editingSignature]);
@ -197,7 +206,8 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
initialsBase64: signatures.initials,
firstName: fullName.split(' ')[0] || user.firstName,
lastName: fullName.split(' ')[1] || user.lastName,
font: selectedSignature.style
font: selectedSignature.style,
default:checked
};
let res;
@ -384,8 +394,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
</div>
);
case 'SELECT':
return (
<div className="h-full flex flex-col">
@ -505,6 +513,35 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
</button> */}
{renderContent()}
</div>
<div className="text-right px-6 py-1 text-white">
<label className="inline-flex items-center cursor-pointer group">
<input
type="checkbox"
checked={checked}
onChange={toggleCheckbox}
className="sr-only"
/>
{/* Custom checkbox UI */}
<div
className={`w-4 h-4 border rounded transition-all duration-300 flex items-center justify-center
${checked ? 'bg-[var(--modalSubmitBG)] border-[var(--modalSubmitBG)] scale-110' : 'bg-white border-gray-400'}
`}
>
{checked && (
<FiCheck className="text-white text-sm transform scale-100 transition-transform duration-300" />
)}
</div>
<p className="text-sm text-gray-700 opacity-80 ms-1">
{checked
? 'Signature will be used by default.'
: 'Signature will not be used by default.'}
</p>
</label>
{/* Caption text below */}
</div>
{/* Footer Buttons in Main Area */}
<div className="p-4 border-t border-gray-200 flex justify-end gap-3">

25
src/components/templates/Templates.tsx
View File

@ -61,9 +61,26 @@ const Templates = () => {
return new Date(timestamp * 1000).toLocaleString();
};
const handleUseFun = (id) => {
alert(id)
}
const handleUseClick = async (item: any) => {
try {
const payload = {
name: item?.name ?? "",
subject: item.subject,
message: item.message,
description: item.description,
expireAfter: item.expireAfter,
enableIdStamping: item.enableIdStamping,
allowViewAudit: item.allowViewAudit,
allowReassign: item.allowReassign,
enableSignatureIdStamping: item.enableSignatureIdStamping,
templateId: item.id,
};
let res = await api.post(`/api/accounts/${activeAccountId}/transactions`, payload)
console.log("handleUseClick", res.data)
} catch (error) {
console.log(error)
}
}
@ -130,7 +147,7 @@ alert(id)
<td className="px-4 py-2 text-sm text-center">{item.name || 'Dummy'}</td>
<td className="px-4 py-2 text-sm text-center">{formatDate(item.createdAt)}</td>
<td className="px-4 py-2 text-sm text-center">{formatDate(item.lastModifiedAt)}</td>
<td className="px-4 py-2 text-sm text-center" onClick={() => handleUseFun(item.id)}><span className="from-green-500 cursor-pointer to-blue-500 bg-gradient-to-br px-3 py-1 rounded-lg text-white font-semibold text-[12px]">Use</span></td>
<td className="px-4 py-2 text-sm text-center" onClick={() => handleUseClick(item)}><span className="from-green-500 cursor-pointer to-blue-500 bg-gradient-to-br px-3 py-1 rounded-lg text-white font-semibold text-[12px]">Use</span></td>
{/* Dropdown Trigger + Tooltip */}
<td className="px-4 py-2 text-center relative">
<button

4
src/store/slices/selectedRecipientsSlice.tsx
View File

@ -351,7 +351,9 @@ export interface Recipient {
hostEmail: string;
type: recipientType;
color?: string;
roleName:string
roleName: string;
allowSenderToEdit: Boolean;
allowSenderToRemove: Boolean;
}
export interface SelectedRecipientInt {

2
src/utlity/tagGroupConUtils.ts
View File

@ -40,6 +40,8 @@ const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, conta
const borderBottom: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='bottom']");
const borderLeft: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='left']");
console.log("handleGroupBorderPosition")
if (borderTop !== null && dimension.maxLeft !== null && dimension.minLeft !== null) {
borderTop.style.width = (dimension.maxLeft - dimension.minLeft) + "px";
borderTop.style.height = "1px";