Commit d8b93d48 authored by Ermolaev Timur's avatar Ermolaev Timur

#154 добавил сортировку по активным задачам

parent 94d3fe63
......@@ -8,7 +8,7 @@ function CreateTaskFromButton({ addFormStatus, onClick }) {
color={addFormStatus === true ? "info" : "inherit"}
style={{
backgroundColor: addFormStatus === true ? "white" : "inherit",
width: '250px'
width: '280px'
}}
onClick={onClick}
>
......
import { AppBar, Box, Typography } from "@mui/material";
import { AppBar, Box, FormControlLabel, Switch, Typography } from "@mui/material";
import { memo, useMemo } from "react";
import MultipleSelect from "../../UI/MultipleSelect/MultipleSelect";
import CreateTaskFromButton from "./CreateTaskFromButton/CreateTaskFromButton";
function MyTasksTableToolbar({ addFormStatus, createTaskFromButtonHandler, projects, onCloseFilterByProjects, projectIdListForTaskSelect, setProjectIdListForTaskSelect}) {
function MyTasksTableToolbar({ addFormStatus, createTaskFromButtonHandler, projects, onCloseFilterByProjects, projectIdListForTaskSelect, setProjectIdListForTaskSelect, activeTasksOn, setActiveTasksOn }) {
const projectsFilter = useMemo(() => {
if (Array.isArray(projects)) {
......@@ -17,27 +17,32 @@ function MyTasksTableToolbar({ addFormStatus, createTaskFromButtonHandler, proje
} else {
return null
}
}, [projects, onCloseFilterByProjects, projectIdListForTaskSelect, setProjectIdListForTaskSelect])
}, [projects, onCloseFilterByProjects, projectIdListForTaskSelect, setProjectIdListForTaskSelect])
return (
<AppBar position="static" sx={{ padding: 3 }}>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Typography
sx={{ flex: '1 1 100%' }}
variant="h6"
id="tableTitle"
component="div"
>
Мои задачи
</Typography>
{projectsFilter}
<CreateTaskFromButton
addFormStatus={addFormStatus}
onClick={() => { createTaskFromButtonHandler() }}
/>
</Box>
</AppBar>
);
return (
<AppBar position="static" sx={{ padding: 3 }}>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Typography
sx={{ flex: '1 1 100%' }}
variant="h6"
id="tableTitle"
component="div"
>
Мои задачи
</Typography>
<FormControlLabel
control={<Switch color='error' checked={activeTasksOn} onChange={() => { setActiveTasksOn(prevState=>!prevState) }} />}
label="Активные задачи"
labelPlacement="end"
/>
{projectsFilter}
<CreateTaskFromButton
addFormStatus={addFormStatus}
onClick={() => { createTaskFromButtonHandler() }}
/>
</Box>
</AppBar>
);
}
export default memo(MyTasksTableToolbar)
\ No newline at end of file
......@@ -8,7 +8,7 @@ function CreateTaskFromButton({ addFormStatus, onClick }) {
color={addFormStatus === true ? "info" : "inherit"}
style={{
backgroundColor: addFormStatus === true ? "white" : "inherit",
width: '250px'
width: '280px'
}}
onClick={onClick}
>
......
import { AppBar, Box, Typography } from "@mui/material";
import { AppBar, Box, FormControlLabel, Switch, Typography } from "@mui/material";
import { memo, useMemo } from "react";
import MultipleSelect from "../../UI/MultipleSelect/MultipleSelect";
import CreateTaskFromButton from "./CreateTaskFromButton/CreateTaskFromButton";
function UsersTasksTableToolbar({ addFormStatus, createTaskFromButtonHandler, projects, onCloseFilterByProjects, projectIdListForTaskSelect, setProjectIdListForTaskSelect}) {
function UsersTasksTableToolbar({ addFormStatus, createTaskFromButtonHandler, projects, onCloseFilterByProjects, projectIdListForTaskSelect, setProjectIdListForTaskSelect, activeTasksOn, setActiveTasksOn}) {
const projectsFilter = useMemo(() => {
if (Array.isArray(projects)) {
......@@ -30,6 +30,11 @@ return (
>
Задачи сотрудников
</Typography>
<FormControlLabel
control={<Switch color='error' checked={activeTasksOn} onChange={() => { setActiveTasksOn(prevState=>!prevState) }} />}
label="Активные задачи"
labelPlacement="end"
/>
{projectsFilter}
<CreateTaskFromButton
addFormStatus={addFormStatus}
......
......@@ -39,6 +39,7 @@ export default function MyTasks() {
const [rowsPerPage, setRowsPerPage] = useState(10);
const [addFormStatus, setAddFormStatus] = useState(false);
const [projectIdListForTaskSelect, setProjectIdListForTaskSelect] = useState([]);
const [activeTasksOn, setActiveTasksOn] = useState(false)
useEffect(() => {
dispatch(fetchAllTasks());
......@@ -47,8 +48,8 @@ export default function MyTasks() {
}, [dispatch]);
useEffect(() => {
dispatch(sortTaskByProjects(projectIdListForTaskSelect))
}, [dispatch, projectIdListForTaskSelect]);
dispatch(sortTaskByProjects(projectIdListForTaskSelect, activeTasksOn))
}, [dispatch, projectIdListForTaskSelect, activeTasksOn, tasks]);
const onChangeNewTaskHandler = useCallback((e) => {
......@@ -173,6 +174,7 @@ export default function MyTasks() {
setProjectIdListForTaskSelect(listProjectIds)
}, [])
return (
<Paper sx={{ width: '100%', mb: 2 }}>
<MyTasksTableToolbar
......@@ -182,12 +184,14 @@ export default function MyTasks() {
projectIdListForTaskSelect={projectIdListForTaskSelect}
setProjectIdListForTaskSelect={setProjectIdListForTaskSelect}
projects={projects.projects}
activeTasksOn={activeTasksOn}
setActiveTasksOn={setActiveTasksOn}
/>
<MyTasksTableContainer
order={order}
orderBy={orderBy}
handleRequestSort={handleRequestSort}
rows={projectIdListForTaskSelect.length ? sortedTasks : tasks}
rows={sortedTasks.length ? sortedTasks : tasks}
page={page}
rowsPerPage={rowsPerPage}
addFormStatus={addFormStatus}
......@@ -206,7 +210,7 @@ export default function MyTasks() {
editCurrentTaskHandler={editCurrentTaskHandler}
/>
<MyTasksTablePagination
count={projectIdListForTaskSelect.length ? sortedTasks.length : tasks.length}
count={sortedTasks.length ? sortedTasks.length : tasks.length}
rowsPerPage={rowsPerPage}
page={page}
handleChangePage={handleChangePage}
......
......@@ -40,6 +40,7 @@ export default function UsersTasks() {
const [rowsPerPage, setRowsPerPage] = useState(10);
const [addFormStatus, setAddFormStatus] = useState(false);
const [projectIdListForTaskSelect, setProjectIdListForTaskSelect] = useState([]);
const [activeTasksOn, setActiveTasksOn] = useState(false)
useEffect(() => {
dispatch(fetchAllTasksByMembership());
......@@ -48,8 +49,8 @@ export default function UsersTasks() {
}, [dispatch]);
useEffect(() => {
dispatch(sortTaskByProjects(projectIdListForTaskSelect))
}, [dispatch, projectIdListForTaskSelect]);
dispatch(sortTaskByProjects(projectIdListForTaskSelect, activeTasksOn))
}, [dispatch, projectIdListForTaskSelect, activeTasksOn, tasks]);
const onChangeNewTaskHandler = useCallback((e) => {
......@@ -194,12 +195,14 @@ export default function UsersTasks() {
projectIdListForTaskSelect={projectIdListForTaskSelect}
setProjectIdListForTaskSelect={setProjectIdListForTaskSelect}
projects={projects.projects}
activeTasksOn={activeTasksOn}
setActiveTasksOn={setActiveTasksOn}
/>
<UsersTasksTableContainer
order={order}
orderBy={orderBy}
handleRequestSort={handleRequestSort}
rows={projectIdListForTaskSelect.length ? sortedTasks : tasks}
rows={sortedTasks.length ? sortedTasks : tasks}
page={page}
rowsPerPage={rowsPerPage}
addFormStatus={addFormStatus}
......@@ -218,7 +221,7 @@ export default function UsersTasks() {
editCurrentTaskHandler={editCurrentTaskHandler}
/>
<UsersTasksTablePagination
count={projectIdListForTaskSelect.length ? sortedTasks.length : tasks.length}
count={sortedTasks.length ? sortedTasks.length : tasks.length}
rowsPerPage={rowsPerPage}
page={page}
handleChangePage={handleChangePage}
......
......@@ -87,8 +87,8 @@ export const fetchAllTasksByMembership = () => {
//**end*/
export const sortTaskByProjects = (projectIdListForTaskSelect) => {
return { type: SORT_TASKS, projectIdListForTaskSelect }
export const sortTaskByProjects = (projectIdListForTaskSelect, activeTasksOn) => {
return { type: SORT_TASKS, projectIdListForTaskSelect: projectIdListForTaskSelect, activeTasksOn: activeTasksOn }
}
......
......@@ -156,7 +156,17 @@ const tasksReduсer = (state = initialState, action) => {
case DEACTIVATE_CREATE_COPY_TASKS_MODE:
return { ...state, copyMode: { working: false, task: null } }
case SORT_TASKS:
const filteredTasks = state.tasks.filter(task=>action.projectIdListForTaskSelect.includes(task.project?.id))
let filteredTasks = []
if (action.activeTasksOn) {
filteredTasks = state.tasks.filter(task=>task.accomplish==='opened' || task.accomplish==='progress')
}
if (action.projectIdListForTaskSelect.length) {
if (filteredTasks.length) {
filteredTasks = filteredTasks.filter(task=>action.projectIdListForTaskSelect.includes(task.project?.id))
} else {
filteredTasks = state.tasks.filter(task=>action.projectIdListForTaskSelect.includes(task.project?.id))
}
}
return { ...state, loading: false, sortedTasks: filteredTasks };
default:
return state;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment