#149 Начал работать над колонкой с копиями задач

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

+import { Divider, IconButton, TableCell, TableRow, Tooltip } from "@mui/material";
+import moment from "moment";
+import { memo, useMemo } from "react";
+import DeleteButton from "../../../../UI/DeleteButton/DeleteButton";
+import { Edit } from "@mui/icons-material";
+import { useSelector } from "react-redux";
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import { Box } from "@mui/system";
+
+function UsersTasksRow({ row, deleteTaskHandler, calendarOpen }) {
+  const user = useSelector((state) => state.users.user);
+
+  const dateTimeTasks = useMemo(() => {
+    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')
+      const end = moment(row.dateTimeTasks[0].dateTimeDue).utc().add(1, 'minutes').format('HH:mm')
+      const diff = parseInt(end.split(':')[0]) - parseInt(start.split(':')[0])
+      return <Box sx={{ width: '90%', display: 'flex' }}>
+
+        <Box>
+          {`${date} (${start} - ${end})`}
+          <Divider sx={{ opacity: 0 }} />
+          {`часы: ${diff}`}
+        </Box>
+
+        {user.id === row?.executor?.id ?
+          <Tooltip title="Перейти в календарь">
+            <IconButton
+              sx={{ marginLeft: '5px' }}
+              onClick={() => { calendarOpen(row)}}
+            >
+              <CalendarMonthIcon />
+            </IconButton>
+          </Tooltip>
+          : null
+        }
+
+      </Box>
+    } else {
+      return null
+    }
+  }, [user.id, calendarOpen, row])
+
+  return (<>
+    <TableRow
+      hover
+      key={row.id}
+    >
+      <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', 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%' }}>
+        {dateTimeTasks}
+      </TableCell>
+
+      <TableCell sx={{ width: '10%' }}>{row.dateTimeDeadLine ? moment(row.dateTimeDeadLine).utc().format('DD.MM.YYYY HH:MM') : null}</TableCell>
+      <TableCell sx={{ width: '7%' }}>{row.accomplish}</TableCell>
+      <TableCell size='medium' sx={{ width: '5%', position: 'relative' }}>
+        {user.id === row.author.id ?
+          <>
+            <Edit sx={{ position: 'absolute', left: -10 }} />
+            <DeleteButton onClick={() => { deleteTaskHandler(row.id) }} />
+          </>
+          :
+          <Edit />
+        }
+      </TableCell>
+    </TableRow>
+  </>);
+}
+
+export default memo(UsersTasksRow)
\ No newline at end of file

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

-import { TableBody, TableCell, TableRow, Tooltip } from "@mui/material";
-import moment from "moment";
+import { TableBody} from "@mui/material";
 import { memo } from "react";
-import DeleteButton from "../../../UI/DeleteButton/DeleteButton";
 import { getComparator, stableSort } from "./helpers";
-import { Edit } from "@mui/icons-material";
-import { useSelector } from "react-redux";
+import UsersTasksRow from "./UsersTasksRow/UsersTasksRow";
+
+function UsersTasksTableBody({ rows, page, rowsPerPage, order, orderBy, deleteTaskHandler, calendarOpen }) {
 
-function UsersTasksTableBody({ rows, page, rowsPerPage, order, orderBy, deleteTaskHandler }) {
-  const user = useSelector((state) => state.users.user);
   return (<>
     <TableBody>
-
-
       {stableSort(rows, getComparator(order, orderBy))
         .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
         .map((row, index) => {
           return (
-            <TableRow
-              hover
+            <UsersTasksRow
               key={row.id}
-            >
-              <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', 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' }}>
-                {user.id === row.author.id ?
-                  <>
-                    <Edit sx={{ position: 'absolute', left: -10 }} />
-                    <DeleteButton onClick={() => { deleteTaskHandler(row.id) }} />
-                  </>
-                  :
-                  <Edit />
-                }
-              </TableCell>
-            </TableRow>
-          );
+              deleteTaskHandler={deleteTaskHandler}
+              row={row}
+              calendarOpen={calendarOpen}
+            />)
         })}
-    </TableBody >
+    </TableBody>
   </>);
 }
 

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

@@ -5,7 +5,7 @@ import UsersTasksTableBody from "./UsersTasksTableBody/UsersTasksTableBody";
 import UsersTasksTableHead from "./UsersTasksTableHead/UsersTasksTableHead";
 
 
-function UsersTasksTableContainer({ order, orderBy, handleRequestSort, rows, page, rowsPerPage, addFormStatus, onChangeNewTaskHandler, newTask, allUserProjectsForModalTask, onDateChange, createNewTaskHandler, deleteTaskHandler}) {
+function UsersTasksTableContainer({ order, orderBy, handleRequestSort, rows, page, rowsPerPage, addFormStatus, onChangeNewTaskHandler, newTask, allUserProjectsForModalTask, onDateChange, createNewTaskHandler, deleteTaskHandler, calendarOpen}) {
   return (
     <TableContainer>
       <NewTaskForm
@@ -33,6 +33,7 @@ function UsersTasksTableContainer({ order, orderBy, handleRequestSort, rows, pag
           page={page}
           rowsPerPage={rowsPerPage}
           deleteTaskHandler={deleteTaskHandler}
+          calendarOpen={calendarOpen}
         />
       </Table>
     </TableContainer>

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

@@ -2,14 +2,16 @@ 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 { addTaskToUserTasksTable, deleteTaskUsers, fetchAllTasksByMembership } from '../../store/actions/tasksActions';
+import { activateCreateCopyTasksMode, addTaskToUserTasksTable, deleteTaskUsers, fetchAllTasksByMembership } from '../../store/actions/tasksActions';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useCallback, useEffect, useState } from 'react';
 import { fetchAllUserProjects } from '../../store/actions/projectsActions';
 import moment from 'moment';
+import { useNavigate } from 'react-router-dom';
 
 export default function EnhancedTable() {
   const dispatch = useDispatch();
+  const navigate = useNavigate()
 
   const { tasks } = useSelector((state) => state.tasks);
   const { allUserProjectsForModalTask } = useSelector(state => state.projects, shallowEqual)
@@ -110,6 +112,10 @@ export default function EnhancedTable() {
     dispatch(deleteTaskUsers(id))
   }, [dispatch])
 
+  const calendarOpen=(task)=>{
+    dispatch(activateCreateCopyTasksMode(task, navigate))
+  }
+
   return (
     <Paper sx={{ width: '100%', mb: 2 }}>
       <UsersTasksTableToolbar
@@ -130,6 +136,7 @@ export default function EnhancedTable() {
         onDateChange={onDateChange}
         createNewTaskHandler={createNewTaskHandler}
         deleteTaskHandler={deleteTaskHandler}
+        calendarOpen={calendarOpen}
       />
       <UsersTasksTablePagination
         count={tasks.length}