executor filter tasks

This commit is contained in:
Николай Полтщук 2023-07-03 22:07:44 +03:00
parent d48957746f
commit 5af01a63ed
6 changed files with 170 additions and 5 deletions

View File

@ -7,7 +7,7 @@ import { Link } from "react-router-dom";
import { getProfileInfo } from "@redux/outstaffingSlice";
import { setProjectBoardFetch } from "@redux/projectsTrackerSlice";
import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
import { caseOfNum, getCorrectRequestDate, urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
@ -429,7 +429,7 @@ export const ModalTiсket = ({
Загрузить файл
</button>
<span>{0}</span>
Файлов
{caseOfNum(0, "files")}
</p>
</div>
<div className="content__input">

View File

@ -11,7 +11,7 @@ import {
setToggleTab,
} from "@redux/projectsTrackerSlice";
import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
import { caseOfNum, getCorrectRequestDate, urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
@ -585,7 +585,7 @@ export const TicketFullScreen = () => {
Загрузить файл
</BaseButton>
<span>{0}</span>
Файлов
{caseOfNum(0, "files")}
</p>
</div>
<div className="content__input">

View File

@ -99,6 +99,8 @@
cursor: pointer;
img {
width: 20px;
height: 20px;
margin-left: 20px;
margin-right: 20px;
}

View File

@ -6,6 +6,7 @@ import {
activeLoader,
deletePersonOnProject,
filterCreatedByMe,
filteredExecutorTasks,
filteredParticipateTasks,
getBoarderLoader,
getProjectBoard,
@ -44,6 +45,7 @@ import project from "assets/icons/trackerProject.svg";
import tasks from "assets/icons/trackerTasks.svg";
import accept from "assets/images/accept.png";
import avatarMok from "assets/images/avatarMok.png";
import arrowDown from "assets/icons/arrows/selectArrow.png";
export const ProjectTracker = () => {
const dispatch = useDispatch();
@ -61,6 +63,8 @@ export const ProjectTracker = () => {
const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
useState(false);
const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false);
const [selectedExecutor, setSelectedExecutor] = useState(null);
const [selectExecutorOpen, setSelectedExecutorOpen] = useState(false)
const startWrapperIndexTest = useRef({});
const projectBoard = useSelector(getProjectBoard);
const loader = useSelector(getBoarderLoader);
@ -243,6 +247,16 @@ export const ProjectTracker = () => {
setCheckBoxMyTasks(!checkBoxMyTasks);
}
function executorFilter(user) {
dispatch(filteredExecutorTasks(user.user_id))
setSelectedExecutor(user)
}
function deleteSelectedExecutorFilter() {
setSelectedExecutor(null)
dispatch(setProjectBoardFetch(projectId.id));
}
return (
<div className="tracker">
<ProfileHeader />
@ -423,6 +437,47 @@ export const ProjectTracker = () => {
{checkBoxMyTasks && <img src={accept} alt="accept" />}
</div>
</div>
{selectedExecutor ?
<div className='tasks__head__executorSelected'>
<p>{selectedExecutor.user.fio}</p>
<img
className='avatar'
src={
selectedExecutor.user?.avatar
? urlForLocal(selectedExecutor.user.avatar)
: avatarMok
}
alt='avatar' />
<img
className="delete"
src={close}
alt="delete"
onClick={deleteSelectedExecutorFilter}
/>
</div>
:
<div className="tasks__head__executor" onClick={() => setSelectedExecutorOpen(!selectExecutorOpen)}>
<p>Выберите исполнитель</p>
<img className={selectExecutorOpen ? "open" : ""} src={arrowDown} alt="arrow" />
{selectExecutorOpen &&
<div className='tasks__head__executorDropdown'>
{projectBoard.projectUsers.map((user) => {
return <div className='executorDropdown__person' key={user.user_id} onClick={() => executorFilter(user)}>
<p>{user.user?.fio}</p>
<img
src={
user.user?.avatar
? urlForLocal(user.user.avatar)
: avatarMok
}
alt='avatar' />
</div>
})
}
</div>
}
</div>
}
<Link to="/profile/tracker" className="tasks__head__back">
<p>Вернуться на проекты</p>
<img src={arrow} alt="arrow" />

View File

@ -208,7 +208,8 @@
&__wrapper {
display: flex;
max-width: 1160px;
max-width: 1260px;
width: 100%;
margin: 0 auto;
justify-content: space-between;
padding: 0 10px;
@ -466,6 +467,107 @@
}
}
&__executor {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
margin-right: 10px;
border-radius: 8px;
border: 1px solid #e3e2e2;
padding: 2px 6px;
position: relative;
max-width: 220px;
width: 100%;
&Selected {
display: flex;
align-items: center;
border-radius: 8px;
max-width: 220px;
width: 100%;
margin-right: 10px;
justify-content: center;
p {
color: #252c32;
font-weight: 400;
font-size: 14px;
line-height: 24px;
max-width: 155px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.avatar {
margin: 0 5px;
}
.delete {
cursor: pointer;
}
img {
display: flex;
width: 20px;
height: 20px;
}
}
p {
color: #252c32;
font-weight: 400;
font-size: 14px;
line-height: 24px;
}
img {
transition: all 0.15s ease;
margin-left: 5px;
}
.open {
transform: rotate(180deg);
}
&Dropdown {
position: absolute;
top: 33px;
background: white;
border-radius: 8px;
z-index: 5;
padding: 10px 10px;
display: flex;
flex-direction: column;
row-gap: 7px;
width: 100%;
.executorDropdown__person {
display: flex;
justify-content: space-between;
align-items: center;
p {
max-width: 155px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
img {
width: 15px;
height: 15px;
}
&:hover {
p {
font-weight: 600;
}
}
}
}
}
&__back {
cursor: pointer;
display: flex;

View File

@ -122,6 +122,11 @@ export const projectsTrackerSlice = createSlice({
);
});
},
filteredExecutorTasks: (state, action) => {
state.projectBoard.columns.forEach((column) => {
column.tasks = column.tasks.filter((task) => task.executor_id === action.payload);
});
},
setColumnName: (state, action) => {
state.columnName = action.payload;
},
@ -174,6 +179,7 @@ export const {
addPersonToProject,
filterCreatedByMe,
filteredParticipateTasks,
filteredExecutorTasks,
movePositionProjectTask,
} = projectsTrackerSlice.actions;