executor filter tasks

This commit is contained in:
Николай Полтщук 2023-07-03 22:07:58 +03:00
parent 5af01a63ed
commit b5d205abc9
2 changed files with 49 additions and 31 deletions

View File

@ -36,6 +36,7 @@ import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import archive from "assets/icons/archiveTracker.svg"; import archive from "assets/icons/archiveTracker.svg";
import arrow from "assets/icons/arrows/arrowCalendar.png"; import arrow from "assets/icons/arrows/arrowCalendar.png";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import close from "assets/icons/close.png"; import close from "assets/icons/close.png";
import commentsBoard from "assets/icons/commentsBoard.svg"; import commentsBoard from "assets/icons/commentsBoard.svg";
import del from "assets/icons/delete.svg"; import del from "assets/icons/delete.svg";
@ -45,7 +46,6 @@ 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 arrowDown from "assets/icons/arrows/selectArrow.png";
export const ProjectTracker = () => { export const ProjectTracker = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -64,7 +64,7 @@ export const ProjectTracker = () => {
useState(false); 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);
const startWrapperIndexTest = useRef({}); const startWrapperIndexTest = useRef({});
const projectBoard = useSelector(getProjectBoard); const projectBoard = useSelector(getProjectBoard);
const loader = useSelector(getBoarderLoader); const loader = useSelector(getBoarderLoader);
@ -248,12 +248,12 @@ export const ProjectTracker = () => {
} }
function executorFilter(user) { function executorFilter(user) {
dispatch(filteredExecutorTasks(user.user_id)) dispatch(filteredExecutorTasks(user.user_id));
setSelectedExecutor(user) setSelectedExecutor(user);
} }
function deleteSelectedExecutorFilter() { function deleteSelectedExecutorFilter() {
setSelectedExecutor(null) setSelectedExecutor(null);
dispatch(setProjectBoardFetch(projectId.id)); dispatch(setProjectBoardFetch(projectId.id));
} }
@ -437,17 +437,18 @@ export const ProjectTracker = () => {
{checkBoxMyTasks && <img src={accept} alt="accept" />} {checkBoxMyTasks && <img src={accept} alt="accept" />}
</div> </div>
</div> </div>
{selectedExecutor ? {selectedExecutor ? (
<div className='tasks__head__executorSelected'> <div className="tasks__head__executorSelected">
<p>{selectedExecutor.user.fio}</p> <p>{selectedExecutor.user.fio}</p>
<img <img
className='avatar' className="avatar"
src={ src={
selectedExecutor.user?.avatar selectedExecutor.user?.avatar
? urlForLocal(selectedExecutor.user.avatar) ? urlForLocal(selectedExecutor.user.avatar)
: avatarMok : avatarMok
} }
alt='avatar' /> alt="avatar"
/>
<img <img
className="delete" className="delete"
src={close} src={close}
@ -455,14 +456,28 @@ export const ProjectTracker = () => {
onClick={deleteSelectedExecutorFilter} onClick={deleteSelectedExecutorFilter}
/> />
</div> </div>
: ) : (
<div className="tasks__head__executor" onClick={() => setSelectedExecutorOpen(!selectExecutorOpen)}> <div
className="tasks__head__executor"
onClick={() =>
setSelectedExecutorOpen(!selectExecutorOpen)
}
>
<p>Выберите исполнитель</p> <p>Выберите исполнитель</p>
<img className={selectExecutorOpen ? "open" : ""} src={arrowDown} alt="arrow" /> <img
{selectExecutorOpen && className={selectExecutorOpen ? "open" : ""}
<div className='tasks__head__executorDropdown'> src={arrowDown}
alt="arrow"
/>
{selectExecutorOpen && (
<div className="tasks__head__executorDropdown">
{projectBoard.projectUsers.map((user) => { {projectBoard.projectUsers.map((user) => {
return <div className='executorDropdown__person' key={user.user_id} onClick={() => executorFilter(user)}> return (
<div
className="executorDropdown__person"
key={user.user_id}
onClick={() => executorFilter(user)}
>
<p>{user.user?.fio}</p> <p>{user.user?.fio}</p>
<img <img
src={ src={
@ -470,14 +485,15 @@ export const ProjectTracker = () => {
? urlForLocal(user.user.avatar) ? urlForLocal(user.user.avatar)
: avatarMok : avatarMok
} }
alt='avatar' /> alt="avatar"
/>
</div> </div>
}) );
} })}
</div> </div>
} )}
</div> </div>
} )}
<Link to="/profile/tracker" className="tasks__head__back"> <Link to="/profile/tracker" className="tasks__head__back">
<p>Вернуться на проекты</p> <p>Вернуться на проекты</p>
<img src={arrow} alt="arrow" /> <img src={arrow} alt="arrow" />

View File

@ -124,7 +124,9 @@ export const projectsTrackerSlice = createSlice({
}, },
filteredExecutorTasks: (state, action) => { filteredExecutorTasks: (state, action) => {
state.projectBoard.columns.forEach((column) => { state.projectBoard.columns.forEach((column) => {
column.tasks = column.tasks.filter((task) => task.executor_id === action.payload); column.tasks = column.tasks.filter(
(task) => task.executor_id === action.payload
);
}); });
}, },
setColumnName: (state, action) => { setColumnName: (state, action) => {