Skip to content

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

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

переделала дейтпикер, исправила функцию изменения задачи, оптимизировала CustomTableSell, сорректировала селект для статуса
parent e07268be
Expand all Hide 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";
import {Container} from "@mui/material";
import {useSelector} from "react-redux";
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 Register from './containers/Register/Register';
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 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 * as 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";
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
export default function MaterialUIPickers(props) {
return (
<LocalizationProvider dateAdapter={AdapterMoment} sx={{ width: "auto", fontSize:5,fontWeight: "200" }}>
<DateTimePicker
readOnly={props.readOnly}
renderInput={(params) => (
<TextField {...params}
sx={{ width: "auto",fontWeight: "200",fontSize: 5 }}
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>
<LocalizationProvider
dateAdapter={AdapterMoment}
sx={{ width: "auto", fontSize: 5, fontWeight: "200" }}
>
<DateTimePicker
disabled={props.task.readOnly}
renderInput={(params) => (
<TextField
{...params}
sx={{ width: "auto", fontWeight: "200", fontSize: 5 }}
name={props.name}
/>
)}
value={props.task[props.name]}
onChange={(newValue) => {
props.onChange(props.task.id, newValue, props.name);
}}
/>
</LocalizationProvider>
);
}
\ No newline at end of file
}
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 './TaskModal.css';
import { Done } from '@mui/icons-material';
import Input from '@mui/material/Input';
import { useState, useEffect } from "react";
import { Modal, IconButton } from "@mui/material";
import "./TaskModal.css";
import { Done } from "@mui/icons-material";
import Input from "@mui/material/Input";
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"
aria-describedby="transition-modal-description"
className={"modal"}
closeAfterTransition
onClose={props.handleClose}
open={props.open}
>
{ props?.task?.isEditMode ?
return (
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={"modal"}
closeAfterTransition
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>:
value={props.task.title}
name="title"
onChange={(e) => props.onChange(e, props.task)}
style={{
width: "auto",
fontSize: "12px",
color: "white",
fontWeight: "600",
}}
/>
<Input
value={props.task.description}
name="description"
onChange={(e) => props.onChange(e, props.task)}
style={{ width: "auto", fontSize: "12px", color: "white" }}
/>
<IconButton aria-label="done" onClick={props.handleClose}>
<Done />
</IconButton>
</div>
) : (
<div className="modalBox">
{ props.task && props.task.title && (
{props.task && props.task.title && (
<div
style={{
width: "200px",
height: "200px",
color: "white",
fontWeight: "600"
fontWeight: "600",
}}
>
{props.task.title}
......@@ -88,9 +63,9 @@ const TaskModal = (props) => {
X
</IconButton>
</div>
}
</Modal>
);
};
export default TaskModal;
\ No newline at end of file
)}
</Modal>
);
};
export default TaskModal;
planner-front/src/components/UI/Select/Select.js
View file @ 9a852f06
import * as React from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
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 (
<Box sx={{ minWidth: 60}}>
<Box sx={{ minWidth: 60 }}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label"></InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={taskContent?.accomplish}
value={props.task.accomplish}
label=""
name={"accomplish"}
onChange={inputChangeHandler}
sx={{ marginTop: 2}}
// className={'disabled'}
onChange={(e) => props.onChange(e, props.task)}
sx={{ marginTop: 2 }}
>
<MenuItem value={props.itemOne}>{props.itemOne}</MenuItem>
<MenuItem value={props.itemTwo}>{props.itemTwo}</MenuItem>
<MenuItem value={props.itemThree}>{props.itemThree}</MenuItem>
{props.items.map((item) => (
<MenuItem value={item}>{item}</MenuItem>
))}
</Select>
</FormControl>
</Box>
);
}
\ No newline at end of file
}
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 = [
label: 'Приоритет',
},
{
id: 'date',
id: 'createdAt',
numeric: true,
disablePadding: false,
label: 'Дата создания',
},
{
id: 'task',
id: 'title',
numeric: true,
disablePadding: false,
label: 'Задача',
label: 'Заголовок',
},
{
id: 'author',
id: 'authorDisplayName',
numeric: true,
disablePadding: false,
label: 'Автор',
},
{
id: 'startDate',
id: 'dateTimeStart',
numeric: true,
disablePadding: false,
label: 'Дата начала',
},
{
id: 'endDate',
id: 'dateTimeDue',
numeric: true,
disablePadding: false,
label: 'Дата завершения',
},
{
id: 'done',
id: 'accomplish',
numeric: true,
disablePadding: false,
label: 'Статус',
......@@ -115,4 +115,3 @@ EnhancedTableHead.propTypes = {
orderBy: PropTypes.string.isRequired,
rowCount: PropTypes.number.isRequired,
};
planner-front/src/store/actions/tasksActions.js
View file @ 9a852f06
......@@ -47,8 +47,7 @@ export const fetchAllTasks = () => {
dispatch(fetchCalendarTasksRequest());
try {
const response = await axios.get("/tasks");
console.log(response)
dispatch(fetchAllTasksSuccess(response.data.tasks))
dispatch(fetchAllTasksSuccess(response.data.tasks))
} catch (error) {
dispatch(fetchCalendarTasksFailure(error.response.data));
}
......@@ -101,12 +100,14 @@ export const editTask = (task) => {
dispatch(editTaskRequest());
const token = getState().users?.user?.token;
try {
console.log(task)
await axios.put("/tasks", task, {
headers: {
'Authorization': 'IwGVRaksGTWtnKlOZd7zJ'
}
});
dispatch(editTaskSuccess())
dispatch(fetchAllTasks())
dispatch(fetchCalendarTasks())
} catch (error) {
dispatch(editTaskFailure(error.response.data));
......@@ -117,7 +118,7 @@ export const editTask = (task) => {
const deleteTaskRequest = () => {
return {type: DELETE_TASK_REQUEST}
};
const deleteTaskSuccess = () => {
return {type: DELETE_TASK_SUCCESS}
};
......
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