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 (
-    <AppBar position="static" sx={{ padding: 3 }}>
-      <Box sx={{ display: 'flex', alignItems: 'center' }}>
-        <Typography
-          sx={{ flex: '1 1 100%' }}
-          variant="h6"
-          id="tableTitle"
-          component="div"
-        >
-          Задачи сотрудников
-        </Typography>
-        <CreateTaskFromButton
-          addFormStatus={addFormStatus}
-          onClick={() => { createTaskFromButtonHandler() }}
-        />
-      </Box>
-    </AppBar>
-  );
+  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
+        sx={{ flex: '1 1 100%' }}
+        variant="h6"
+        id="tableTitle"
+        component="div"
+      >
+        Задачи сотрудников
+      </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,11 +39,18 @@ 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;
@@ -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

@@ -31,4 +31,6 @@ export const FETCH_ALL_TASKS_BY_MEMBERSHIP_SUCCESS = "FETCH_ALL_TASKS_BY_MEMBERS
 export const FETCH_ALL_TASKS_BY_MEMBERSHIP_FAILURE = "FETCH_ALL_TASKS_BY_MEMBERSHIP_FAILURE";
 
 export const ACTIVATE_CREATE_COPY_TASKS_MODE = "ACTIVATE_CREATE_COPY_TASKS_MODE"
-export const DEACTIVATE_CREATE_COPY_TASKS_MODE = "DEACTIVATE_CREATE_COPY_TASKS_MODE"
\ No newline at end of file
+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/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;
   }