Skip to content

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

Merge branch 'task-55-echance/change_render_logic_tasks' into 'development' 

Task 55 echance/change render logic tasks

See merge request !32
parents da037e57 d9d0fd66
Hide whitespace changes
Inline Side-by-side
Showing with 80 additions and 126 deletions
planner-front/src/components/MonthCalendarBody/CalendarRowDay/CalendarRowDay.js
View file @ 343bd71c
......@@ -95,6 +95,33 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
return lines
}, [availableTasks.length, hourFormat, hours, hoursInDay, sortedTasks])
const getBoxesInLine = (line) => {
if (line) {
let xs = 12/hoursInDay.length
const boxes = []
for (let i = 0; i < line.length; i++) {
if (!isNaN(line[i])) {
if (boxes[boxes.length -1]?.task === null) {
boxes[boxes.length -1].xs += xs
} else {
boxes.push({xs: xs, task: null})
}
} else {
const task = sortedTasks[line[i].split('-')[1]]
const taskIsThere = boxes.find((taskFind)=>{
if (taskFind?.task?.id === task.id) return taskFind
})
if (taskIsThere) {
taskIsThere.xs +=xs
} else {
boxes.push({xs: xs, task: sortedTasks[line[i].split('-')[1]]})
}
}
}
return boxes
}
}
return <>
<Grid
container
......@@ -103,12 +130,6 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
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}
......@@ -120,19 +141,31 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
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>
)
})}
{linesInDay?.map((line, i)=>{
const boxes = getBoxesInLine(line)
return(
<Grid key={i} container sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginTop: i === 0 ? '-35px' : 0, marginBottom: '5px'}}>
{boxes.map((box)=>{
if (box.task) {
return (<Grid item xs={box.xs} sx={{height: '35px', marginBottom: '5px'}}>
<CalendarTask
task={box.task}
setCurrentTask={setCurrentTask}
handleOpen={handleOpen}
/>
</Grid>)
} else {
return (<Grid item xs={box.xs} sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)'}}>
</Grid>)
}
})}
</Grid>)
})}
</Grid>
</>
};
......
planner-front/src/components/MonthCalendarBody/CalendarStandartCell.js/CalendarStandartCell.js
View file @ 343bd71c
import { Grid} from "@mui/material";
import { memo, useEffect, useState } from "react";
const CalendarStandartCell = ({children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal}) => {
const CalendarStandartCell = ({children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal, divRef }) => {
const [isThisCell, setIsThisCell] = useState(false)
useEffect(()=>{
if(!modal) {
setIsThisCell(false);
}
}, [modal])
return <>
<Grid
item xs={xs}
sx={{borderRight: '1px solid black'}}
onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}>
sx={{position: 'relative', height: '35px'}}
onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}
>
{children}
{isThisCell ?
<Grid
sx={{height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', margin:"5px 10px", borderRadius: '10px'}}
sx={{ position: 'relative', height: '29px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderRadius: '10px', margin: '3px 10px', display: 'flex', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: '5px', zIndex: '5'}}
>
<span>
Задача
</span>
</Grid> : null}
<div style={{position: 'absolute', height: children ? divRef : 0, width: '1px', backgroundColor: 'black', right: '0', top: '0', zIndex: '3'}}>
</div>
</Grid>
</>
};
......
planner-front/src/components/MonthCalendarBody/CalendarTask/CalendarTask.js
View file @ 343bd71c
......@@ -2,65 +2,10 @@ 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>)
}
const CalendarTask = ({setCurrentTask, handleOpen, task}) => {
const CalendarTask = ({hours, setCurrentTask, hourFormat, handleOpen, currentTask, linesForCell, sortedTasks}) => {
const hour = parseInt(hours.split(':')[0])
const onClickTaskHandler = (e, task) => {
e.stopPropagation();
setCurrentTask(task);
......@@ -68,51 +13,14 @@ const CalendarTask = ({hours, setCurrentTask, hourFormat, handleOpen, currentTas
}
return (<>
{linesForCell?.length ? linesForCell.map((line, i)=>
{
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}
<Grid
sx={{ position: 'relative', height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderRadius: '10px', margin: '5px 10px', display: 'flex', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: '5px', zIndex: '5'}}
onClick={(e)=>{onClickTaskHandler(e, task)}}
>
<span>
{task.title}
</span>
</Grid>
</>)
};
......
planner-front/src/components/MonthCalendarBody/MonthCalendarBody.js
View file @ 343bd71c
import { FormControlLabel, Switch} from "@mui/material";
import { useState } from "react";
import { useEffect, useRef, useState } from "react";
import CalendarRow from "./CalendarRow/CalendarRow";
import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
......@@ -25,10 +25,18 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
setModal({...modal, open: false})
setCurrentTask({})
};
const divRef = useRef(null)
const [divHeight, setDivHeight] = useState('')
useEffect(() => {
if (divRef) {
setDivHeight(()=>{
return divRef.current?.offsetHeight
})
}
}, [divRef.current?.offsetHeight, hourFormat, month, tasks]);
return (
<>
<div ref={divRef} style={{marginBottom: '30px'}}>
<CalendarRow
>
<CalendarSmallCell xs={1.2}>
......@@ -40,7 +48,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
</CalendarSmallCell>
{hoursInDay?.map((hours, i)=>{
return (
<CalendarStandartCell key={i} xs={cellSizes.standarCell}>
<CalendarStandartCell key={i} xs={cellSizes.standarCell} divRef={divHeight}>
{hours}
</CalendarStandartCell>
)
......@@ -83,7 +91,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
deleteTaskHandler={()=>{deleteTaskHandler(currentTask.id); handleClose()}}
/>
</ModalTask>
</>
</div>
);
}
......
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