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 @@
"private": true,
"dependencies": {
"-": "^0.0.1",
"@date-io/moment": "^2.16.1",
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@mui/icons-material": "^5.10.9",
"@mui/material": "^5.10.9",
"@mui/x-date-pickers": "^5.0.7",
"@reduxjs/toolkit": "^1.8.6",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.1.2",
"dayjs": "^1.11.6",
"moment": "^2.29.4",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
......
planner-front/src/App.js
View file @ b2be2b7b
......@@ -23,7 +23,7 @@ const App = () => {
<>
<AppToolbar/>
<main>
<Container >
<Container maxWidth={false} sx={{maxWidth:'2500px'}}>
<Outlet/>
</Container>
</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';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
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 (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
Мои задачи
</Typography>
<Button color="inherit">Добавить задачу</Button>
<Button color="inherit" onClick={props.onClick} >Добавить задачу</Button>
</Toolbar>
</AppBar>
</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 './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 [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 (
<Modal
......@@ -12,6 +39,29 @@ const TaskModal = (props) => {
onClose={props.handleClose}
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">
{ props.task && props.task.title && (
<div
......@@ -19,7 +69,7 @@ const TaskModal = (props) => {
width: "200px",
height: "200px",
color: "white",
fontWeight: "600",
fontWeight: "600"
}}
>
{props.task.title}
......@@ -38,6 +88,7 @@ const TaskModal = (props) => {
X
</IconButton>
</div>
}
</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 Box from '@mui/material/Box';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import DeleteIcon from '@mui/icons-material/Delete';
import { useState } from "react";
import Input from '@mui/material/Input';
import { Done } from '@mui/icons-material';
import {Edit} from '@mui/icons-material'
import TaskModal from '../../components/UI/TaskModal/TaskModal'
import EnhancedTableHead from './MyTasksHeader/MyTasksHeader';
import MyTaskToolBar from '../../components/MyTaskToolBar/MyTaskToolBar'
import * as React from "react";
import {
Box,
Table,
TableBody,
TextField,
TableCell,
TableContainer,
TablePagination,
TableRow,
Typography,
Paper,
IconButton,
Tooltip,
Input,
} from "@mui/material";
import { useState, useEffect } from "react";
import { Done, Edit } from "@mui/icons-material";
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) {
if (b[orderBy] < a[orderBy]) {
......@@ -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() {
const [order, setOrder] = React.useState('asc');
const [orderBy, setOrderBy] = React.useState('id');
const [page, setPage] = React.useState(0);
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",
title:"задача1",
......@@ -84,8 +79,8 @@ const exampleTasks=[
priority:"A",
author:"Ivan",
executor:"Arman",
dateTimeStart:"26.10.2022",
dateTimeDue:"27.10.2022",
dateTimeStart: "2022-10-26T11:00:00",
dateTimeDue: "2022-10-27T10:30:00",
id:1,
dateCreated:"26.10.2022"
},
......@@ -96,8 +91,8 @@ const exampleTasks=[
author:"Ivan",
executor:"Elena",
priority:"B",
dateTimeStart:"26.10.2022",
dateTimeDue:"27.10.2022",
dateTimeStart: "2022-10-26T13:30:00",
dateTimeDue: "2022-10-27T12:30:00",
id:2,
dateCreated:"26.10.2022"
},
......@@ -108,17 +103,48 @@ const exampleTasks=[
author:"Artem",
executor:"Bota",
priority:"B",
dateTimeStart:"30.10.2022",
dateTimeDue:"02.11.2022",
dateTimeStart: "2022-10-30T09:30:00",
dateTimeDue: "2022-11-02T09:30:00",
id:3,
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 => {
setTasks(state => {
......@@ -151,9 +177,12 @@ const exampleTasks=[
};
const deleteTask=()=>{
// удалить по id из selected
}
const deleteTask=(id)=>{
console.log(id)
let newTasks=[...tasks]
newTasks.splice(tasks[id],1)
setTasks(newTasks)
};
const handleChangePage = (event, newPage) => {
setPage(newPage);
......@@ -163,31 +192,51 @@ const exampleTasks=[
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
const [modal, setModal] =useState({
open: false,
task: null
});
const onModalOpen = (event, task) => {
console.log(event,task)
event.stopPropagation();
setModal({ ...modal, open: true, task});
};
const handleClose = () => {
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 (
<Box sx={{ width: 'fullwidth' }}>
<Paper sx={{ width: '100%', mb: 2 }}>
<MyTaskToolBar/>
<MyTaskToolBar
onClick={()=>{addTask()}}
/>
<TableContainer>
<Table
sx={{ minWidth: 750 }}
sx={{ minWidth: 600 }}
aria-labelledby="tableTitle"
>
<EnhancedTableHead
......@@ -203,12 +252,12 @@ const exampleTasks=[
.map((task, index) => {
return (
<>
<TableRow
hover
key={task.id}
>
<TableCell
component="th"
scope="row"
......@@ -218,10 +267,30 @@ const exampleTasks=[
<CustomTableCell {...{ task, name: "dateCreated", onChange }} />
<CustomTableCell {...{ task, name: "title", onChange, onModalOpen}} />
<CustomTableCell {...{ task, name: "author", onChange }} />
<CustomTableCell {...{ task, name: "dateTimeStart", onChange }} />
<CustomTableCell {...{ task, name: "dateTimeDue", onChange }} />
<CustomTableCell {...{ task, name: "done", onChange }} />
{task.isEditMode ? (
<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 >
......@@ -252,7 +321,7 @@ const exampleTasks=[
</TableCell>
</TableRow>
</>
);
})}
......@@ -273,7 +342,10 @@ const exampleTasks=[
task={modal.task}
open={modal.open}
handleClose={handleClose}
onChange={(e) => {onChange(e,modal.task)}}
onToggleEditMode={onToggleEditMode}
tasks={tasks}
setTasks={setTasks}
/>
</Box>
);
......
planner-front/src/containers/MyTasks/MyTasksHeader/MyTasksHeader.js
View file @ b2be2b7b
......@@ -5,41 +5,9 @@ import TableCell from '@mui/material/TableCell';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import TableSortLabel from '@mui/material/TableSortLabel';
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 = [
{
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