Merge branch 'task-64-reconstruction-of-table-My-task' into 'development'

Task 64 reconstruction of table my task

See merge request !48

planner-front/src/components/MyTasksCompoments/CustomTableCell.js

 import * as React from "react";
 import TableCell from "@mui/material/TableCell";
 import Input from "@mui/material/Input";
+import moment from "moment";
 
 const CustomTableCell = ({task,
   name,
   value,
+  value2,
+  value3,
   onChange,
   onModalOpen,
   placeholder,
   user
  }) => {
   const styles = { width: "auto", height: "10px"};
-
+  const divStyle={display:"flex",justifyContent:"space-between", flexDirection:"column",fontSize:"12px"}
+  const duration = moment.duration(moment(task.dateTimeTasks[0]?.dateTimeDue).diff(moment(task.dateTimeTasks[0]?.dateTimeStart)));
+  const hours = Math.round(duration.asHours());
 
    if (task) {
     return (
@@ -21,7 +26,7 @@ const CustomTableCell = ({task,
           align="left"
           style={styles}
         >
-          {task.isEditMode && onChange && name==!"author" && task.author.id==user.id ? (
+          {task.isEditMode && onChange && name!=="author" && task.author.id===user.id ? (
             <Input
               placeholder={placeholder}
               value={value}
@@ -29,9 +34,16 @@ const CustomTableCell = ({task,
               onChange={(e) => onChange(e, task)}
               style={styles}
             />
-          ) : (
+          ) : name!=="dateTimeStart" ? (
             <span>{value}</span>
-          )}
+          ):(
+            <div  style={divStyle}>
+              <span>{value}</span>
+              <span>{value2}</span>
+              <span>часы:+{hours}</span>
+            </div>
+          )
+          }
         </TableCell>
       </>
     );

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

@@ -25,7 +25,7 @@ import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker
 import BasicSelect from "../../components/UI/Select/Select";
 import { fetchAllTasks, deleteTask,editTask} from "../../store/actions/tasksActions";
 import NewTaskForm from "../../components/MyTasksCompoments/NewTaskForm";
-
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 
 
 export default function EnhancedTable() {
@@ -45,7 +45,9 @@ export default function EnhancedTable() {
     task: null,
   });
   const [projects,setProjects]=useState(['1','2'])
+  
  
+
   useEffect(() => {
     dispatch(fetchAllTasks());
     filterProjectsNamesFromTasks()
@@ -207,7 +209,6 @@ useEffect(() => {
       }
       let uniqueTitlesProjects = [...new Set(rawSetProjectNames)];
       setProjects(uniqueTitlesProjects)
-      
     }
   }
 
@@ -221,7 +222,7 @@ useEffect(() => {
     return results;
   }, []);
 
-
+console.log(tasks)
   if (
     tasks &&
     tasks?.length > 0 &&
@@ -353,26 +354,79 @@ useEffect(() => {
                             user:user
                           }}
                         />
-
-                        <TableCell>
-                          <MaterialUIPickers
+                        {task.isEditMode && task.author.id===user.id  ? (
+                          <TableCell>
+                            {/* <MaterialUIPickers
                             task={task}
                             name="dateTimeStart"
                             onChange={onDateChange}
                             user={user}
-                          />
-                          
+                          /> */}
+                       <TableCell>
+                          <Tooltip title="Перейти в календарь">
+                            <IconButton
+                              onClick={(id) => { deleteHandle(task.id);}}
+                            >
+                              <CalendarMonthIcon />
+                            </IconButton>
+                          </Tooltip>
                         </TableCell>
+                          </TableCell>
+                        ) : (<>
+                          <CustomTableCell
+                            {...{
+                              task,
+                              name: "dateTimeStart",
+                              value: moment(task.dateTimeTasks[0]?.dateTimeStart) 
+                              .utc()
+                              .format("DD-MM-YYYY "),
+                              value2:moment(task.dateTimeTasks[0]?.dateTimeStart)
+                              .utc()
+                              .format("hh:mm A")+"-"+
+                              moment(task.dateTimeTasks[0]?.dateTimeDue)
+                              .utc()
+                              .format("hh:mm A"),
+                               user:user
+                            }}>
+                              {/* <span>"время завершения"+ {moment(task.dateTimeDue)
+                              .utc()
+                              .format("hh:mm A")}</span> */}
+                            </CustomTableCell>
+                        
+                          </>
+                        )}
 
-                        <TableCell>
+                        {/* <TableCell>
                           <MaterialUIPickers
+                            task={task}
+                            name="dateTimeStart"
+                            onChange={onDateChange}
+                            user={user}
+                          />                         
+                        </TableCell> */}
+
+                        {task.isEditMode && task.author.id===user.id  ? (
+                          <TableCell>
+                            <MaterialUIPickers
                             task={task}
                             name="dateTimeDue"
                             onChange={onDateChange}
                             user={user}
                           />
-                        </TableCell>
-
+                          </TableCell>
+                        ) : (
+                          <CustomTableCell
+                            {...{
+                              task,
+                              name: "dateTimeDeadLine",
+                              value: moment(task.dateTimeDeadLine
+                                )
+                              .utc()
+                              .format("DD-MM-YYYY hh:mm A"),
+                              user:user
+                            }}
+                          />
+                        )}
                         {task.isEditMode ? (
                           <TableCell>
                             <BasicSelect

planner-front/src/containers/MyTasks/MyTasksHeader/MyTasksHeader.js

@@ -49,13 +49,13 @@ const headCells = [
     id: "dateTimeStart",
     numeric: true,
     disablePadding: false,
-    label: "Дата начала",
+    label: "Дата и время выполнения",
   },
   {
     id: "dateTimeDue",
     numeric: true,
     disablePadding: false,
-    label: "Дата завершения",
+    label: "Дедлайн",
   },
   {
     id: "accomplish",