Merge branch 'task-51-enhance/sort_projects' into 'development'

Task 51 enhance/sort projects

See merge request !34

planner-api/src/routers/tasks.ts

@@ -2,6 +2,7 @@ import express,{Router, Request, Response} from 'express';
 import {Task} from '../models/Task';
 import {myDataSource} from '../app-data-source';
 import { User } from '../models/User';
+import { Project } from '../models/Project';
 const router:Router = express.Router();
 const dataSource = myDataSource;
 
@@ -37,7 +38,7 @@ router.post('/', async(req:Request, res:Response):Promise<Response>=>{
     return res.send({newTask})
 })
 
-router.get('/userId/:userId', async (req: Request, res: Response):Promise<Response>=>{   
+router.get('/:userId', async (req: Request, res: Response):Promise<Response>=>{   
     const userId = req.params.userId;
     const tasks = await dataSource
     .getRepository(Task)
@@ -111,4 +112,53 @@ router.put('/',async(req:Request, res:Response)=> {
 })
 
 
+router.post('/project',async (req: Request, res: Response):Promise<Response>=>{
+    let projectArray :string[]= req.body;
+        console.log('projectArray ', projectArray)
+    if (projectArray.length===0) {
+        const rawTasks = await
+        dataSource
+       .getRepository(Task)
+        .find({
+            relations:{
+                executors:true,
+                author:true,
+                project:true
+            }
+        })
+    const tasks:object[]= rawTasks.filter(task=>task.project===null)
+       return res.send({tasks})
+    } 
+    const tasks = await
+     dataSource
+    .getRepository(Task)
+    .createQueryBuilder('task')
+    .innerJoinAndSelect( 'task.project', 'project')
+    .where('task.project IN(:...projects)', {projects:projectArray})
+    .getMany()
+    return res.send({tasks})
+}) 
+
+
+
+// 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();
 
-  useEffect(() => {
-    dispatch(fetchAllTasks());
-  }, [dispatch]);
-
-  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=[
-    "project1",
-    "project2",
-    "project3"
-  ]
+  const [projects,setProjects]=useState(['1','2'])
+
 
   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)) 
     }
-  useEffect(() => {
+    setRecievedTasks(tasksFilteredByProject)
+    setFilterProjectTumbler(true)
+  }
+
+  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" }}>
@@ -267,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}}>
@@ -419,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,
 };

planner-front/src/store/actionTypes/tasksTypes.js

@@ -8,6 +8,10 @@ export const ADD_NEW_TASK_REQUEST = "ADD_NEW_TASK_REQUEST";
 export const ADD_NEW_TASK_SUCCESS = "ADD_NEW_TASK_SUCCESS";
 export const ADD_NEW_TASK_FAILURE = "ADD_NEW_TASK_FAILURE";
 
+export const FETCH_TASKS_BY_PROJECT_REQUEST = "FETCH_TASKS_BY_PROJECT_REQUEST";
+export const FETCH_TASKS_BY_PROJECT_SUCCESS = "FETCH_TASKS_BY_PROJECT_SUCCESS";
+export const FETCH_TASKS_BY_PROJECT_FAILURE = "FETCH_TASKS_BY_PROJECT_FAILURE";
+
 export const EDIT_TASK_REQUEST = "EDIT_TASK_REQUEST";
 export const EDIT_TASK_SUCCESS = "EDIT_TASK_SUCCESS";
 export const EDIT_TASK_FAILURE = "EDIT_TASK_FAILURE";

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

@@ -12,6 +12,9 @@ import {
   FETCH_CALENDAR_TASKS_REQUEST, 
   FETCH_CALENDAR_TASKS_SUCCESS,
   FETCH_ALL_TASKS_SUCCESS,
+  FETCH_TASKS_BY_PROJECT_SUCCESS,
+  FETCH_TASKS_BY_PROJECT_FAILURE,
+  FETCH_TASKS_BY_PROJECT_REQUEST
   } from "../actionTypes/tasksTypes";
 import axios from '../../axiosPlanner'
 
@@ -135,3 +138,28 @@ export const deleteTask = (taskId) => {
       }
   }
 }
+
+
+const fetchTasksByProjectRequest = () => {
+  return {type: FETCH_TASKS_BY_PROJECT_REQUEST}
+};
+
+const fetchTasksByProjectSuccess = () => {
+  return {type: FETCH_TASKS_BY_PROJECT_SUCCESS}
+};
+
+const fetchTasksByProjectFailure = (error) => {
+  return {type: FETCH_TASKS_BY_PROJECT_FAILURE, error}
+};
+
+export const fetchTasksByProject = (projects) => {
+  return async (dispatch) => {
+      dispatch(fetchTasksByProjectRequest());
+      try {
+        const response =await axios.post("/tasks/project", projects);
+        dispatch(fetchTasksByProjectSuccess(response.data.tasks))
+      } catch (error) {
+        dispatch(fetchTasksByProjectFailure(error.response.data));
+      }
+  }
+}
\ No newline at end of file

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

@@ -13,6 +13,9 @@ import {
   DELETE_TASK_FAILURE,
   FETCH_ALL_TASKS_SUCCESS,
   EDIT_CALENDAR_TASK,
+  FETCH_TASKS_BY_PROJECT_REQUEST,
+  FETCH_TASKS_BY_PROJECT_SUCCESS,
+  FETCH_TASKS_BY_PROJECT_FAILURE 
 } from "../actionTypes/tasksTypes";
 
 const initialState = {
@@ -66,6 +69,12 @@ const tasksReduсer = (state = initialState, action) => {
       return {...state, loading: true};
     case ADD_NEW_TASK_FAILURE:
       return {...state, loading: false, error: action.error};
+      case FETCH_TASKS_BY_PROJECT_SUCCESS:
+        return {...state, loading: false, tasks: action.tasks};
+      case FETCH_TASKS_BY_PROJECT_REQUEST:
+        return {...state, loading: true};
+      case FETCH_TASKS_BY_PROJECT_FAILURE:
+        return {...state, loading: false, error: action.error};
     case EDIT_TASK_SUCCESS:
       return {...state, loading: false};
     case EDIT_TASK_REQUEST: