Skip to content

P
planner-team-one
Commit bb6dbc9d authored by Нелли Ибрагимова's avatar Нелли Ибрагимова
Browse files
Options

дописала функцию добавления задачи, удаления задачи, корректировки задачи,… 

дописала функцию добавления задачи, удаления задачи, корректировки задачи, добавила ДейтПикер. нужно будет откорректировать его работу, пока дейтпикер работает не совсем корректно
parent a04934c2
Expand all Show whitespace changes
Inline Side-by-side
Showing with 600 additions and 103 deletions
planner-front/package-lock.json
View file @ bb6dbc9d
This diff is collapsed.
planner-front/package.json
View file @ bb6dbc9d
......@@ -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 @ bb6dbc9d
......@@ -21,7 +21,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 @ bb6dbc9d
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 @ bb6dbc9d
......@@ -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>
<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 @ bb6dbc9d
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
aria-labelledby="transition-modal-title"
......@@ -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 @ bb6dbc9d
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 @ bb6dbc9d
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);
const formattedTasks = exampleTasks.map((t)=> {return {...t, isEditableMode: false}})
setTasks(updatedTasks);
}
}, [newStartedDate || newDueDate]);
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);
......@@ -164,13 +193,11 @@ const exampleTasks=[
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});
};
......@@ -178,16 +205,38 @@ const exampleTasks=[
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 @ bb6dbc9d
......@@ -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',
......
planner-front/src/store/reducers/usersReducer.js
View file @ bb6dbc9d
......@@ -3,7 +3,8 @@ const initialState = {
name: 'Ivan',
surname: 'Petrov',
email: 'test@gmail.com',
role: 'superuser'
role: 'superuser',
token:'3fc61d09-1941-48b0-b765-17d22a5caab9'
}
};
......
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