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:
parent
115b49ac44
commit
1b92c30d33
@ -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"
|
||||
className="form-text text-dark align-items-center d-flex"
|
||||
htmlFor="inlineCheckbox1"
|
||||
>
|
||||
Pending Task of Activity:
|
||||
</label>
|
||||
Pending Task of Activity :
|
||||
<label
|
||||
className="form-check-label fs-7 ms-4"
|
||||
htmlFor="inlineCheckbox1"
|
||||
>
|
||||
|
||||
<strong>
|
||||
{assignData?.workItem?.workItem?.plannedWork -
|
||||
assignData?.workItem?.workItem?.completedWork}{" "}
|
||||
{
|
||||
assignData?.workItem?.workItem?.activityMaster
|
||||
?.unitOfMeasurement
|
||||
}
|
||||
assignData?.workItem?.workItem?.completedWork}
|
||||
</strong>{" "}
|
||||
|
||||
<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>
|
||||
{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"
|
||||
className="text-dark text-start d-flex align-items-center flex-wrap form-text"
|
||||
htmlFor="inlineCheckbox1"
|
||||
>
|
||||
Target for Today:
|
||||
<span>Target for Today</span> <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}
|
||||
|
||||
render={({ field }) => (
|
||||
<div className="d-flex align-items-center gap-1 ">
|
||||
<input
|
||||
@ -392,31 +461,53 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
||||
id="defaultFormControlInput"
|
||||
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">
|
||||
<label
|
||||
className="form-text fs-7 m-1 text-lg text-dark"
|
||||
htmlFor="inlineCheckbox1"
|
||||
>
|
||||
Description
|
||||
</label>
|
||||
<Controller
|
||||
|
Loading…
x
Reference in New Issue
Block a user