Skip to content

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

Merge branch 'development' of… 

Merge branch 'development' of ssh://git.attractor-school.com:30022/apollo64/crm-team-one into task-68-feature/DateTimeTask_model
parents 7b2f67a0 5c2142fd
Show whitespace changes
Inline Side-by-side
Showing with 153 additions and 175 deletions
planner-front/src/components/MonthCalendarBody/CalendarRowDay/CalendarRowDay.js
View file @ 55c98e79
import { Grid } from "@mui/material";
import { memo, useEffect, useMemo, useState } from "react";
import { memo, useMemo} from "react";
import CalendarStandartCell from "../CalendarStandartCell.js/CalendarStandartCell";
import CalendarTask from "../CalendarTask/CalendarTask";
import EmptyBox from "./EmptyBox/EmptyBox";
import { getAvailableTasks, getBoxesInLine, getLinesInDay, getSortedTasks } from "./Helpers";
const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat, setCurrentLine, currentLine, dragTaskHandler, increaseTaskHandler, reduceTaskHandler, createCopyTask, setCopyTask, copyTask}) => {
const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat, setCurrentLine, currentLine, dragTaskHandler, createCopyTask, setCopyTask, copyTask}) => {
const hours = useMemo(()=>{
return hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))},
......@@ -68,11 +68,8 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
hour={parseInt(hours[index])}
line={day.dayNumber}
task={box.task}
hourFormat={hourFormat}
setCurrentTask={setCurrentTask}
handleOpen={handleOpen}
increaseTaskHandler={increaseTaskHandler}
reduceTaskHandler={reduceTaskHandler}
setCopyTask={setCopyTask}
/>
</Grid>)
......
planner-front/src/components/MonthCalendarBody/CalendarRowDay/EmptyBox/EmptyBox.js
View file @ 55c98e79
......@@ -38,6 +38,7 @@ const EmptyBox = ({hourNumber, handleOpen, dayNumber, xs, dragTaskHandler, modal
height: '35px',
backgroundColor: 'rgb(0,0,0,0)',
zIndex: '6',
cursor: copyTask ? 'pointer' : 'default'
}}>
{isThisCell ?
<DefaultTask/> : null}
......
planner-front/src/components/MonthCalendarBody/CalendarTask/CalendarTask.js
View file @ 55c98e79
import { Button, Grid} from "@mui/material";
import React, { memo, useEffect, useRef, useState} from "react";
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import { Grid} from "@mui/material";
import React, { memo, useEffect, useState} from "react";
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
const arrowClass = {
height: '20px',
cursor: 'pointer',
transition: '0.5s',
"&:hover": {
transition: '0.5s',
transform: 'scale(1.2)'
}
}
const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, increaseTaskHandler, reduceTaskHandler, hourFormat, setCopyTask}) => {
const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, setCopyTask}) => {
const [color, setColor] = useState('')
useEffect(() => {
......@@ -28,7 +17,15 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, i
const onClickTaskHandler = (e, task) => {
e.stopPropagation();
setCurrentTask(task);
setCurrentTask((prevState)=>{
return {
...task,
infoForCell: {
...task.infoForCell,
endHour: task.infoForCell.endHour + 1
}
}
});
handleOpen(e)
}
......@@ -49,45 +46,16 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, i
onDragLeave={(e)=>{dragLeaveHandler(e)}}
onDragStart={(e)=>{dragStartHandler(e, line, task)}}
onDragEnd={(e)=>{dragEndHandler(e)}}
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', justifyContent: 'space-between'}}
sx={{ position: 'relative', height: '30px', backgroundColor: color, borderRadius: '10px', margin: '5px 10px', display: 'flex', alignItems: 'center', zIndex: '5', justifyContent: 'space-between', padding: '0 15px'}}
onClick={(e)=>{onClickTaskHandler(e, task)}}
>
{task.infoForCell.endHour === task.infoForCell.startHour && hourFormat ?
<>
<div tyle={{display: 'flex', alignItems: 'center'}}>
<div style={{display: 'flex', alignItems: 'center'}}>
<ArrowBackIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); increaseTaskHandler(line, task, true)}}/>
<ArrowForwardIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); reduceTaskHandler(line, task, true)}}/>
<ArrowBackIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); reduceTaskHandler(line, task, false)}}/>
<ArrowForwardIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); increaseTaskHandler(line, task, false)}}/>
</div>
</div>
<div>
<span>
<span style={{maxWidth: '60%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>
{task.title}
</span>
</div>
</>
<ContentCopyIcon sx={{width: '20px', cursor: 'pointer'}} onClick={(e)=>{e.stopPropagation(); setCopyTask(task)}}>
</ContentCopyIcon>
:
<>
<div style={{display: 'flex', alignItems: 'center'}}>
<ArrowBackIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); increaseTaskHandler(line, task, true)}}/>
<ArrowForwardIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); reduceTaskHandler(line, task, true)}}/>
</div>
<span>
{task.title}
</span>
<div style={{display: 'flex', alignItems: 'center'}}>
<Button sx={{color:'black', fontWeight:'600'}} onClick={(e)=>{e.stopPropagation(); setCopyTask(task)}}>
Copy
</Button>
<ArrowBackIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); reduceTaskHandler(line, task, false)}}/>
<ArrowForwardIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); increaseTaskHandler(line, task, false)}}/>
</div>
</>
}
</Grid>
</>)
};
......
planner-front/src/components/MonthCalendarBody/MonthCalendarBody.js
View file @ 55c98e79
......@@ -8,15 +8,15 @@ import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalenda
import CalendarRowDay from "./CalendarRowDay/CalendarRowDay";
function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth, dragTaskHandler, increaseTaskHandler, reduceTaskHandler, createCopyTask, setCopyTask, copyTask}) {
function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth, dragTaskHandler, createCopyTask, setCopyTask, copyTask}) {
const [currentLine, setCurrentLine] = useState('')
const [modal, setModal] = useState({open:false, y: 0, x: 0,});
const handleOpen = (e) => {
setModal( {
open: true,
yPage: e.clientY,
xPage: e.clientX,
yClickСordinates: e.clientY,
xClickСordinates: e.clientX,
yDivClick: e.nativeEvent.offsetY,
xDivClick: e.nativeEvent.offsetX,
yDiv: e.target.offsetHeight,
......@@ -31,6 +31,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
return (
<Box style={{marginBottom: '30px'}}>
<div style={{position: 'sticky', top: '0px', zIndex: '10', backgroundColor: 'lightgrey'}}>
<CalendarRow
>
<CalendarSmallCell xs={1.2}>
......@@ -48,6 +49,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
)
})}
</CalendarRow>
</div>
{daysInMonth?.map((day, i)=>{
return (
<CalendarRow
......@@ -71,8 +73,6 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
tasks={tasks}
day={day}
hourFormat={hourFormat}
increaseTaskHandler={increaseTaskHandler}
reduceTaskHandler={reduceTaskHandler}
createCopyTask={createCopyTask}
copyTask={copyTask}
setCopyTask={setCopyTask}
......@@ -89,6 +89,8 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
title={currentTask.title}
description={currentTask.description}
priority={currentTask.priority}
startHour={currentTask.infoForCell?.startHour}
endHour={currentTask.infoForCell?.endHour}
onChangeCurrentTaskHandler={(e)=>{ onChangeCurrentTaskHandler(e)}}
sendNewTaskHandler={()=>{sendNewTaskHandler(); handleClose()}}
deleteTaskHandler={()=>{deleteTaskHandler(currentTask.id); handleClose()}}
......
planner-front/src/components/MonthCalendarHeader/MonthCalendarHeader.js
View file @ 55c98e79
......@@ -27,7 +27,7 @@ function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMont
id={'worker'}
items={workers}
/>
<div style={{marginLeft: '20px'}}>
<СustomSelect
value={calendarType}
onChange={(e)=>{onChangeCalendarTypeHandler(e)}}
......@@ -35,6 +35,7 @@ function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMont
id={'calendar-type'}
items={types}
/>
</div>
</Toolbar>
</AppBar>
</Box>
......
planner-front/src/components/MonthCalendarModalContent/MonthCalendarModalContent.js
View file @ 55c98e79
import { Button, FormControl, InputLabel, MenuItem, Select, TextField } from "@mui/material";
import { Button, TextField } from "@mui/material";
import { memo } from "react";
import CustomSelect from '../UI/СustomSelect/СustomSelect'
const priorities = [{value: '', text: '--Приоритет--'}, {value: 'A', text: 'A'}, {value: 'B', text: 'B'}, {value: 'C', text: 'C'}]
const priorities = [{value: null, text: '--Приоритет--'}, {value: 'A', text: 'A'}, {value: 'B', text: 'B'}, {value: 'C', text: 'C'}]
function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, description, priority, sendNewTaskHandler, deleteTaskHandler}) {
function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, description, priority, sendNewTaskHandler, deleteTaskHandler, startHour, endHour}) {
return (<>
<TextField
id="task-description-title"
......@@ -27,9 +27,8 @@ function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, descripti
name='description'
onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
/>
<CustomSelect
defaultValue={''}
defaultValue={null}
value={priority}
name={'priority'}
variant={'outlined'}
......@@ -38,8 +37,28 @@ function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, descripti
id={'priority-type'}
items={priorities}
/>
<Button sx={{marginRight: '40px'}} onClick={sendNewTaskHandler}>Сохранить</Button>
<div style={{display: 'flex', gap: '20px', margin: '20px 0'}}>
<TextField
id="task-startHour"
value={startHour}
label="От"
variant="outlined"
name='startHour'
onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
/>
<TextField
id="task-endHour"
value={endHour}
label="До"
variant="outlined"
name='endHour'
onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
/>
</div>
<div style={{display: 'flex', gap: '20px', margin: '10px 0'}}>
<Button onClick={sendNewTaskHandler}>Сохранить</Button>
<Button onClick={deleteTaskHandler}>Удалить</Button>
</div>
</>);
}
......
planner-front/src/components/UI/ModalTask/ModalTask.js
View file @ 55c98e79
import Box from '@mui/material/Box';
import Modal from '@mui/material/Modal';
import { useEffect, useRef, useState } from 'react';
export default function ModalTask({modal, handleClose, children}) {
const [windowDimenion, detectHW] = useState({
winWidth: window.innerWidth,
winHeight: window.innerHeight,
})
const detectSize = () => {
detectHW({
winWidth: window.innerWidth,
winHeight: window.innerHeight,
})
}
useEffect(() => {
window.addEventListener('resize', detectSize)
return () => {
window.removeEventListener('resize', detectSize)
}
}, [windowDimenion])
const modalRef = useRef('')
const getYCordinatesToModal = () => {
if (windowDimenion.winHeight > modal.yClickСordinates + 450) {
return modal.yClickСordinates - modal.yDiv - modal.yDivClick
} else {
return modal.yClickСordinates - modal.yDiv - modal.yDivClick - ((modal.yClickСordinates + 450) - windowDimenion.winHeight) - 30
}
}
const getXCordinatesToModal = () => {
if (windowDimenion.winWidth > modal.xClickСordinates + 270 + modal.xDiv) {
return modal.xClickСordinates + modal.xDiv - modal.xDivClick + 10
} else {
return windowDimenion.winWidth - (windowDimenion.winWidth - modal.xClickСordinates) - modal.xDivClick - 270 - 80
}
}
const style = {
display: 'flex',
flexDirection: 'column',
position: 'absolute',
top: modal.yPage - modal.yDiv - modal.yDivClick,
left: modal.xPage + modal.xDiv - modal.xDivClick + 10,
width: 250,
height: 350,
top: getYCordinatesToModal(),
left: getXCordinatesToModal(),
width: 270,
height: 450,
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
......@@ -24,7 +62,7 @@ export default function ModalTask({modal, handleClose, children}) {
aria-describedby="modal-modal-description"
BackdropProps={{ style: { backgroundColor: 'rgba(255,255,255, 0)' } }}
>
<Box sx={style}>
<Box sx={style} ref={modalRef}>
{children}
</Box>
</Modal>
......
planner-front/src/components/UI/Select/Select.js
View file @ 55c98e79
......@@ -8,7 +8,7 @@ import Select from "@mui/material/Select";
export default function BasicSelect({value,label,name,onChange,task,items}) {
return (
<Box sx={{ minWidth: 60 }}>
<Box sx={{ minWidth: 60, m: 0}}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label"></InputLabel>
<Select
......
planner-front/src/components/UI/СustomSelect/СustomSelect.js
View file @ 55c98e79
......@@ -5,7 +5,7 @@ function СustomSelect({value, onChange, label, variant='standard', items, id,
return (
<>
<FormControl variant={variant} sx={{ m: 1, minWidth: 120 }}>
<FormControl variant={variant} sx={{ m: 0, minWidth: 120 }}>
<InputLabel id={`${id}-select-label`}>{label}</InputLabel>
<Select
labelId={`${id}-select-label`}
......
planner-front/src/containers/MonthCalendar/MonthCalendar.js
View file @ 55c98e79
......@@ -13,7 +13,7 @@ function MonthCalendar() {
const [dateNow, setDateNow] = useState({month: '', year: ''})
const [worker, setWorker] = useState('');
const [calendarType, setCalendarType] = useState('Месяц');
const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: ''})
const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: null, infoForCell: {startHour: null, endHour: null}})
const [copyTask, setCopyTask] = useState(null)
const [cellSizes, setCellSizes] = useState({})
......@@ -65,7 +65,7 @@ function MonthCalendar() {
return {...prevState, month: prevState.month + 1}
})
}, [])
console.log(currentTask)
const decrementMonth = useCallback(() => {
setDateNow((prevState)=>{
if (prevState.month - 1 === -1) {
......@@ -77,12 +77,24 @@ function MonthCalendar() {
const onChangeCurrentTaskHandler = useCallback((e) => {
const {name, value} = e.target;
if (name === 'startHour' || name === 'endHour') {
setCurrentTask((prevState) => {
return {
...prevState,
infoForCell: {
...prevState.infoForCell,
[name]: parseInt(value)
}
}
});
} else {
setCurrentTask((prevState) => {
return {
...prevState,
[name]: value
}
});
}
}, []);
const createTaskInCellHandler = (dayNumber, dayHour) => {
......@@ -94,9 +106,9 @@ function MonthCalendar() {
}
let hourDue
if (hourFormat) {
hourDue = hour + 0
} else {
hourDue = hour + 1
} else {
hourDue = hour + 2
}
const newTask = {
title:"Задача",
......@@ -104,6 +116,11 @@ function MonthCalendar() {
priority: null,
dateTimeStart: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour, 0)),
dateTimeDue: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hourDue, 59)),
infoForCell: {
startHour: hour,
endHour: hourDue,
startDay: dayNumber
}
}
setCurrentTask((newTask))
}
......@@ -128,85 +145,22 @@ function MonthCalendar() {
setCurrentTask({})
}
const increaseTaskHandler = async (dayNumber, task, isStartTask) => {
const timeEndHour = task.infoForCell.endHour
const timeStartHour = task.infoForCell.startHour
let hourDiff
if (hourFormat) {
hourDiff = 1
} else {
hourDiff = 2
}
let due
let start
if (isStartTask) {
due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeEndHour, 59))
start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeStartHour - hourDiff, 0))
} else {
due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeEndHour + hourDiff, 59))
start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeStartHour, 0))
}
const newObj = {
...task,
dateTimeStart: start,
dateTimeDue: due
}
delete newObj.infoForCell
await dispatch(editCalendarTask(newObj))
setCurrentTask({})
}
const reduceTaskHandler = async (dayNumber, task, isStartTask) => {
const timeEndHour = task.infoForCell.endHour
const timeStartHour = task.infoForCell.startHour
let hourDiff
let hourDiffCheck
if (hourFormat) {
hourDiff = 1
hourDiffCheck = 0
} else {
hourDiff = 2
hourDiffCheck = 1
}
let due
let start
if (task.infoForCell.endHour - task.infoForCell.startHour - hourDiffCheck !== 0) {
if (isStartTask) {
due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeEndHour, 59))
start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeStartHour + hourDiff, 0))
} else {
due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeEndHour - hourDiff, 59))
start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeStartHour, 0))
}
const newObj = {
...task,
const sendNewTaskHandler = async () => {
const timeEndHour = currentTask.infoForCell.endHour
const timeStartHour = currentTask.infoForCell.startHour
const day = currentTask.infoForCell.startDay
const due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, day, timeEndHour - 1, 59))
const start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, day, timeStartHour, 0))
const newTask = {
...currentTask,
dateTimeStart: start,
dateTimeDue: due
}
delete newObj.infoForCell
await dispatch(editCalendarTask(newObj))
setCurrentTask({})
}
}
const sendNewTaskHandler = async () => {
delete newTask.infoForCell
if (currentTask.id) {
delete currentTask.infoForCell
setCurrentTask(() => {
return{
...currentTask,
}}
)
await dispatch(editCalendarTask(currentTask))
await dispatch(editCalendarTask(newTask))
} else {
setCurrentTask(() => {
return{
...currentTask,
}}
)
delete currentTask.infoForCell
await dispatch(addCalendarTask(currentTask))
await dispatch(addCalendarTask(newTask))
}
}
......@@ -263,8 +217,6 @@ function MonthCalendar() {
hoursInDay={hoursInDay}
daysInMonth={daysInMonth}
dragTaskHandler={dragTaskHandler}
increaseTaskHandler={increaseTaskHandler}
reduceTaskHandler={reduceTaskHandler}
createCopyTask={createCopyTask}
copyTask={copyTask}
setCopyTask={setCopyTask}
......
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