Skip to content

P
planner-team-one
Commit da037e57 authored by Ermolaev Timur's avatar Ermolaev Timur
Browse files
Options

Merge branch 'task-38-enhance/enhance_tasks' into 'development' 

Task 38 enhance/enhance tasks

See merge request !31
parents 638a5a3e 72e00819
Hide whitespace changes
Inline Side-by-side
Showing with 292 additions and 99 deletions
planner-front/src/App.js
View file @ da037e57
......@@ -18,6 +18,7 @@ const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => {
const App = () => {
const user = useSelector(state => state.users?.user);
console.log(user)
return (
<BrowserRouter>
<Routes>
......
planner-front/src/components/MonthCalendarBody/CalendarRow/CalendarRow.js
View file @ da037e57
import { Grid } from "@mui/material";
import { memo } from "react";
const CalendarRow = ({children}) => {
return <>
......@@ -13,6 +12,6 @@ const CalendarRow = ({children}) => {
</>
};
export default memo(CalendarRow);
export default CalendarRow;
planner-front/src/components/MonthCalendarBody/CalendarRowDay/CalendarRowDay.js 0 → 100644
View file @ da037e57
import { Grid } from "@mui/material";
import { memo, useMemo } from "react";
import CalendarStandartCell from "../CalendarStandartCell.js/CalendarStandartCell";
import CalendarTask from "../CalendarTask/CalendarTask";
const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat}) => {
const hours = useMemo(()=>{
return hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))},
[hoursInDay])
const availableTasks = useMemo(() => {
const tasksInDay = tasks.filter((task)=> {
if (year === task.infoForCell.startYear) {
if (month + 1 === task.infoForCell.startMonth) {
if (day.dayNumber === task.infoForCell.startDay) {
return task
} else {return false}
} else {return false}
} else {return false}
})
return tasksInDay
}, [tasks, month, year, day.dayNumber])
const sortedTasks = useMemo(() => {
if (availableTasks.length) {
const newSortedArr = [...availableTasks].sort(function(a,b){
const durattionFirstDate = new Date(a.dateTimeDue).getTime() - new Date(a.dateTimeStart).getTime()
const durattionSecondDate = new Date(b.dateTimeDue).getTime() - new Date(b.dateTimeStart).getTime()
return durattionSecondDate - durattionFirstDate;
})
return newSortedArr
}
}, [availableTasks])
const linesInDay = useMemo(() => {
let hourDiff
let hourDiffEnd
const lines = []
if (hourFormat) {
hourDiff = 1
hourDiffEnd = 0
} else {
hourDiff = 2
hourDiffEnd = 1
}
if (availableTasks.length) {
lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
for (let k = 0; k < sortedTasks.length; k++) {
let skipLine = false
for (let j = 0; j < lines.length; j++) {
const line = lines[j]
const task = sortedTasks[k]
if (skipLine) {
skipLine = false
break;
}
for (let i = 0; i < line.length; i++) {
const hour = hours[i]
let havePlace = true
if (((task.infoForCell.endHour <= hour || task.infoForCell.startHour <= hour) && (task.infoForCell.endHour > hour))
|| (!hourFormat && task.infoForCell.startHour >= hour && task.infoForCell.endHour < hour + hourDiff)
|| (!hourFormat && task.infoForCell.startHour === hour + hourDiffEnd && task.infoForCell.endHour > hour)
|| (task.infoForCell.endMinute <= 59 && task.infoForCell.endHour === hour)) {
if (!isNaN(line[i])) {
for (let a = 0; a < hours.length; a++) {
const hour = hours[a]
if ((task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd) || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
if (isNaN(line[a])) {
havePlace = false
break;
}
}
}
if (!havePlace) {
havePlace = true
break;
}
line[i] += `-${k}`
if ((task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd) || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
skipLine = true
break;
}
} else {
if (j + 1 === lines.length) {
lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
}
break;
}
}
}
}
}
}
return lines
}, [availableTasks.length, hourFormat, hours, hoursInDay, sortedTasks])
return <>
<Grid
container
item
xs={10.8}
align='center'
>
{hoursInDay.map((hour, i)=>{
const linesForCell = []
if (linesInDay?.length) {
for (let j = 0; j < linesInDay.length; j++) {
linesForCell.push(linesInDay[j][i])
}
}
return (
<CalendarStandartCell
key={i}
item xs={xs}
createTaskInCellHandler={createTaskInCellHandler}
hours={hour}
dayNumber={day.dayNumber}
currentTask={currentTask}
handleOpen={handleOpen}
modal={modal}
>
<CalendarTask
setCurrentTask={setCurrentTask}
hours={hour}
modal={modal}
hourFormat={hourFormat}
handleOpen={handleOpen}
currentTask={currentTask}
linesForCell={linesForCell.length ? linesForCell : null}
sortedTasks={sortedTasks}
/>
</CalendarStandartCell>
)
})}
</Grid>
</>
};
export default memo(CalendarRowDay);
\ No newline at end of file
planner-front/src/components/MonthCalendarBody/CalendarStandartCell.js/CalendarStandartCell.js
View file @ da037e57
import { Grid, TextField, Typography } from "@mui/material";
import { Grid} from "@mui/material";
import { memo, useEffect, useState } from "react";
const CalendarStandartCell = ({children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal}) => {
......@@ -15,9 +15,9 @@ const CalendarStandartCell = ({children, xs, hours, dayNumber, createTaskInCell
onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}>
{children}
{isThisCell ?
<Grid
sx={{backgroundColor: 'lightgreen', padding: '10px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}
>
<Grid
sx={{height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', margin:"5px 10px", borderRadius: '10px'}}
>
<span>
Задача
</span>
......
planner-front/src/components/MonthCalendarBody/CalendarTask/CalendarTask.js
View file @ da037e57
import { Grid, TextField, Typography } from "@mui/material";
import React, { memo, useState, useEffect} from "react";
const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen, currentTask}) => {
const [thisCellCurrentTask, setThisCellCurrentTask] = useState({})
const getTaskInDayCell = (tasks, day, hours) => {
const hour = parseInt(hours.split(':')[0])
let hourDiffEnd
if (hourFormat) {
hourDiffEnd = hour + 1
} else {
hourDiffEnd = hour + 2
}
const tasksCell = tasks.filter(task=> {
if (year === task.infoForCell.startYear) {
if (month + 1 === task.infoForCell.startMonth) {
if (day.dayNumber === task.infoForCell.startDay) {
if (((task.infoForCell.endHour <= hour || task.infoForCell.startHour <= hour) && (task.infoForCell.endHour > hour))
|| (task.infoForCell.startHour >= hour && task.infoForCell.endHour < hourDiffEnd)
|| (task.infoForCell.endMinute <= 59 && task.infoForCell.endHour === hour)) {
return task
}
}
}
}
})
return tasksCell
}
const tasksCell = getTaskInDayCell(tasks, day, hours)
import { Grid} from "@mui/material";
import React, { memo} from "react";
const TaskDefault = ({task, onClickTaskHandler}) => {
return(<Grid
sx={{ height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', borderBottom: '1px solid rgb(29, 161, 51)', borderRadius: '10px', margin: '5px 10px', textAlign: 'left'}}
onClick={onClickTaskHandler}
>
<span>
{task.title}
</span>
</Grid>)
}
const TaskWithNoStartAndAllEnd = ({task, onClickTaskHandler}) => {
return(<Grid
sx={{height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', padding: '5px', borderBottom: '1px solid rgb(29, 161, 51)', borderTopLeftRadius: '10px', borderBottomLeftRadius: '10px', margin:"5px -1px 5px 10px", position:'relative', textAlign: 'left'}}
onClick={onClickTaskHandler}
>
<span>
{task.title}
</span>
</Grid>)
}
const TaskWithAllStartAndNoEnd = ({onClickTaskHandler}) => {
return(<Grid
sx={{height: '30px',backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', borderBottom: '1px solid rgb(29, 161, 51)', borderTopRightRadius: '10px', borderBottomRightRadius: '10px', margin:"5px 10px 5px -1px"}}
onClick={onClickTaskHandler}
>
<span>
&#8291;
</span>
</Grid>)
}
const TaskWithAllStartAndAllEnd = ({onClickTaskHandler}) => {
return(<Grid
sx={{height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', borderBottom: '1px solid rgb(29, 161, 51)', margin:"5px -1px"}}
onClick={onClickTaskHandler}
>
<span>
&#8291;
</span>
</Grid>)
}
const Empty = () => {
return (<Grid
sx={{height: '30px', backgroundColor: 'rgb(0,0,0,0)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', margin:"5px -1px"}}
>
<span>
&#8291;
</span>
</Grid>)
}
useEffect(()=>{
if (!currentTask.title) {
setThisCellCurrentTask({})
}
}, [currentTask])
const CalendarTask = ({hours, setCurrentTask, hourFormat, handleOpen, currentTask, linesForCell, sortedTasks}) => {
const hour = parseInt(hours.split(':')[0])
const onClickTaskHandler = (e, task) => {
e.stopPropagation();
setCurrentTask(task);
handleOpen(e)
}
return (<>
{tasksCell.length ? tasksCell.map((task, i)=>
{linesForCell?.length ? linesForCell.map((line, i)=>
{
return (
<Grid
key={task.id}
sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '10px', borderBottom: '1px solid rgb(29, 161, 51);;'}}
onClick={(e)=>{e.stopPropagation(); setCurrentTask(task); handleOpen(e)}}
>
{task.title}
</Grid>
)}
if (isNaN(line)) {
const task = sortedTasks[line.split('-')[1]]
if ((hourFormat && task.infoForCell.endHour > hour && task.infoForCell.startHour === hour)
|| (!hourFormat && (task.infoForCell.endHour - 1 > hour)
&& (task.infoForCell.startHour === hour || task.infoForCell.startHour === hour +1))) {
return (<TaskWithNoStartAndAllEnd
key={task.id}
task={task}
onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
/>)
}
if ((hourFormat && task.infoForCell.startHour < hour && task.infoForCell.endHour > hour)
|| (!hourFormat && task.infoForCell.startHour < hour && task.infoForCell.endHour > hour + 1)) {
return (<TaskWithAllStartAndAllEnd
key={task.id}
onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
/>)
}
if (task.infoForCell.endMinute === 59 && task.infoForCell.startHour < hour) {
return (
<TaskWithAllStartAndNoEnd
key={task.id}
onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
/>)
}
return (
<TaskDefault
key={task.id}
task={task}
onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
/>
)
} else {
return (
<Empty
/>
)
}
}
)
: null}
</>)
......
planner-front/src/components/MonthCalendarBody/MonthCalendarBody.js
View file @ da037e57
import { FormControlLabel, Switch} from "@mui/material";
import { memo, useEffect, useState } from "react";
import { useState } from "react";
import CalendarRow from "./CalendarRow/CalendarRow";
import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
import CalendarTask from "./CalendarTask/CalendarTask";
import ModalTask from "../UI/ModalTask/ModalTask";
import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalendarModalContent";
import CalendarRowDay from "./CalendarRowDay/CalendarRowDay";
function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth}) {
......@@ -27,7 +27,6 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
};
return (
<>
<CalendarRow
......@@ -54,32 +53,20 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
>
<CalendarSmallCell xs={cellSizes.smallCell}>{day.dayNumber}</CalendarSmallCell>
<CalendarSmallCell xs={cellSizes.smallCell}>{day.dayOfWeek}</CalendarSmallCell>
{hoursInDay.map((hours, i)=>{
return (
<CalendarStandartCell
key={i}
item xs={cellSizes.standarCell}
createTaskInCellHandler={createTaskInCellHandler}
hours={hours}
dayNumber={day.dayNumber}
currentTask={currentTask}
handleOpen={handleOpen}
modal={modal.open}
>
<CalendarTask
setCurrentTask={setCurrentTask}
year={year}
month={month}
tasks={tasks}
day={day}
hours={hours}
hourFormat={hourFormat}
handleOpen={handleOpen}
currentTask={currentTask}
/>
</CalendarStandartCell>
)
})}
<CalendarRowDay
xs={cellSizes.dayCell}
createTaskInCellHandler={createTaskInCellHandler}
hoursInDay={hoursInDay}
currentTask={currentTask}
handleOpen={handleOpen}
modal={modal.open}
setCurrentTask={setCurrentTask}
year={year}
month={month}
tasks={tasks}
day={day}
hourFormat={hourFormat}
/>
</CalendarRow>
)
})}
......
planner-front/src/components/UI/СustomSelect/СustomSelect.js
View file @ da037e57
......@@ -6,10 +6,10 @@ function СustomSelect({value, onChange, label, variant='standard', items, id})
return (
<>
<FormControl variant={variant} sx={{ m: 1, minWidth: 120 }}>
<InputLabel id={id + '-select' + '-label'}>{label}</InputLabel>
<InputLabel id={`${id}-select-label`}>{label}</InputLabel>
<Select
labelId={id + '-select'+ '-label'}
id={id + '-select'}
labelId={`${id}-select-label`}
id={`${id}-select`}
value={value}
onChange={onChange}
label={label}
......
planner-front/src/containers/MonthCalendar/MonthCalendar.js
View file @ da037e57
......@@ -13,7 +13,6 @@ function MonthCalendar() {
const [worker, setWorker] = useState('');
const [calendarType, setCalendarType] = useState('Месяц');
const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: ''})
const [cellSizes, setCellSizes] = useState({})
useEffect(()=>{
......@@ -31,7 +30,7 @@ function MonthCalendar() {
const cells = arr.length
const xs = 10.8/cells
setCellSizes(()=>{
return {smallCell: 0.6, standarCell: xs}
return {smallCell: 0.6, standarCell: xs, dayCell: 12/cells}
})
return arr
} else {
......@@ -39,7 +38,7 @@ function MonthCalendar() {
const cells = arr.length
const xs = 10.8/cells
setCellSizes(()=>{
return {smallCell: 0.6, standarCell: xs}
return {smallCell: 0.6, standarCell: xs, dayCell: 12/cells}
})
return arr
}
......@@ -122,12 +121,13 @@ function MonthCalendar() {
const sendNewTaskHandler = async () => {
if (currentTask.id) {
delete currentTask.infoForCell
console.log(currentTask)
setCurrentTask(() => {
return{
...currentTask,
}}
)
delete currentTask.infoForCell
await dispatch(editTask(currentTask))
} else {
setCurrentTask(() => {
......@@ -135,7 +135,6 @@ function MonthCalendar() {
...currentTask,
}}
)
console.log(currentTask)
delete currentTask.infoForCell
await dispatch(addTask(currentTask))
}
......
planner-front/src/store/actionTypes/tasksTypes.js
View file @ da037e57
......@@ -14,4 +14,6 @@ export const EDIT_TASK_FAILURE = "EDIT_TASK_FAILURE";
export const DELETE_TASK_REQUEST = "DELETE_TASK_REQUEST";
export const DELETE_TASK_SUCCESS = "DELETE_TASK_SUCCESS";
export const DELETE_TASK_FAILURE = "DELETE_TASK_FAILURE";
\ No newline at end of file
export const DELETE_TASK_FAILURE = "DELETE_TASK_FAILURE";
export const EDIT_CALENDAR_TASK = "EDIT_CALENDAR_TASK";
\ No newline at end of file
planner-front/src/store/actions/tasksActions.js
View file @ da037e57
......@@ -11,7 +11,8 @@ import {
FETCH_CALENDAR_TASKS_FAILURE,
FETCH_CALENDAR_TASKS_REQUEST,
FETCH_CALENDAR_TASKS_SUCCESS,
FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
FETCH_ALL_TASKS_SUCCESS,
} from "../actionTypes/tasksTypes";
import axios from '../../axiosPlanner'
const fetchCalendarTasksRequest = () => {
......@@ -68,7 +69,7 @@ const addTaskFailure = (error) => {
export const addTask = (task) => {
return async (dispatch, getState) => {
dispatch(addTaskRequest());
const token = getState().users?.user?.token;
// const token = getState().users?.user?.token;
try {
await axios.post("/tasks", task);
dispatch(addTaskSuccess())
......
planner-front/src/store/actions/usersActions.js
View file @ da037e57
......@@ -18,9 +18,7 @@ export const registerUser = (userData, navigate) => {
return async (dispatch) => {
dispatch(registerUserRequest());
try {
console.log("register " + userData)
const response = await axios.post("/users", userData);
console.log(response)
const response = await axios.post("/users", userData);
dispatch(registerUserSuccess())
navigate("/")
} catch (error) {
......@@ -51,9 +49,7 @@ const logoutUserFailure = (error) => {
export const loginUser = (userData, navigate) => {
return async (dispatch) => {
try {
console.log(userData)
const response = await axios.post("users/sessions", userData);
console.log(response)
dispatch(loginUserSuccess(response.data.user));
navigate("/")
} catch (e) {
......
planner-front/src/store/reducers/tasksReducer.js
View file @ da037e57
......@@ -11,7 +11,9 @@ import {
DELETE_TASK_SUCCESS,
DELETE_TASK_REQUEST,
DELETE_TASK_FAILURE,
FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
FETCH_ALL_TASKS_SUCCESS,
EDIT_CALENDAR_TASK,
} from "../actionTypes/tasksTypes";
const initialState = {
calendarTasks: [],
......@@ -38,7 +40,8 @@ const tasksReduсer = (state = initialState, action) => {
const timeEndHour = parseInt(timeEnd.split(':')[0])
const timeStartMinute = parseInt(timeStart.split(':')[1])
const timeEndMinute = parseInt(timeEnd.split(':')[1])
newArr.push({...task, infoForCell: {
const newObj = {...task,
infoForCell: {
startDay: dayStart,
startHour: timeStartHour,
startMonth: monthStartNumber,
......@@ -46,8 +49,9 @@ const tasksReduсer = (state = initialState, action) => {
startMinute: timeStartMinute,
endHour: timeEndHour,
endMinute: timeEndMinute,
}
} )
}
}
newArr.push(newObj)
}
}
})
......
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