Skip to content

P
planner-team-one
Commit 354ab632 authored by Евгений Положенцев's avatar Евгений Положенцев
Browse files
Options

Merge branch 'task-27-fixing_bags_page_my_tasks' into 'development' 

Task 27 fixing bags page my tasks

See merge request !23
parents fa05180f e2fdc5e2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 440 additions and 450 deletions
planner-front/src/components/MyTasksCompoments/CustomTableCell.js
View file @ 354ab632
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';
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: "10px"};
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)}
if (task) {
return (
<>
<TableCell
onClick={(e) => (onModalOpen ? onModalOpen(e, task) : null)}
align="left"
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>
>
{task.isEditMode && onChange ? (
<Input
value={value}
name={name}
onChange={(e) => onChange(e, task)}
style={styles}
/>
) : (
<span>{value}</span>
)}
</TableCell>
) : (
<TableCell align="left" style={styles}>
{task[name]}
</TableCell>
)}
</>
);
</>
);
}
};
export default CustomTableCell;
\ No newline at end of file
export default CustomTableCell;
planner-front/src/components/MyTasksCompoments/DateTimePicker/DateTimePicker.js 0 → 100644
View file @ 354ab632
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
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>
);
}
planner-front/src/components/MyTasksCompoments/TaskModal/TaskModal.js
View file @ 354ab632
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/DateTimePicker/DateTimePicker.js deleted 100644 → 0
View file @ fa05180f
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/components/UI/Select/Select.js 0 → 100644
View file @ 354ab632
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) {
return (
<Box sx={{ minWidth: 60 }}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label"></InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={props.task.accomplish}
label=""
name={"accomplish"}
onChange={(e) => props.onChange(e, props.task)}
sx={{ marginTop: 2 }}
>
{props.items.map((item) => (
<MenuItem value={item}>{item}</MenuItem>
))}
</Select>
</FormControl>
</Box>
);
}
planner-front/src/containers/MyTasks/MyTasksHeader/MyTasksHeader.js
View file @ 354ab632
......@@ -22,41 +22,41 @@ const headCells = [
label: 'Приоритет',
},
{
id: 'date',
id: 'createdAt',
numeric: true,
disablePadding: false,
label: 'Дата',
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: 'Выполнено',
label: 'Статус',
},
{
id: 'change',
......@@ -115,4 +115,3 @@ EnhancedTableHead.propTypes = {
orderBy: PropTypes.string.isRequired,
rowCount: PropTypes.number.isRequired,
};
planner-front/src/store/actionTypes/tasksTypes.js
View file @ 354ab632
......@@ -2,6 +2,8 @@ export const FETCH_CALENDAR_TASKS_REQUEST = "FETCH_CALENDAR_TASKS_REQUEST";
export const FETCH_CALENDAR_TASKS_SUCCESS = "FETCH_CALENDAR_TASKS_SUCCESS";
export const FETCH_CALENDAR_TASKS_FAILURE = "FETCH_CALENDAR_TASKS_FAILURE";
export const FETCH_ALL_TASKS_SUCCESS = "FETCH_ALL_TASKS_SUCCESS";
export const ADD_NEW_TASK_REQUEST = "ADD_NEW_TASK_REQUEST";
export const ADD_NEW_TASK_SUCCESS = "ADD_NEW_TASK_SUCCESS";
export const ADD_NEW_TASK_FAILURE = "ADD_NEW_TASK_FAILURE";
......
planner-front/src/store/actions/tasksActions.js
View file @ 354ab632
......@@ -10,7 +10,8 @@ import {
EDIT_TASK_SUCCESS,
FETCH_CALENDAR_TASKS_FAILURE,
FETCH_CALENDAR_TASKS_REQUEST,
FETCH_CALENDAR_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
FETCH_CALENDAR_TASKS_SUCCESS,
FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
import axios from '../../axiosPlanner'
const fetchCalendarTasksRequest = () => {
......@@ -21,6 +22,11 @@ const fetchCalendarTasksSuccess = (tasks) => {
return {type: FETCH_CALENDAR_TASKS_SUCCESS, tasks}
};
const fetchAllTasksSuccess = (tasks) => {
return {type: FETCH_ALL_TASKS_SUCCESS, tasks}
};
const fetchCalendarTasksFailure = (error) => {
return {type: FETCH_CALENDAR_TASKS_FAILURE, error}
};
......@@ -35,8 +41,18 @@ export const fetchCalendarTasks = () => {
dispatch(fetchCalendarTasksFailure(error.response.data));
}
}
}
};
export const fetchAllTasks = () => {
return async (dispatch) => {
dispatch(fetchCalendarTasksRequest());
try {
const response = await axios.get("/tasks");
dispatch(fetchAllTasksSuccess(response.data.tasks))
} catch (error) {
dispatch(fetchCalendarTasksFailure(error.response.data));
}
}
};
const addTaskRequest = () => {
return {type: ADD_NEW_TASK_REQUEST}
};
......@@ -84,12 +100,15 @@ export const editTask = (task) => {
dispatch(editTaskRequest());
const token = getState().users?.user?.token;
try {
await axios.put("/tasks", task, {
console.log(task)
const r=await axios.put("/tasks", task, {
headers: {
'Authorization': 'IwGVRaksGTWtnKlOZd7zJ'
}
});
console.log(r)
dispatch(editTaskSuccess())
dispatch(fetchAllTasks())
dispatch(fetchCalendarTasks())
} catch (error) {
dispatch(editTaskFailure(error.response.data));
......@@ -100,7 +119,7 @@ export const editTask = (task) => {
const deleteTaskRequest = () => {
return {type: DELETE_TASK_REQUEST}
};
const deleteTaskSuccess = () => {
return {type: DELETE_TASK_SUCCESS}
};
......@@ -121,6 +140,7 @@ export const deleteTask = (taskId) => {
});
dispatch(deleteTaskSuccess())
dispatch(fetchCalendarTasks())
dispatch(fetchAllTasks())
} catch (error) {
dispatch(deleteTaskFailure(error.response.data));
}
......
planner-front/src/store/reducers/tasksReducer.js
View file @ 354ab632
......@@ -10,7 +10,8 @@ import {
FETCH_CALENDAR_TASKS_SUCCESS,
DELETE_TASK_SUCCESS,
DELETE_TASK_REQUEST,
DELETE_TASK_FAILURE} from "../actionTypes/tasksTypes";
DELETE_TASK_FAILURE,
FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
const initialState = {
calendarTasks: [],
......@@ -24,7 +25,7 @@ const tasksReduсer = (state = initialState, action) => {
return {...state, loading: true};
case FETCH_CALENDAR_TASKS_SUCCESS:
const newArr = []
action.tasks.forEach((task)=>{
action.tasks.forEach((task)=>{
if (task.dateTimeStart && task.dateTimeDue) {
if (new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() < (10 * 3600000)) {
const dateStart = task.dateTimeStart.split('T')[0]
......@@ -51,6 +52,8 @@ const tasksReduсer = (state = initialState, action) => {
}
})
return {...state, loading: false, calendarTasks: newArr};
case FETCH_ALL_TASKS_SUCCESS:
return {...state, loading: false, tasks: action.tasks};
case FETCH_CALENDAR_TASKS_FAILURE:
return {...state, loading: false, error: action.error};
case ADD_NEW_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