Changes in Daily progress report filter panel and Daily task list view.
This commit is contained in:
parent
cde6e416a2
commit
d1fdc03268
@ -39,14 +39,12 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
|
||||
dateTo: localToUtc(formData.dateTo),
|
||||
};
|
||||
handleFilter(filterPayload);
|
||||
closePanel();
|
||||
};
|
||||
|
||||
const onClear = () => {
|
||||
setResetKey((prev) => prev + 1);
|
||||
handleFilter(TaskReportDefaultValue);
|
||||
reset(TaskReportDefaultValue);
|
||||
closePanel();
|
||||
};
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
|
||||
@ -204,24 +204,34 @@ const TaskReportList = () => {
|
||||
<HoverPopup
|
||||
id="total_pending_task"
|
||||
title="Total Pending Task"
|
||||
content={<p>This shows the total pending tasks for each activity on that date.</p>}
|
||||
content={
|
||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
||||
This shows the total pending tasks for each activity on that date.
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
||||
</HoverPopup>
|
||||
</span>
|
||||
</th>
|
||||
|
||||
<th>
|
||||
<span>
|
||||
Reported/Planned{" "}
|
||||
<HoverPopup
|
||||
id="reportes_and_planned_task"
|
||||
title="Reported and Planned Task"
|
||||
content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
|
||||
content={
|
||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
||||
This shows the reported versus planned tasks for each activity on that date.
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
||||
</HoverPopup>
|
||||
</span>
|
||||
</th>
|
||||
|
||||
<th>Assign Date</th>
|
||||
<th>Team</th>
|
||||
<th className="text-center">Actions</th>
|
||||
|
||||
@ -252,16 +252,15 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
<HoverPopup
|
||||
title="Payment Type"
|
||||
id="payment_type"
|
||||
|
||||
content={
|
||||
<div className=" w-50">
|
||||
<p>
|
||||
Choose whether the payment amount varies or remains fixed
|
||||
each cycle.
|
||||
<br />
|
||||
<strong>Is Variable:</strong> Amount changes per cycle.
|
||||
<br />
|
||||
<strong>Fixed:</strong> Amount stays constant.
|
||||
</p>
|
||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
||||
Choose whether the payment amount varies or remains fixed
|
||||
each cycle.
|
||||
<br />
|
||||
<strong>Is Variable:</strong> Amount changes per cycle.
|
||||
<br />
|
||||
<strong>Fixed:</strong> Amount stays constant.
|
||||
</div>
|
||||
}
|
||||
>
|
||||
@ -476,10 +475,10 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
title="Payment Buffer Days"
|
||||
id="payment_buffer_days"
|
||||
content={
|
||||
<p>
|
||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
||||
Number of extra days allowed after the due date before
|
||||
payment is considered late.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
|
||||
@ -511,10 +510,11 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
<HoverPopup
|
||||
title="End Date"
|
||||
id="end_date"
|
||||
|
||||
content={
|
||||
<p>
|
||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
||||
The date when the last payment in the recurrence occurs.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
|
||||
@ -592,8 +592,8 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
{createPending || isPending
|
||||
? "Please wait...."
|
||||
: requestToEdit
|
||||
? "Update"
|
||||
: "Save as Draft"}
|
||||
? "Update"
|
||||
: "Save as Draft"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -58,139 +58,66 @@ const HoverPopup = ({
|
||||
return () => document.removeEventListener("click", handler);
|
||||
}, [Mode, visible, dispatch, id]);
|
||||
|
||||
// Positioning effect: respects align prop and stays inside boundary (drawer)
|
||||
useEffect(() => {
|
||||
if (!visible || !popupRef.current || !triggerRef.current) return;
|
||||
|
||||
// run in next frame so DOM/layout settles
|
||||
requestAnimationFrame(() => {
|
||||
const popup = popupRef.current;
|
||||
|
||||
// choose boundary: provided boundaryRef or nearest positioned parent (popup.parentElement)
|
||||
const boundaryEl =
|
||||
(boundaryRef && boundaryRef.current) || popup.parentElement;
|
||||
const boundaryEl = (boundaryRef && boundaryRef.current) || popup.parentElement;
|
||||
if (!boundaryEl) return;
|
||||
|
||||
const boundaryRect = boundaryEl.getBoundingClientRect();
|
||||
const triggerRect = triggerRef.current.getBoundingClientRect();
|
||||
|
||||
// reset styles first
|
||||
popup.style.left = "";
|
||||
popup.style.right = "";
|
||||
popup.style.transform = "";
|
||||
popup.style.top = "";
|
||||
|
||||
const popupRect = popup.getBoundingClientRect();
|
||||
const parentRect = boundaryRect; // alias
|
||||
const triggerCenterX = triggerRect.left + triggerRect.width / 2 - boundaryRect.left;
|
||||
let left = triggerCenterX - popupRect.width / 2;
|
||||
|
||||
// Convert trigger center to parent coordinates
|
||||
const triggerCenterX =
|
||||
triggerRect.left + triggerRect.width / 2 - parentRect.left;
|
||||
|
||||
// preferred left so popup center aligns to trigger center:
|
||||
const preferredLeft = triggerCenterX - popupRect.width / 2;
|
||||
|
||||
// Helpers to set styles in parent's coordinate system:
|
||||
const setLeft = (leftPx) => {
|
||||
popup.style.left = `${leftPx}px`;
|
||||
popup.style.right = "auto";
|
||||
popup.style.transform = "none";
|
||||
};
|
||||
const setRight = (rightPx) => {
|
||||
popup.style.left = "auto";
|
||||
popup.style.right = `${rightPx}px`;
|
||||
popup.style.transform = "none";
|
||||
};
|
||||
|
||||
// If user forced align:
|
||||
if (align === "left") {
|
||||
// align popup's left to parent's left (0)
|
||||
setLeft(0);
|
||||
return;
|
||||
}
|
||||
if (align === "right") {
|
||||
// align popup's right to parent's right (0)
|
||||
setRight(0);
|
||||
return;
|
||||
}
|
||||
if (align === "center") {
|
||||
popup.style.left = "50%";
|
||||
popup.style.right = "auto";
|
||||
popup.style.transform = "translateX(-50%)";
|
||||
return;
|
||||
}
|
||||
|
||||
// align === "auto": try preferred centered position, but flip fully if overflow
|
||||
// clamp preferredLeft to boundaries so it doesn't render partially outside
|
||||
const leftIfCentered = Math.max(
|
||||
0,
|
||||
Math.min(preferredLeft, parentRect.width - popupRect.width)
|
||||
);
|
||||
|
||||
// if centered fits, use it
|
||||
if (leftIfCentered === preferredLeft) {
|
||||
setLeft(leftIfCentered);
|
||||
return;
|
||||
}
|
||||
|
||||
// if centering would overflow right -> stick popup fully to left (left=0)
|
||||
if (preferredLeft > parentRect.width - popupRect.width) {
|
||||
// place popup so its right aligns to parent's right
|
||||
// i.e., left = parent width - popup width
|
||||
setLeft(parentRect.width - popupRect.width);
|
||||
return;
|
||||
}
|
||||
|
||||
// if centering would overflow left -> stick popup fully to left=0
|
||||
if (preferredLeft < 0) {
|
||||
setLeft(0);
|
||||
return;
|
||||
}
|
||||
|
||||
// fallback center
|
||||
setLeft(leftIfCentered);
|
||||
// Clamp to boundaries
|
||||
left = Math.max(0, Math.min(left, boundaryRect.width - popupRect.width));
|
||||
popup.style.left = `${left}px`;
|
||||
});
|
||||
}, [visible, align, boundaryRef]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="d-inline-block position-relative" // <-- ADD THIS !!
|
||||
style={{
|
||||
maxWidth: "calc(700px - 100px)",
|
||||
width: "100%",
|
||||
wordWrap: "break-word",
|
||||
overflow: "visible", // also make sure popup isn't clipped
|
||||
}}
|
||||
>
|
||||
return (
|
||||
<div
|
||||
className="d-inline-block"
|
||||
ref={triggerRef}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
onClick={handleClick}
|
||||
style={{ cursor: "pointer" }}
|
||||
className="d-inline-block position-relative" // <-- ADD THIS !!
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{visible && (
|
||||
<div
|
||||
ref={popupRef}
|
||||
className={`hover-popup bg-white border rounded shadow-sm p-3 position-absolute mt-2 ${className}`}
|
||||
style={{
|
||||
zIndex: 2000,
|
||||
top: "100%",
|
||||
width: "max-content",
|
||||
minWidth: "120px",
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
|
||||
ref={triggerRef}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
onClick={handleClick}
|
||||
style={{ cursor: "pointer", display: "inline-block" }}
|
||||
>
|
||||
{title && <h6 className="fw-semibold mb-2">{title}</h6>}
|
||||
<div>{content}</div>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
{visible && (
|
||||
<div
|
||||
ref={popupRef}
|
||||
className={`hover-popup bg-white border rounded shadow-sm p-3 position-absolute mt-2 ${className}`}
|
||||
style={{
|
||||
zIndex: 2000,
|
||||
top: "100%",
|
||||
minWidth: "200px",
|
||||
maxWidth: "300px",
|
||||
wordWrap: "break-word",
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{title && <h6 className="fw-semibold mb-2">{title}</h6>}
|
||||
<div>{content}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user