#149 вывел таблицу копий и реализовал взаимодействие с ними

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

+import { Collapse, IconButton, Table, TableBody, TableCell, TableHead, TableRow, Tooltip, Typography } from "@mui/material";
+import RemoveIcon from '@mui/icons-material/Remove';
+import moment from "moment";
+import { memo } from "react";
+import { Box } from "@mui/system";
+
+const weekDays = ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"];
+
+function TableForCopiesTasks({ task, openCopies, user, deleteCopyTaskHandler }) {
+  const roudHourUp = (dateIso) => {
+    let m = moment(dateIso);
+    let roundUp = m.minute() || m.second() || m.millisecond() ? m.add(1, 'hour').startOf('hour') : m.startOf('hour');
+    return roundUp
+  }
+
+  const timeTransform = (dateIso) => {
+    const exp = roudHourUp(moment.utc(dateIso)).format("HH:00")
+    return exp;
+  }
+
+  const getDayOfWeek = (dateIso) => {
+    const date = moment.utc(dateIso);
+    return weekDays[date.day()];
+  }
+
+  return (
+    <TableRow>
+      <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={11}>
+        <Collapse in={openCopies} timeout="auto" unmountOnExit>
+          <Box sx={{ margin: 1 }}>
+            <Typography variant="h6" gutterBottom component="div">
+              Расписание
+            </Typography>
+            <Table size="small" aria-label="purchases" sx={{
+              backgroundColor: "#ebebeb"
+            }}>
+              <TableHead>
+                <TableRow>
+                  <TableCell colSpan={10} >Дата создания</TableCell>
+                  <TableCell align="right">День недели</TableCell>
+                  <TableCell align="right">Начало</TableCell>
+                  <TableCell align="center" colSpan={1}>Окончание</TableCell>
+                  <TableCell align="center" ></TableCell>
+                  <TableCell align="center" ></TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {task.dateTimeTasks.map((dateTimeTask, index) => (
+                  <TableRow key={index}>
+                    <TableCell component="th" scope="row" colSpan={10}>
+                      {moment(task.createdAt)
+                        .utc()
+                        .format("DD/MM")}
+                    </TableCell>
+                    <TableCell align="right">
+                      {getDayOfWeek(dateTimeTask.dateTimeStart)}, {moment(dateTimeTask.dateTimeStart)
+                        .utc()
+                        .format("DD/MM")}
+                    </TableCell>
+                    <TableCell align="right">
+                      {timeTransform(dateTimeTask.dateTimeStart)}
+                    </TableCell>
+                    <TableCell align="center" colSpan={1}>
+                      {timeTransform(dateTimeTask.dateTimeDue)}
+                    </TableCell>
+
+                    {task.author.id === user.id ?
+                      (<TableCell style={{ width: '0%' }}>
+                        <Tooltip title="Удалить Копию">
+                          <IconButton
+                            onClick={() => {
+                              deleteCopyTaskHandler(dateTimeTask.id);
+                            }}
+                          >
+                            <RemoveIcon />
+                          </IconButton>
+                        </Tooltip>
+                      </TableCell>) : null}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </Box>
+        </Collapse>
+      </TableCell>
+    </TableRow>);
+}
+
+export default memo(TableForCopiesTasks)
\ No newline at end of file

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 { memo, useMemo, useState } 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";
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import TableForCopiesTasks from "./TableForCopiesTasks/TableForCopiesTasks";
 
-function UsersTasksRow({ row, deleteTaskHandler, calendarOpen }) {
+function UsersTasksRow({ row, deleteTaskHandler, calendarOpen, deleteCopyTaskHandler }) {
   const user = useSelector((state) => state.users.user);
 
+  const [openCopies, setOpenCopies] = useState(false);
+
   const dateTimeTasks = useMemo(() => {
     if (row.dateTimeTasks.length === 1) {
       const date = moment(row.dateTimeTasks[0].dateTimeStart).utc().format('DD.MM')
@@ -28,7 +33,7 @@ function UsersTasksRow({ row, deleteTaskHandler, calendarOpen }) {
           <Tooltip title="Перейти в календарь">
             <IconButton
               sx={{ marginLeft: '5px' }}
-              onClick={() => { calendarOpen(row)}}
+              onClick={() => { calendarOpen(row) }}
             >
               <CalendarMonthIcon />
             </IconButton>
@@ -37,10 +42,46 @@ function UsersTasksRow({ row, deleteTaskHandler, calendarOpen }) {
         }
 
       </Box>
-    } else {
-      return null
+    } else if (row.dateTimeTasks.length > 1) {
+      return (<>
+        <IconButton
+          aria-label="expand row"
+          size="small"
+          onClick={() => setOpenCopies(prevState => !prevState)}
+        >
+          {openCopies ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+        </IconButton>
+        {
+          user.id === row?.executor?.id ?
+            <Tooltip title="Перейти в календарь">
+              <IconButton
+                sx={{ marginLeft: '5px' }}
+                onClick={() => { calendarOpen(row) }}
+              >
+                <CalendarMonthIcon />
+              </IconButton>
+            </Tooltip>
+            : null
+        }
+      </>)
+    } else if (row.dateTimeTasks.length === 0) {
+      return (<>
+        Копий нет
+        {
+          user.id === row?.executor?.id ?
+            <Tooltip title="Перейти в календарь">
+              <IconButton
+                sx={{ marginLeft: '5px' }}
+                onClick={() => { calendarOpen(row) }}
+              >
+                <CalendarMonthIcon />
+              </IconButton>
+            </Tooltip>
+            : null
+        }
+      </>)
     }
-  }, [user.id, calendarOpen, row])
+  }, [user.id, calendarOpen, row, openCopies])
 
   return (<>
     <TableRow
@@ -75,7 +116,15 @@ function UsersTasksRow({ row, deleteTaskHandler, calendarOpen }) {
         }
       </TableCell>
     </TableRow>
-  </>);
+    {row.dateTimeTasks.length ? <TableForCopiesTasks
+      task={row}
+      openCopies={openCopies}
+      user={user}
+      deleteCopyTaskHandler={deleteCopyTaskHandler}
+    /> : null}
+
+
+  </>)
 }
 
 export default memo(UsersTasksRow)
\ No newline at end of file

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

@@ -3,7 +3,7 @@ import { memo } from "react";
 import { getComparator, stableSort } from "./helpers";
 import UsersTasksRow from "./UsersTasksRow/UsersTasksRow";
 
-function UsersTasksTableBody({ rows, page, rowsPerPage, order, orderBy, deleteTaskHandler, calendarOpen }) {
+function UsersTasksTableBody({ rows, page, rowsPerPage, order, orderBy, deleteTaskHandler, calendarOpen, deleteCopyTaskHandler }) {
 
   return (<>
     <TableBody>
@@ -15,6 +15,7 @@ function UsersTasksTableBody({ rows, page, rowsPerPage, order, orderBy, deleteTa
               key={row.id}
               deleteTaskHandler={deleteTaskHandler}
               row={row}
+              deleteCopyTaskHandler={deleteCopyTaskHandler}
               calendarOpen={calendarOpen}
             />)
         })}

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, calendarOpen}) {
+function UsersTasksTableContainer({ order, orderBy, handleRequestSort, rows, page, rowsPerPage, addFormStatus, onChangeNewTaskHandler, newTask, allUserProjectsForModalTask, onDateChange, createNewTaskHandler, deleteTaskHandler, calendarOpen, deleteCopyTaskHandler}) {
   return (
     <TableContainer>
       <NewTaskForm
@@ -34,6 +34,7 @@ function UsersTasksTableContainer({ order, orderBy, handleRequestSort, rows, pag
           rowsPerPage={rowsPerPage}
           deleteTaskHandler={deleteTaskHandler}
           calendarOpen={calendarOpen}
+          deleteCopyTaskHandler={deleteCopyTaskHandler}
         />
       </Table>
     </TableContainer>

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

@@ -2,7 +2,7 @@ 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, deleteTaskUsers, fetchAllTasksByMembership } from '../../store/actions/tasksActions';
+import { activateCreateCopyTasksMode, addTaskToUserTasksTable, deleteDateTimeTaskUsers, 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';
@@ -90,9 +90,8 @@ export default function EnhancedTable() {
         ...newTask, 
         priority: newTask.priority ? newTask.priority : null,
         project: newTask.project ? newTask.project : null,
-        executor: newTask.executor ? newTask.priority : null,
+        executor: newTask.executor ? newTask.executor : null,
       }
-      console.log(task, 'asdasdasdasdassdasdas')
       dispatch(addTaskToUserTasksTable(task))
     } else {
       dispatch(addTaskToUserTasksTable(newTask))
@@ -112,6 +111,10 @@ export default function EnhancedTable() {
     dispatch(deleteTaskUsers(id))
   }, [dispatch])
 
+  const deleteCopyTaskHandler = useCallback((id)=>{   
+    dispatch(deleteDateTimeTaskUsers(id))
+  }, [dispatch])
+
   const calendarOpen=(task)=>{
     dispatch(activateCreateCopyTasksMode(task, navigate))
   }
@@ -137,6 +140,7 @@ export default function EnhancedTable() {
         createNewTaskHandler={createNewTaskHandler}
         deleteTaskHandler={deleteTaskHandler}
         calendarOpen={calendarOpen}
+        deleteCopyTaskHandler={deleteCopyTaskHandler}
       />
       <UsersTasksTablePagination
         count={tasks.length}

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

@@ -280,6 +280,19 @@ export const deleteDateTimeTask = (dateTimeTaskId) => {
   }
 }
 
+export const deleteDateTimeTaskUsers = (dateTimeTaskId) => {
+  return async (dispatch) => {
+      dispatch(deleteDateTimeTaskRequest());
+      try {
+        await axios.delete(`/copy-tasks/${dateTimeTaskId}`);
+        dispatch(deleteDateTimeTaskSuccess())
+        dispatch(fetchAllTasksByMembership())
+      } catch (error) {
+        dispatch(deleteDateTimeTaskFailure(error.response.data));
+      }
+  }
+}
+
 
 
 /** add new task in UserTasks Table */