Skip to content

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

#56 Почти реализовал drug and drop

parent 343bd71c
Hide whitespace changes
Inline Side-by-side
Showing with 164 additions and 61 deletions
planner-front/src/components/MonthCalendarBody/CalendarRowDay/CalendarRowDay.js
View file @ bc35da21
import { Grid } from "@mui/material";
import { memo, useMemo } from "react";
import { memo, useMemo, useState } from "react";
import { useDispatch } from "react-redux";
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 CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat, setCurrentLine, currentLine, dragTaskHandler}) => {
const hours = useMemo(()=>{
return hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))},
[hoursInDay])
......@@ -101,11 +101,11 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
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})
}
// 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)=>{
......@@ -122,6 +122,18 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
}
}
const dragOverHandler = (e) => {
e.preventDefault();
}
const dropHandler = (e, currentHour) => {
e.stopPropagation()
e.preventDefault();
dragTaskHandler(day.dayNumber, currentHour)
}
console.log(sortedTasks)
console.log(linesInDay)
return <>
<Grid
container
......@@ -129,17 +141,20 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
xs={10.8}
align='center'
>
{hoursInDay.map((hour, i)=>{
return (
<CalendarStandartCell
key={i}
item xs={xs}
createTaskInCellHandler={createTaskInCellHandler}
hours={hour}
dayNumber={day.dayNumber}
currentTask={currentTask}
handleOpen={handleOpen}
modal={modal}
linesInDay={linesInDay}
key={i}
item xs={xs}
createTaskInCellHandler={createTaskInCellHandler}
hours={hour}
dragTaskHandler={dragTaskHandler}
dayNumber={day.dayNumber}
currentTask={currentTask}
handleOpen={handleOpen}
modal={modal}
>
</CalendarStandartCell>
)
......@@ -148,18 +163,32 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
{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)=>{
<Grid key={i} container sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginBottom: '5px'}}>
{boxes.map((box, index)=>{
if (box.task) {
return (<Grid item xs={box.xs} sx={{height: '35px', marginBottom: '5px'}}>
return (<Grid
item xs={box.xs}
sx={{height: '35px', marginBottom: '5px'}}
onDragOver={(e)=>{dragOverHandler(e)}}
onDrop={(e)=>{dropHandler(e, parseInt(hours[index]))}
}>
<CalendarTask
dragTaskHandler={dragTaskHandler}
setCurrentLine={()=>{setCurrentLine(day.dayNumber)}}
currentTask={currentTask}
currentLine={currentLine}
hour={parseInt(hours[index])}
line={day.dayNumber}
task={box.task}
setCurrentTask={setCurrentTask}
handleOpen={handleOpen}
/>
</Grid>)
} else {
return (<Grid item xs={box.xs} sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)'}}>
return (<Grid
onDragOver={(e)=>{dragOverHandler(e)}}
onDrop={(e)=>{dropHandler(e, parseInt(hours[index]))}}
item xs={box.xs} sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)'}}>
</Grid>)
}
......@@ -170,4 +199,5 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
</>
};
export default memo(CalendarRowDay);
\ No newline at end of file
export default memo(CalendarRowDay);
planner-front/src/components/MonthCalendarBody/CalendarStandartCell.js/CalendarStandartCell.js
View file @ bc35da21
import { Grid} from "@mui/material";
import { memo, useEffect, useState } from "react";
const CalendarStandartCell = ({children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal, divRef }) => {
const CalendarStandartCell = ({children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal, divRef, dragTaskHandler, linesInDay}) => {
const [isThisCell, setIsThisCell] = useState(false)
useEffect(()=>{
if(!modal) {
......@@ -9,11 +9,23 @@ const CalendarStandartCell = ({children, xs, hours, dayNumber, createTaskInCell
}
}, [modal])
const dragOverHandler = (e) => {
e.preventDefault();
}
const dropHandler = (e) => {
e.stopPropagation()
e.preventDefault();
dragTaskHandler(dayNumber, parseInt(hours.split(':')[0]))
}
return <>
<Grid
item xs={xs}
sx={{position: 'relative', height: '35px'}}
sx={{position: 'relative', height: linesInDay?.length ? `${35*linesInDay}px` : '35px'}}
onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}
onDragOver={(e)=>{dragOverHandler(e)}}
onDrop={(e)=>{dropHandler(e)}}
>
{children}
{isThisCell ?
......
planner-front/src/components/MonthCalendarBody/CalendarTask/CalendarTask.js
View file @ bc35da21
import { Grid} from "@mui/material";
import React, { memo} from "react";
import React, { memo, useEffect, useState} from "react";
const CalendarTask = ({setCurrentTask, handleOpen, task}) => {
const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, currentLine, currentTask, dragTaskHandler, hour}) => {
const [color, setColor] = useState('')
useEffect(() => {
if (task.priority) {
if (task.priority === 'A') setColor('rgb(32, 138, 250)')
if (task.priority === 'B') setColor('lightgreen')
if (task.priority === 'C') setColor('yellow')
} else {
setColor('rgb(171, 157, 157);')
}
}, [task])
const onClickTaskHandler = (e, task) => {
......@@ -12,10 +23,37 @@ const CalendarTask = ({setCurrentTask, handleOpen, task}) => {
handleOpen(e)
}
return (<>
const dragOverHandler = (e) => {
e.preventDefault();
e.target.style.boxShadow = '0 4px 3px grey'
}
const dragLeaveHandler = (e) => {
e.target.style.boxShadow = 'none'
}
const dragStartHandler = (e, line, task) => {
setCurrentLine()
setCurrentTask(task);
}
const dragEndHandler = (e) => {
e.target.style.boxShadow = 'none'
}
const dropHandler = (e, line, task) => {
e.stopPropagation()
e.preventDefault();
console.log(hour)
dragTaskHandler(line, hour)
}
return (<>
<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)}}
draggable={true}
onDragOver={(e)=>{dragOverHandler(e)}}
onDragLeave={(e)=>{dragLeaveHandler(e)}}
onDragStart={(e)=>{dragStartHandler(e, line, task)}}
onDragEnd={(e)=>{dragEndHandler(e)}}
onDrop={(e)=>{dropHandler(e, line, task)}}
sx={{ position: 'relative', height: '30px', backgroundColor: color, 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}
......
planner-front/src/components/MonthCalendarBody/MonthCalendarBody.js
View file @ bc35da21
import { FormControlLabel, Switch} from "@mui/material";
import { useEffect, useRef, useState } from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import CalendarRow from "./CalendarRow/CalendarRow";
import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
......@@ -7,8 +7,10 @@ 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}) {
function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth, dragTaskHandler}) {
const [currentLine, setCurrentLine] = useState('')
const [modal, setModal] = useState({open:false, y: 0, x: 0,});
const handleOpen = (e) => {
setModal( {
......@@ -21,19 +23,22 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
xDiv: e.target.offsetWidth,
})
};
const handleClose = () => {
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]);
}
}, [divRef.current?.offsetHeight, hourFormat, month, tasks]);
return (
<div ref={divRef} style={{marginBottom: '30px'}}>
......@@ -54,30 +59,34 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
)
})}
</CalendarRow>
{daysInMonth?.map((day, i)=>{
return (
<CalendarRow
key={i}
>
<CalendarSmallCell xs={cellSizes.smallCell}>{day.dayNumber}</CalendarSmallCell>
<CalendarSmallCell xs={cellSizes.smallCell}>{day.dayOfWeek}</CalendarSmallCell>
<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>
)
})}
{daysInMonth?.map((day, i)=>{
return (
<CalendarRow
key={i}
>
<CalendarSmallCell xs={cellSizes.smallCell}>{day.dayNumber}</CalendarSmallCell>
<CalendarSmallCell xs={cellSizes.smallCell}>{day.dayOfWeek}</CalendarSmallCell>
<CalendarRowDay
dragTaskHandler={dragTaskHandler}
xs={cellSizes.dayCell}
createTaskInCellHandler={createTaskInCellHandler}
hoursInDay={hoursInDay}
currentTask={currentTask}
handleOpen={handleOpen}
currentLine={currentLine}
setCurrentLine={setCurrentLine}
modal={modal.open}
setCurrentTask={setCurrentTask}
year={year}
month={month}
tasks={tasks}
day={day}
hourFormat={hourFormat}
>
</CalendarRowDay>
</CalendarRow>
)
})}
<ModalTask
modal={modal}
handleClose={()=>{handleClose()}}
......
planner-front/src/containers/MonthCalendar/MonthCalendar.js
View file @ bc35da21
......@@ -101,6 +101,7 @@ function MonthCalendar() {
const iso = dateLocal.toISOString();
return iso;
}
const createTaskInCellHandler = (dayNumber, dayHour) => {
const hour = parseInt(dayHour.split(':')[0])
let hourDue
......@@ -119,10 +120,25 @@ function MonthCalendar() {
setCurrentTask((newTask))
}
const dragTaskHandler = async (dayNumber, hour) => {
console.log(dayNumber, hour)
const timeEnd = currentTask.dateTimeDue.split('T')[1]
const timeEndHour = parseInt(timeEnd.split(':')[0])
const timeStart = currentTask.dateTimeStart.split('T')[1]
const timeStartHour = parseInt(timeStart.split(':')[0])
const hourDiff = timeEndHour - timeStartHour
const due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour + hourDiff, 59))
const start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour, 0))
await dispatch(editTask({
...currentTask,
dateTimeStart: start,
dateTimeDue: due
}))
}
const sendNewTaskHandler = async () => {
if (currentTask.id) {
delete currentTask.infoForCell
console.log(currentTask)
setCurrentTask(() => {
return{
...currentTask,
......@@ -171,6 +187,7 @@ function MonthCalendar() {
cellSizes={cellSizes}
hoursInDay={hoursInDay}
daysInMonth={daysInMonth}
dragTaskHandler={dragTaskHandler}
/>
</>
......
planner-front/src/store/actions/tasksActions.js
View file @ bc35da21
......@@ -95,11 +95,8 @@ const editTaskFailure = (error) => {
export const editTask = (task) => {
return async (dispatch, getState) => {
dispatch(editTaskRequest());
// const token = getState().users?.user?.token;
try {
console.log('task' , task)
const r=await axios.put("/tasks/", task);
console.log(r)
await axios.put("/tasks", task);
dispatch(editTaskSuccess())
dispatch(fetchAllTasks())
dispatch(fetchCalendarTasks())
......
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