#138 added filtration active project button

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

@@ -7,8 +7,9 @@ import Button from '@mui/material/Button';
 import MultipleSelect from '../../components/UI/MultipleSelect/MultipleSelect';
 import Add from "@mui/icons-material/Add";
 import Close from "@mui/icons-material/Close";
+// import { TaskSharp } from '@mui/icons-material';
 
-export default function MyTaskToolBar({projects,onClose,projectIdListForTaskSelect,setProjectIdListForTaskSelect,formStatus,onClick}) {
+export default function MyTaskToolBar({projects,onClickActiveTasks,activeTasksOn, onCloseFilterByProjects,projectIdListForTaskSelect,setProjectIdListForTaskSelect,formStatus,onClick}) {
   
    let projectsFilter =
     <></>
@@ -17,12 +18,13 @@ export default function MyTaskToolBar({projects,onClose,projectIdListForTaskSele
       projectsFilter=   
       <MultipleSelect
       projects={projects}
-      onClose={onClose}
+      onClose={onCloseFilterByProjects}
       projectName={projectIdListForTaskSelect}
       setProjectName={setProjectIdListForTaskSelect}
       />
     }
 
+
   return (
     
     <Box sx={{ flexGrow: 1 }}>
@@ -31,6 +33,18 @@ export default function MyTaskToolBar({projects,onClose,projectIdListForTaskSele
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
             Мои задачи
           </Typography>
+          
+
+          <Button
+           color={"inherit"}
+           style={{
+             backgroundColor: activeTasksOn === true ? "red" : "inherit",
+           }}
+           onClick={onClickActiveTasks}
+          >
+            Активные задачи
+          </Button>
+
           {projectsFilter}
 
           <Button

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

@@ -34,6 +34,10 @@ export default function EnhancedTable() {
     open: false,
     task: null,
   });
+  const [projectIdListForTaskSelect, setProjectIdListForTaskSelect] = React.useState([]);
+  // const [filterProjectTumbler, setFilterProjectTumbler] = React.useState(false);
+  // const[filteredActiveTasks, setActiveTasks] = React.useState([]);
+  const [activeTasksOn, setActiveTasksOn] = React.useState(false)
 
 
   useEffect(() => {
@@ -43,7 +47,10 @@ export default function EnhancedTable() {
       }
 }, [
    tasks?.length,
-   addTaskForm, setAddTaskForm, dispatch]);
+   addTaskForm, setAddTaskForm,
+  //  onClickActiveTasks,
+  // activeTasksOn,
+    dispatch]);
   // console.log('tasks ', tasks,  'projects ', projects,"recievedTasks ", recievedTasks )
 
 
@@ -177,18 +184,35 @@ export default function EnhancedTable() {
   };
   // ++++++++фильтрация по проектам+++++++++++++++
 
-  const [projectIdListForTaskSelect, setProjectIdListForTaskSelect] = React.useState([]);
- const [filterProjectTumbler, setFilterProjectTumbler] = React.useState(false);
 
-  const onClose=(projectIdListForTaskSelect)=>{
+
+  const onCloseFilterByProjects=(projectIdListForTaskSelect)=>{
      let tasksFilteredByProject = tasks
      if (projectIdListForTaskSelect.length>0) {
        tasksFilteredByProject = tasks.filter(task=>projectIdListForTaskSelect.includes(task.project?.id)) 
      }
      console.log('tasksFilteredByProject ', tasksFilteredByProject)
      setRecievedTasks(tasksFilteredByProject)
-     setFilterProjectTumbler(true)
+    //  setFilterProjectTumbler(true)
    }
+
+
+  const onClickActiveTasks= ()=>{
+    console.log('active tasts before switched to ',  activeTasksOn)
+
+    setActiveTasksOn((prevState)=>{return !prevState})
+    console.log('active tasts after switch ',  activeTasksOn)
+
+    if (activeTasksOn) {
+      const activeTasks= recievedTasks.filter(recievedTask=>recievedTask.accomplish==='opened' || recievedTask.accomplish==='progress' )
+      console.log('received tasks in switch', recievedTasks)
+      setRecievedTasks(activeTasks)
+    } else {
+      setRecievedTasks(tasks)
+    }
+  }
+   
+
   //  if (
     // tasks &&
     // tasks?.length > 0
@@ -203,9 +227,11 @@ export default function EnhancedTable() {
             onClick={() => setAddTaskForm(!addTaskForm)}
             formStatus={addTaskForm}
             projects={projects}
-            onClose={onClose}
+            onCloseFilterByProjects={onCloseFilterByProjects}
             projectIdListForTaskSelect={projectIdListForTaskSelect}
             setProjectIdListForTaskSelect={setProjectIdListForTaskSelect}
+            onClickActiveTasks={onClickActiveTasks}
+            activeTasksOn={activeTasksOn}
           />
 
           {addTaskForm ? (