Skip to content

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

Merge branch 'development' of… 

Merge branch 'development' of ssh://git.attractor-school.com:30022/apollo64/crm-team-one into task-54-feature/resize_tasks
parents 4dd315e0 343bd71c
Show whitespace changes
Inline Side-by-side
Showing with 80 additions and 125 deletions
planner-front/src/components/MonthCalendarBody/CalendarRowDay/CalendarRowDay.js
View file @ 49bc1059
...@@ -95,6 +95,33 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h ...@@ -95,6 +95,33 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
return lines return lines
}, [availableTasks.length, hourFormat, hours, hoursInDay, sortedTasks]) }, [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 <> return <>
<Grid <Grid
container container
...@@ -103,12 +130,6 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h ...@@ -103,12 +130,6 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
align='center' align='center'
> >
{hoursInDay.map((hour, i)=>{ {hoursInDay.map((hour, i)=>{
const linesForCell = []
if (linesInDay?.length) {
for (let j = 0; j < linesInDay.length; j++) {
linesForCell.push(linesInDay[j][i])
}
}
return ( return (
<CalendarStandartCell <CalendarStandartCell
key={i} key={i}
...@@ -120,18 +141,30 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h ...@@ -120,18 +141,30 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
handleOpen={handleOpen} handleOpen={handleOpen}
modal={modal} modal={modal}
> >
</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 <CalendarTask
task={box.task}
setCurrentTask={setCurrentTask} setCurrentTask={setCurrentTask}
hours={hour}
modal={modal}
hourFormat={hourFormat}
handleOpen={handleOpen} handleOpen={handleOpen}
currentTask={currentTask}
linesForCell={linesForCell.length ? linesForCell : null}
sortedTasks={sortedTasks}
/> />
</CalendarStandartCell> </Grid>)
) } else {
return (<Grid item xs={box.xs} sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)'}}>
</Grid>)
}
})}
</Grid>)
})} })}
</Grid> </Grid>
</> </>
......
planner-front/src/components/MonthCalendarBody/CalendarStandartCell.js/CalendarStandartCell.js
View file @ 49bc1059
import { Grid} from "@mui/material"; import { Grid} from "@mui/material";
import { memo, useEffect, useState } from "react"; 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) const [isThisCell, setIsThisCell] = useState(false)
useEffect(()=>{ useEffect(()=>{
if(!modal) { if(!modal) {
setIsThisCell(false); setIsThisCell(false);
} }
}, [modal]) }, [modal])
return <> return <>
<Grid <Grid
item xs={xs} item xs={xs}
sx={{borderRight: '1px solid black'}} sx={{position: 'relative', height: '35px'}}
onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}> onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}
>
{children} {children}
{isThisCell ? {isThisCell ?
<Grid <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>
Задача Задача
</span> </span>
</Grid> : null} </Grid> : null}
<div style={{position: 'absolute', height: children ? divRef : 0, width: '1px', backgroundColor: 'black', right: '0', top: '0', zIndex: '3'}}>
</div>
</Grid> </Grid>
</> </>
}; };
......
planner-front/src/components/MonthCalendarBody/CalendarTask/CalendarTask.js
View file @ 49bc1059
import { Grid} from "@mui/material"; import { Grid} from "@mui/material";
import React, { memo} from "react"; 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) => { const onClickTaskHandler = (e, task) => {
e.stopPropagation(); e.stopPropagation();
...@@ -67,51 +13,14 @@ const CalendarTask = ({hours, setCurrentTask, hourFormat, handleOpen, currentTas ...@@ -67,51 +13,14 @@ const CalendarTask = ({hours, setCurrentTask, hourFormat, handleOpen, currentTas
} }
return (<> return (<>
{linesForCell?.length ? linesForCell.map((line, i)=> <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'}}
if (isNaN(line)) { onClick={(e)=>{onClickTaskHandler(e, task)}}
const task = sortedTasks[line.split('-')[1]] >
if ((hourFormat && task.infoForCell.endHour > hour && task.infoForCell.startHour === hour) <span>
|| (!hourFormat && (task.infoForCell.endHour - 1 > hour) {task.title}
&& (task.infoForCell.startHour === hour || task.infoForCell.startHour === hour +1))) { </span>
return (<TaskWithNoStartAndAllEnd </Grid>
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 @ 49bc1059
import { FormControlLabel, Switch} from "@mui/material"; import { FormControlLabel, Switch} from "@mui/material";
import { useState } from "react"; import { useEffect, useRef, useState } from "react";
import CalendarRow from "./CalendarRow/CalendarRow"; import CalendarRow from "./CalendarRow/CalendarRow";
import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell"; import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell"; import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
...@@ -25,10 +25,18 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current ...@@ -25,10 +25,18 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
setModal({...modal, open: false}) setModal({...modal, open: false})
setCurrentTask({}) setCurrentTask({})
}; };
const divRef = useRef(null)
const [divHeight, setDivHeight] = useState('')
useEffect(() => {
if (divRef) {
setDivHeight(()=>{
return divRef.current?.offsetHeight
})
}
}, [divRef.current?.offsetHeight, hourFormat, month, tasks]);
return ( return (
<> <div ref={divRef} style={{marginBottom: '30px'}}>
<CalendarRow <CalendarRow
> >
<CalendarSmallCell xs={1.2}> <CalendarSmallCell xs={1.2}>
...@@ -40,7 +48,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current ...@@ -40,7 +48,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
</CalendarSmallCell> </CalendarSmallCell>
{hoursInDay?.map((hours, i)=>{ {hoursInDay?.map((hours, i)=>{
return ( return (
<CalendarStandartCell key={i} xs={cellSizes.standarCell}> <CalendarStandartCell key={i} xs={cellSizes.standarCell} divRef={divHeight}>
{hours} {hours}
</CalendarStandartCell> </CalendarStandartCell>
) )
...@@ -83,7 +91,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current ...@@ -83,7 +91,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
deleteTaskHandler={()=>{deleteTaskHandler(currentTask.id); handleClose()}} deleteTaskHandler={()=>{deleteTaskHandler(currentTask.id); handleClose()}}
/> />
</ModalTask> </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