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";
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" }}>
<LocalizationProvider
dateAdapter={AdapterMoment}
sx={{ width: "auto", fontSize: 5, fontWeight: "200" }}
>
<DateTimePicker
readOnly={props.readOnly}
disabled={props.task.readOnly}
renderInput={(params) => (
<TextField {...params}
sx={{ width: "auto",fontWeight: "200",fontSize: 5 }}
name="dateCreated" />
<TextField
{...params}
sx={{ width: "auto", fontWeight: "200", fontSize: 5 }}
name={props.name}
/>
)}
value={
props.newStartedDate && props.newStartedDate.id === props.task.id? props.newStartedDate.date
: props.task.dateTimeStart
}
value={props.task[props.name]}
onChange={(newValue) => {
props.setNewStartedDate({
id: props.task.id,
date: newValue,
});
props.onChange(props.task.id, newValue, props.name);
}}
/>
</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 './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"
......@@ -39,37 +13,38 @@ const TaskModal = (props) => {
onClose={props.handleClose}
open={props.open}
>
{ props?.task?.isEditMode ?
{props?.task?.isEditMode ? (
<div className="modalBox">
<Input
value={taskContent?.title}
name={"title"}
onChange={inputChangeHandler}
style={{ width: "auto", fontSize:"12px",color: "white",fontWeight: "600" }}
value={props.task.title}
name="title"
onChange={(e) => props.onChange(e, props.task)}
style={{
width: "auto",
fontSize: "12px",
color: "white",
fontWeight: "600",
}}
/>
<Input
value={taskContent?.description}
name={"description"}
onChange={inputChangeHandler}
style={{ width: "auto", fontSize:"12px",color: "white" }}
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={saveModalData}
>
<Done/>
<IconButton aria-label="done" onClick={props.handleClose}>
<Done />
</IconButton>
</div>:
</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;
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>
......
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,7 +47,6 @@ export const fetchAllTasks = () => {
dispatch(fetchCalendarTasksRequest());
try {
const response = await axios.get("/tasks");
console.log(response)
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));
......
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