Skip to content

P
planner-team-one
Commit b2be2b7b authored by Евгений Положенцев's avatar Евгений Положенцев
Browse files
Options

Merge branch 'task-18-feature-modification-my_tasks_page' into 'development' 

Task 18 feature modification my tasks page

See merge request !8
parents 55faffab fb74dd9f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 598 additions and 102 deletions
planner-front/package-lock.json
View file @ b2be2b7b
This diff is collapsed.
planner-front/package.json
View file @ b2be2b7b
...@@ -4,15 +4,19 @@ ...@@ -4,15 +4,19 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"-": "^0.0.1", "-": "^0.0.1",
"@date-io/moment": "^2.16.1",
"@emotion/react": "^11.10.4", "@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4", "@emotion/styled": "^11.10.4",
"@mui/icons-material": "^5.10.9", "@mui/icons-material": "^5.10.9",
"@mui/material": "^5.10.9", "@mui/material": "^5.10.9",
"@mui/x-date-pickers": "^5.0.7",
"@reduxjs/toolkit": "^1.8.6", "@reduxjs/toolkit": "^1.8.6",
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"axios": "^1.1.2", "axios": "^1.1.2",
"dayjs": "^1.11.6",
"moment": "^2.29.4",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
......
planner-front/src/App.js
View file @ b2be2b7b
...@@ -23,7 +23,7 @@ const App = () => { ...@@ -23,7 +23,7 @@ const App = () => {
<> <>
<AppToolbar/> <AppToolbar/>
<main> <main>
<Container > <Container maxWidth={false} sx={{maxWidth:'2500px'}}>
<Outlet/> <Outlet/>
</Container> </Container>
</main> </main>
......
planner-front/src/components/MyTasksCompoments/CustomTableCell.js 0 → 100644
View file @ b2be2b7b
import * as React from 'react';
import TableCell from '@mui/material/TableCell';
import IconButton from '@mui/material/IconButton';
import Input from '@mui/material/Input';
import { Done, CalendarToday } from '@mui/icons-material';
import MaterialUIPickers from '../UI/DateTimePicker/DateTimePicker';
const CustomTableCell = ({ task, name, onChange, onModalOpen }) => {
const styles = { width: "auto", height: "40px" };
return (
<>
{task.isEditMode && name === "title" ? (
<TableCell
onClick={(e) => onModalOpen(e, task)} align="left" style={styles}>
<Input
value={task[name]}
name={name}
onChange={(e) => onChange(e, task)}
style={styles}
/>
</TableCell>
) : task.isEditMode && name !== "title"? (
<TableCell align="left" style={styles}>
<Input
value={task[name]}
name={name}
onChange={(e) => onChange(e, task)}
style={styles}
/>
</TableCell>
) : onModalOpen ? (
<TableCell align="left" style={styles} onClick={(e) => onModalOpen(e, task)}>
<span style={{ width: "100%" }} >
{task[name]}
</span>
</TableCell>
) : (
<TableCell align="left" style={styles}>
{task[name]}
</TableCell>
)}
</>
);
};
export default CustomTableCell;
\ No newline at end of file
planner-front/src/components/MyTaskToolBar/MyTaskToolBar.js → planner-front/src/components/MyTasksCompoments/MyTaskToolBar.js
View file @ b2be2b7b
...@@ -4,27 +4,18 @@ import Box from '@mui/material/Box'; ...@@ -4,27 +4,18 @@ import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar'; import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
export default function ButtonAppBar() {
export default function MyTaskToolBar(props) {
return ( return (
<Box sx={{ flexGrow: 1 }}> <Box sx={{ flexGrow: 1 }}>
<AppBar position="static"> <AppBar position="static">
<Toolbar> <Toolbar>
<IconButton <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
Мои задачи Мои задачи
</Typography> </Typography>
<Button color="inherit">Добавить задачу</Button> <Button color="inherit" onClick={props.onClick} >Добавить задачу</Button>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
</Box> </Box>
......
planner-front/src/components/UI/TaskModal/TaskModal.js → planner-front/src/components/MyTasksCompoments/TaskModal/TaskModal.js
View file @ b2be2b7b
import { Modal, IconButton } from '@mui/material'; import { Modal, IconButton } from '@mui/material';
import './TaskModal.css' import './TaskModal.css';
import { Done } from '@mui/icons-material';
import Input from '@mui/material/Input';
import { useState, useEffect } from "react";
const TaskModal = (props) => { const TaskModal = (props) => {
const [taskContent, setTaskContent] = useState();
useEffect(() => {
if (props.task !== null) {
setTaskContent({
title: props.task.title,
description: props.task.description,
});
}
}, [props.task]);
const inputChangeHandler = (e) => {
const { name, value } = e.target;
setTaskContent((prevState) => {
return { ...prevState, [name]: value };
});
props.onChange(e, props.task);
};
const saveModalData=()=>{
props.handleClose()
};
return ( return (
<Modal <Modal
...@@ -12,6 +39,29 @@ const TaskModal = (props) => { ...@@ -12,6 +39,29 @@ const TaskModal = (props) => {
onClose={props.handleClose} onClose={props.handleClose}
open={props.open} open={props.open}
> >
{ props?.task?.isEditMode ?
<div className="modalBox">
<Input
value={taskContent?.title}
name={"title"}
onChange={inputChangeHandler}
style={{ width: "auto", fontSize:"12px",color: "white",fontWeight: "600" }}
/>
<Input
value={taskContent?.description}
name={"description"}
onChange={inputChangeHandler}
style={{ width: "auto", fontSize:"12px",color: "white" }}
/>
<IconButton
aria-label="done"
onClick={saveModalData}
>
<Done/>
</IconButton>
</div>:
<div className="modalBox"> <div className="modalBox">
{ props.task && props.task.title && ( { props.task && props.task.title && (
<div <div
...@@ -19,7 +69,7 @@ const TaskModal = (props) => { ...@@ -19,7 +69,7 @@ const TaskModal = (props) => {
width: "200px", width: "200px",
height: "200px", height: "200px",
color: "white", color: "white",
fontWeight: "600", fontWeight: "600"
}} }}
> >
{props.task.title} {props.task.title}
...@@ -38,6 +88,7 @@ const TaskModal = (props) => { ...@@ -38,6 +88,7 @@ const TaskModal = (props) => {
X X
</IconButton> </IconButton>
</div> </div>
}
</Modal> </Modal>
); );
}; };
......
planner-front/src/components/UI/DateTimePicker/DateTimePicker.js 0 → 100644
View file @ b2be2b7b
import * as React from 'react';
import TextField from '@mui/material/TextField';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { useState, useEffect } from "react";
import dayjs from 'dayjs';
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
export default function MaterialUIPickers(props) {
console.log(props)
if (props.task.dateTimeStart!==undefined)
return (
<LocalizationProvider dateAdapter={AdapterMoment}>
<DateTimePicker
renderInput={(params) => (
<TextField {...params} name="dateCreated" />
)}
value={
props.newStartedDate && props.newStartedDate.id === props.task.id? props.newStartedDate.date
: props.task.dateTimeStart
}
onChange={(newValue) => {
props.setNewStartedDate({
id: props.task.id,
date: newValue,
});
}}
/>
</LocalizationProvider>
);
else if(props.task.dateTimeDue!==undefined) {
return (
<LocalizationProvider dateAdapter={AdapterMoment}>
<DateTimePicker
renderInput={(params) => (
<TextField {...params} name="dateCreated" />
)}
value={
props.newDueDate && props.newDueDate.id === props.task.id? props.newDueDate.date
: props.task.dateTimeDue
}
onChange={(newValue) => {
props.setNewDueDate({
id: props.task.id,
date: newValue,
});
}}
/>
</LocalizationProvider>
);
}
}
\ No newline at end of file
planner-front/src/containers/MyTasks/MyTasks.js
View file @ b2be2b7b
import * as React from 'react'; import * as React from "react";
import Box from '@mui/material/Box'; import {
import Table from '@mui/material/Table'; Box,
import TableBody from '@mui/material/TableBody'; Table,
import TableCell from '@mui/material/TableCell'; TableBody,
import TableContainer from '@mui/material/TableContainer'; TextField,
import TablePagination from '@mui/material/TablePagination'; TableCell,
import TableRow from '@mui/material/TableRow'; TableContainer,
import Paper from '@mui/material/Paper'; TablePagination,
import IconButton from '@mui/material/IconButton'; TableRow,
import Tooltip from '@mui/material/Tooltip'; Typography,
import DeleteIcon from '@mui/icons-material/Delete'; Paper,
import { useState } from "react"; IconButton,
import Input from '@mui/material/Input'; Tooltip,
import { Done } from '@mui/icons-material'; Input,
import {Edit} from '@mui/icons-material' } from "@mui/material";
import TaskModal from '../../components/UI/TaskModal/TaskModal' import { useState, useEffect } from "react";
import EnhancedTableHead from './MyTasksHeader/MyTasksHeader'; import { Done, Edit } from "@mui/icons-material";
import MyTaskToolBar from '../../components/MyTaskToolBar/MyTaskToolBar' import DeleteIcon from "@mui/icons-material/Delete";
import TaskModal from "../../components/MyTasksCompoments/TaskModal/TaskModal";
import EnhancedTableHead from "./MyTasksHeader/MyTasksHeader";
import { Container } from "@mui/system";
import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
import moment from "moment";
import MyTaskToolBar from '../../components/MyTasksCompoments/MyTaskToolBar';
import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell";
import MaterialUIPickers from "../../components/UI/DateTimePicker/DateTimePicker";
function descendingComparator(a, b, orderBy) { function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) { if (b[orderBy] < a[orderBy]) {
...@@ -48,35 +57,21 @@ function stableSort(array, comparator) { ...@@ -48,35 +57,21 @@ function stableSort(array, comparator) {
} }
const CustomTableCell = ({ task, name, onChange, onModalOpen }) => {
return (
<TableCell align="left" style={{ width: "130px", height: "40px" }}>
{task.isEditMode ? (
<Input
value={task[name]}
name={name}
onChange={(e) => onChange(e, task)}
style={{ width: "130px", height: "40px" }}
/>
) : onModalOpen ? (
<span style={{ width: "100%" }} onClick={(e) => onModalOpen(e, task)}>
{task[name]}
</span>
) : (
task[name]
)}
</TableCell>
);
};
export default function EnhancedTable() { export default function EnhancedTable() {
const [order, setOrder] = React.useState('asc'); const [order, setOrder] = React.useState('asc');
const [orderBy, setOrderBy] = React.useState('id'); const [orderBy, setOrderBy] = React.useState('id');
const [page, setPage] = React.useState(0); const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5); const [rowsPerPage, setRowsPerPage] = React.useState(5);
const [newStartedDate, setNewStartedDate] = React.useState();
const [newDueDate, setNewDueDate] = React.useState();
const handleChange = (id, newDate) => {
setNewStartedDate({ id: id, date: newDate });
};
const exampleTasks=[ const [tasks,setTasks]=useState([
{ {
user:"first", user:"first",
title:"задача1", title:"задача1",
...@@ -84,8 +79,8 @@ const exampleTasks=[ ...@@ -84,8 +79,8 @@ const exampleTasks=[
priority:"A", priority:"A",
author:"Ivan", author:"Ivan",
executor:"Arman", executor:"Arman",
dateTimeStart:"26.10.2022", dateTimeStart: "2022-10-26T11:00:00",
dateTimeDue:"27.10.2022", dateTimeDue: "2022-10-27T10:30:00",
id:1, id:1,
dateCreated:"26.10.2022" dateCreated:"26.10.2022"
}, },
...@@ -96,8 +91,8 @@ const exampleTasks=[ ...@@ -96,8 +91,8 @@ const exampleTasks=[
author:"Ivan", author:"Ivan",
executor:"Elena", executor:"Elena",
priority:"B", priority:"B",
dateTimeStart:"26.10.2022", dateTimeStart: "2022-10-26T13:30:00",
dateTimeDue:"27.10.2022", dateTimeDue: "2022-10-27T12:30:00",
id:2, id:2,
dateCreated:"26.10.2022" dateCreated:"26.10.2022"
}, },
...@@ -108,17 +103,48 @@ const exampleTasks=[ ...@@ -108,17 +103,48 @@ const exampleTasks=[
author:"Artem", author:"Artem",
executor:"Bota", executor:"Bota",
priority:"B", priority:"B",
dateTimeStart:"30.10.2022", dateTimeStart: "2022-10-30T09:30:00",
dateTimeDue:"02.11.2022", dateTimeDue: "2022-11-02T09:30:00",
id:3, id:3,
dateCreated:"27.10.2022", dateCreated:"27.10.2022",
} }
] ])
useEffect(() => {
if (newStartedDate) {
let updatedTasks = [...tasks].filter((t) => t.id !== newStartedDate.id);
const currentTask = tasks.find((t) => t.id === newStartedDate.id);
delete currentTask.dateTimeStart;
console.log(newStartedDate.date)
const updatedTask = {
...currentTask,
dateTimeStart: moment.parseZone(newStartedDate.date, 'DD/MM/YYYY', true).format()
};
updatedTasks.push(updatedTask);
setTasks(updatedTasks);
}
else if (newDueDate){
let updatedTasks = [...tasks].filter((t) => t.id !== newDueDate.id);
const currentTask = tasks.find((t) => t.id === newDueDate.id);
delete currentTask.dateTimeDue;
console.log(newDueDate.date)
const updatedTask = {
...currentTask,
dateTimeDue: moment.parseZone(newDueDate.date, 'DD/MM/YYYY', true).format()
};
updatedTasks.push(updatedTask);
setTasks(updatedTasks);
}
}, [newStartedDate || newDueDate]);
const formattedTasks = exampleTasks.map((t)=> {return {...t, isEditableMode: false}})
const [tasks,setTasks]=useState(formattedTasks)
const onToggleEditMode = id => { const onToggleEditMode = id => {
setTasks(state => { setTasks(state => {
...@@ -151,9 +177,12 @@ const exampleTasks=[ ...@@ -151,9 +177,12 @@ const exampleTasks=[
}; };
const deleteTask=()=>{ const deleteTask=(id)=>{
// удалить по id из selected console.log(id)
} let newTasks=[...tasks]
newTasks.splice(tasks[id],1)
setTasks(newTasks)
};
const handleChangePage = (event, newPage) => { const handleChangePage = (event, newPage) => {
setPage(newPage); setPage(newPage);
...@@ -163,31 +192,51 @@ const exampleTasks=[ ...@@ -163,31 +192,51 @@ const exampleTasks=[
setRowsPerPage(parseInt(event.target.value, 10)); setRowsPerPage(parseInt(event.target.value, 10));
setPage(0); setPage(0);
}; };
const [modal, setModal] =useState({ const [modal, setModal] =useState({
open: false, open: false,
task: null task: null
}); });
const onModalOpen = (event, task) => { const onModalOpen = (event, task) => {
console.log(event,task)
event.stopPropagation(); event.stopPropagation();
setModal({ ...modal, open: true, task}); setModal({ ...modal, open: true, task});
}; };
const handleClose = () => { const handleClose = () => {
setModal({ ...modal, open: false, task: null }); setModal({ ...modal, open: false, task: null });
}; };
const addTask=()=>{
let newTasks=[...tasks]
newTasks.unshift(
{
user:"",
title:"",
description:"",
priority:"",
author:"",
executor:"",
dateTimeStart:"",
dateTimeDue:"",
id:4,
dateCreated:""
}
)
setTasks(newTasks)
};
return ( return (
<Box sx={{ width: 'fullwidth' }}> <Box sx={{ width: 'fullwidth' }}>
<Paper sx={{ width: '100%', mb: 2 }}> <Paper sx={{ width: '100%', mb: 2 }}>
<MyTaskToolBar/> <MyTaskToolBar
onClick={()=>{addTask()}}
/>
<TableContainer> <TableContainer>
<Table <Table
sx={{ minWidth: 750 }} sx={{ minWidth: 600 }}
aria-labelledby="tableTitle" aria-labelledby="tableTitle"
> >
<EnhancedTableHead <EnhancedTableHead
...@@ -203,12 +252,12 @@ const exampleTasks=[ ...@@ -203,12 +252,12 @@ const exampleTasks=[
.map((task, index) => { .map((task, index) => {
return ( return (
<>
<TableRow <TableRow
hover hover
key={task.id} key={task.id}
> >
<TableCell <TableCell
component="th" component="th"
scope="row" scope="row"
...@@ -218,10 +267,30 @@ const exampleTasks=[ ...@@ -218,10 +267,30 @@ const exampleTasks=[
<CustomTableCell {...{ task, name: "dateCreated", onChange }} /> <CustomTableCell {...{ task, name: "dateCreated", onChange }} />
<CustomTableCell {...{ task, name: "title", onChange, onModalOpen}} /> <CustomTableCell {...{ task, name: "title", onChange, onModalOpen}} />
<CustomTableCell {...{ task, name: "author", onChange }} /> <CustomTableCell {...{ task, name: "author", onChange }} />
<CustomTableCell {...{ task, name: "dateTimeStart", onChange }} />
<CustomTableCell {...{ task, name: "dateTimeDue", onChange }} /> {task.isEditMode ? (
<CustomTableCell {...{ task, name: "done", onChange }} /> <TableCell key={task.id}>
<MaterialUIPickers
newStartedDate={newStartedDate}
task={task}
setNewStartedDate={setNewStartedDate}
/>
</TableCell>)
: <CustomTableCell {...{ task, name: "dateTimeStart", onChange}} />
}
{task.isEditMode ? (
<TableCell key={task.id}>
<MaterialUIPickers
newDueDate={newDueDate}
task={task}
setNewDueDate={setNewDueDate}
/>
</TableCell>)
: <CustomTableCell {...{ task, name: "dateTimeDue", onChange}} />
}
<CustomTableCell {...{ task, name: "done", onChange }} />
<TableCell > <TableCell >
...@@ -252,7 +321,7 @@ const exampleTasks=[ ...@@ -252,7 +321,7 @@ const exampleTasks=[
</TableCell> </TableCell>
</TableRow> </TableRow>
</>
); );
})} })}
...@@ -273,7 +342,10 @@ const exampleTasks=[ ...@@ -273,7 +342,10 @@ const exampleTasks=[
task={modal.task} task={modal.task}
open={modal.open} open={modal.open}
handleClose={handleClose} handleClose={handleClose}
onChange={(e) => {onChange(e,modal.task)}}
onToggleEditMode={onToggleEditMode}
tasks={tasks}
setTasks={setTasks}
/> />
</Box> </Box>
); );
......
planner-front/src/containers/MyTasks/MyTasksHeader/MyTasksHeader.js
View file @ b2be2b7b
...@@ -5,41 +5,9 @@ import TableCell from '@mui/material/TableCell'; ...@@ -5,41 +5,9 @@ import TableCell from '@mui/material/TableCell';
import TableHead from '@mui/material/TableHead'; import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow'; import TableRow from '@mui/material/TableRow';
import TableSortLabel from '@mui/material/TableSortLabel'; import TableSortLabel from '@mui/material/TableSortLabel';
import { visuallyHidden } from '@mui/utils'; import { visuallyHidden } from '@mui/utils';
function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
function getComparator(order, orderBy) {
return order === 'desc'
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}
// This method is created for cross-browser compatibility, if you don't
// need to support IE11, you can use Array.prototype.sort() directly
function stableSort(array, comparator) {
const stabilizedThis = array.map((el, index) => [el, index]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) {
return order;
}
return a[1] - b[1];
});
return stabilizedThis.map((el) => el[0]);
}
const headCells = [ const headCells = [
{ {
id: 'id', id: 'id',
......
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