modified assign task popup from daily task planning.

1. adjusting margin and padding.
2. All the fonts are same.
3. Bold the 1 number and adding line into the unit.
This commit is contained in:
kartik.sharma 2025-05-17 13:14:17 +05:30
parent 115b49ac44
commit 1b92c30d33

View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice";
import useMaster from "../../hooks/masterHook/useMaster";
@ -35,6 +35,48 @@ const AssignRoleModel = ({ assignData, onClose }) => {
})
),
});
const [isHelpVisibleTarget, setIsHelpVisibleTarget] = useState(false);
const helpPopupRefTarget = useRef(null);
const [isHelpVisible, setIsHelpVisible] = useState(false);
const handleHelpClickTarget = () => {
setIsHelpVisibleTarget(!isHelpVisibleTarget);
};
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(() => {
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [isHelpVisibleTarget, isHelpVisiblePending]);
const [plannedTask, setPlannedTask] = useState();
const selectedProject = useSelector(
(store) => store.localVariables.projectId
@ -156,12 +198,12 @@ const AssignRoleModel = ({ assignData, onClose }) => {
aria-label="Close"
></button>
<div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
<strong>Assign Task</strong>
<div className="container my-4">
<p className="align-items-center flex-wrap m-0 ">Assign Task</p>
<div className="container my-3">
<div className="mb-1">
<p className="mb-0">
<span className="fs-sm-5 fs-6 text-dark text-start d-flex align-items-center flex-wrap">
<strong className="me-2">Work Location:</strong>
<span className="text-dark text-start d-flex align-items-center flex-wrap form-text">
<p className="me-2 m-0 font-bold">Work Location :</p>
{[
assignData?.building?.name,
assignData?.floor?.floorName,
@ -186,16 +228,15 @@ const AssignRoleModel = ({ assignData, onClose }) => {
<div className="row mb-1">
<div className="col-12">
<div className="form-text text-start">
<div className="d-flex align-items-center">
Select Team
<div className="d-flex align-items-center form-text fs-7">
<span className="text-dark">Select Team</span>
<div className="me-2">{displayedSelection}</div>
<a
className="dropdown-toggle hide-arrow cursor-pointer"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i className="bx bx-filter bx-lg"></i>
<i className="bx bx-filter bx-lg text-primary"></i>
</a>
<ul className="dropdown-menu p-2 text-capitalize">
@ -275,7 +316,7 @@ const AssignRoleModel = ({ assignData, onClose }) => {
<p className="mb-0" style={{ fontSize: "13px" }}>
{emp.firstName} {emp.lastName}
</p>
<small className="text-muted" style={{ fontSize: "11px"}}>
<small className="text-muted" style={{ fontSize: "11px" }}>
{loading ? (
<span className="placeholder-glow">
<span className="placeholder col-6"></span>
@ -347,42 +388,70 @@ const AssignRoleModel = ({ assignData, onClose }) => {
<div className="col-md text-start mx-0 px-0">
<div className="form-check form-check-inline mt-3 px-1">
<label
className="form-text fs-7"
htmlFor="inlineCheckbox1"
>
Pending Task of Activity:
</label>
<label
className="form-check-label fs-7 ms-4"
className="form-text text-dark align-items-center d-flex"
htmlFor="inlineCheckbox1"
>
Pending Task of Activity :
<label
className="form-check-label fs-7 ms-4"
htmlFor="inlineCheckbox1"
>
<strong>
{assignData?.workItem?.workItem?.plannedWork -
assignData?.workItem?.workItem?.completedWork}
</strong>{" "}
{assignData?.workItem?.workItem?.plannedWork -
assignData?.workItem?.workItem?.completedWork}{" "}
{
assignData?.workItem?.workItem?.activityMaster
?.unitOfMeasurement
}
<u>
{assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}
</u>
</label>
<span
style={{ marginLeft: '8px', cursor: 'pointer' }}
onClick={handleHelpClickPending}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-question-circle"
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="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" />
</svg>
</span>
</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 className="col-md text-start mx-0 px-0">
<div className="form-check form-check-inline mt-2 px-1 mb-2 text-start">
<label
className="form-check-label fs-7"
htmlFor="inlineCheckbox1"
className="text-dark text-start d-flex align-items-center flex-wrap form-text"
htmlFor="inlineCheckbox1"
>
Target for Today:
<span>Target for Today</span>&nbsp;<span style={{ marginLeft: '46px' }}>:</span>
</label>
</div>
<div className="form-check form-check-inline col-sm-3 mt-2">
<div className="form-check form-check-inline col-sm-3 mt-2" style={{ marginLeft: '-28px' }}>
<Controller
name="plannedTask"
control={control}
control={control}
render={({ field }) => (
<div className="d-flex align-items-center gap-1 ">
<input
@ -390,34 +459,56 @@ const AssignRoleModel = ({ assignData, onClose }) => {
className="form-control form-control-sm"
{...field}
id="defaultFormControlInput"
aria-describedby="defaultFormControlHelp"
aria-describedby="defaultFormControlHelp"
/>
<span style={{ paddingLeft: '6px' }}>{
assignData?.workItem?.workItem?.activityMaster
?.unitOfMeasurement
}</span>
<span style={{ paddingLeft: '6px' }}>
{assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}
</span>
<span
style={{ marginLeft: "8px", cursor: "pointer" }}
onClick={handleHelpClickPending}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-question-circle"
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="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" />
</svg>
</span>
</div>
)}
/>
</div>
{errors.plannedTask && (
<div className="danger-text mt-1">
{errors.plannedTask.message}
<div className="danger-text mt-1">{errors.plannedTask.message}</div>
)}
{isHelpVisible && (
<div
className="position-absolute bg-white border p-2 rounded shadow"
style={{ zIndex: 10, marginLeft: '10px' }}
>
{/* Add your help content here */}
<p className="mb-0">Enter the target value for today's task.</p>
</div>
)}
</div>
{errors.selectedEmployees && (
<div className="danger-text mt-1">
<p>{errors.selectedEmployees.message}</p>
</div>
)}
<label htmlFor="exampleFormControlTextarea1" className="m-1 text-lg font-semibold block">
Description
<label
className="form-text fs-7 m-1 text-lg text-dark"
htmlFor="inlineCheckbox1"
>
Description
</label>
<Controller
name="description"