ticket 51 filter tasks by projects added

planner-api/src/routers/tasks.ts

@@ -140,4 +140,25 @@ router.post('/project',async (req: Request, res: Response):Promise<Response>=>{
 }) 
 
 
+
+// router.post('/projects',async (req: Request, res: Response):Promise<Response>=>{
+//     let projectArray :string[]= req.body;
+//         console.log('projectArray ', projectArray)
+//     if (projectArray.length===0) {
+//         const tasks = await
+//         dataSource
+//        .getRepository(Task)
+//        .createQueryBuilder('task')
+//     //    .innerJoinAndSelect('task.executors', 'user')
+//         .innerJoinAndSelect('task.executors AND task.author', 'user')
+//        .where('task.project IS NULL')
+//        .getMany()
+//        return res.send({tasks})
+//     } 
+
+//     ///ssome code 
+//     return res.send({message:"some other staff"})
+// })
+
+
 export default router;

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

@@ -8,6 +8,18 @@ import MultipleSelect from '../../components/UI/MultipleSelect/MultipleSelect';
 
 export default function MyTaskToolBar(props) {
   
+   let projectsFilter =
+    <></>
+    if (props.projects)  {
+      projectsFilter=   
+      <MultipleSelect
+      projects={props.projects}
+      onClose={props.onClose}
+      projectName={props.projectName}
+      setProjectName={props.setProjectName}
+      />
+    }
+
   return (
     <Box sx={{ flexGrow: 1 }}>
       <AppBar position="static">
@@ -15,13 +27,8 @@ export default function MyTaskToolBar(props) {
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
             Мои задачи
           </Typography>
-          <MultipleSelect
-          projects={props.projects}
-          onClose={props.onClose}
-          projectName={props.projectName}
-          setProjectName={props.setProjectName}
-          />
-          <Button color="inherit" onClick={props.onClick} >Добавить задачу</Button>
+          {projectsFilter}
+          <Button color="inherit" onClick={()=>(props.onClick)} >Добавить задачу</Button>
         </Toolbar>
       </AppBar>
     </Box>

planner-front/src/components/UI/MultipleSelect/MultipleSelect.js

@@ -46,9 +46,11 @@ export default function MultipleSelect(props) {
   return (
     <div>
       <FormControl sx={{ m: 1, width: 250,borderColor:'white' }}>
-        <InputLabel id="demo-multiple-name-label" sx={{color:'white' }}>Project</InputLabel>
+        <InputLabel placeholder='Choose Project' label='I am a really really long green TextField label' id="demo-multiple-name-label" sx={{color:'white', padding:'1' }}>Project</InputLabel>
         <Select
           labelId="demo-multiple-name-label"
+          label='Choose Project'
+          name='Choose Project'
           id="demo-multiple-name"
           multiple
           value={props.projectName}

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

@@ -58,18 +58,12 @@ function stableSort(array, comparator) {
 export default function EnhancedTable() {
   const dispatch = useDispatch();
 
-
-
-  const tasks = useSelector((state) => state.tasks.tasks);
+  const calendarTasks = useSelector((state) => state.tasks.tasks);
+  const tasks = calendarTasks
 console.log(tasks)
   const [recievedTasks, setRecievedTasks] = useState([]);
   const [projects,setProjects]=useState(['1','2'])
 
-  useEffect(() => {
-    dispatch(fetchAllTasks());
-  }, [dispatch]);
-  
-
 
   const [order, setOrder] = React.useState("asc");
   const [orderBy, setOrderBy] = React.useState("id");
@@ -91,21 +85,6 @@ console.log(tasks)
     setPage(0);
   };
 
-  useEffect(() => {
-    if (tasks && tasks?.length > 0) {
-      let currentTasks = [];
-      currentTasks = tasks?.map((task) => {
-        return {
-          ...task,
-          isEditMode: false,
-          readOnly: true,
-          authorDisplayName: task.author.displayName,
-        };
-      });
-      setRecievedTasks(currentTasks);
-    }
-  }, [tasks]);
-
   const onChange = (e, task) => {
     const value = e.target.value;
     const name = e.target.name;
@@ -220,33 +199,49 @@ console.log(tasks)
   // ++++++++фильтрация по проектам+++++++++++++++
 
   const [projectName, setProjectName] = React.useState([]);
-  const [filter, setFilter] = React.useState(false);
+  const [filterProjectTumbler, setFilterProjectTumbler] = React.useState(false);
+
+
   const onClose=(projectName)=>{
-    console.log(projectName)
-    setFilter(true)
+    console.log("projectName", projectName, 'projects',projects)
+    let tasksFilteredByProject = tasks
+    if (projectName.length>0) {
+      tasksFilteredByProject = tasks.filter(task=>projectName.includes(task.project?.title)) 
+    }
+    setRecievedTasks(tasksFilteredByProject)
+    setFilterProjectTumbler(true)
   }
-  useEffect(() => {
+
+  const filterProjectsNamesFromTasks = ()=>{
     if (tasks && tasks?.length > 0) {
-      let currentTasks = [];
-      let i
-      for (i=0; i<projectName?.lenght; i++)
-      {currentTasks = tasks?.map((task) => {
-        if (task.project=projectName)
-        return {
-          ...task,
-            };
-      })};
-      setRecievedTasks(currentTasks);
+      const rawProjects= tasks.map(task=>task.project)
+      let rawSetProjectNames = []
+      for (let project of rawProjects){
+        if (project===null){
+        } else{
+          rawSetProjectNames.push(project.title)
+        }
+      }
+      let uniqueTitlesProjects = [...new Set(rawSetProjectNames)];
+      setProjects(uniqueTitlesProjects)
+      console.log('filterProjectsNamesFromTasks uniqueTitlesProjects',uniqueTitlesProjects)
     }
-  }, [filter==true]);
+  }
+
+ useEffect(() => {
+
+    dispatch(fetchAllTasks());
+    filterProjectsNamesFromTasks()
+    if (tasks && tasks?.length > 0) {
+      setRecievedTasks(tasks);
+      }
+}, [tasks===undefined]);
 
- // ++++++++фильтрация по проектам+++++++++++++++
- 
   if (
     tasks &&
     tasks?.length > 0 &&
     recievedTasks &&
-    recievedTasks?.length > 0
+    recievedTasks?.length >= 0
   ) {
     return (
       <Box sx={{ width: "fullwidth" }}>
@@ -255,7 +250,6 @@ console.log(tasks)
             onClick={() => {
               addTask();
             }}
-          
             projects={projects}
             onClose={onClose}
            projectName={projectName}
@@ -268,7 +262,7 @@ console.log(tasks)
                 order={order}
                 orderBy={orderBy}
                 onRequestSort={handleRequestSort}
-                rowCount={tasks.length}
+                // rowCount={tasks.length}
               />
               <TableBody>
                 {/* <TableRow sx={{height:'1px',margin:0,padding:0}}>
@@ -420,6 +414,7 @@ console.log(tasks)
               </TableBody>
             </Table>
           </TableContainer>
+          
           <TablePagination
             rowsPerPageOptions={[5, 10, 25]}
             component="div"

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

@@ -119,5 +119,5 @@ EnhancedTableHead.propTypes = {
   onRequestSort: PropTypes.func.isRequired,
   order: PropTypes.oneOf(['asc', 'desc']).isRequired,
   orderBy: PropTypes.string.isRequired,
-  rowCount: PropTypes.number.isRequired,
+  // rowCount: PropTypes.number.isRequired,
 };