#149 Реализовал редактирование задачи в таблице

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

-import React, {useState} from "react";
+import React 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,12 +9,10 @@ import moment from "moment";
 
 
 
-export default function MaterialUIPickers({task, name,onChange, }) {
-  const [state, setState]=useState(null)
+export default function MaterialUIPickers({task, name, onChange }) {
   let fullYear = new Date().getFullYear()
   let month = new Date().getMonth() 
   let day = new Date().getDate();
-
   return (
     <LocalizationProvider
       dateAdapter={AdapterMoment}
@@ -37,9 +35,8 @@ export default function MaterialUIPickers({task, name,onChange, }) {
             name={name}
           />
         )}}
-        value={state}
+        value={task.dateTimeDeadLine}
         onChange={(newValue) => {
-          setState(newValue)
           onChange(newValue, name);
         }}
       />

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

@@ -3,7 +3,7 @@ import { styled } from '@mui/material/styles';
 import { memo, useMemo } from "react";
 import { priorities } from "../../../../constants";
 import CustomSelect from "../../../UI/СustomSelect/СustomSelect"
-import MaterialUIPickers from "./DateTimePicker/DateTimePicker";
+import MaterialUIPickers from "../DateTimePicker/DateTimePicker";
 import { Save } from "@mui/icons-material";
 import { isValidate } from "./helpers";
 
@@ -17,7 +17,7 @@ const StyledTooltip = styled(({ className, ...props }) => (
 
 
 
-function NewTaskForm({ addFormStatus, onChangeNewTaskHandler, newTask, allUserProjectsForModalTask, onDateChange, createNewTaskHandler }) {
+function NewTaskForm({ addFormStatus, onChangeNewTaskHandler, newTask, allUserProjectsForModalTask, onDateChangeHandler, createNewTaskHandler }) {
   const workers = useMemo(() => {
     if (newTask?.project) {
       return newTask?.project?.members.map((member) => { return { value: member.user, text: member.user.displayName } })
@@ -113,7 +113,7 @@ function NewTaskForm({ addFormStatus, onChangeNewTaskHandler, newTask, allUserPr
               <MaterialUIPickers
                 task={newTask}
                 name="dateTimeDeadLine"
-                onChange={onDateChange}
+                onChange={onDateChangeHandler}
               />
             </Grid>
             <Grid item xs={0.5} >

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

+import { TableCell, TextField, Tooltip } from "@mui/material";
+import moment from "moment";
+import { memo, useMemo } from "react";
+import { accomplishStatuses, priorities } from "../../../../../../constants";
+import CustomSelect from "../../../../../UI/СustomSelect/СustomSelect"
+import { styled } from '@mui/material/styles';
+import MaterialUIPickers from "../../../DateTimePicker/DateTimePicker";
+
+const StyledTooltip = styled(({ className, ...props }) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))`
+  & .MuiTooltip-tooltip {
+    background: white;
+  }
+`;
+
+
+function EditRow({ buttons, dateTimeTasks, onChangeCurrentTaskHandler, currentTask, allUserProjectsForModalTask, onDateChangeEditHandler }) {
+
+  const workers = useMemo(() => {
+    if (currentTask?.project) {
+      currentTask.project = allUserProjectsForModalTask.find((project) => project?.value?.id === currentTask?.project?.id)?.value
+      return currentTask?.project?.members.map((member) => { return { value: member.user.id, text: member.user.displayName } })
+    } else {
+      return [{ value: '', text: 'Выберите проект' }]
+    }
+  }, [allUserProjectsForModalTask, currentTask])
+
+  return (
+    <>
+      <TableCell sx={{ width: '4%' }}>
+        <CustomSelect
+          defaultValue={priorities[0]?.value}
+          value={currentTask.priority}
+          name={'priority'}
+          variant={'outlined'}
+          onChange={onChangeCurrentTaskHandler}
+          id={'priority-type'}
+          items={priorities}
+          sx={{ width: '100%' }}
+        />
+      </TableCell>
+
+      <TableCell sx={{ width: '10%' }}>{moment(currentTask.createdAt).format('DD.MM.YYYY')}</TableCell>
+      <Tooltip title={currentTask.description}>
+        <TableCell sx={{ width: '25%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+          <StyledTooltip
+            title={<TextField
+              id="task-description"
+              value={currentTask.description}
+              variant="outlined"
+              name='description'
+              placeholder='Описание'
+              sx={{ width: '300px' }}
+              onChange={onChangeCurrentTaskHandler}
+              multiline
+              rows={5}
+
+            />}>
+            <TextField
+              id="task-title"
+              value={currentTask.title}
+              variant="outlined"
+              name='title'
+              onChange={onChangeCurrentTaskHandler}
+              sx={{ width: '90%' }}
+            />
+          </StyledTooltip>
+        </TableCell>
+      </Tooltip>
+      <TableCell sx={{ width: '10%' }}>
+        <CustomSelect
+          value={currentTask.project}
+          name={'project'}
+          variant={'outlined'}
+          onChange={onChangeCurrentTaskHandler}
+          id={'project'}
+          items={allUserProjectsForModalTask}
+          sx={{ width: '100%' }}
+        />
+      </TableCell>
+      <TableCell sx={{ width: '8%' }}>
+        <CustomSelect
+          value={currentTask.executor.id}
+          name={'executor'}
+          variant={'outlined'}
+          onChange={onChangeCurrentTaskHandler}
+          id={'executor'}
+          items={workers}
+          sx={{ width: '100%' }}
+        />
+      </TableCell>
+      <TableCell sx={{ width: '8%' }}>{currentTask.authorName}</TableCell>
+
+      <TableCell sx={{ width: '15%' }}>
+        {dateTimeTasks}
+      </TableCell>
+
+      <TableCell sx={{ width: '10%' }}>
+        <MaterialUIPickers
+          task={currentTask}
+          name="dateTimeDeadLine"
+          onChange={onDateChangeEditHandler}
+        />
+      </TableCell>
+      <TableCell sx={{ width: '7%' }}>
+        <CustomSelect
+          value={currentTask.accomplish}
+          name={'accomplish'}
+          variant={'outlined'}
+          onChange={onChangeCurrentTaskHandler}
+          id={'accomplish'}
+          items={accomplishStatuses}
+          sx={{ width: '100px' }}
+        />
+      </TableCell>
+      <TableCell size='medium' sx={{ width: '5%', position: 'relative' }}>
+        {buttons}
+      </TableCell>
+    </>)
+}
+
+export default memo(EditRow)
\ 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, useState } from "react";
+import { memo, useCallback, useMemo, useState } from "react";
 import DeleteButton from "../../../../UI/DeleteButton/DeleteButton";
-import { Edit } from "@mui/icons-material";
+import { Done, 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";
+import EditRow from "./EditRow/EditRow";
+import { accomplishStatuses } from "../../../../../constants";
 
-function UsersTasksRow({ row, deleteTaskHandler, calendarOpen, deleteCopyTaskHandler }) {
+const editClass = {
+  cursor: 'pointer',
+  transition: '0.5s',
+  "&:hover": {
+
+    transition: '0.5s',
+    transform: 'scale(1.2)'
+  }
+}
+
+function UsersTasksRow({ row, deleteTaskHandler, calendarOpen, deleteCopyTaskHandler, currentTask, isEdit, setIsEdit, setCurrentTask, onChangeCurrentTaskHandler, allUserProjectsForModalTask, onDateChangeEditHandler, editCurrentTaskHandler }) {
   const user = useSelector((state) => state.users.user);
 
   const [openCopies, setOpenCopies] = useState(false);
+  const [editMode, setEditMode] = useState(false);
 
   const dateTimeTasks = useMemo(() => {
     if (row.dateTimeTasks.length === 1) {
@@ -22,12 +35,13 @@ function UsersTasksRow({ row, deleteTaskHandler, calendarOpen, deleteCopyTaskHan
       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>
+        <Tooltip title={moment(row.dateTimeTasks[0].dateTimeStart).utc().format('YYYY')}>
+          <Box>
+            {`${date} (${start} - ${end})`}
+            <Divider sx={{ opacity: 0 }} />
+            {`часы: ${diff}`}
+          </Box>
+        </Tooltip>
 
         {user.id === row?.executor?.id ?
           <Tooltip title="Перейти в календарь">
@@ -83,38 +97,93 @@ function UsersTasksRow({ row, deleteTaskHandler, calendarOpen, deleteCopyTaskHan
     }
   }, [user.id, calendarOpen, row, openCopies])
 
+  const onClickEditButtonHandler = useCallback(() => {
+    if (!editMode) {
+      setCurrentTask({
+        ...row,
+        project: {...row.project},
+        executor: {...row.executor}
+      })
+    } else {
+      editCurrentTaskHandler()
+      setCurrentTask({
+        priority: '',
+        title: '',
+        project: '',
+        description: '',
+        executor: '',
+      })
+    }
+    setEditMode((prevState) => !prevState)
+    setIsEdit((prevState) => !prevState)
+  }, [setIsEdit, editMode, row, setCurrentTask, editCurrentTaskHandler])
+
+
+  const buttons = useMemo(() => {
+    if (!editMode && isEdit) return null
+    if (editMode) {
+      return <Done sx={editClass} onClick={() => { onClickEditButtonHandler() }} />
+    } else {
+      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) {
+        return (<Edit sx={editClass} onClick={() => { onClickEditButtonHandler() }} />)
+      } else {
+        return null
+      }
+    }
+  }, [deleteTaskHandler, row, user.id, editMode, isEdit, onClickEditButtonHandler])
+
+
   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>
+      {editMode ?
+        <>
+          <EditRow
+            buttons={buttons}
+            dateTimeTasks={dateTimeTasks}
+            onChangeCurrentTaskHandler={(e) => { onChangeCurrentTaskHandler(e) }}
+            currentTask={currentTask}
+            allUserProjectsForModalTask={allUserProjectsForModalTask}
+            onDateChangeEditHandler={onDateChangeEditHandler}
+          />
+        </>
+        :
+        <>
+          <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%' }}>
+            {accomplishStatuses.find((status) => {
+              if (status.value === row.accomplish) {
+                return status
+              }
+              return null
+            }).text}</TableCell>
+          <TableCell size='medium' sx={{ width: '5%', position: 'relative' }}>
+            {buttons}
+          </TableCell>
+        </>}
+
     </TableRow>
     {row.dateTimeTasks.length ? <TableForCopiesTasks
       task={row}

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

 import { TableBody} from "@mui/material";
-import { memo } from "react";
+import { memo, useState } from "react";
 import { getComparator, stableSort } from "./helpers";
 import UsersTasksRow from "./UsersTasksRow/UsersTasksRow";
 
-function UsersTasksTableBody({ rows, page, rowsPerPage, order, orderBy, deleteTaskHandler, calendarOpen, deleteCopyTaskHandler }) {
 
+function UsersTasksTableBody({ rows, page, rowsPerPage, order, orderBy, deleteTaskHandler, calendarOpen, deleteCopyTaskHandler, currentTask, setCurrentTask, onChangeCurrentTaskHandler, allUserProjectsForModalTask, onDateChangeEditHandler, editCurrentTaskHandler}) {
+  const [isEdit, setIsEdit] = useState(false)
   return (<>
     <TableBody>
       {stableSort(rows, getComparator(order, orderBy))
@@ -17,6 +18,14 @@ function UsersTasksTableBody({ rows, page, rowsPerPage, order, orderBy, deleteTa
               row={row}
               deleteCopyTaskHandler={deleteCopyTaskHandler}
               calendarOpen={calendarOpen}
+              isEdit={isEdit}
+              setIsEdit={setIsEdit}
+              currentTask={currentTask}
+              setCurrentTask={setCurrentTask}
+              onChangeCurrentTaskHandler={onChangeCurrentTaskHandler}
+              allUserProjectsForModalTask={allUserProjectsForModalTask}
+              onDateChangeEditHandler={onDateChangeEditHandler}
+              editCurrentTaskHandler={editCurrentTaskHandler}
             />)
         })}
     </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, calendarOpen, deleteCopyTaskHandler}) {
+function UsersTasksTableContainer({ order, orderBy, handleRequestSort, rows, page, rowsPerPage, addFormStatus, onChangeNewTaskHandler, newTask, allUserProjectsForModalTask, onDateChangeHandler, createNewTaskHandler, deleteTaskHandler, calendarOpen, deleteCopyTaskHandler, currentTask, setCurrentTask, onChangeCurrentTaskHandler, onDateChangeEditHandler, editCurrentTaskHandler}) {
   return (
     <TableContainer>
       <NewTaskForm
@@ -13,7 +13,7 @@ function UsersTasksTableContainer({ order, orderBy, handleRequestSort, rows, pag
         onChangeNewTaskHandler={(e)=>{onChangeNewTaskHandler(e)}}
         newTask={newTask}
         allUserProjectsForModalTask={allUserProjectsForModalTask}
-        onDateChange={onDateChange}
+        onDateChangeHandler={onDateChangeHandler}
         createNewTaskHandler={()=>{createNewTaskHandler()}}
       />
       <Table
@@ -35,6 +35,12 @@ function UsersTasksTableContainer({ order, orderBy, handleRequestSort, rows, pag
           deleteTaskHandler={deleteTaskHandler}
           calendarOpen={calendarOpen}
           deleteCopyTaskHandler={deleteCopyTaskHandler}
+          currentTask={currentTask}
+          setCurrentTask={setCurrentTask}
+          onChangeCurrentTaskHandler={onChangeCurrentTaskHandler}
+          allUserProjectsForModalTask={allUserProjectsForModalTask}
+          onDateChangeEditHandler={onDateChangeEditHandler}
+          editCurrentTaskHandler={editCurrentTaskHandler}
         />
       </Table>
     </TableContainer>

planner-front/src/constants.js

@@ -25,4 +25,12 @@ export const AllHoursOneHourFormat =  ['0:00', '1:00', '2:00', '3:00', '4:00', '
 
 export const AllHoursTwoHourFormat =  ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
 
-export const projectRoles = [{ value: 'admin', text: 'Админ' }, { value: 'user', text: 'Юзер' }, { value: 'watcher', text: 'Наблюдатель' }]
+export const projectRoles = [{ value: 'admin', text: 'Админ' }, { value: 'user', text: 'Юзер' }, { value: 'watcher', text: 'Наблюдатель' }]
\ No newline at end of file
+
+export const accomplishStatuses = [
+  { value: 'opened', text: 'Открыто' },
+  { value: 'done', text: 'Выполнено' },
+  { value: 'failed', text: 'Просрочено' },
+  { value: 'progress', text: 'В работе' },
+  { value: 'cancelled', text: 'Отменено' }
+]
\ No newline at end of file

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, deleteDateTimeTaskUsers, deleteTaskUsers, fetchAllTasksByMembership } from '../../store/actions/tasksActions';
+import { activateCreateCopyTasksMode, addTaskToUserTasksTable, deleteDateTimeTaskUsers, deleteTaskUsers, editTaskUsers, fetchAllTasksByMembership } from '../../store/actions/tasksActions';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useCallback, useEffect, useState } from 'react';
 import { fetchAllUserProjects } from '../../store/actions/projectsActions';
@@ -25,6 +25,15 @@ export default function EnhancedTable() {
     dateTimeDeadLine: null,
   })
 
+  const [currentTask, setCurrentTask] = useState({
+    priority: '',
+    title: '',
+    project: '',
+    description: '',
+    executor: '',
+    dateTimeDeadLine: null,
+  })
+
   const [order, setOrder] = useState('asc');
   const [orderBy, setOrderBy] = useState('createdAt');
   const [page, setPage] = useState(0);
@@ -44,9 +53,29 @@ export default function EnhancedTable() {
         [name]: value
       }
     }));
-  },[])
+  }, [])
 
-  const onDateChange =  useCallback((value, property) => {
+  const onChangeCurrentTaskHandler = useCallback((e) => {
+    const { value, name } = e.target;
+    setCurrentTask((prevState => {
+      return {
+        ...prevState,
+        [name]: value
+      }
+    }));
+  }, [])
+
+  const onDateChangeEditHandler = useCallback((value, property) => {
+    const utcAvoidoffset = moment(value).utcOffset(0, true).format()
+    setCurrentTask((prevState => {
+      return {
+        ...prevState,
+        [property]: utcAvoidoffset
+      }
+    }));
+  }, []);
+
+  const onDateChangeHandler = useCallback((value, property) => {
     const utcAvoidoffset = moment(value).utcOffset(0, true).format()
     setNewTask((prevState => {
       return {
@@ -54,24 +83,24 @@ export default function EnhancedTable() {
         [property]: utcAvoidoffset
       }
     }));
-  },[]);
+  }, []);
 
-  const handleRequestSort =  useCallback((event, property) => {
+  const handleRequestSort = useCallback((event, property) => {
     const isAsc = orderBy === property && order === 'asc';
     setOrder(isAsc ? 'desc' : 'asc');
     setOrderBy(property);
-  },[order, orderBy]);
+  }, [order, orderBy]);
 
-  const handleChangePage =  useCallback((event, newPage) => {
+  const handleChangePage = useCallback((event, newPage) => {
     setPage(newPage);
-  },[]);
+  }, []);
 
-  const handleChangeRowsPerPage =  useCallback((event) => {
+  const handleChangeRowsPerPage = useCallback((event) => {
     setRowsPerPage(parseInt(event.target.value, 10));
     setPage(0);
-  },[]);
+  }, []);
 
-  const createTaskFromButtonHandler =  useCallback(() => {
+  const createTaskFromButtonHandler = useCallback(() => {
     if (addFormStatus) {
       setNewTask({
         priority: '',
@@ -79,15 +108,16 @@ export default function EnhancedTable() {
         project: '',
         description: '',
         executor: '',
+        dateTimeDeadLine: null
       })
     }
     setAddFormStatus((prevState) => { return !prevState })
-  },[addFormStatus])
+  }, [addFormStatus])
 
   const createNewTaskHandler = useCallback(() => {
     if (newTask.priority === '' || newTask.project === '' || newTask.executor) {
       const task = {
-        ...newTask, 
+        ...newTask,
         priority: newTask.priority ? newTask.priority : null,
         project: newTask.project ? newTask.project : null,
         executor: newTask.executor ? newTask.executor : null,
@@ -102,23 +132,46 @@ export default function EnhancedTable() {
       project: '',
       description: '',
       executor: '',
+      dateTimeDeadLine: null
     })
     setAddFormStatus((prevState) => { return !prevState })
-  },[dispatch, newTask])
+  }, [dispatch, newTask])
 
 
-  const deleteTaskHandler = useCallback((id)=>{   
+  const deleteTaskHandler = useCallback((id) => {
     dispatch(deleteTaskUsers(id))
   }, [dispatch])
 
-  const deleteCopyTaskHandler = useCallback((id)=>{   
+  const deleteCopyTaskHandler = useCallback((id) => {
     dispatch(deleteDateTimeTaskUsers(id))
   }, [dispatch])
 
-  const calendarOpen=(task)=>{
+  const calendarOpen = (task) => {
     dispatch(activateCreateCopyTasksMode(task, navigate))
   }
 
+  const editCurrentTaskHandler = useCallback(() => {
+    if (currentTask.priority === '' || currentTask.project === '' || currentTask.executor) {
+      const task = {
+        ...currentTask,
+        priority: currentTask.priority ? currentTask.priority : null,
+        project: currentTask.project ? currentTask.project : null,
+        executor: currentTask.executor ? currentTask.executor : null,
+      }
+      dispatch(editTaskUsers(task))
+    } else {
+      dispatch(editTaskUsers(currentTask))
+    }
+    setCurrentTask({
+      priority: '',
+      title: '',
+      project: '',
+      description: '',
+      executor: '',
+      dateTimeDeadLine: null
+    })
+  }, [dispatch, currentTask])
+
   return (
     <Paper sx={{ width: '100%', mb: 2 }}>
       <UsersTasksTableToolbar
@@ -136,11 +189,16 @@ export default function EnhancedTable() {
         onChangeNewTaskHandler={onChangeNewTaskHandler}
         newTask={newTask}
         allUserProjectsForModalTask={allUserProjectsForModalTask}
-        onDateChange={onDateChange}
+        onDateChangeHandler={onDateChangeHandler}
         createNewTaskHandler={createNewTaskHandler}
         deleteTaskHandler={deleteTaskHandler}
         calendarOpen={calendarOpen}
         deleteCopyTaskHandler={deleteCopyTaskHandler}
+        currentTask={currentTask}
+        setCurrentTask={setCurrentTask}
+        onChangeCurrentTaskHandler={onChangeCurrentTaskHandler}
+        onDateChangeEditHandler={onDateChangeEditHandler}
+        editCurrentTaskHandler={editCurrentTaskHandler}
       />
       <UsersTasksTablePagination
         count={tasks.length}

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

@@ -163,6 +163,19 @@ export const editTask = (task) => {
   }
 }
 
+export const editTaskUsers = (task) => {
+  return async (dispatch) => {
+      dispatch(editTaskRequest());
+      try {
+        await axios.put(`/tasks/${task.id}`, task);
+        dispatch(editTaskSuccess())
+        await dispatch(fetchAllTasksByMembership())
+      } catch (error) {
+        dispatch(editTaskFailure(error.response.data));
+      }
+  }
+}
+
 export const editCalendarTask = (task, taskId, userId) => {
   return async (dispatch) => {
       dispatch(editTaskRequest());

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

@@ -90,8 +90,8 @@ const tasksReduсer = (state = initialState, action) => {
     case FETCH_ALL_TASKS_SUCCESS:
       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 {
+      const newArr = action.tasks.map((task)=>{
+        return {
         ...task,
         authorName: task.author.displayName,
         projectTitle: task.project.title,