Info-icon add
This commit is contained in:
parent
1b92c30d33
commit
f6cbc3acc9
@ -41,40 +41,29 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
|||||||
|
|
||||||
const [isHelpVisible, setIsHelpVisible] = useState(false);
|
const [isHelpVisible, setIsHelpVisible] = useState(false);
|
||||||
|
|
||||||
const handleHelpClickTarget = () => {
|
const infoRef = useRef(null);
|
||||||
setIsHelpVisibleTarget(!isHelpVisibleTarget);
|
const infoRef1 = useRef(null);
|
||||||
};
|
|
||||||
|
|
||||||
const [isHelpVisiblePending, setIsHelpVisiblePending] = useState(false);
|
|
||||||
const helpPopupRefPending = useRef(null);
|
|
||||||
|
|
||||||
const handleHelpClickPending = () => {
|
|
||||||
setIsHelpVisiblePending(!isHelpVisiblePending);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClickOutside = (event) => {
|
|
||||||
if (
|
|
||||||
helpPopupRefTarget.current &&
|
|
||||||
!helpPopupRefTarget.current.contains(event.target) &&
|
|
||||||
isHelpVisibleTarget
|
|
||||||
) {
|
|
||||||
setIsHelpVisibleTarget(false);
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
helpPopupRefPending.current &&
|
|
||||||
!helpPopupRefPending.current.contains(event.target) &&
|
|
||||||
isHelpVisiblePending
|
|
||||||
) {
|
|
||||||
setIsHelpVisiblePending(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.addEventListener("mousedown", handleClickOutside);
|
|
||||||
return () => {
|
if (infoRef.current) {
|
||||||
document.removeEventListener("mousedown", handleClickOutside);
|
new bootstrap.Popover(infoRef.current, {
|
||||||
};
|
trigger: 'focus',
|
||||||
}, [isHelpVisibleTarget, isHelpVisiblePending]);
|
placement: 'right',
|
||||||
|
html: true,
|
||||||
|
content: `<div>Pending Task assign for today</div>`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (infoRef1.current) {
|
||||||
|
new bootstrap.Popover(infoRef1.current, {
|
||||||
|
trigger: 'focus',
|
||||||
|
placement: 'right',
|
||||||
|
html: true,
|
||||||
|
content: `<div>Target task for today</div>`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
|
||||||
const [plannedTask, setPlannedTask] = useState();
|
const [plannedTask, setPlannedTask] = useState();
|
||||||
@ -387,57 +376,45 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
|||||||
|
|
||||||
<div className="col-md text-start mx-0 px-0">
|
<div className="col-md text-start mx-0 px-0">
|
||||||
<div className="form-check form-check-inline mt-3 px-1">
|
<div className="form-check form-check-inline mt-3 px-1">
|
||||||
<label
|
<label className="form-text text-dark align-items-center d-flex" htmlFor="inlineCheckbox1">
|
||||||
className="form-text text-dark align-items-center d-flex"
|
|
||||||
htmlFor="inlineCheckbox1"
|
|
||||||
>
|
|
||||||
Pending Task of Activity :
|
Pending Task of Activity :
|
||||||
<label
|
<label className="form-check-label fs-7 ms-4" htmlFor="inlineCheckbox1">
|
||||||
className="form-check-label fs-7 ms-4"
|
|
||||||
htmlFor="inlineCheckbox1"
|
|
||||||
>
|
|
||||||
<strong>
|
<strong>
|
||||||
{assignData?.workItem?.workItem?.plannedWork -
|
{assignData?.workItem?.workItem?.plannedWork - assignData?.workItem?.workItem?.completedWork}
|
||||||
assignData?.workItem?.workItem?.completedWork}
|
|
||||||
</strong>{" "}
|
</strong>{" "}
|
||||||
|
<u>{assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}</u>
|
||||||
<u>
|
|
||||||
{assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}
|
|
||||||
</u>
|
|
||||||
|
|
||||||
</label>
|
</label>
|
||||||
<span
|
|
||||||
style={{ marginLeft: '8px', cursor: 'pointer' }}
|
<div style={{ display: "flex", alignItems: "center" }}>
|
||||||
onClick={handleHelpClickPending}
|
<div
|
||||||
|
ref={infoRef}
|
||||||
|
tabIndex="0"
|
||||||
|
className="d-flex align-items-center avatar-group justify-content-center ms-2"
|
||||||
|
data-bs-toggle="popover"
|
||||||
|
data-bs-trigger="focus"
|
||||||
|
data-bs-placement="right"
|
||||||
|
data-bs-html="true"
|
||||||
|
style={{ cursor: "pointer" }}
|
||||||
>
|
>
|
||||||
|
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="16"
|
width="13"
|
||||||
height="16"
|
height="13"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
className="bi bi-question-circle"
|
className="bi bi-info-circle"
|
||||||
viewBox="0 0 16 16"
|
viewBox="0 0 16 16"
|
||||||
>
|
>
|
||||||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
||||||
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.03l.208.346c.348.579.957.924 1.468.924.475 0 .826-.164.925-.369.17-.33.109-.935-.346-1.292-.457-.351-.887-.723-1.246-1.02zM6 10.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z" />
|
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</div>
|
||||||
|
</div>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
{isHelpVisiblePending && (
|
|
||||||
<div
|
|
||||||
className="position-absolute bg-white border p-2 rounded shadow"
|
|
||||||
style={{ zIndex: 10, marginLeft: '10px' }}
|
|
||||||
ref={helpPopupRefPending}
|
|
||||||
>
|
|
||||||
<p className="mb-0">
|
|
||||||
Pending Task
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className="col-md text-start mx-0 px-0">
|
<div className="col-md text-start mx-0 px-0">
|
||||||
<div className="form-check form-check-inline mt-2 px-1 mb-2 text-start">
|
<div className="form-check form-check-inline mt-2 px-1 mb-2 text-start">
|
||||||
<label
|
<label
|
||||||
@ -445,7 +422,6 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
|||||||
htmlFor="inlineCheckbox1"
|
htmlFor="inlineCheckbox1"
|
||||||
>
|
>
|
||||||
<span>Target for Today</span> <span style={{ marginLeft: '46px' }}>:</span>
|
<span>Target for Today</span> <span style={{ marginLeft: '46px' }}>:</span>
|
||||||
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-check form-check-inline col-sm-3 mt-2" style={{ marginLeft: '-28px' }}>
|
<div className="form-check form-check-inline col-sm-3 mt-2" style={{ marginLeft: '-28px' }}>
|
||||||
@ -464,25 +440,36 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
|||||||
<span style={{ paddingLeft: '6px' }}>
|
<span style={{ paddingLeft: '6px' }}>
|
||||||
{assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}
|
{assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}
|
||||||
</span>
|
</span>
|
||||||
<span
|
<div style={{ display: "flex", alignItems: "center" }}>
|
||||||
style={{ marginLeft: "8px", cursor: "pointer" }}
|
<div
|
||||||
onClick={handleHelpClickPending}
|
ref={infoRef1}
|
||||||
|
tabIndex="0"
|
||||||
|
className="d-flex align-items-center avatar-group justify-content-center ms-2"
|
||||||
|
data-bs-toggle="popover"
|
||||||
|
data-bs-trigger="focus"
|
||||||
|
data-bs-placement="right"
|
||||||
|
data-bs-html="true"
|
||||||
|
|
||||||
|
style={{ cursor: "pointer" }}
|
||||||
>
|
>
|
||||||
|
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="16"
|
width="13"
|
||||||
height="16"
|
height="13"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
className="bi bi-question-circle"
|
className="bi bi-info-circle"
|
||||||
viewBox="0 0 16 16"
|
viewBox="0 0 16 16"
|
||||||
>
|
>
|
||||||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
||||||
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.03l.208.346c.348.579.957.924 1.468.924.475 0 .826-.164.925-.369.17-.33.109-.935-.346-1.292-.457-.351-.887-.723-1.246-1.02zM6 10.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z" />
|
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{errors.plannedTask && (
|
{errors.plannedTask && (
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user