Merge branch 'task-152-fix/fix_bugs_in_table_users' into 'development'

#152 Пофиксил неправильное поведение с выбором дедлайн и баг

See merge request !120

planner-front/package.json

@@ -16,10 +16,10 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.1.2",
     "dayjs": "^1.11.6",
-    "react-datepicker": "^4.8.0",
     "moment": "^2.29.4",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-datepicker": "^4.8.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.4",
     "react-router-dom": "^6.4.2",

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

-import React from "react";
+import React, { useEffect, useState } from "react";
 import TextField from "@mui/material/TextField";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
@@ -9,10 +9,17 @@ import moment from "moment";
 
 
 
-export default function MaterialUIPickers({task, name, onChange }) {
+export default function MaterialUIPickers({ task, name, onChange, currentTask }) {
+  const [state, setState] = useState(null)
   let fullYear = new Date().getFullYear()
-  let month = new Date().getMonth() 
+  let month = new Date().getMonth()
   let day = new Date().getDate();
+  useEffect(() => {
+    if (!task.dateTimeDeadLine) setState(null)
+    if (currentTask) setState(moment(task.dateTimeDeadLine).utc())
+
+  }, [task.dateTimeDeadLine, currentTask])
+
   return (
     <LocalizationProvider
       dateAdapter={AdapterMoment}
@@ -20,23 +27,25 @@ export default function MaterialUIPickers({task, name, onChange }) {
       adapterLocale={'ru-RU'}
     >
       <DateTimePicker
-      minTime={moment({year:fullYear,month:month,day:day ,hour:11,minute:0})}
-      maxTime={moment({year:fullYear,month:month,day:day ,hour:20,minute:0})}
-      disablePast={true}
-      showTimeSelect={true}
-      minutesStep={60}
-      ampm={false}
-      ampmInClock={false}
+        disablePast={true}
+        showTimeSelect={true}
+        minutesStep={60}
+        ampm={false}
+        ampmInClock={false}
         inputFormat="DD/MM/YY HH:mm"
-        renderInput={(params) =>{  return (
-          <TextField
-            {...params}
-            sx={{ width: "auto", fontWeight: "200", fontSize: 5 }}
-            name={name}
-          />
-        )}}
-        value={task.dateTimeDeadLine}
+        renderInput={(params) => {
+          return (
+            <TextField
+              {...params}
+              sx={{ width: "auto", fontWeight: "200", fontSize: 5 }}
+              name={name}
+              value={moment(task.dateTimeDeadLine).utc()}
+            />
+          )
+        }}
+        value={state}
         onChange={(newValue) => {
+          setState(newValue)
           onChange(newValue, name);
         }}
       />

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

@@ -100,16 +100,17 @@ function EditRow({ buttons, dateTimeTasks, onChangeCurrentTaskHandler, currentTa
       </TableCell>
       <TableCell sx={{ width: '8%' }}>{currentTask.authorName}</TableCell>
 
-      <TableCell sx={{ width: '15%' }}>
+      <TableCell sx={{ width: '13%' }}>
         {dateTimeTasks}
       </TableCell>
 
-      <TableCell sx={{ width: '10%' }}>
+      <TableCell sx={{ width: '12%' }}>
         {user.id === currentTask.author.id ?
           <MaterialUIPickers
             task={currentTask}
             name="dateTimeDeadLine"
             onChange={onDateChangeEditHandler}
+            currentTask={true}
           />
           : currentTask.dateTimeDeadLine ? moment(currentTask.dateTimeDeadLine).utc().format('DD.MM.YYYY HH:MM') : null}
       </TableCell>

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

@@ -31,7 +31,12 @@ function UsersTasksRow({ row, deleteTaskHandler, calendarOpen, deleteCopyTaskHan
     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')
+      let end
+      if (new Date(row.dateTimeTasks[0].dateTimeDue).getMinutes() === 59 ) {
+        end = moment(row.dateTimeTasks[0].dateTimeDue).utc().add(1, 'minutes').format('HH:mm')
+      } else {
+        end = moment(row.dateTimeTasks[0].dateTimeDue).utc().format('HH:mm')
+      }
       const diff = parseInt(end.split(':')[0]) - parseInt(start.split(':')[0])
       return <Box sx={{ width: '90%', display: 'flex' }}>
         <Tooltip title={moment(row.dateTimeTasks[0].dateTimeStart).utc().format('YYYY')}>
@@ -123,12 +128,12 @@ function UsersTasksRow({ row, deleteTaskHandler, calendarOpen, deleteCopyTaskHan
     if (editMode) {
       return <Done sx={editClass} onClick={() => { onClickEditButtonHandler() }} />
     } else {
-      if (user.id === row.author.id) {
+      if (user.id === row?.author?.id) {
         return (<>
           <Edit sx={{ ...editClass, position: 'absolute', left: -10 }} onClick={() => { onClickEditButtonHandler() }} />
           <DeleteButton onClick={() => { deleteTaskHandler(row.id) }} />
         </>)
-      } else if (user.id === row.executor.id) {
+      } else if (user.id === row?.executor?.id) {
         return (<Edit sx={editClass} onClick={() => { onClickEditButtonHandler() }} />)
       } else {
         return null
@@ -167,11 +172,11 @@ function UsersTasksRow({ row, deleteTaskHandler, calendarOpen, deleteCopyTaskHan
           <TableCell sx={{ width: '8%' }}>{row.executorName}</TableCell>
           <TableCell sx={{ width: '8%' }}>{row.authorName}</TableCell>
 
-          <TableCell sx={{ width: '15%' }}>
+          <TableCell sx={{ width: '13%' }}>
             {dateTimeTasks}
           </TableCell>
 
-          <TableCell sx={{ width: '10%' }}>{row.dateTimeDeadLine ? moment(row.dateTimeDeadLine).utc().format('DD.MM.YYYY HH:MM') : null}</TableCell>
+          <TableCell sx={{ width: '12%' }}>{row.dateTimeDeadLine ? moment(row.dateTimeDeadLine).utc().format('DD.MM.YYYY HH:mm') : null}</TableCell>
           <TableCell sx={{ width: '7%' }}>
             {row.accomplishTranslate}
           </TableCell>

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

@@ -150,7 +150,7 @@ export default function EnhancedTable() {
   const calendarOpen = (task) => {
     dispatch(activateCreateCopyTasksMode(task, navigate))
   }
-
+  console.log(currentTask)
   const editCurrentTaskHandler = useCallback(() => {
     if (currentTask.priority === '' || currentTask.project === '' || currentTask.executor === '' || !Object.keys(currentTask.executor).length) {
       const task = {