Skip to content

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

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

переделала дейтпикер, исправила функцию изменения задачи, оптимизировала CustomTableSell, сорректировала селект для статуса
parent e07268be
Expand all Show whitespace changes
Inline Side-by-side
Showing with 759 additions and 519 deletions
planner-front/src/App.js
View file @ 9a852f06
...@@ -2,7 +2,7 @@ import {Routes, Route, Outlet, Navigate, BrowserRouter} from "react-router-dom"; ...@@ -2,7 +2,7 @@ import {Routes, Route, Outlet, Navigate, BrowserRouter} from "react-router-dom";
import {Container} from "@mui/material"; import {Container} from "@mui/material";
import {useSelector} from "react-redux"; import {useSelector} from "react-redux";
import AppToolbar from "./components/UI/AppToolBar/AppToolBar"; import AppToolbar from "./components/UI/AppToolBar/AppToolBar";
import MyTasks from './containers/MyTasks/MyTasks'; import MyTasks from './containers/MyTasks/MyTasks1';
import Login from './containers/Login/Login'; import Login from './containers/Login/Login';
import Register from './containers/Register/Register'; import Register from './containers/Register/Register';
import MonthCalendar from './containers/MonthCalendar/MonthCalendar'; import MonthCalendar from './containers/MonthCalendar/MonthCalendar';
......
planner-front/src/components/MyTasksCompoments/CustomTableCell.js deleted 100644 → 0
View file @ e07268be
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 './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/MyTasksCompoments/CustomTableCell1.js 0 → 100644
View file @ 9a852f06
import * as React from "react";
import TableCell from "@mui/material/TableCell";
import Input from "@mui/material/Input";
const CustomTableCell = ({ task, name, value, onChange, onModalOpen }) => {
const styles = { width: "auto", height: "40px" };
if (task) {
return (
<>
<TableCell
onClick={(e) => (onModalOpen ? onModalOpen(e, task) : null)}
align="left"
style={styles}
>
{task.isEditMode && onChange ? (
<Input
value={value}
name={name}
onChange={(e) => onChange(e, task)}
style={styles}
/>
) : (
<span>{value}</span>
)}
</TableCell>
</>
);
}
};
export default CustomTableCell;
planner-front/src/components/MyTasksCompoments/DateTimePicker/DateTimePicker.js
View file @ 9a852f06
import * as React from 'react'; import * as React from "react";
import TextField from '@mui/material/TextField'; import TextField from "@mui/material/TextField";
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; 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 { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { useState, useEffect } from "react";
import dayjs from 'dayjs';
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
export default function MaterialUIPickers(props) { export default function MaterialUIPickers(props) {
return ( return (
<LocalizationProvider dateAdapter={AdapterMoment} sx={{ width: "auto", fontSize:5,fontWeight: "200" }}> <LocalizationProvider
dateAdapter={AdapterMoment}
sx={{ width: "auto", fontSize: 5, fontWeight: "200" }}
>
<DateTimePicker <DateTimePicker
readOnly={props.readOnly} disabled={props.task.readOnly}
renderInput={(params) => ( renderInput={(params) => (
<TextField {...params} <TextField
sx={{ width: "auto",fontWeight: "200",fontSize: 5 }} {...params}
name="dateCreated" /> sx={{ width: "auto", fontWeight: "200", fontSize: 5 }}
name={props.name}
/>
)} )}
value={ value={props.task[props.name]}
props.newStartedDate && props.newStartedDate.id === props.task.id? props.newStartedDate.date
: props.task.dateTimeStart
}
onChange={(newValue) => { onChange={(newValue) => {
props.setNewStartedDate({ props.onChange(props.task.id, newValue, props.name);
id: props.task.id,
date: newValue,
});
}} }}
/> />
</LocalizationProvider> </LocalizationProvider>
); );
} }
planner-front/src/components/MyTasksCompoments/DateTimePicker/DateTimePickerDue.js deleted 100644 → 0
View file @ e07268be
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 MaterialUIPickersDue(props) {
console.log(props)
return (
<LocalizationProvider dateAdapter={AdapterMoment}>
<DateTimePicker
readOnly={props.readOnly}
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/components/MyTasksCompoments/TaskModal/TaskModal.js
View file @ 9a852f06
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 { Done } from "@mui/icons-material";
import Input from '@mui/material/Input'; 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
aria-labelledby="transition-modal-title" aria-labelledby="transition-modal-title"
...@@ -39,37 +13,38 @@ const TaskModal = (props) => { ...@@ -39,37 +13,38 @@ const TaskModal = (props) => {
onClose={props.handleClose} onClose={props.handleClose}
open={props.open} open={props.open}
> >
{ props?.task?.isEditMode ? {props?.task?.isEditMode ? (
<div className="modalBox"> <div className="modalBox">
<Input <Input
value={taskContent?.title} value={props.task.title}
name={"title"} name="title"
onChange={inputChangeHandler} onChange={(e) => props.onChange(e, props.task)}
style={{ width: "auto", fontSize:"12px",color: "white",fontWeight: "600" }} style={{
width: "auto",
fontSize: "12px",
color: "white",
fontWeight: "600",
}}
/> />
<Input <Input
value={taskContent?.description} value={props.task.description}
name={"description"} name="description"
onChange={inputChangeHandler} onChange={(e) => props.onChange(e, props.task)}
style={{ width: "auto", fontSize:"12px",color: "white" }} style={{ width: "auto", fontSize: "12px", color: "white" }}
/> />
<IconButton <IconButton aria-label="done" onClick={props.handleClose}>
aria-label="done" <Done />
onClick={saveModalData}
>
<Done/>
</IconButton> </IconButton>
</div>: </div>
) : (
<div className="modalBox"> <div className="modalBox">
{ props.task && props.task.title && ( {props.task && props.task.title && (
<div <div
style={{ style={{
width: "200px", width: "200px",
height: "200px", height: "200px",
color: "white", color: "white",
fontWeight: "600" fontWeight: "600",
}} }}
> >
{props.task.title} {props.task.title}
...@@ -88,9 +63,9 @@ const TaskModal = (props) => { ...@@ -88,9 +63,9 @@ const TaskModal = (props) => {
X X
</IconButton> </IconButton>
</div> </div>
} )}
</Modal> </Modal>
); );
}; };
export default TaskModal; export default TaskModal;
planner-front/src/components/UI/Select/Select.js
View file @ 9a852f06
import * as React from 'react'; import * as React from "react";
import Box from '@mui/material/Box'; import Box from "@mui/material/Box";
import InputLabel from '@mui/material/InputLabel'; import InputLabel from "@mui/material/InputLabel";
import MenuItem from '@mui/material/MenuItem'; import MenuItem from "@mui/material/MenuItem";
import FormControl from '@mui/material/FormControl'; import FormControl from "@mui/material/FormControl";
import Select from '@mui/material/Select'; import Select from "@mui/material/Select";
export default function BasicSelect(props) { export default function BasicSelect(props) {
const [taskContent, setTaskContent] = React.useState(props.task.accomplish);
const handleChange = (event) => {
setTaskContent(event.target.value);
};
React.useEffect(() => {
if (props.task !== null) {
setTaskContent({
accomplish: props.task.accomplish,
});
}
}, [props.task]);
const inputChangeHandler = (e) => {
const { name, value } = e.target;
console.log(e.target)
setTaskContent((prevState) => {
return { ...prevState, [name]: value };
});
props.onChange(e, props.task);
};
console.log(props)
return ( return (
<Box sx={{ minWidth: 60}}> <Box sx={{ minWidth: 60 }}>
<FormControl fullWidth> <FormControl fullWidth>
<InputLabel id="demo-simple-select-label"></InputLabel> <InputLabel id="demo-simple-select-label"></InputLabel>
<Select <Select
labelId="demo-simple-select-label" labelId="demo-simple-select-label"
id="demo-simple-select" id="demo-simple-select"
value={taskContent?.accomplish} value={props.task.accomplish}
label="" label=""
name={"accomplish"} name={"accomplish"}
onChange={inputChangeHandler} onChange={(e) => props.onChange(e, props.task)}
sx={{ marginTop: 2}} sx={{ marginTop: 2 }}
// className={'disabled'}
> >
<MenuItem value={props.itemOne}>{props.itemOne}</MenuItem> {props.items.map((item) => (
<MenuItem value={props.itemTwo}>{props.itemTwo}</MenuItem> <MenuItem value={item}>{item}</MenuItem>
<MenuItem value={props.itemThree}>{props.itemThree}</MenuItem> ))}
</Select> </Select>
</FormControl> </FormControl>
</Box> </Box>
......
planner-front/src/containers/MyTasks/MyTasks1.js 0 → 100644
View file @ 9a852f06
This diff is collapsed.
planner-front/src/containers/MyTasks/MyTasksHeader/MyTasksHeader.js
View file @ 9a852f06
...@@ -22,38 +22,38 @@ const headCells = [ ...@@ -22,38 +22,38 @@ const headCells = [
label: 'Приоритет', label: 'Приоритет',
}, },
{ {
id: 'date', id: 'createdAt',
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Дата создания', label: 'Дата создания',
}, },
{ {
id: 'task', id: 'title',
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Задача', label: 'Заголовок',
}, },
{ {
id: 'author', id: 'authorDisplayName',
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Автор', label: 'Автор',
}, },
{ {
id: 'startDate', id: 'dateTimeStart',
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Дата начала', label: 'Дата начала',
}, },
{ {
id: 'endDate', id: 'dateTimeDue',
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Дата завершения', label: 'Дата завершения',
}, },
{ {
id: 'done', id: 'accomplish',
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Статус', label: 'Статус',
...@@ -115,4 +115,3 @@ EnhancedTableHead.propTypes = { ...@@ -115,4 +115,3 @@ EnhancedTableHead.propTypes = {
orderBy: PropTypes.string.isRequired, orderBy: PropTypes.string.isRequired,
rowCount: PropTypes.number.isRequired, rowCount: PropTypes.number.isRequired,
}; };
planner-front/src/store/actions/tasksActions.js
View file @ 9a852f06
...@@ -47,7 +47,6 @@ export const fetchAllTasks = () => { ...@@ -47,7 +47,6 @@ export const fetchAllTasks = () => {
dispatch(fetchCalendarTasksRequest()); dispatch(fetchCalendarTasksRequest());
try { try {
const response = await axios.get("/tasks"); const response = await axios.get("/tasks");
console.log(response)
dispatch(fetchAllTasksSuccess(response.data.tasks)) dispatch(fetchAllTasksSuccess(response.data.tasks))
} catch (error) { } catch (error) {
dispatch(fetchCalendarTasksFailure(error.response.data)); dispatch(fetchCalendarTasksFailure(error.response.data));
...@@ -101,12 +100,14 @@ export const editTask = (task) => { ...@@ -101,12 +100,14 @@ export const editTask = (task) => {
dispatch(editTaskRequest()); dispatch(editTaskRequest());
const token = getState().users?.user?.token; const token = getState().users?.user?.token;
try { try {
console.log(task)
await axios.put("/tasks", task, { await axios.put("/tasks", task, {
headers: { headers: {
'Authorization': 'IwGVRaksGTWtnKlOZd7zJ' 'Authorization': 'IwGVRaksGTWtnKlOZd7zJ'
} }
}); });
dispatch(editTaskSuccess()) dispatch(editTaskSuccess())
dispatch(fetchAllTasks())
dispatch(fetchCalendarTasks()) dispatch(fetchCalendarTasks())
} catch (error) { } catch (error) {
dispatch(editTaskFailure(error.response.data)); dispatch(editTaskFailure(error.response.data));
......
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