#149 немного починил сортировки и сделал более стабильное отображение таблицы

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/CalendarColumnDayWeek/CalendarWeekTask/CalendarWeekTask.js

@@ -101,7 +101,7 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
   const returnTask = useMemo(() => {
     if (copyModeTask?.id === task?.mainTaskId) {
       return (<>
-        <span style={{ textOverflow: 'ellipsis', padding: '5px 0 0 5px' }}>
+        <span style={{ maxWidth: '80%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px 0 0 5px' }}>
           {task.title}
         </span>
         <DeleteIcon
@@ -121,7 +121,7 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
       </>)
     } else {
       return (<>
-        <span style={{ textOverflow: 'ellipsis', padding: '5px 0 0 5px' }}>
+        <span style={{ maxWidth: '80%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px 0 0 5px' }}>
           {task.title}
         </span>
         <CopyIcon

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

-import { TableBody, TableCell, TableRow} from "@mui/material";
+import { Divider, TableBody, TableCell, TableRow, Tooltip } from "@mui/material";
+import moment from "moment";
 import { memo } from "react";
+import DeleteButton from "../../../UI/DeleteButton/DeleteButton";
 import { getComparator, stableSort } from "./helpers";
+import { Done, Edit } from "@mui/icons-material";
 
-function UsersTasksTableBody({rows, page, rowsPerPage, order, orderBy}) {
+function UsersTasksTableBody({ rows, page, rowsPerPage, order, orderBy }) {
 
   return (
     <TableBody>
@@ -12,24 +15,29 @@ function UsersTasksTableBody({rows, page, rowsPerPage, order, orderBy}) {
           return (
             <TableRow
               hover
-              tabIndex={-1}
-              key={row.name}
+              key={row.id}
             >
-              <TableCell
-                component="th"
-                scope="row"
-                padding="none"
-              >
-                {row.name}
+              <TableCell sx={{ width: '4%' }}>{row.priority ? row.priority : null}</TableCell>
+              <TableCell sx={{ width: '10%' }}>{moment(row.createdAt).format('DD.MM.YYYY')}</TableCell>
+              <Tooltip title={row.description}>
+                <TableCell sx={{ width: '25%', overflow: 'hidden', overflow: 'hidden', textOverflow: 'ellipsis'}}>
+                    {row.title}
+                </TableCell>
+              </Tooltip>
+              <TableCell sx={{ width: '10%' }}>{row.projectTitle}</TableCell>
+              <TableCell sx={{ width: '8%' }}>{row.executorName}</TableCell>
+              <TableCell sx={{ width: '8%' }}>{row.authorName}</TableCell>
+              <TableCell sx={{ width: '15%' }}>{row.dateTimeTasks.length ? row.dateTimeTasks[0].dateTimeStart : null}</TableCell>
+              <TableCell sx={{ width: '10%' }}>{row.dateTimeDeadLine ? moment(row.dateTimeDeadLine).utcOffset('+000').format('DD.MM.YYYY HH:MM') : null}</TableCell>
+              <TableCell sx={{ width: '7%' }}>{row.accomplish}</TableCell>
+              <TableCell size='medium' sx={{ width: '5%', position: 'relative' }}>
+                <Edit sx={{position: 'absolute', left: -10}}/>
+                <DeleteButton/>
               </TableCell>
-              <TableCell align="right">{row.calories}</TableCell>
-              <TableCell align="right">{row.fat}</TableCell>
-              <TableCell align="right">{row.carbs}</TableCell>
-              <TableCell align="right">{row.protein}</TableCell>
             </TableRow>
           );
         })}
-    </TableBody>
+    </TableBody >
   );
 }
 

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

-function descendingComparator(a, b, orderBy) {
+function descendingComparator(a, b, orderBy, order) {
+
+  if (!b[orderBy]) {
+    if (order ==='asc') {
+      return 1
+    }
+    return -1
+  }
   if (b[orderBy] < a[orderBy]) {
     return -1;
   }
@@ -9,9 +16,10 @@ function descendingComparator(a, b, orderBy) {
 }
 
 export function getComparator(order, orderBy) {
+  console.log(order)
   return order === 'desc'
     ? (a, b) => descendingComparator(a, b, orderBy)
-    : (a, b) => -descendingComparator(a, b, orderBy);
+    : (a, b) => -descendingComparator(a, b, orderBy, order);
 }
 
 export function stableSort(array, comparator) {

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

@@ -4,34 +4,84 @@ import { memo } from "react";
 
 const headCells = [
   {
-    id: 'name',
-    numeric: false,
-    disablePadding: false,
-    label: 'Dessert (100g serving)',
+    id: "priority",
+    label: "Приоритет",
+    canSort: true,
+    style: {
+      width: '4%'
+    }
   },
   {
-    id: 'calories',
-    numeric: true,
-    disablePadding: false,
-    label: 'Calories',
+    id: "createdAt",
+    label: "Дата создания",
+    canSort: true,
+    style: {
+      width: '10%'
+    }
   },
   {
-    id: 'fat',
-    numeric: true,
-    disablePadding: false,
-    label: 'Fat (g)',
+    id: "title",
+    label: "Заголовок",
+    canSort: true,
+    style: {
+      width: '25%'
+    }
   },
   {
-    id: 'carbs',
-    numeric: true,
-    disablePadding: false,
-    label: 'Carbs (g)',
+    id: "projectTitle",
+    label: "Проект",
+    canSort: true,
+    style: {
+      width: '10%'
+    }
   },
   {
-    id: 'protein',
-    numeric: true,
-    disablePadding: false,
-    label: 'Protein (g)',
+    id: "executorName",
+    label: "Исполнитель",
+    canSort: true,
+    style: {
+      width: '8%'
+    }
+  },
+  {
+    id: "authorName",
+    label: "Автор",
+    canSort: true,
+    style: {
+      width: '8%'
+    }
+  },
+  {
+    id: "dateTimeStart",
+    label: "Дата и время выполнения",
+    canSort: false,
+    style: {
+      width: '15%'
+    }
+  },
+  {
+    id: "dateTimeDeadLine",
+    label: "Дедлайн",
+    canSort: true,
+    style: {
+      width: '10%'
+    }
+  },
+  {
+    id: "accomplish",
+    label: "Статус",
+    canSort: true,
+    style: {
+      width: '7%'
+    }
+  },
+  {
+    id: "buttons",
+    label: "",
+    canSort: false,
+    style: {
+      width: '5%'
+    }
   },
 ];
 
@@ -46,11 +96,10 @@ function UsersTasksTableHead({ order, orderBy, handleRequestSort }) {
         {headCells.map((headCell) => (
           <TableCell
             key={headCell.id}
-            align={headCell.numeric ? 'right' : 'left'}
-            padding={headCell.disablePadding ? 'none' : 'normal'}
             sortDirection={orderBy === headCell.id ? order : false}
+            sx={headCell.style}
           >
-            <TableSortLabel
+            {headCell.canSort ? <TableSortLabel
               active={orderBy === headCell.id}
               direction={orderBy === headCell.id ? order : 'asc'}
               onClick={createSortHandler(headCell.id)}
@@ -61,7 +110,8 @@ function UsersTasksTableHead({ order, orderBy, handleRequestSort }) {
                   {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
                 </Box>
               ) : null}
-            </TableSortLabel>
+            </TableSortLabel> : headCell.label}
+
           </TableCell>
         ))}
       </TableRow>

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

-import { Toolbar, Typography } from "@mui/material";
+import { AppBar, Toolbar, Typography } from "@mui/material";
 import { memo } from "react";
 
 
 function UsersTasksTableToolbar() {
 
   return (
-    <Toolbar>
+    <AppBar position="static" sx={{padding: 3}}>
       <Typography
         sx={{ flex: '1 1 100%' }}
         variant="h6"
         id="tableTitle"
         component="div"
       >
-        Nutrition
+        Задачи сотрудников
       </Typography>
-    </Toolbar>
+    </AppBar>
   );
 }
 

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

@@ -199,6 +199,7 @@ function MonthCalendar() {
         executor: userId,
         author: user.id,
         calendar: true,
+        priority: currentTask.priority === '' ? null : currentTask.priority
       }
       delete newTask.infoForCell
       delete newTask.id

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

-import * as React from 'react';
 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 { fetchAllTasksByMembership } from '../../store/actions/tasksActions';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { useEffect, useState } from 'react';
 
-function createData(name, calories, fat, carbs, protein) {
-  return {
-    name,
-    calories,
-    fat,
-    carbs,
-    protein,
-  };
-}
+export default function EnhancedTable() {
+  const dispatch = useDispatch();
 
-const rows = [
-  createData('Cupcake', 305, 3.7, 67, 4.3),
-  createData('Donut', 452, 25.0, 51, 4.9),
-  createData('Eclair', 262, 16.0, 24, 6.0),
-  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
-  createData('Gingerbread', 356, 16.0, 49, 3.9),
-  createData('Honeycomb', 408, 3.2, 87, 6.5),
-  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
-  createData('Jelly Bean', 375, 0.0, 94, 0.0),
-  createData('KitKat', 518, 26.0, 65, 7.0),
-  createData('Lollipop', 392, 0.2, 98, 0.0),
-  createData('Marshmallow', 318, 0, 81, 2.0),
-  createData('Nougat', 360, 19.0, 9, 37.0),
-  createData('Oreo', 437, 18.0, 63, 4.0),
-];
+  const {tasks} = useSelector((state) => state.tasks, shallowEqual);
+  const projects = useSelector((state) => state.tasks.projects);
+  const user = useSelector((state) => state.users.user);
+  console.log(tasks)
+  const [order, setOrder] = useState('asc');
+  const [orderBy, setOrderBy] =useState('createdAt');
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
 
-export default function EnhancedTable() {
-  const [order, setOrder] = React.useState('asc');
-  const [orderBy, setOrderBy] = React.useState('calories');
-  const [page, setPage] = React.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React.useState(5);
+  useEffect(() => {
+    dispatch(fetchAllTasksByMembership());
+  }, [dispatch]);
 
   const handleRequestSort = (event, property) => {
     const isAsc = orderBy === property && order === 'asc';
@@ -58,12 +44,12 @@ export default function EnhancedTable() {
         order={order}
         orderBy={orderBy}
         handleRequestSort={handleRequestSort}
-        rows={rows}
+        rows={tasks}
         page={page}
         rowsPerPage={rowsPerPage}
       />
       <UsersTasksTablePagination
-        count={rows.length}
+        count={tasks.length}
         rowsPerPage={rowsPerPage}
         page={page}
         handleChangePage={handleChangePage}

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

@@ -178,6 +178,7 @@ function WeekCalendar() {
         executor: userId,
         author: user.id,
         calendar: true,
+        priority: currentTask.priority === '' ? null : currentTask.priority
       }
       delete newTask.infoForCell
       delete newTask.id

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

-import { 
-  ADD_NEW_TASK_FAILURE, 
-  ADD_NEW_TASK_REQUEST, 
-  ADD_NEW_TASK_SUCCESS, 
-  EDIT_TASK_FAILURE, 
-  EDIT_TASK_REQUEST, 
-  EDIT_TASK_SUCCESS, 
-  FETCH_CALENDAR_TASKS_FAILURE, 
-  FETCH_CALENDAR_TASKS_REQUEST, 
+import {
+  ADD_NEW_TASK_FAILURE,
+  ADD_NEW_TASK_REQUEST,
+  ADD_NEW_TASK_SUCCESS,
+  EDIT_TASK_FAILURE,
+  EDIT_TASK_REQUEST,
+  EDIT_TASK_SUCCESS,
+  FETCH_CALENDAR_TASKS_FAILURE,
+  FETCH_CALENDAR_TASKS_REQUEST,
   FETCH_CALENDAR_TASKS_SUCCESS,
   DELETE_TASK_SUCCESS,
   DELETE_TASK_REQUEST,
@@ -24,20 +24,20 @@ import {
 } from "../actionTypes/tasksTypes";
 
 const initialState = {
-    copyMode: {
-      working: false,
-      task: null,
-    },
-    tasks: [],
-    calendarTasks: [],
-    loading: false,
-    error: null,
+  copyMode: {
+    working: false,
+    task: null,
+  },
+  tasks: [],
+  calendarTasks: [],
+  loading: false,
+  error: null,
 };
 
 const tasksReduсer = (state = initialState, action) => {
-  switch(action.type) {
+  switch (action.type) {
     case FETCH_CALENDAR_TASKS_REQUEST:
-        return {...state, loading: true};
+      return { ...state, loading: true };
     case FETCH_CALENDAR_TASKS_SUCCESS:
       const newTasksWithoutInfoForCell = []
       const newTasksWithInfoForCell = []
@@ -56,79 +56,87 @@ const tasksReduсer = (state = initialState, action) => {
           })
         }
       }
-      newTasksWithoutInfoForCell.forEach((task)=>{
+      newTasksWithoutInfoForCell.forEach((task) => {
         if (task.dateTimeStart && task.dateTimeDue) {
           if (new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() < (24 * 3600000) &&
-          new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() > 0) {
-          const dateStart = task.dateTimeStart.split('T')[0]
-          const timeStart = task.dateTimeStart.split('T')[1]
-          const timeEnd = task.dateTimeDue.split('T')[1]
-          const dayStart = parseInt(dateStart.split('-')[2])
-          const monthStartNumber =  parseInt(dateStart.split('-')[1])
-          const yearStartNumber =  parseInt(dateStart.split('-')[0])
-          const timeStartHour = parseInt(timeStart.split(':')[0])
-          const timeEndHour = parseInt(timeEnd.split(':')[0])
-          const timeStartMinute = parseInt(timeStart.split(':')[1])
-          const timeEndMinute = parseInt(timeEnd.split(':')[1])
-          const newObj = {...task, 
-            infoForCell: { 
-            startDay: dayStart, 
-            startHour: timeStartHour, 
-            startMonth: monthStartNumber,
-            startYear: yearStartNumber,
-            startMinute: timeStartMinute,
-            endHour: timeEndHour,
-            endMinute: timeEndMinute,
-          }
-          }
-          newTasksWithInfoForCell.push(newObj)
+            new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() > 0) {
+            const dateStart = task.dateTimeStart.split('T')[0]
+            const timeStart = task.dateTimeStart.split('T')[1]
+            const timeEnd = task.dateTimeDue.split('T')[1]
+            const dayStart = parseInt(dateStart.split('-')[2])
+            const monthStartNumber = parseInt(dateStart.split('-')[1])
+            const yearStartNumber = parseInt(dateStart.split('-')[0])
+            const timeStartHour = parseInt(timeStart.split(':')[0])
+            const timeEndHour = parseInt(timeEnd.split(':')[0])
+            const timeStartMinute = parseInt(timeStart.split(':')[1])
+            const timeEndMinute = parseInt(timeEnd.split(':')[1])
+            const newObj = {
+              ...task,
+              infoForCell: {
+                startDay: dayStart,
+                startHour: timeStartHour,
+                startMonth: monthStartNumber,
+                startYear: yearStartNumber,
+                startMinute: timeStartMinute,
+                endHour: timeEndHour,
+                endMinute: timeEndMinute,
+              }
+            }
+            newTasksWithInfoForCell.push(newObj)
           }
         }
       })
-      return {...state, loading: false, calendarTasks: newTasksWithInfoForCell};
+      return { ...state, loading: false, calendarTasks: newTasksWithInfoForCell };
     case FETCH_ALL_TASKS_SUCCESS:
-      return {...state, loading: false, tasks: action.tasks, projects:action.projects}; 
-      case FETCH_ALL_TASKS_BY_MEMBERSHIP_SUCCESS:
-        return {...state, loading: false, tasks: action.tasks, projects:action.projects}; 
+      return { ...state, loading: false, tasks: action.tasks , projects: action.projects };
+    case FETCH_ALL_TASKS_BY_MEMBERSHIP_SUCCESS:
+      console.log(action.tasks)
+      const newArr = action.tasks.map((task)=>{return {
+        ...task,
+        authorName: task.author.displayName,
+        projectTitle: task.project.title,
+        executorName: task?.executor?.displayName || null,
+      }})
+      return { ...state, loading: false, tasks: newArr, projects: action.projects };
     case FETCH_CALENDAR_TASKS_FAILURE:
-        return {...state, loading: false, error: action.error};
+      return { ...state, loading: false, error: action.error };
     case ADD_NEW_TASK_SUCCESS:
-      return {...state, loading: false};
+      return { ...state, loading: false };
     case ADD_NEW_TASK_REQUEST:
-      return {...state, loading: true};
+      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};
+      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};
+      return { ...state, loading: false };
     case EDIT_TASK_REQUEST:
-      return {...state, loading: true};
+      return { ...state, loading: true };
     case EDIT_TASK_FAILURE:
-      return {...state, loading: false, error: action.error};
+      return { ...state, loading: false, error: action.error };
     case DELETE_TASK_SUCCESS:
-      return {...state, loading: false};
+      return { ...state, loading: false };
     case DELETE_TASK_REQUEST:
-      return {...state, loading: true};
+      return { ...state, loading: true };
     case DELETE_TASK_FAILURE:
-      return {...state, loading: false, error: action.error};
+      return { ...state, loading: false, error: action.error };
     case DELETE_DATETIMETASK_SUCCESS:
-      return {...state, loading: false};
+      return { ...state, loading: false };
     case DELETE_DATETIMETASK_REQUEST:
-      return {...state, loading: true};
+      return { ...state, loading: true };
     case DELETE_DATETIMETASK_FAILURE:
-      return {...state, loading: false, error: action.error};
+      return { ...state, loading: false, error: action.error };
     case ACTIVATE_CREATE_COPY_TASKS_MODE:
-      return {...state, copyMode: {working: true, task: action.task}}
-    case DEACTIVATE_CREATE_COPY_TASKS_MODE: 
-      return {...state, copyMode: {working: false, task: null}}
-    default: 
-        return state;
-}
+      return { ...state, copyMode: { working: true, task: action.task } }
+    case DEACTIVATE_CREATE_COPY_TASKS_MODE:
+      return { ...state, copyMode: { working: false, task: null } }
+    default:
+      return state;
+  }
 };
 
 export default tasksReduсer;
\ No newline at end of file