Merge branch 'task-153-enhance/sorting_task_to_projects' into 'development'

#153 добавил селект для сортировки по проектам

See merge request !121

planner-api/src/routers/tasks.ts

@@ -380,10 +380,16 @@ router.post('/project',async (req: Request, res: Response):Promise<Response>=>{
     const tasks = await
      dataSource
     .getRepository(Task)
+    
     .createQueryBuilder('task')
     .innerJoinAndSelect( 'task.project', 'project')
+    .innerJoinAndSelect('task.author', 'users')
+    .innerJoinAndSelect('task.executor', 'userss')
+    .innerJoinAndSelect( 'task.dateTimeTasks', 'DateTimeTask')
     .where('task.project IN(:...projects)', {projects:projectArray})
     .getMany()
+    
+
     return res.send({tasks})
 }) 
 

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

@@ -29,7 +29,6 @@ function getStyles(name, personName, theme) {
 }
 
 export default function MultipleSelect({projects,onCloseFilterByProjects}) {
-
   const theme = useTheme();
   const [listProjectIds, setListProjectIds ] = React.useState([])
   const handleChange = (event) => {
@@ -48,10 +47,10 @@ export default function MultipleSelect({projects,onCloseFilterByProjects}) {
         <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>
+        >Проекты</InputLabel>
         <Select
           labelId="demo-multiple-name-label"
-          label='Choose Project'
+          label='Выберите проект'
           name='Choose Project'
           id="demo-multiple-name"
           multiple

planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/DateTimePicker/DateTimePicker.js

@@ -11,9 +11,6 @@ import moment from "moment";
 
 export default function MaterialUIPickers({ task, name, onChange, currentTask }) {
   const [state, setState] = useState(null)
-  let fullYear = new Date().getFullYear()
-  let month = new Date().getMonth()
-  let day = new Date().getDate();
   useEffect(() => {
     if (!task.dateTimeDeadLine) setState(null)
     if (currentTask) setState(moment(task.dateTimeDeadLine).utc())

planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/UsersTasksTableBody/UsersTasksRow/UsersTasksRow.js

@@ -28,7 +28,7 @@ function UsersTasksRow({ row, deleteTaskHandler, calendarOpen, deleteCopyTaskHan
   const [editMode, setEditMode] = useState(false);
 
   const dateTimeTasks = useMemo(() => {
-    if (row.dateTimeTasks.length === 1) {
+    if (row?.dateTimeTasks?.length === 1) {
       const date = moment(row.dateTimeTasks[0].dateTimeStart).utc().format('DD.MM')
       const start = moment(row.dateTimeTasks[0].dateTimeStart).utc().format('HH:mm')
       let end
@@ -60,7 +60,7 @@ function UsersTasksRow({ row, deleteTaskHandler, calendarOpen, deleteCopyTaskHan
         }
 
       </Box>
-    } else if (row.dateTimeTasks.length > 1) {
+    } else if (row?.dateTimeTasks?.length > 1) {
       return (<>
         <IconButton
           aria-label="expand row"
@@ -82,7 +82,7 @@ function UsersTasksRow({ row, deleteTaskHandler, calendarOpen, deleteCopyTaskHan
             : null
         }
       </>)
-    } else if (row.dateTimeTasks.length === 0) {
+    } else if (row?.dateTimeTasks?.length === 0) {
       return (<>
         Копий нет
         {

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

 import { AppBar, Box, Typography } from "@mui/material";
-import { memo } from "react";
+import { memo, useMemo } from "react";
+import MultipleSelect from "../../UI/MultipleSelect/MultipleSelect";
 import CreateTaskFromButton from "./CreateTaskFromButton/CreateTaskFromButton";
 
 
-function UsersTasksTableToolbar({ addFormStatus, createTaskFromButtonHandler }) {
+function UsersTasksTableToolbar({ addFormStatus, createTaskFromButtonHandler, projects, onCloseFilterByProjects, projectIdListForTaskSelect, setProjectIdListForTaskSelect}) {
 
-  return (
+  const projectsFilter = useMemo(() => {
+    if (Array.isArray(projects)) {
+      return <MultipleSelect
+        projects={projects}
+        onCloseFilterByProjects={onCloseFilterByProjects}
+        projectIdListForTaskSelect={projectIdListForTaskSelect}
+        setProjectIdListForTaskSelect={setProjectIdListForTaskSelect}
+      />
+    } else {
+      return null
+    }
+}, [projects, onCloseFilterByProjects, projectIdListForTaskSelect, setProjectIdListForTaskSelect])
+
+return (
   <AppBar position="static" sx={{ padding: 3 }}>
     <Box sx={{ display: 'flex', alignItems: 'center' }}>
       <Typography
@@ -16,13 +30,14 @@ function UsersTasksTableToolbar({ addFormStatus, createTaskFromButtonHandler })
       >
         Задачи сотрудников
       </Typography>
+      {projectsFilter}
       <CreateTaskFromButton
         addFormStatus={addFormStatus}
         onClick={() => { createTaskFromButtonHandler() }}
       />
     </Box>
   </AppBar>
-  );
+);
 }
 
 export default memo(UsersTasksTableToolbar)
\ No newline at end of file

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

@@ -2,10 +2,10 @@ import Paper from '@mui/material/Paper';
 import UsersTasksTableToolbar from '../../components/UsersTasksCompoments/UsersTasksTableToolbar/UsersTasksTableToolbar';
 import UsersTasksTablePagination from '../../components/UsersTasksCompoments/UsersTasksTablePagination/UsersTasksTablePagination';
 import UsersTasksTableContainer from '../../components/UsersTasksCompoments/UsersTasksTableContainer/UsersTasksTableContainer';
-import { activateCreateCopyTasksMode, addTaskToUserTasksTable, deleteDateTimeTaskUsers, deleteTaskUsers, editTaskUsers, fetchAllTasksByMembership } from '../../store/actions/tasksActions';
+import { activateCreateCopyTasksMode, addTaskToUserTasksTable, deleteDateTimeTaskUsers, deleteTaskUsers, editTaskUsers, fetchAllTasksByMembership, sortTaskByProjects } from '../../store/actions/tasksActions';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useCallback, useEffect, useState } from 'react';
-import { fetchAllUserProjects } from '../../store/actions/projectsActions';
+import { fetchAllUserProjects, fetchProjects } from '../../store/actions/projectsActions';
 import moment from 'moment';
 import { useNavigate } from 'react-router-dom';
 
@@ -13,8 +13,8 @@ export default function EnhancedTable() {
   const dispatch = useDispatch();
   const navigate = useNavigate()
 
-  const { tasks } = useSelector((state) => state.tasks);
-  const { allUserProjectsForModalTask } = useSelector(state => state.projects, shallowEqual)
+  const { tasks, sortedTasks } = useSelector((state) => state.tasks, shallowEqual);
+  const { allUserProjectsForModalTask, projects } = useSelector(state => state.projects, shallowEqual)
 
   const [newTask, setNewTask] = useState({
     priority: '',
@@ -39,12 +39,19 @@ export default function EnhancedTable() {
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);
   const [addFormStatus, setAddFormStatus] = useState(false);
+  const [projectIdListForTaskSelect, setProjectIdListForTaskSelect] = useState([]);
 
   useEffect(() => {
     dispatch(fetchAllTasksByMembership());
     dispatch(fetchAllUserProjects())
+    dispatch(fetchProjects())
   }, [dispatch]);
   
+  useEffect(() => {
+    dispatch(sortTaskByProjects(projectIdListForTaskSelect))
+  }, [dispatch, projectIdListForTaskSelect]);
+
+
   const onChangeNewTaskHandler = useCallback((e) => {
     const { value, name } = e.target;
     setNewTask((prevState => {
@@ -147,10 +154,10 @@ export default function EnhancedTable() {
     dispatch(deleteDateTimeTaskUsers(id))
   }, [dispatch])
 
-  const calendarOpen = (task) => {
+  const calendarOpen = useCallback((task) => {
     dispatch(activateCreateCopyTasksMode(task, navigate))
-  }
-  console.log(currentTask)
+  }, [dispatch, navigate])
+
   const editCurrentTaskHandler = useCallback(() => {
     if (currentTask.priority === '' || currentTask.project === '' || currentTask.executor === '' || !Object.keys(currentTask.executor).length) {
       const task = {
@@ -174,17 +181,25 @@ export default function EnhancedTable() {
     })
   }, [dispatch, currentTask])
 
+  const onCloseFilterByProjects = useCallback((listProjectIds) => {
+    setProjectIdListForTaskSelect(listProjectIds)
+  }, [])
+
   return (
     <Paper sx={{ width: '100%', mb: 2 }}>
       <UsersTasksTableToolbar
         addFormStatus={addFormStatus}
         createTaskFromButtonHandler={createTaskFromButtonHandler}
+        onCloseFilterByProjects={onCloseFilterByProjects}
+        projectIdListForTaskSelect={projectIdListForTaskSelect}
+        setProjectIdListForTaskSelect={setProjectIdListForTaskSelect}
+        projects={projects.projects}
       />
       <UsersTasksTableContainer
         order={order}
         orderBy={orderBy}
         handleRequestSort={handleRequestSort}
-        rows={tasks}
+        rows={projectIdListForTaskSelect.length ? sortedTasks : tasks}
         page={page}
         rowsPerPage={rowsPerPage}
         addFormStatus={addFormStatus}
@@ -203,7 +218,7 @@ export default function EnhancedTable() {
         editCurrentTaskHandler={editCurrentTaskHandler}
       />
       <UsersTasksTablePagination
-        count={tasks.length}
+        count={projectIdListForTaskSelect.length ? sortedTasks.length : tasks.length}
         rowsPerPage={rowsPerPage}
         page={page}
         handleChangePage={handleChangePage}

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

@@ -32,3 +32,5 @@ export const FETCH_ALL_TASKS_BY_MEMBERSHIP_FAILURE = "FETCH_ALL_TASKS_BY_MEMBERS
 
 export const ACTIVATE_CREATE_COPY_TASKS_MODE = "ACTIVATE_CREATE_COPY_TASKS_MODE"
 export const DEACTIVATE_CREATE_COPY_TASKS_MODE = "DEACTIVATE_CREATE_COPY_TASKS_MODE"
+
+export const SORT_TASKS = "SORT_TASKS"
\ No newline at end of file

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

@@ -20,25 +20,26 @@ import {
   DELETE_DATETIMETASK_REQUEST,
   FETCH_ALL_TASKS_BY_MEMBERSHIP_SUCCESS,
   DEACTIVATE_CREATE_COPY_TASKS_MODE,
-  ACTIVATE_CREATE_COPY_TASKS_MODE
-  } from "../actionTypes/tasksTypes";
+  ACTIVATE_CREATE_COPY_TASKS_MODE,
+  SORT_TASKS
+} from "../actionTypes/tasksTypes";
 import axios from '../../axiosPlanner'
 
 const fetchCalendarTasksRequest = () => {
-  return {type: FETCH_CALENDAR_TASKS_REQUEST}
+  return { type: FETCH_CALENDAR_TASKS_REQUEST }
 };
 
 const fetchCalendarTasksSuccess = (tasks) => {
-  return {type: FETCH_CALENDAR_TASKS_SUCCESS, tasks}
+  return { type: FETCH_CALENDAR_TASKS_SUCCESS, tasks }
 };
 
-const fetchAllTasksSuccess = (tasks,projects) => {
-  return {type: FETCH_ALL_TASKS_SUCCESS, tasks, projects}
+const fetchAllTasksSuccess = (tasks, projects) => {
+  return { type: FETCH_ALL_TASKS_SUCCESS, tasks, projects }
 };
 
 
 const fetchCalendarTasksFailure = (error) => {
-  return {type: FETCH_CALENDAR_TASKS_FAILURE, error}
+  return { type: FETCH_CALENDAR_TASKS_FAILURE, error }
 };
 
 export const fetchCalendarTasks = (userId) => {
@@ -58,7 +59,7 @@ export const fetchAllTasks = () => {
     dispatch(fetchCalendarTasksRequest());
     try {
       const response = await axios.get("/tasks/my");
-           dispatch(fetchAllTasksSuccess(response.data.tasks,response.data.projects))
+      dispatch(fetchAllTasksSuccess(response.data.tasks, response.data.projects))
     } catch (error) {
       dispatch(fetchCalendarTasksFailure(error.response.data));
     }
@@ -67,7 +68,7 @@ export const fetchAllTasks = () => {
 
 //**fetch tasks for table UsersTasks,  start*/
 const fetchAllTasksByMembershipSuccess = (tasks, projects) => {
-  return {type: FETCH_ALL_TASKS_BY_MEMBERSHIP_SUCCESS, tasks, projects}
+  return { type: FETCH_ALL_TASKS_BY_MEMBERSHIP_SUCCESS, tasks, projects }
 };
 
 
@@ -86,17 +87,22 @@ export const fetchAllTasksByMembership = () => {
 
 //**end*/
 
+export const sortTaskByProjects = (projectIdListForTaskSelect) => {
+  return { type: SORT_TASKS, projectIdListForTaskSelect }
+}
+
+
 
 const addTaskRequest = () => {
-  return {type: ADD_NEW_TASK_REQUEST} 
+  return { type: ADD_NEW_TASK_REQUEST }
 };
 
 const addTaskSuccess = () => {
-  return {type: ADD_NEW_TASK_SUCCESS}
+  return { type: ADD_NEW_TASK_SUCCESS }
 };
 
 const addTaskFailure = (error) => {
-  return {type: ADD_NEW_TASK_FAILURE, error}
+  return { type: ADD_NEW_TASK_FAILURE, error }
 };
 
 export const addCalendarTask = (task, userId) => {
@@ -139,15 +145,15 @@ export const addTask = (task) => {
 }
 
 const editTaskRequest = () => {
-  return {type: EDIT_TASK_REQUEST}
+  return { type: EDIT_TASK_REQUEST }
 };
 
 const editTaskSuccess = () => {
-  return {type: EDIT_TASK_SUCCESS}
+  return { type: EDIT_TASK_SUCCESS }
 };
 
 const editTaskFailure = (error) => {
-  return {type: EDIT_TASK_FAILURE, error}
+  return { type: EDIT_TASK_FAILURE, error }
 };
 
 export const editTask = (task) => {
@@ -169,7 +175,7 @@ export const editTaskUsers = (task) => {
     try {
       await axios.put(`/tasks/${task.id}`, task);
       dispatch(editTaskSuccess())
-        await dispatch(fetchAllTasksByMembership())
+      dispatch(fetchAllTasksByMembership())
     } catch (error) {
       dispatch(editTaskFailure(error.response.data));
     }
@@ -190,15 +196,15 @@ export const editCalendarTask = (task, taskId, userId) => {
 }
 
 const deleteTaskRequest = () => {
-  return {type: DELETE_TASK_REQUEST}
+  return { type: DELETE_TASK_REQUEST }
 };
 
 const deleteTaskSuccess = () => {
-  return {type: DELETE_TASK_SUCCESS}
+  return { type: DELETE_TASK_SUCCESS }
 };
 
 const deleteTaskFailure = (error) => {
-  return {type: DELETE_TASK_FAILURE, error}
+  return { type: DELETE_TASK_FAILURE, error }
 };
 
 export const deleteTask = (taskId) => {
@@ -220,7 +226,7 @@ export const deleteTaskUsers = (taskId) => {
     try {
       await axios.delete(`/tasks/${taskId}`);
       dispatch(deleteTaskSuccess())
-        await dispatch(fetchAllTasksByMembership())
+      dispatch(fetchAllTasksByMembership())
     } catch (error) {
       dispatch(deleteTaskFailure(error.response.data));
     }
@@ -243,22 +249,22 @@ export const deleteCalendarTask = (taskId, userId) => {
 
 
 const fetchTasksByProjectRequest = () => {
-  return {type: FETCH_TASKS_BY_PROJECT_REQUEST}
+  return { type: FETCH_TASKS_BY_PROJECT_REQUEST }
 };
 
 const fetchTasksByProjectSuccess = () => {
-  return {type: FETCH_TASKS_BY_PROJECT_SUCCESS}
+  return { type: FETCH_TASKS_BY_PROJECT_SUCCESS }
 };
 
 const fetchTasksByProjectFailure = (error) => {
-  return {type: FETCH_TASKS_BY_PROJECT_FAILURE, 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);
+      const response = await axios.post("/tasks/project", projects);
       dispatch(fetchTasksByProjectSuccess(response.data.tasks))
     } catch (error) {
       dispatch(fetchTasksByProjectFailure(error.response.data));
@@ -269,15 +275,15 @@ export const fetchTasksByProject = (projects) => {
 
 
 const deleteDateTimeTaskRequest = () => {
-  return {type: DELETE_DATETIMETASK_REQUEST}
+  return { type: DELETE_DATETIMETASK_REQUEST }
 };
 
 const deleteDateTimeTaskSuccess = () => {
-  return {type: DELETE_DATETIMETASK_SUCCESS}
+  return { type: DELETE_DATETIMETASK_SUCCESS }
 };
 
 const deleteDateTimeTaskFailure = (error) => {
-  return {type: DELETE_DATETIMETASK_FAILURE, error}
+  return { type: DELETE_DATETIMETASK_FAILURE, error }
 };
 
 export const deleteDateTimeTask = (dateTimeTaskId) => {
@@ -310,15 +316,15 @@ export const deleteDateTimeTaskUsers = (dateTimeTaskId) => {
 
 /** add new task in UserTasks Table */
 const addTaskToUserTasksTableRequest = () => {
-  return {type: ADD_NEW_TASK_REQUEST} 
+  return { type: ADD_NEW_TASK_REQUEST }
 };
 
 const addTaskToUserTasksTableSuccess = () => {
-  return {type: ADD_NEW_TASK_SUCCESS}
+  return { type: ADD_NEW_TASK_SUCCESS }
 };
 
 const addTaskToUserTasksTableFailure = (error) => {
-  return {type: ADD_NEW_TASK_FAILURE, error}
+  return { type: ADD_NEW_TASK_FAILURE, error }
 };
 
 export const addTaskToUserTasksTable = (task) => {
@@ -338,9 +344,9 @@ export const addTaskToUserTasksTable = (task) => {
 
 export const activateCreateCopyTasksMode = (task, navigate) => {
   navigate('/')
-  return {type: ACTIVATE_CREATE_COPY_TASKS_MODE, task}
+  return { type: ACTIVATE_CREATE_COPY_TASKS_MODE, task }
 }
 
 export const deactivateCreateCopyTasksMode = () => {
-  return {type: DEACTIVATE_CREATE_COPY_TASKS_MODE}
+  return { type: DEACTIVATE_CREATE_COPY_TASKS_MODE }
 }
\ No newline at end of file

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

@@ -21,7 +21,8 @@ import {
   DELETE_DATETIMETASK_REQUEST,
   FETCH_ALL_TASKS_BY_MEMBERSHIP_SUCCESS,
   ACTIVATE_CREATE_COPY_TASKS_MODE,
-  DEACTIVATE_CREATE_COPY_TASKS_MODE
+  DEACTIVATE_CREATE_COPY_TASKS_MODE,
+  SORT_TASKS
 } from "../actionTypes/tasksTypes";
 
 const initialState = {
@@ -31,6 +32,7 @@ const initialState = {
   },
   tasks: [],
   calendarTasks: [],
+  sortedTasks: [],
   loading: false,
   error: null,
 };
@@ -141,6 +143,9 @@ const tasksReduсer = (state = initialState, action) => {
       return { ...state, copyMode: { working: true, task: action.task } }
     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)) 
+      return { ...state, loading: false, sortedTasks: filteredTasks };
     default:
       return state;
   }