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

Group Border Pos fix + Temporal issue Fix + Added Radio Tag at Signer Page

This commit is contained in:
Bhagwan Singh 2026-05-26 20:08:06 +05:30
parent 0c360233c1
commit 2290eca277
2 changed files with 74 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -695,6 +695,49 @@ const TagsCon: React.FC<TagsConProps> = ({
{/* CHECKBOX FIELD - END */}
{/* RADIO FIELD - START */}
{
item.type == "RADIO" &&
<div
id={item.navigationOrder}
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 opacity-80"}`}
>
<input
type="radio"
name={item.group ?? `radio-group-${item.recipientId}`} // group by recipient or group id
value={item.id}
checked={item.checked ?? false}
onChange={(e) => {
if (!e.target.checked) return;
// Uncheck all other radio tags in same group, check this one
setDroppedItems(
droppedItems.map((tag, i) => {
if (tag.type !== "RADIO") return tag;
// Same group = same name attribute
const sameGroup = (item.group && tag.group)
? item.group === tag.group
: tag.recipientId === item.recipientId; // fallback
if (!sameGroup) return tag;
return {
...tag,
checked: tag.id === item.id,
update: true
};
})
);
}}
className="w-4 h-4 cursor-pointer accent-[var(--primary)]"
/>
</div>
}
{/* RADIO FIELD - END */}
{/* SIGNATURE FIELD - START */}
{
item.type == "SIGNATURE" &&

61
src/components/process/processStepTwo/DroppedItemsTagsCon.tsx
View File

@ -457,23 +457,14 @@ const DroppedItemsTagsCon = forwardRef(({
return;
}
requestAnimationFrame(() => {
requestAnimationFrame(() => {
let targetContainer = groupElements[0].parentElement?.parentElement;
if (!targetContainer) {
console.log("No target container found");
return;
}
if (!targetContainer) return;
let containerRect = targetContainer.getBoundingClientRect();
// Use consistent offset values
const offsetX = 10;
const offsetY = 10;
// Ensure DOM is fully updated before positioning
requestAnimationFrame(() => {
requestAnimationFrame(() => {
handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY);
handleGroupBorderPosition(groupElements, containerRect, 10, 10);
});
});
};
@ -489,13 +480,23 @@ const DroppedItemsTagsCon = forwardRef(({
}
}, [selectedTag])
const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, containerRect: DOMRect, offsetX: number, offsetY: number) => {
const handleGroupBorderPosition = (
groupElements: NodeListOf<HTMLElement>,
containerRect: DOMRect,
offsetX: number,
offsetY: number
) => {
if (!groupElements || groupElements.length == 0) return;
const groupId = groupElements[0].getAttribute('group');
if (!groupId) return;
// Calculate the bounding box of all group elements
const scale = scaleFactor ?? 1;
const scaleX = renderedWidth && pageWidth ? renderedWidth / pageWidth : 1;
const scaleY = renderedHeight && pageHeight ? renderedHeight / pageHeight : 1;
const combinedScaleX = scaleX * scale;
const combinedScaleY = scaleY * scale;
let minLeft = Infinity, minTop = Infinity, maxRight = -Infinity, maxBottom = -Infinity;
groupElements.forEach(element => {
@ -503,10 +504,11 @@ const DroppedItemsTagsCon = forwardRef(({
if (!parentElement) return;
const rect = parentElement.getBoundingClientRect();
const relativeLeft = rect.left - containerRect.left;
const relativeTop = rect.top - containerRect.top;
const relativeRight = relativeLeft + rect.width;
const relativeBottom = relativeTop + rect.height;
const relativeLeft = (rect.left - containerRect.left) / combinedScaleX;
const relativeTop = (rect.top - containerRect.top) / combinedScaleY;
const relativeRight = relativeLeft + rect.width / combinedScaleX;
const relativeBottom = relativeTop + rect.height / combinedScaleY;
minLeft = Math.min(minLeft, relativeLeft);
minTop = Math.min(minTop, relativeTop);
@ -514,7 +516,6 @@ const DroppedItemsTagsCon = forwardRef(({
maxBottom = Math.max(maxBottom, relativeBottom);
});
// Add some padding around the group
const padding = 10;
minLeft -= padding;
minTop -= padding;
@ -524,38 +525,34 @@ const DroppedItemsTagsCon = forwardRef(({
const width = maxRight - minLeft;
const height = maxBottom - minTop;
// Update or create border elements
const borderPositions = ['top', 'right', 'bottom', 'left'];
borderPositions.forEach(position => {
let borderElement = document.querySelector(`[border-group='${groupId}'][border-pos='${position}']`) as HTMLElement;
let borderElement = document.querySelector(
`[border-group='${groupId}'][border-pos='${position}']`
) as HTMLElement;
if (!borderElement) {
// Create border element if it doesn't exist
borderElement = document.createElement('div');
borderElement.className = `group-border ${position == 'bottom' ? 'bottom-border' : ''}`;
borderElement.setAttribute('border-group', groupId);
borderElement.setAttribute('border-pos', position);
// Add the + icon for bottom border
if (position == 'bottom') {
const addIcon = document.createElement('div');
addIcon.innerHTML = '<IoAdd />'; // You might need to adjust this based on your icon system
addIcon.innerHTML = '<IoAdd />';
addIcon.onclick = () => {
// Find the original item to pass to handleAddGroupItemClicked
const originalItem = droppedItems[key]?.find(item => 'group' in item && item.group == groupId);
if (originalItem) {
handleAddGroupItemClicked(key, originalItem);
}
const originalItem = droppedItems[pageIdkey]?.find(
item => 'group' in item && item.group == groupId
);
if (originalItem) handleAddGroupItemClicked(pageIdkey, originalItem);
};
borderElement.appendChild(addIcon);
}
// Append to container
groupElements[0].parentElement?.parentElement?.appendChild(borderElement);
}
// Position the border element
borderElement.style.position = 'absolute';
borderElement.style.display = 'block';
borderElement.style.pointerEvents = position == 'bottom' ? 'auto' : 'none';