Skip to content

P
planner-team-one
Commit 97c343f3 authored by Ermolaev Timur's avatar Ermolaev Timur
Browse files
Options

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

parent 1adc999b
Show whitespace changes
Inline Side-by-side
Showing with 353 additions and 70 deletions
planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/NewTaskForm/DateTimePicker/DateTimePicker.js → planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/DateTimePicker/DateTimePicker.js
View file @ 97c343f3
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
View file @ 97c343f3
......@@ -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 0 → 100644
View file @ 97c343f3
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
View file @ 97c343f3
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' }}>
<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,11 +97,65 @@ 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}
>
{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}>
......@@ -104,17 +172,18 @@ function UsersTasksRow({ row, deleteTaskHandler, calendarOpen, deleteCopyTaskHan
</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 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
View file @ 97c343f3
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
View file @ 97c343f3
......@@ -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
View file @ 97c343f3
......@@ -26,3 +26,11 @@ 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 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
View file @ 97c343f3
......@@ -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,22 +83,22 @@ export default function EnhancedTable() {
[property]: utcAvoidoffset
}
}));
},[]);
}, []);
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) => {
setPage(newPage);
},[]);
}, []);
const handleChangeRowsPerPage = useCallback((event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
},[]);
}, []);
const createTaskFromButtonHandler = useCallback(() => {
if (addFormStatus) {
......@@ -79,10 +108,11 @@ 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) {
......@@ -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
View file @ 97c343f3
......@@ -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
View file @ 97c343f3
......@@ -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,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment