Skip to content

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

#112 Оптимизировал действия с месячным календарем, а также обновил логику… 

#112 Оптимизировал действия с месячным календарем, а также обновил логику перехода на другой календарь
parent 153169e5
Show whitespace changes
Inline Side-by-side
Showing with 94 additions and 101 deletions
planner-front/src/App.js
View file @ 6e0eadad
......@@ -71,15 +71,6 @@ const App = () => {
</ProtectedRoute>
} />
<Route path={"/week/:id"} element={
<ProtectedRoute
isAllowed={user}
redirectUrl={"/sign-in"}
>
<WeekCalendar />
</ProtectedRoute>
} />
<Route path={"/month"} element={
<ProtectedRoute
isAllowed={user}
......@@ -89,15 +80,6 @@ const App = () => {
</ProtectedRoute>
} />
<Route path={"/month/:id"} element={
<ProtectedRoute
isAllowed={user}
redirectUrl={"/sign-in"}
>
<MonthCalendar></MonthCalendar>
</ProtectedRoute>
} />
<Route path={"/my-tasks"} element={
<ProtectedRoute
isAllowed={user}
......
planner-front/src/components/Calendars/CalendarModalTaskContent/CalendarModalTaskContent.js
View file @ 6e0eadad
......@@ -2,26 +2,11 @@ import { Button, TextField } from "@mui/material";
import { memo } from "react";
import { priorities } from "../../../constants";
import CustomSelect from '../../UI/СustomSelect/СustomSelect'
import { isValidate } from "./Helpers";
function CalendarModalTaskContent({ title, onChangeCurrentTaskHandler, description, priority, sendNewTaskHandler, deleteTaskHandler, startHour, endHour, id }) {
const isValidate = () => {
if (title) {
const startHourInt = parseInt(startHour)
const endHourInt = parseInt(endHour)
if (startHourInt >= 8 && startHourInt <= 24) {
if (endHourInt >= 8 && endHourInt <= 24) {
if (startHourInt < endHourInt) {
return true
}
}
} else {
return false
}
}
}
return (<>
<TextField
id="task-description-title"
......@@ -72,7 +57,7 @@ function CalendarModalTaskContent({ title, onChangeCurrentTaskHandler, descripti
/>
</div>
<div style={{ display: 'flex', gap: '20px', margin: '10px 0' }}>
<Button id='test_button_save_task' onClick={sendNewTaskHandler} disabled={!isValidate()}>Сохранить</Button>
<Button id='test_button_save_task' onClick={sendNewTaskHandler} disabled={!isValidate(title, startHour, endHour)}>Сохранить</Button>
<Button onClick={deleteTaskHandler} disabled={!id}>Удалить</Button>
</div>
</>);
......
planner-front/src/components/Calendars/CalendarModalTaskContent/Helpers.js 0 → 100644
View file @ 6e0eadad
export const isValidate = (title, startHour, endHour) => {
if (title) {
const startHourInt = parseInt(startHour)
const endHourInt = parseInt(endHour)
if (startHourInt >= 8 && startHourInt <= 24) {
if (endHourInt >= 8 && endHourInt <= 24) {
if (startHourInt < endHourInt) {
return true
}
}
} else {
return false
}
}
}
\ No newline at end of file
planner-front/src/components/Calendars/CalendarModalWorkerContent/CalendarModalWorkerContent.js
View file @ 6e0eadad
import { Autocomplete, Button, TextField } from "@mui/material";
import { memo } from "react";
import CustomAutocomplete from "../../UI/CustomAutocomplete/CustomAutocomplete";
function CalendarModalWorkerContent({ allUserProjects, onChangeProjectHandler, onChangeWorkerHandler, workerInfo, workers, handleClose, onChangeCalendarUser}) {
function CalendarModalWorkerContent({ allUserProjects, onChangeProjectHandler, onChangeWorkerHandler, workerInfo, workers, handleClose, onChangeCalendarUser }) {
return (<>
<Autocomplete
id="choose-project"
freeSolo
<CustomAutocomplete
name={'project'}
label={'Проекты'}
options={allUserProjects}
getOptionLabel={(item) => item.title || ""}
onChange={onChangeProjectHandler}
name={"project"}
value={workerInfo.project}
renderInput={(params) => <TextField
style={{ marginBottom: "15px" }}
label={"Проект"}
state={workerInfo.project}
{...params} />}
getOptionLabel={(item) => item.title || ""}
style={{ marginBottom: '15px' }}
/>
{workerInfo.project ?
<>
<Autocomplete
id="choose-worker"
freeSolo
<CustomAutocomplete
name={'worker'}
label={'Участник'}
options={workers}
getOptionLabel={(item) => item?.user?.displayName || ""}
onChange={(e, value) => { onChangeWorkerHandler(e, value) }}
name={"worker"}
onChange={onChangeWorkerHandler}
value={workerInfo.worker}
renderInput={(params) => <TextField
label={"Участник"}
state={workerInfo.worker}
{...params} />}
getOptionLabel={(item) => item?.user?.displayName || ""}
style={{ marginBottom: '15px' }}
/>
<div style={{ display: 'flex', justifyContent: 'space-between', margin: '10px 0' }}>
<Button onClick={()=>{onChangeCalendarUser()}} >Выбрать</Button>
<Button onClick={() => { onChangeCalendarUser() }} >Выбрать</Button>
<Button onClick={() => handleClose()}>Отмена</Button>
</div>
</>
......
planner-front/src/components/Calendars/MonthCalendar/MonthCalendarBody/MonthCalendarBody.js
View file @ 6e0eadad
import { Box, FormControlLabel, Switch } from "@mui/material";
import { useState } from "react";
import { useCallback, useState } from "react";
import CalendarRow from "../../CalendarRow/CalendarRow";
import CalendarSmallCell from "../../CalendarSmallCell/CalendarSmallCell";
import CalendarStandartCell from "../../CalendarStandartCell/CalendarStandartCell";
......@@ -12,7 +12,7 @@ function MonthCalendarBody({ month, year, tasks, createTaskInCellHandler, curren
const [currentLine, setCurrentLine] = useState('')
const [modal, setModal] = useState({ open: false, y: 0, x: 0, });
const handleOpen = (e) => {
const handleOpen = useCallback((e) => {
setModal({
open: true,
yClickСordinates: e.clientY,
......@@ -22,12 +22,12 @@ function MonthCalendarBody({ month, year, tasks, createTaskInCellHandler, curren
yDiv: e.target.offsetHeight,
xDiv: e.target.offsetWidth,
})
};
},[])
const handleClose = () => {
const handleClose = useCallback(() => {
setModal({ ...modal, open: false })
setCurrentTask({})
};
}, [modal, setCurrentTask])
return (
<Box style={{ marginBottom: '30px' }}>
......
planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/CalendarColumnDayWeek/CalendarColumnDayWeek.js
View file @ 6e0eadad
......@@ -40,11 +40,11 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
{linesInDay?.map((line, i) => {
const boxes = getTasksWithInfoForPosition(line, sortedTasks, linesInDay, columnDaySize.height, hours)
return (<>
{boxes.map((task, index) => {
{boxes.map((task) => {
const { width, left, zIndex } = getWidthLeftZIndex(task, columnDaySize.width, i)
return (
<CalendarWeekTask
key={index}
key={task.task.id}
width={width}
height={task.height}
left={left}
......
planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/CalendarColumnDayWeek/Helpers.js
View file @ 6e0eadad
......@@ -11,7 +11,6 @@ export const getTasksWithInfoForPosition = (line, sortedTasks, linesInDay, colum
})
const step = columnDayHeight / hours.length
if (taskIsThere) {
taskIsThere.lastHour = i
taskIsThere.height += step
let tasksInHour = 0
for (let line of linesInDay) {
......@@ -33,8 +32,6 @@ export const getTasksWithInfoForPosition = (line, sortedTasks, linesInDay, colum
tasksInHour: tasksInHour,
top: step * i,
height: step,
firstHour: i,
lastHour: i,
task: sortedTasks[line[i].split('-')[1]]
})
}
......
planner-front/src/components/UI/CustomAutocomplete/CustomAutocomplete.js 0 → 100644
View file @ 6e0eadad
import { Autocomplete, TextField } from "@mui/material";
import { memo } from "react";
function CustomAutocomplete({ options, onChange, value, name, label, style, getOptionLabel }) {
return (<>
<Autocomplete
id={name}
freeSolo
options={options}
getOptionLabel={getOptionLabel}
onChange={(e, value) => { onChange(e, value) }}
name={name}
value={value}
renderInput={(params) => <TextField
style={style}
label={label}
state={value}
{...params} />}
/>
</>);
}
export default memo(CustomAutocomplete);
\ No newline at end of file
planner-front/src/containers/MonthCalendar/MonthCalendar.js
View file @ 6e0eadad
import { useEffect, useCallback, useState, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate, useParams } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import CalendarModalWorkerContent from '../../components/Calendars/CalendarModalWorkerContent/CalendarModalWorkerContent';
import MonthCalendarBody from '../../components/Calendars/MonthCalendar/MonthCalendarBody/MonthCalendarBody';
import MonthCalendarHeader from '../../components/Calendars/MonthCalendar/MonthCalendarHeader/MonthCalendarHeader';
......@@ -12,11 +12,10 @@ import { fetchCurrentCalendarDisplayName } from '../../store/actions/usersAction
function MonthCalendar() {
const dispatch = useDispatch();
const navigate = useNavigate()
const { calendarTasks } = useSelector(state => state.tasks);
const { user, currentCalendarDisplayName } = useSelector(state => state.users);
const { allUserProjects, project } = useSelector(state => state.projects)
const params = useParams()
const [hourFormat, setHourFormat] = useState(false);
const [dateNow, setDateNow] = useState({ month: '', year: '' })
......@@ -25,6 +24,7 @@ function MonthCalendar() {
const [copyTask, setCopyTask] = useState(null)
const [cellSizes, setCellSizes] = useState({})
const [userId, setUserId] = useState('')
const [userCalendarId, setUserCalendarId] = useState(null)
const [modal, setModal] = useState(false)
useEffect(() => {
......@@ -32,22 +32,25 @@ function MonthCalendar() {
month: new Date().getMonth(),
year: new Date().getFullYear(),
})
if (params.id) {
setUserId(params.id)
dispatch(fetchCalendarTasks(params.id))
dispatch(fetchCurrentCalendarDisplayName(params.id))
}, [dispatch])
useEffect(() => {
if (userCalendarId) {
setUserId(userCalendarId)
dispatch(fetchCalendarTasks(userCalendarId))
dispatch(fetchCurrentCalendarDisplayName(userCalendarId))
} else {
setUserId(user.id)
dispatch(fetchCalendarTasks(user.id))
dispatch(fetchCurrentCalendarDisplayName(user.id))
}
}, [dispatch])
}, [userCalendarId, dispatch, user.id])
useEffect(() => {
if (workerInfo.project) {
dispatch(fetchProject(workerInfo.project.id))
}
}, [workerInfo.project])
}, [workerInfo.project, dispatch])
const hoursInDay = useMemo(() => {
let arr
......@@ -120,7 +123,7 @@ function MonthCalendar() {
}
}, []);
const createTaskInCellHandler = (dayNumber, dayHour) => {
const createTaskInCellHandler = useCallback((dayNumber, dayHour) => {
let hour
if (!isNaN(dayHour)) {
hour = dayHour
......@@ -146,9 +149,9 @@ function MonthCalendar() {
}
}
setCurrentTask((newTask))
}
}, [dateNow.month, dateNow.year, hourFormat])
const dragTaskHandler = async (dayNumber, hour) => {
const dragTaskHandler = useCallback(async (dayNumber, hour) => {
const hourDiff = currentTask.infoForCell.endHour - currentTask.infoForCell.startHour
const lastHour = hoursInDay[hoursInDay.length - 1].split(':')[0]
let due
......@@ -168,9 +171,9 @@ function MonthCalendar() {
delete newTask.infoForCell
await dispatch(editCalendarTask(newTask, currentTask.id, userId))
setCurrentTask({})
}
}, [currentTask, dateNow.month, dateNow.year, dispatch, hoursInDay, userId])
const sendNewTaskHandler = async () => {
const sendNewTaskHandler = useCallback(async () => {
const timeEndHour = currentTask.infoForCell.endHour
const timeStartHour = currentTask.infoForCell.startHour
const day = currentTask.infoForCell.startDay
......@@ -198,9 +201,9 @@ function MonthCalendar() {
delete newTask.id
await dispatch(addCalendarTask(newTask, userId))
}
}
}, [currentTask, dateNow.month, dateNow.year, dispatch, user.id, userId])
const createCopyTask = async (dayNumber, hour) => {
const createCopyTask = useCallback(async (dayNumber, hour) => {
const hourDiff = copyTask.infoForCell.endHour - copyTask.infoForCell.startHour
const lastHour = hoursInDay[hoursInDay.length - 1].split(':')[0]
let due
......@@ -220,35 +223,31 @@ function MonthCalendar() {
delete newTask.id
await dispatch(addCopyCalendarTask(newTask, userId))
setCopyTask(null)
}
}, [copyTask, dateNow.month, dateNow.year, dispatch, hoursInDay, userId])
const deleteTaskHandler = async (taskId) => {
const deleteTaskHandler = useCallback(async (taskId) => {
dispatch(deleteCalendarTask(taskId, userId))
}
}, [dispatch, userId])
const handleClose = () => {
const handleClose = useCallback(() => {
setModal(false)
setWorkerInfo({ project: '', worker: '' })
}
const handleOpen = async () => {
}, [])
const handleOpen = useCallback(async () => {
if (user.id === userId) {
await dispatch(fetchAllUserProjects())
setModal(true)
} else {
navigate("/month")
setWorkerInfo({ project: '', worker: '' })
setUserId(user.id)
dispatch(fetchCalendarTasks(user.id))
dispatch(fetchCurrentCalendarDisplayName(user.id))
}
dispatch(setUserCalendarId(null))
}
const onChangeCalendarUser = () => {
navigate(`/month/${workerInfo.worker.user.id}`)
}, [dispatch, user.id, userId])
const onChangeCalendarUser = useCallback(() => {
setModal(false)
setUserId(workerInfo.worker.user.id)
dispatch(fetchCalendarTasks(workerInfo.worker.user.id))
dispatch(fetchCurrentCalendarDisplayName(workerInfo.worker.user.id))
}
dispatch(setUserCalendarId(workerInfo.worker.user.id))
setWorkerInfo({ project: '', worker: '' })
}, [dispatch, workerInfo?.worker?.user?.id])
return (
<>
......
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