Skip to content

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

Merge branch 'task-28-enhance/connect-backend-optimize-code' into 'development' 

Task 28 enhance/connect backend optimize code

See merge request !12
parents 0e93993f 896a638c
Show whitespace changes
Inline Side-by-side
Showing with 276 additions and 179 deletions
planner-api/src/models/Task.ts
View file @ d10cdbd9
......@@ -36,9 +36,9 @@ import {
description!: string
@CreateDateColumn({ name: 'created_at', type: Date, default: new Date() })
createdAt!: Date;
@Column({ name: 'dateTimeStart', type: Date,nullable: true })
@Column({ name: 'dateTimeStart', type: 'varchar',nullable: true })
dateTimeStart!: Date | null;
@Column({ name: 'dateTimeDue', type: Date,nullable: true })
@Column({ name: 'dateTimeDue', type: 'varchar',nullable: true })
dateTimeDue!: Date | null;
@Column({
type: "enum",
......
planner-front/src/components/MonthCalendarBody/CalendarRow/CalendarRow.js 0 → 100644
View file @ d10cdbd9
import { Grid } from "@mui/material";
const CalendarRow = ({children}) => {
return <>
<Grid
container
align='center'
sx={{borderBottom: '1px solid black', borderRight: '1px solid black', borderLeft: '1px solid black'}}
>
{children}
</Grid>
</>
};
export default CalendarRow;
planner-front/src/components/MonthCalendarBody/CalendarSmallCell/CalendarSmallCell.js 0 → 100644
View file @ d10cdbd9
import { Grid } from "@mui/material";
const CalendarSmallCell = ({children, xs}) => {
return <>
<Grid align='center' item xs={xs} sx={{borderRight: '1px solid black'}}>
{children}
</Grid>
</>
};
export default CalendarSmallCell;
\ No newline at end of file
planner-front/src/components/MonthCalendarBody/CalendarStandartCell.js/CalendarStandartCell.js 0 → 100644
View file @ d10cdbd9
import { Grid } from "@mui/material";
const CalendarStandartCell = ({children, xs, onClick}) => {
return <>
<Grid
item xs={xs}
sx={{borderRight: '1px solid black'}}
onClick={onClick}>
{children}
</Grid>
</>
};
export default CalendarStandartCell;
\ No newline at end of file
planner-front/src/components/MonthCalendarBody/CalendarTask/CalendarTask.js 0 → 100644
View file @ d10cdbd9
import { Grid, TextField } from "@mui/material";
import { useEffect, useState } from "react";
const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange}) => {
const getTaskInDayCell = (tasks, day, hours) => {
const task = tasks.find(task=> {
if (year === task.infoForCell.startYear) {
if (month + 1 === task.infoForCell.startMonth) {
if (day.dayNumber === task.infoForCell.startDay) {
if ((task.infoForCell.endHour <= parseInt(hours.split(':')[0]) || task.infoForCell.startHour <= parseInt(hours.split(':')[0])) && (task.infoForCell.endHour > parseInt(hours.split(':')[0]))) {
return task
}
}
}
}
})
return task
}
let task = getTaskInDayCell(tasks, day, hours)
return (<>
{task ?
<Grid sx={{backgroundColor: 'lightgreen'}}>
<TextField
id={task.title}
variant="standard"
value={task.title}
name='title'
onClick={(e)=>{e.stopPropagation(); setCurrentTask(task)}}
onChange={onChange}>
</TextField>
</Grid>
: null }
</>)
};
export default CalendarTask;
\ No newline at end of file
planner-front/src/components/MonthCalendarBody/MonthCalendarBody.js
View file @ d10cdbd9
import { Grid, TextField } from "@mui/material";
import { useEffect, useState } from "react";
import CalendarRow from "./CalendarRow/CalendarRow";
import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
import CalendarTask from "./CalendarTask/CalendarTask";
const exampleTasks=[
{
user:"first",
title:"задача1",
description:"описание задачи11111",
priority:"A",
author:"Ivan",
executor:"Arman",
dateTimeStart:"26.12.2022 20:00:00",
dateTimeDue:"27.10.2022 14:20:00",
id:1,
dateCreated:"26.10.2022"
}, {
user:"first",
title:"задача2",
description:"описание задачи11111",
priority:"A",
author:"Ivan",
executor:"Arman",
dateTimeStart:"1.12.2022 9:00:00",
dateTimeDue:"27.10.2022 15:20:00",
id:1,
dateCreated:"26.10.2022"
},{
user:"first",
title:"first",
description:"описание задачи11111",
priority:"A",
author:"Ivan",
executor:"Arman",
dateTimeStart:"5.11.2022 16:00:00",
dateTimeDue:"5.11.2022 17:00:00",
id:1,
dateCreated:"26.10.2022"
},{
user:"first",
title:"second",
description:"описание задачи11111",
priority:"A",
author:"Ivan",
executor:"Arman",
dateTimeStart:"5.11.2022 16:00:00",
dateTimeDue:"5.11.2022 17:00:00",
id:1,
dateCreated:"26.10.2022"
}
]
function MonthCalendarBody({month, year}) {
function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChangeCellTaskTitle, setCurrentTask}) {
const [hoursInDay, setHoursInDay] = useState(['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '6:00'])
const [daysInMonth, setDaysInMonth] = useState([])
const [tasksForCell, setTasksForCell] = useState([])
const [cellSizes, setCellSizes] = useState({})
useEffect(()=>{
setNewMonthDays(month, year)
setNewTasksWithInfoForCell(exampleTasks, month, year)
}, [month, year])
const cells = hoursInDay.length
const xs = 11/cells
setCellSizes(()=>{
return {smallCell: 0.5, standarCell: xs}
})
}, [])
useEffect(()=>{
setNewMonthDays()
}, [month])
const getDaysInMonth = () => {
return new Date(year, month + 1, 0).getDate();
......@@ -69,147 +30,60 @@ function MonthCalendarBody({month, year}) {
return ["ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ"][day];
}
const getDayOfWeekNumber = (month, year, day) => {
const getDayOfWeekNumber = (day) => {
return new Date(year, month, day).getDay()
}
const setNewTasksWithInfoForCell = (tasks, month, year) => {
const newArr = tasks.map((task)=>{
const dateStart = task.dateTimeStart.split(' ')[0]
const timeStart = task.dateTimeStart.split(' ')[1]
const timeEnd = task.dateTimeDue.split(' ')[1]
const dayStart = parseInt(dateStart.split('.')[0])
const dayOfWeekStartNumber = getDayOfWeekNumber(month, year, dayStart)
const dayOfWeekStartString = getDayOfWeekString(dayOfWeekStartNumber)
const monthStartNumber = parseInt(dateStart.split('.')[1])
const yearStartNumber = parseInt(dateStart.split('.')[2])
const timeStartHour = parseInt(timeStart.split(':')[0])
const timeEndHour = parseInt(timeEnd.split(':')[0])
return {...task,
startDay: dayStart,
startDayOfWeek: dayOfWeekStartString,
startHour: timeStartHour,
startMonth: monthStartNumber,
startYear: yearStartNumber,
endHour: timeEndHour,
}
})
setTasksForCell(newArr)
}
const createTaskInCellHandler = (month, year, dayOfWeek, dayNumber, dayHour) => {
const newTasks = [...tasksForCell]
const newTask = {
id: Date.now(),
user:"first",
title:"Новая",
description:"описание задачи11111",
priority:"A",
author:"Ivan",
executor:"Arman",
dateTimeStart:`${dayNumber}.${month+1}.${year} ${parseInt(dayHour.split(':')[0])}:00:00`,
dateTimeDue:`${dayNumber}.${month+1}.${year} ${parseInt(dayHour.split(':')[0]) + 1}:00:00`,
}
newTasks.push(newTask)
exampleTasks.push(newTask)
setNewTasksWithInfoForCell(newTasks, month, year)
}
const getTaskInDayCell = (tasks, day, hours, month, year) => {
const task = tasks.find(task=> {
if (year === task.startYear) {
if (month + 1 === task.startMonth) {
if (day.dayNumber === task.startDay && task.startDayOfWeek === day.dayOfWeek ) {
if ((task.endHour <= parseInt(hours.split(':')[0]) || task.startHour <= parseInt(hours.split(':')[0])) && (task.endHour >= parseInt(hours.split(':')[0]))) {
return task
}
}
}
}
})
return task
}
const setNewMonthDays = (month, year) => {
const setNewMonthDays = () => {
const newDaysInMonth = []
for (let i = 1; i <= getDaysInMonth(month, year); i++) {
const dayOfWeekNumber = getDayOfWeekNumber(month, year, i)
for (let i = 1; i <= getDaysInMonth(); i++) {
const dayOfWeekNumber = getDayOfWeekNumber(i)
newDaysInMonth.push({dayNumber: i, dayOfWeek: getDayOfWeekString(dayOfWeekNumber)})
}
setDaysInMonth(newDaysInMonth)
}
const onChangeCellTaskTitle = (e, task) => {
const value = e.target.value;
const name = e.target.name;
const { id } = task;
const newTasks = tasksForCell.map(task => {
if (task.id === id) {
return { ...task, [name]: value };
}
return task;
});
setTasksForCell(newTasks);
exampleTasks = [...newTasks]
setDaysInMonth(prevState=>newDaysInMonth)
}
return (
<>
<Grid
container
align='center'
sx={{borderBottom: '1px solid black', borderRight: '1px solid black', borderLeft: '1px solid black'}}
<CalendarRow
>
<Grid align='center' item xs={0.5} sx={{borderRight: '1px solid black'}}>
{' '}
</Grid>
<Grid align='center' item xs={0.5} sx={{borderRight: '1px solid black'}}>
{' '}
</Grid>
<CalendarSmallCell xs={cellSizes.smallCell} />
<CalendarSmallCell xs={cellSizes.smallCell}/>
{hoursInDay.map((hours, i)=>{
return (
<Grid key={i} item xs={1.2222} sx={{borderRight: '1px solid black'}}>
<CalendarStandartCell key={i} xs={cellSizes.standarCell}>
{hours}
</Grid>
</CalendarStandartCell>
)
})}
</Grid>
</CalendarRow>
{daysInMonth.map((day, i)=>{
return (
<Grid
<CalendarRow
key={i}
container
align='center'
sx={{borderBottom: '1px solid black', borderRight: '1px solid black', borderLeft: '1px solid black'}}
>
<Grid align='center' item xs={0.5} sx={{borderRight: '1px solid black'}}>
{day.dayNumber}
</Grid>
<Grid align='center' item xs={0.5} sx={{borderRight: '1px solid black'}}>
{day.dayOfWeek}
</Grid>
<CalendarSmallCell xs={cellSizes.smallCell}>{day.dayNumber}</CalendarSmallCell>
<CalendarSmallCell xs={cellSizes.smallCell}>{day.dayOfWeek}</CalendarSmallCell>
{hoursInDay.map((hours, i)=>{
const task = getTaskInDayCell(tasksForCell, day, hours, month, year)
return (
<Grid
<CalendarStandartCell
key={i}
item xs={1.2222}
sx={{borderRight: '1px solid black'}}
onClick={()=>{createTaskInCellHandler(month, year, day.dayOfWeek, day.dayNumber, hours)}}>
{ task ?
<Grid key={i} sx={{backgroundColor: 'lightgreen'}}>
<TextField
id={task.title}
variant="standard"
value={task.title}
name='title'
onChange={(e)=>{onChangeCellTaskTitle(e, task)}}></TextField>
</Grid> : null}
</Grid>
item xs={cellSizes.standarCell}
onClick={()=>{createTaskInCellHandler(day.dayNumber, hours)}}
>
<CalendarTask
setCurrentTask={setCurrentTask}
onChange={(e)=>{onChangeCellTaskTitle(e)}}
year={year}
month={month}
tasks={tasks}
day={day}
hours={hours}
/>
</CalendarStandartCell>
)
})}
</Grid>
</CalendarRow>
)
})}
</>
......
planner-front/src/containers/MonthCalendar/MonthCalendar.js
View file @ d10cdbd9
import { Container } from '@mui/material';
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import MonthCalendarBody from '../../components/MonthCalendarBody/MonthCalendarBody';
import MonthCalendarHeader from '../../components/MonthCalendarHeader/MonthCalendarHeader';
import { addTask, fetchTasks} from '../../store/actions/tasksActions';
function MonthCalendar() {
const dispatch = useDispatch();
const { tasks } = useSelector(state => state.tasks);
const [month, setMonth] = useState('')
const [year, setYear] = useState('')
const [worker, setWorker] = useState('');
const [calendarType, setCalendarType] = useState('Месяц');
const [currentTask, setCurrentTask] = useState({})
useEffect(()=>{
setMonth(new Date().getMonth())
setYear(new Date().getFullYear())
},[])
dispatch(fetchTasks())
}, [dispatch])
const onChangeWorkerHandler = (event) => {
setWorker(event.target.value);
};
......@@ -46,6 +53,29 @@ function MonthCalendar() {
})
}
function dateToISOButLocal(date) {
return date.toLocaleString('sv').replace(' ', 'T');
}
const createTaskInCellHandler = (dayNumber, dayHour) => {
const hour = parseInt(dayHour.split(':')[0])
const newTask = {
title:"Задача",
description:"описание",
dateTimeStart: dateToISOButLocal(new Date(year, month, dayNumber, hour)),
dateTimeDue: dateToISOButLocal(new Date(year, month, dayNumber, hour + 2)),
}
dispatch(addTask(newTask))
setCurrentTask((newTask))
}
const onChangeCellTaskTitle = (e) => {
e.stopPropagation()
const value = e.target.value;
const name = e.target.name;
setCurrentTask({ ...currentTask, [name]: value })
}
return (
<>
<Container>
......@@ -63,6 +93,10 @@ function MonthCalendar() {
<MonthCalendarBody
month={month}
year={year}
tasks={tasks}
createTaskInCellHandler={createTaskInCellHandler}
onChangeCellTaskTitle={onChangeCellTaskTitle}
setCurrentTask={setCurrentTask}
/>
</Container>
</>
......
planner-front/src/index.js
View file @ d10cdbd9
......@@ -5,6 +5,7 @@ import App from './App';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import usersReducer from './store/reducers/usersReducer';
import tasksReducer from './store/reducers/tasksReducer';
import axios from 'axios';
const localStorageMiddleware = ({getState}) => (next) => (action) => {
......@@ -31,6 +32,7 @@ axios.interceptors.request.use(config=>{
const store = configureStore({
reducer: {
users: usersReducer,
tasks: tasksReducer
},
preloadedState: loadFromLocalStorage(),
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(localStorageMiddleware)
......
planner-front/src/store/actionTypes/tasksTypes.js 0 → 100644
View file @ d10cdbd9
export const FETCH_TASKS_REQUEST = "FETCH_TASKS_REQUEST";
export const FETCH_TASKS_SUCCESS = "FETCH_TASKS_SUCCESS";
export const FETCH_TASKS_FAILURE = "FETCH_TASKS_FAILURE";
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";
\ No newline at end of file
planner-front/src/store/actions/tasksActions.js 0 → 100644
View file @ d10cdbd9
import { ADD_NEW_TASK_FAILURE, ADD_NEW_TASK_REQUEST, ADD_NEW_TASK_SUCCESS, FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
import axios from '../../axiosPlanner'
const fetchTasksRequest = () => {
return {type: FETCH_TASKS_REQUEST}
};
const fetchTasksSuccess = (tasks) => {
return {type: FETCH_TASKS_SUCCESS, tasks}
};
const fetchTasksFailure = (error) => {
return {type: FETCH_TASKS_FAILURE, error}
};
export const fetchTasks = () => {
return async (dispatch) => {
dispatch(fetchTasksRequest());
try {
const response = await axios.get("/tasks");
dispatch(fetchTasksSuccess(response.data.tasks))
} catch (error) {
dispatch(fetchTasksFailure(error.response.data));
}
}
}
const addTaskRequest = () => {
return {type: ADD_NEW_TASK_REQUEST}
};
const addTaskSuccess = () => {
return {type: ADD_NEW_TASK_SUCCESS}
};
const addTaskFailure = (error) => {
return {type: ADD_NEW_TASK_FAILURE, error}
};
export const addTask = (task) => {
return async (dispatch, getState) => {
dispatch(addTaskRequest());
const token = getState().users?.user?.token;
try {
await axios.post("/tasks", task, {
headers: {
'Authorization': 'aBhHYW8kXUUzjXlxOwGmg'
}
});
dispatch(addTaskSuccess())
dispatch(fetchTasks())
} catch (error) {
dispatch(addTaskFailure(error.response.data));
}
}
}
\ No newline at end of file
planner-front/src/store/reducers/tasksReducer.js 0 → 100644
View file @ d10cdbd9
import { FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
const initialState = {
tasks: [],
loading: false,
error: null
};
const tasksReduсer = (state = initialState, action) => {
switch(action.type) {
case FETCH_TASKS_REQUEST:
return {...state, loading: true};
case FETCH_TASKS_SUCCESS:
const newArr = []
action.tasks.forEach((task)=>{
if (task.dateTimeStart && task.dateTimeDue) {
const dateStart = task.dateTimeStart.split('T')[0]
const timeStart = task.dateTimeStart.split('T')[1]
const timeEnd = task.dateTimeDue.split('T')[1]
const dayStart = parseInt(dateStart.split('-')[2])
const monthStartNumber = parseInt(dateStart.split('-')[1])
const yearStartNumber = parseInt(dateStart.split('-')[0])
const timeStartHour = parseInt(timeStart.split(':')[0])
const timeEndHour = parseInt(timeEnd.split(':')[0])
newArr.push({...task, infoForCell: {
startDay: dayStart,
startHour: timeStartHour,
startMonth: monthStartNumber,
startYear: yearStartNumber,
endHour: timeEndHour,
}
} )
}
})
return {...state, loading: false, tasks: newArr};
case FETCH_TASKS_FAILURE:
return {...state, loading: false, error: action.error};
default:
return state;
}
};
export default tasksReduсer;
\ No newline at end of file
planner-front/src/store/reducers/usersReducer.js
View file @ d10cdbd9
......@@ -5,14 +5,14 @@ const initialState = {
name: 'Ivan',
surname: 'Petrov',
email: 'test@gmail.com',
role: 'user'
role: 'superuser'
},
registerError: null,
loginError: null,
loading: false
};
const usersReduser = (state = initialState, action) => {
const usersReducer = (state = initialState, action) => {
switch(action.type) {
case REGISTER_USER_REQUEST:
return {...state, loading: true};
......@@ -31,4 +31,4 @@ const usersReduser = (state = initialState, action) => {
}
};
export default usersReduser;
export default usersReducer;
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