tasks
This commit is contained in:
parent
1515d72e4f
commit
6e4d2c1dc2
6
src/assets/icons/trackerNoTasks.svg
Normal file
6
src/assets/icons/trackerNoTasks.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0.0012419 13.5034C0.0012419 10.3429 0.0012419 7.18359 0.0012419 4.02309C0.00239181 1.5492 1.54327 0 4.00638 0C10.3447 0 16.683 0 23.0213 0C25.4166 0 26.9885 1.55495 26.9908 3.94028C26.9965 8.8432 26.9862 13.7461 27 18.649C27.0011 19.2459 26.8218 19.706 26.394 20.1281C24.2828 22.2144 22.1865 24.3145 20.0982 26.4226C19.7084 26.8171 19.2795 27.0011 18.7229 27C13.7829 26.9896 8.84176 27 3.90174 26.9919C1.58467 26.9908 0.00584155 25.4071 0.00239181 23.0988C-0.00220783 19.9004 0.0012419 16.7019 0.0012419 13.5034ZM13.492 2.46929C10.2952 2.46929 7.09849 2.46584 3.90174 2.47159C2.95881 2.47274 2.47585 2.91208 2.4747 3.80687C2.46665 10.259 2.46665 16.7111 2.47355 23.1632C2.47355 24.0511 2.94041 24.5227 3.81665 24.5238C8.52553 24.533 13.2344 24.525 17.9433 24.5376C18.3021 24.5376 18.3998 24.426 18.3941 24.081C18.3757 23.0471 18.378 22.0131 18.3895 20.9792C18.4056 19.4219 19.4313 18.4052 20.9975 18.3903C21.9737 18.3811 22.9512 18.3638 23.9263 18.3995C24.392 18.4167 24.5403 18.2994 24.538 17.8095C24.5185 13.2332 24.5277 8.65803 24.5254 4.08174C24.5254 2.84767 24.1448 2.46814 22.9098 2.46814C19.7705 2.46699 16.6313 2.46814 13.492 2.46814V2.46929Z" fill="#1458DD"/>
|
||||||
|
<path d="M12.0164 15.9981C10.4826 15.9981 8.94875 16.0023 7.41493 15.9981C6.50026 15.9953 5.98786 15.4366 6.00022 14.4741C6.01258 13.5537 6.53396 13.0021 7.40482 13.0021C10.4725 12.9993 13.5401 12.9993 16.6077 13.0021C17.4606 13.0021 17.9955 13.5819 18 14.4966C18.0045 15.4183 17.4797 15.9939 16.6178 15.9967C15.084 16.0009 13.5502 15.9967 12.0164 15.9981Z" fill="#1458DD"/>
|
||||||
|
<path d="M10.0174 10.998C9.167 10.998 8.31665 11.0035 7.4663 10.9962C6.58727 10.9888 6.00125 10.5839 6 9.99918C6 9.41169 6.57605 9.00957 7.4638 9.00588C9.16451 8.99851 10.8652 8.99758 12.5659 9.00588C13.4375 9.0105 14.0123 9.42921 13.9998 10.0195C13.9873 10.5802 13.4038 10.986 12.5684 10.9943C11.7181 11.0035 10.8677 10.9962 10.0174 10.9962V10.998Z" fill="#2D4A17"/>
|
||||||
|
<path d="M18.5605 9.00562C18.9668 9.00562 19.3732 8.99183 19.7784 9.00746C20.4851 9.03505 20.9869 9.43967 20.9997 9.96936C21.0137 10.5174 20.5026 10.9662 19.783 10.9846C18.9331 11.0057 18.082 11.0048 17.232 10.9837C16.5206 10.9653 15.9885 10.5064 16.0002 9.97395C16.0118 9.45438 16.5265 9.03781 17.2262 9.0093C17.6698 8.99091 18.1146 9.00562 18.5593 9.00562H18.5605Z" fill="#2D4A17"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 2.4 KiB |
@ -462,7 +462,7 @@ export const TicketFullScreen = () => {
|
|||||||
участник
|
участник
|
||||||
</div>
|
</div>
|
||||||
<div className="persons__list__info">
|
<div className="persons__list__info">
|
||||||
В проекте - <span>“{projectInfo.name}”</span>
|
<span>В проекте - </span><p>“{projectInfo.name}”</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="persons__list__items">
|
<div className="persons__list__items">
|
||||||
{projectInfo.projectUsers?.map((person) => {
|
{projectInfo.projectUsers?.map((person) => {
|
||||||
|
@ -213,21 +213,22 @@
|
|||||||
background: white;
|
background: white;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
min-width: 320px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
max-width: 150px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
max-width: 270px;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
width: 16px;
|
width: 20px;
|
||||||
height: 16px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__dropDown {
|
&__dropDown {
|
||||||
@ -235,12 +236,12 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 5px;
|
padding: 9.5px 12px;
|
||||||
top: 35px;
|
top: 35px;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
row-gap: 5px;
|
row-gap: 10px;
|
||||||
|
|
||||||
.worker {
|
.worker {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -35,6 +35,7 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
display: flex;
|
display: flex;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
max-width: 380px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: black;
|
color: black;
|
||||||
|
@ -46,6 +46,7 @@ import project from "assets/icons/trackerProject.svg";
|
|||||||
import tasks from "assets/icons/trackerTasks.svg";
|
import tasks from "assets/icons/trackerTasks.svg";
|
||||||
import accept from "assets/images/accept.png";
|
import accept from "assets/images/accept.png";
|
||||||
import avatarMok from "assets/images/avatarMok.png";
|
import avatarMok from "assets/images/avatarMok.png";
|
||||||
|
import trackerNoTasks from "assets/icons/trackerNoTasks.svg"
|
||||||
|
|
||||||
export const ProjectTracker = () => {
|
export const ProjectTracker = () => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
@ -62,6 +63,7 @@ export const ProjectTracker = () => {
|
|||||||
const [personListOpen, setPersonListOpen] = useState(false);
|
const [personListOpen, setPersonListOpen] = useState(false);
|
||||||
const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
|
const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
|
||||||
useState(false);
|
useState(false);
|
||||||
|
const [filteredNoTasks, setFilteredNoTasks] = useState(false)
|
||||||
const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false);
|
const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false);
|
||||||
const [selectedExecutor, setSelectedExecutor] = useState(null);
|
const [selectedExecutor, setSelectedExecutor] = useState(null);
|
||||||
const [selectExecutorOpen, setSelectedExecutorOpen] = useState(false);
|
const [selectExecutorOpen, setSelectedExecutorOpen] = useState(false);
|
||||||
@ -77,8 +79,10 @@ export const ProjectTracker = () => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const tasksHover = {};
|
const tasksHover = {};
|
||||||
const columnHover = {};
|
const columnHover = {};
|
||||||
|
let columnsTasksEmpty = true
|
||||||
if (Object.keys(projectBoard).length) {
|
if (Object.keys(projectBoard).length) {
|
||||||
projectBoard.columns.forEach((column) => {
|
projectBoard.columns.forEach((column) => {
|
||||||
|
if (column.tasks.length) columnsTasksEmpty = false
|
||||||
setOpenColumnSelect((prevState) => ({
|
setOpenColumnSelect((prevState) => ({
|
||||||
...prevState,
|
...prevState,
|
||||||
[column.id]: false,
|
[column.id]: false,
|
||||||
@ -87,6 +91,11 @@ export const ProjectTracker = () => {
|
|||||||
column.tasks.forEach((task) => (tasksHover[task.id] = false));
|
column.tasks.forEach((task) => (tasksHover[task.id] = false));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
if (columnsTasksEmpty && (checkBoxMyTasks || selectedExecutor || checkBoxParticipateTasks)) {
|
||||||
|
setFilteredNoTasks(true)
|
||||||
|
} else {
|
||||||
|
setFilteredNoTasks(false)
|
||||||
|
}
|
||||||
setWrapperHover(columnHover);
|
setWrapperHover(columnHover);
|
||||||
setTaskHover(tasksHover);
|
setTaskHover(tasksHover);
|
||||||
}, [projectBoard]);
|
}, [projectBoard]);
|
||||||
@ -261,6 +270,8 @@ export const ProjectTracker = () => {
|
|||||||
dispatch(setProjectBoardFetch(projectId.id));
|
dispatch(setProjectBoardFetch(projectId.id));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="tracker">
|
<div className="tracker">
|
||||||
<ProfileHeader />
|
<ProfileHeader />
|
||||||
@ -381,7 +392,7 @@ export const ProjectTracker = () => {
|
|||||||
участник
|
участник
|
||||||
</div>
|
</div>
|
||||||
<div className="persons__list__info">
|
<div className="persons__list__info">
|
||||||
В проекте - <span>“{projectBoard.name}”</span>
|
<span>В проекте - </span><p>“{projectBoard.name}”</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="persons__list__items">
|
<div className="persons__list__items">
|
||||||
{projectBoard.projectUsers?.map((person) => {
|
{projectBoard.projectUsers?.map((person) => {
|
||||||
@ -517,7 +528,7 @@ export const ProjectTracker = () => {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="tasks__container">
|
<div className="tasks__container">
|
||||||
{Boolean(projectBoard?.columns) &&
|
{Boolean(projectBoard?.columns) && !filteredNoTasks &&
|
||||||
Boolean(projectBoard.columns.length) &&
|
Boolean(projectBoard.columns.length) &&
|
||||||
projectBoard.columns.map((column) => {
|
projectBoard.columns.map((column) => {
|
||||||
return (
|
return (
|
||||||
@ -663,6 +674,15 @@ export const ProjectTracker = () => {
|
|||||||
В проекте нет задач.
|
В проекте нет задач.
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
{filteredNoTasks &&
|
||||||
|
<div className='tasks__board__noTasks'>
|
||||||
|
<div className='tasks__board__noTasksInfo'>
|
||||||
|
<img src={trackerNoTasks} alt='noTasks' />
|
||||||
|
<p>Пока нет подходящих задач</p>
|
||||||
|
</div>
|
||||||
|
<p className='tasks__board__noTasksMore'>Ставьте задачи, следите за прогрессом, ведите учёт рабочего времени</p>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
@ -208,7 +208,7 @@
|
|||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
max-width: 1260px;
|
max-width: 1280px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -222,8 +222,11 @@
|
|||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
max-width: 30%;
|
max-width: 21%;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__add {
|
&__add {
|
||||||
@ -360,19 +363,30 @@
|
|||||||
|
|
||||||
&__info {
|
&__info {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 18px;
|
|
||||||
line-height: 22px;
|
|
||||||
color: #263238;
|
|
||||||
font-weight: 500;
|
|
||||||
margin: 13px 0 10px;
|
margin: 13px 0 10px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
|
display: flex;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
font-size: 18px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #263238;
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
color: #1458dd;
|
color: #1458dd;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
|
display: flex;
|
||||||
|
max-width: 250px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
margin-left: 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -839,6 +853,33 @@
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__noTasks {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
&Info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
img {
|
||||||
|
width: 27px;
|
||||||
|
height: 27px;
|
||||||
|
margin-right: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&More {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.board {
|
.board {
|
||||||
|
Loading…
Reference in New Issue
Block a user