Merge branch 'task-138-feature/filtration_active_tasks' into 'development'

Task 138 feature/filtration active tasks

See merge request !117

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}
-      projectName={projectIdListForTaskSelect}
-      setProjectName={setProjectIdListForTaskSelect}
+      onCloseFilterByProjects={onCloseFilterByProjects}
+      projectIdListForTaskSelect={projectIdListForTaskSelect}
+      setProjectIdListForTaskSelect={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/components/UI/MultipleSelect/MultipleSelect.js

@@ -28,15 +28,15 @@ function getStyles(name, personName, theme) {
   };
 }
 
-export default function MultipleSelect({projects,projectName,onClose,setProjectName}) {
+export default function MultipleSelect({projects,onCloseFilterByProjects}) {
 
   const theme = useTheme();
-
+  const [listProjectIds, setListProjectIds ] = React.useState([])
   const handleChange = (event) => {
     const {
       target: { value },
     } = event;
-    setProjectName(
+    setListProjectIds(
       // On autofill we get a stringified value.
       typeof value === 'string' ? value.split(',') : value,
     );
@@ -55,18 +55,18 @@ export default function MultipleSelect({projects,projectName,onClose,setProjectN
           name='Choose Project'
           id="demo-multiple-name"
           multiple
-          value={projectName}
+          value={listProjectIds}
           onChange={handleChange}
           input={<OutlinedInput label="Name" />}
           MenuProps={MenuProps}
           sx={{color:'white' }}
-          onClose={(e)=>{onClose(projectName)}}
+          onClose={(e)=>{onCloseFilterByProjects(listProjectIds)}}
         >
           {projects?.map((project,index) => (
             <MenuItem
               key={index}
               value={project.id}
-              style={getStyles(project.title, projectName, theme)}
+              style={getStyles(project.title, listProjectIds, theme)}
             >
               {project.title}
             </MenuItem>

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,11 +47,27 @@ export default function EnhancedTable() {
       }
 }, [
    tasks?.length,
-   addTaskForm, setAddTaskForm, dispatch]);
+   addTaskForm, setAddTaskForm,
+  //  onClickActiveTasks,
+  // activeTasksOn,
+    dispatch
+  ]);
   // console.log('tasks ', tasks,  'projects ', projects,"recievedTasks ", recievedTasks )
 
 
 
+  useEffect(() => {
+    let filteredTasks = tasks;
+    if (activeTasksOn) {
+      filteredTasks = filteredTasks.filter(task=>task.accomplish==='opened' || task.accomplish==='progress')
+    }
+    if (projectIdListForTaskSelect.length>0) {
+      filteredTasks = filteredTasks.filter(task=>projectIdListForTaskSelect.includes(task.project?.id)) 
+    }
+    setRecievedTasks(filteredTasks)
+  }, [activeTasksOn, projectIdListForTaskSelect]);
+
+
   const handleRequestSort = ( property) => {
     const isAsc = orderBy === property && order === "asc";
 
@@ -177,18 +197,30 @@ export default function EnhancedTable() {
   };
   // ++++++++фильтрация по проектам+++++++++++++++
 
-  const [projectIdListForTaskSelect, setProjectIdListForTaskSelect] = React.useState([]);
- const [filterProjectTumbler, setFilterProjectTumbler] = React.useState(false);
 
-  const onClose=(projectIdListForTaskSelect)=>{
-     let tasksFilteredByProject = tasks
-     if (projectIdListForTaskSelect.length>0) {
-       tasksFilteredByProject = tasks.filter(task=>projectIdListForTaskSelect.includes(task.project?.id)) 
+
+  const onCloseFilterByProjects=(listProjectIds)=>{
+    setProjectIdListForTaskSelect(listProjectIds)
+   }
+
+
+  const onClickActiveTasks= ()=>{
+    console.log('active tasts before switched to ',  activeTasksOn)
+
+    // setActiveTasksOn((prevState)=>{return !prevState})
+    setActiveTasksOn(!activeTasksOn)
+    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)
     }
-     console.log('tasksFilteredByProject ', tasksFilteredByProject)
-     setRecievedTasks(tasksFilteredByProject)
-     setFilterProjectTumbler(true)
   }
+   
+
   //  if (
     // tasks &&
     // tasks?.length > 0
@@ -203,9 +235,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 ? (