#149 Полностью завершил добавление задачи и еще реализовал удаление задачи

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

@@ -3,7 +3,6 @@ import TextField from "@mui/material/TextField";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
 import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import moment from "moment";
 
 

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

-import { Box, Divider, Grid, IconButton, TextField, Typography, } from "@mui/material";
+import { Box, Divider, Grid, IconButton, TextField, Tooltip, Typography, } from "@mui/material";
+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 { Save } from "@mui/icons-material";
+import { isValidate } from "./helpers";
+
+const StyledTooltip = styled(({ className, ...props }) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))`
+  & .MuiTooltip-tooltip {
+    background: white;
+  }
+`;
+
+
 
 function NewTaskForm({ addFormStatus, onChangeNewTaskHandler, newTask, allUserProjectsForModalTask, onDateChange, createNewTaskHandler }) {
-  const workers = useMemo(()=>{
+  const workers = useMemo(() => {
     if (newTask?.project) {
-      return newTask?.project?.members.map((member)=>{return {value: member.user, text: member.user.displayName}})
+      return newTask?.project?.members.map((member) => { return { value: member.user, text: member.user.displayName } })
     } else {
-      return [{value: '', text: 'Выберите проект'}]
+      return [{ value: '', text: 'Выберите проект' }]
     }
-  },[newTask?.project])
+  }, [newTask?.project])
 
 
   return (
@@ -52,6 +64,19 @@ function NewTaskForm({ addFormStatus, onChangeNewTaskHandler, newTask, allUserPr
               />
             </Grid>
             <Grid item xs={3.5}>
+              <StyledTooltip
+                title={<TextField
+                  id="task-description"
+                  value={newTask.description}
+                  variant="outlined"
+                  name='description'
+                  placeholder='Описание'
+                  sx={{ width: '300px' }}
+                  onChange={onChangeNewTaskHandler}
+                  multiline
+                  rows={5}
+
+                />}>
                 <TextField
                   id="task-title"
                   value={newTask.title}
@@ -60,6 +85,7 @@ function NewTaskForm({ addFormStatus, onChangeNewTaskHandler, newTask, allUserPr
                   sx={{ width: '90%' }}
                   onChange={onChangeNewTaskHandler}
                 />
+              </StyledTooltip>
             </Grid>
             <Grid item xs={2}>
               <CustomSelect
@@ -91,7 +117,7 @@ function NewTaskForm({ addFormStatus, onChangeNewTaskHandler, newTask, allUserPr
               />
             </Grid>
             <Grid item xs={0.5} >
-              <IconButton disabled={!newTask.title} onClick={createNewTaskHandler}>
+              <IconButton disabled={!isValidate(newTask.title, newTask.description)} onClick={createNewTaskHandler}>
                 <Save />
               </IconButton>
             </Grid>

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

+export const isValidate = (title, description) => {
+  if (title.length === 0) return false
+  if (title.length < 50 && description.length < 100) return true
+  return false 
+}
\ No newline at end of file

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

@@ -3,10 +3,11 @@ import moment from "moment";
 import { memo } from "react";
 import DeleteButton from "../../../UI/DeleteButton/DeleteButton";
 import { getComparator, stableSort } from "./helpers";
-import { Done, Edit } from "@mui/icons-material";
-
-function UsersTasksTableBody({ rows, page, rowsPerPage, order, orderBy, addFormStatus }) {
+import { Edit } from "@mui/icons-material";
+import { useSelector } from "react-redux";
 
+function UsersTasksTableBody({ rows, page, rowsPerPage, order, orderBy, deleteTaskHandler }) {
+  const user = useSelector((state) => state.users.user);
   return (<>
     <TableBody>
 
@@ -22,7 +23,7 @@ function UsersTasksTableBody({ rows, page, rowsPerPage, order, orderBy, addFormS
               <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', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                <TableCell sx={{ width: '25%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                   {row.title}
                 </TableCell>
               </Tooltip>
@@ -33,8 +34,14 @@ function UsersTasksTableBody({ rows, page, rowsPerPage, order, orderBy, addFormS
               <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 />
+                    <DeleteButton onClick={() => { deleteTaskHandler(row.id) }} />
+                  </>
+                  :
+                  <Edit />
+                }
               </TableCell>
             </TableRow>
           );

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

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

-import { AppBar, Box, Toolbar, Typography } from "@mui/material";
+import { AppBar, Box, Typography } from "@mui/material";
 import { memo } from "react";
 import CreateTaskFromButton from "./CreateTaskFromButton/CreateTaskFromButton";
 

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

@@ -2,9 +2,9 @@ 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, fetchAllTasksByMembership } from '../../store/actions/tasksActions';
+import { addTaskToUserTasksTable, deleteTaskUsers, fetchAllTasksByMembership } from '../../store/actions/tasksActions';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { fetchAllUserProjects } from '../../store/actions/projectsActions';
 import moment from 'moment';
 
@@ -14,15 +14,15 @@ export default function EnhancedTable() {
   const { tasks } = useSelector((state) => state.tasks);
   const { allUserProjectsForModalTask } = useSelector(state => state.projects, shallowEqual)
 
-  const user = useSelector((state) => state.users.user);
   const [newTask, setNewTask] = useState({
     priority: '',
     title: '',
-    project: null,
+    project: '',
     description: '',
-    executor: null,
+    executor: '',
     dateTimeDeadLine: null,
   })
+
   const [order, setOrder] = useState('asc');
   const [orderBy, setOrderBy] = useState('createdAt');
   const [page, setPage] = useState(0);
@@ -34,7 +34,7 @@ export default function EnhancedTable() {
     dispatch(fetchAllUserProjects())
   }, [dispatch]);
 
-  const onChangeNewTaskHandler = (e) => {
+  const onChangeNewTaskHandler = useCallback((e) => {
     const { value, name } = e.target;
     setNewTask((prevState => {
       return {
@@ -42,9 +42,9 @@ export default function EnhancedTable() {
         [name]: value
       }
     }));
-  };
+  },[])
 
-  const onDateChange = (value, property) => {
+  const onDateChange =  useCallback((value, property) => {
     const utcAvoidoffset = moment(value).utcOffset(0, true).format()
     setNewTask((prevState => {
       return {
@@ -52,24 +52,24 @@ export default function EnhancedTable() {
         [property]: utcAvoidoffset
       }
     }));
-  };
+  },[]);
 
-  const handleRequestSort = (event, property) => {
+  const handleRequestSort =  useCallback((event, property) => {
     const isAsc = orderBy === property && order === 'asc';
     setOrder(isAsc ? 'desc' : 'asc');
     setOrderBy(property);
-  };
+  },[order, orderBy]);
 
-  const handleChangePage = (event, newPage) => {
+  const handleChangePage =  useCallback((event, newPage) => {
     setPage(newPage);
-  };
+  },[]);
 
-  const handleChangeRowsPerPage = (event) => {
+  const handleChangeRowsPerPage =  useCallback((event) => {
     setRowsPerPage(parseInt(event.target.value, 10));
     setPage(0);
-  };
+  },[]);
 
-  const createTaskFromButtonHandler = () => {
+  const createTaskFromButtonHandler =  useCallback(() => {
     if (addFormStatus) {
       setNewTask({
         priority: '',
@@ -77,15 +77,20 @@ export default function EnhancedTable() {
         project: '',
         description: '',
         executor: '',
-        dateTimeDeadLine: '',
       })
     }
     setAddFormStatus((prevState) => { return !prevState })
-  }
+  },[addFormStatus])
 
-  const createNewTaskHandler = () => {
-    if (newTask.priority === '') {
-      const task = {...newTask, priority: null}
+  const createNewTaskHandler = useCallback(() => {
+    if (newTask.priority === '' || newTask.project === '' || newTask.executor) {
+      const task = {
+        ...newTask, 
+        priority: newTask.priority ? newTask.priority : null,
+        project: newTask.project ? newTask.project : null,
+        executor: newTask.executor ? newTask.priority : null,
+      }
+      console.log(task, 'asdasdasdasdassdasdas')
       dispatch(addTaskToUserTasksTable(task))
     } else {
       dispatch(addTaskToUserTasksTable(newTask))
@@ -96,10 +101,14 @@ export default function EnhancedTable() {
       project: '',
       description: '',
       executor: '',
-      dateTimeDeadLine: '',
     })
     setAddFormStatus((prevState) => { return !prevState })
-  }
+  },[dispatch, newTask])
+
+
+  const deleteTaskHandler = useCallback((id)=>{   
+    dispatch(deleteTaskUsers(id))
+  }, [dispatch])
 
   return (
     <Paper sx={{ width: '100%', mb: 2 }}>
@@ -120,6 +129,7 @@ export default function EnhancedTable() {
         allUserProjectsForModalTask={allUserProjectsForModalTask}
         onDateChange={onDateChange}
         createNewTaskHandler={createNewTaskHandler}
+        deleteTaskHandler={deleteTaskHandler}
       />
       <UsersTasksTablePagination
         count={tasks.length}

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

@@ -167,8 +167,7 @@ export const editCalendarTask = (task, taskId, userId) => {
   return async (dispatch) => {
       dispatch(editTaskRequest());
       try {
-        const response = await axios.put(`/copy-tasks/change-copy/${taskId}`, task);
-        console.log(response.data)
+        await axios.put(`/copy-tasks/change-copy/${taskId}`, task);
         dispatch(editTaskSuccess())
         dispatch(fetchCalendarTasks(userId))
       } catch (error) {
@@ -202,6 +201,19 @@ export const deleteTask = (taskId) => {
   }
 }
 
+export const deleteTaskUsers = (taskId) => {
+  return async (dispatch) => {
+      dispatch(deleteTaskRequest());
+      try {
+        await axios.delete(`/tasks/${taskId}`);
+        dispatch(deleteTaskSuccess())
+        await dispatch(fetchAllTasksByMembership())
+      } catch (error) {
+        dispatch(deleteTaskFailure(error.response.data));
+      }
+  }
+}
+
 export const deleteCalendarTask = (taskId, userId) => {
   return async (dispatch) => {
       dispatch(deleteTaskRequest());