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

planner-front/src/components/MyTasksCompoments/MyTasksTableToolbar/CreateTaskFromButton/CreateTaskFromButton.js

@@ -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}
     >

planner-front/src/components/MyTasksCompoments/MyTasksTableToolbar/MyTasksTableToolbar.js

-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

planner-front/src/components/UsersTasksCompoments/UsersTasksTableToolbar/CreateTaskFromButton/CreateTaskFromButton.js

@@ -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}
     >

planner-front/src/components/UsersTasksCompoments/UsersTasksTableToolbar/UsersTasksTableToolbar.js

-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}

planner-front/src/containers/MyTasks/MyTasks.js

@@ -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}

planner-front/src/containers/UsersTasks/UsersTasks.js

@@ -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}

planner-front/src/store/actions/tasksActions.js

@@ -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 }
 }
 
 

planner-front/src/store/reducers/tasksReducer.js

@@ -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;