Commit 17659ca3 authored by Ibadullina Inabat's avatar Ibadullina Inabat

Merge branch 'development' of…

Merge branch 'development' of ssh://git.attractor-school.com:30022/apollo64/crm-team-one into task-31-feature/connect_registration_login_with_back
parents 62f25d08 ba39a466
......@@ -22,7 +22,7 @@ import {
dateTimeStart:Date| null;
dateTimeDue:Date| null;
accomplish: taskFinishType;
priority: priorityType;
priority: priorityType | null;
author: User;
project:Project|null;
executors:User[]
......@@ -54,9 +54,10 @@ import {
@Column({
type: "enum",
enum: ["A", "B" , "C"],
default: "C"
default: "C",
nullable: true
})
priority!: priorityType
priority!: priorityType | null;
......
......@@ -97,7 +97,7 @@ router.put('/',async(req:Request, res:Response)=> {
.getOne()
if (!user) return res.status(404).send({Message:'user not found'})
const {id,title,description,project,executors,dateTimeDue,dateTimeStart,accomplish,priority} = req.body;
const {id,title,description,project,dateTimeDue,dateTimeStart,accomplish,priority} = req.body;
await dataSource
.createQueryBuilder()
.update(Task)
......@@ -105,7 +105,6 @@ router.put('/',async(req:Request, res:Response)=> {
title: title,
description: description,
project: project,
executors: executors,
dateTimeDue: dateTimeDue,
dateTimeStart: dateTimeStart,
author:user,
......
import { Grid } from "@mui/material";
import { Grid, TextField, Typography } from "@mui/material";
import { useEffect, useState } from "react";
const CalendarStandartCell = ({children, xs, onClick}) => {
const CalendarStandartCell = ({children, xs, currentTask, hours, dayNumber, createTaskInCellHandler, handleOpen, modal}) => {
const [isThisCell, setIsThisCell] = useState(false)
useEffect(()=>{
if(!modal) {
setIsThisCell(false);
}
}, [modal])
return <>
<Grid
item xs={xs}
sx={{borderRight: '1px solid black'}}
onClick={onClick}>
onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}>
{children}
{isThisCell ?
<Grid
sx={{backgroundColor: 'lightgreen', padding: '10px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}
>
<span>
{currentTask.title}
</span>
</Grid> : null}
</Grid>
</>
};
......
import { Grid, TextField } from "@mui/material";
import { Grid, TextField, Typography } from "@mui/material";
import React, { useEffect, useState } from "react";
const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange, hourFormat}) => {
const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen, currentTask}) => {
const [thisCellCurrentTask, setThisCellCurrentTask] = useState({})
const getTaskInDayCell = (tasks, day, hours) => {
const hour = parseInt(hours.split(':')[0])
let hourDiffEnd
let hourDiffStart
if (hourFormat) {
hourDiffEnd = hour + 1
} else {
hourDiffEnd = hour + 2
}
if (hourFormat) {
hourDiffStart = hour - 1
} else {
hourDiffStart = hour - 2
}
const tasksCell = tasks.filter(task=> {
if (year === task.infoForCell.startYear) {
if (month + 1 === task.infoForCell.startMonth) {
......@@ -32,24 +26,36 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange,
})
return tasksCell
}
const tasksCell = getTaskInDayCell(tasks, day, hours)
useEffect(()=>{
if (!currentTask.title) {
setThisCellCurrentTask({})
}
}, [currentTask])
const renderText = (i, task) => {
if (thisCellCurrentTask && i === thisCellCurrentTask.i) {
return (<>{currentTask.title}</>)
} else {
return (<>{task.title}</>)
}
}
return (<>
{tasksCell.length ? tasksCell.map((task, i)=>
{
return (
<Grid key={task.id} sx={{backgroundColor: 'lightgreen'}}>
<TextField
id={task.title}
variant="standard"
value={task.title}
name='title'
onClick={(e)=>{e.stopPropagation(); setCurrentTask(task)}}
onChange={onChange}>
</TextField>
</Grid>)}
) : null }
<Grid
key={task.id}
sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '10px', borderBottom: '1px solid rgb(29, 161, 51);;'}}
onClick={(e)=>{e.stopPropagation(); setCurrentTask(task); handleOpen(e); setThisCellCurrentTask({...task, i: i})}}
>
{renderText(i, task)}
</Grid>
)}
)
: null}
</>)
};
......
import { FormControlLabel, Switch } from "@mui/material";
import { FormControlLabel, Switch} from "@mui/material";
import { useEffect, useState } from "react";
import CalendarRow from "./CalendarRow/CalendarRow";
import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
import CalendarTask from "./CalendarTask/CalendarTask";
import ModalTask from "../UI/ModalTask/ModalTask";
import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalendarModalContent";
function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChangeCellTaskTitle, setCurrentTask, hourFormat, setHourFormat}) {
function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler}) {
const [hoursInDay, setHoursInDay] = useState(['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'])
const [daysInMonth, setDaysInMonth] = useState([])
const [cellSizes, setCellSizes] = useState({})
const [modal, setModal] = useState({open:false, y: 0, x: 0,});
const handleOpen = (e) => {
setModal( {
open: true,
yPage: e.pageY,
xPage: e.pageX,
yDivClick: e.nativeEvent.offsetY,
xDivClick: e.nativeEvent.offsetX,
yDiv: e.target.offsetHeight,
xDiv: e.target.offsetWidth,
})
};
const handleClose = () => {
setModal({...modal, open: false})
setCurrentTask({})
};
useEffect(()=>{
const cells = hoursInDay.length
const xs = 10.8/cells
......@@ -94,17 +114,23 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChang
<CalendarStandartCell
key={i}
item xs={cellSizes.standarCell}
onClick={()=>{createTaskInCellHandler(day.dayNumber, hours)}}
createTaskInCellHandler={createTaskInCellHandler}
hours={hours}
dayNumber={day.dayNumber}
currentTask={currentTask}
handleOpen={handleOpen}
modal={modal.open}
>
<CalendarTask
setCurrentTask={setCurrentTask}
onChange={(e)=>{onChangeCellTaskTitle(e)}}
year={year}
month={month}
tasks={tasks}
day={day}
hours={hours}
hourFormat={hourFormat}
handleOpen={handleOpen}
currentTask={currentTask}
/>
</CalendarStandartCell>
)
......@@ -112,6 +138,19 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChang
</CalendarRow>
)
})}
<ModalTask
modal={modal}
handleClose={()=>{handleClose()}}
>
<MonthCalendarModalContent
title={currentTask.title}
description={currentTask.description}
priority={currentTask.priority}
onChangeCurrentTaskHandler={(e)=>{ onChangeCurrentTaskHandler(e)}}
sendNewTaskHandler={()=>{sendNewTaskHandler(); handleClose()}}
deleteTaskHandler={()=>{deleteTaskHandler(currentTask.id); handleClose()}}
/>
</ModalTask>
</>
);
}
......
import { Button, FormControl, InputLabel, MenuItem, Select, TextField } from "@mui/material";
function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, description, priority, sendNewTaskHandler, deleteTaskHandler}) {
return (<>
<TextField
id="task-description-title"
value={title}
label="Название"
variant="outlined"
sx={{marginBottom: '30px'}}
name='title'
onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
/>
<TextField
id="task-description"
multiline
rows={4}
value={description}
label="Описание"
variant="outlined"
sx={{marginBottom: '30px'}}
name='description'
onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
/>
<FormControl variant="outlined" sx={{width: '160px', marginBottom: '30px'}}>
<InputLabel id="priority-type-label">Приоритет</InputLabel>
<Select
labelId="priority-type-label"
id="priority-type"
label="Приоритет"
sx={{width: '160px'}}
value={priority}
name='priority'
onChange={onChangeCurrentTaskHandler}
>
<MenuItem value={null}>
<em>-- Выберите Приоритет --</em>
</MenuItem>
<MenuItem value={"A"}>A</MenuItem>
<MenuItem value={"B"}>B</MenuItem>
<MenuItem value={"C"}>C</MenuItem>
</Select>
</FormControl>
<Button sx={{marginRight: '40px'}} onClick={sendNewTaskHandler}>Сохранить</Button>
<Button onClick={deleteTaskHandler}>Удалить</Button>
</>);
}
export default MonthCalendarModalContent;
\ No newline at end of file
import Box from '@mui/material/Box';
import Modal from '@mui/material/Modal';
export default function ModalTask({modal, handleClose, children}) {
const style = {
position: 'absolute',
top: modal.yPage - modal.yDiv - modal.yDivClick,
left: modal.xPage + modal.xDiv - modal.xDivClick + 10,
width: 250,
height: 350,
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
};
return (
<>
<Modal
open={modal.open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
BackdropProps={{ style: { backgroundColor: 'rgba(255,255,255, 0)' } }}
>
<Box sx={style}>
{children}
</Box>
</Modal>
</>
);
}
\ No newline at end of file
import { Container } from '@mui/material';
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import MonthCalendarBody from '../../components/MonthCalendarBody/MonthCalendarBody';
import MonthCalendarHeader from '../../components/MonthCalendarHeader/MonthCalendarHeader';
import { addTask, fetchTasks} from '../../store/actions/tasksActions';
import { addTask, deleteTask, editTask, fetchCalendarTasks} from '../../store/actions/tasksActions';
function MonthCalendar() {
const dispatch = useDispatch();
const { tasks } = useSelector(state => state.tasks);
const { calendarTasks } = useSelector(state => state.tasks);
const [hourFormat, setHourFormat] = useState(false);
const [month, setMonth] = useState('')
const [year, setYear] = useState('')
const [worker, setWorker] = useState('');
const [calendarType, setCalendarType] = useState('Месяц');
const [currentTask, setCurrentTask] = useState({})
const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: null, dateTimeStart: '', dateTimeDue:''})
useEffect(()=>{
setMonth(new Date().getMonth())
setYear(new Date().getFullYear())
dispatch(fetchTasks())
dispatch(fetchCalendarTasks())
}, [dispatch])
const onChangeWorkerHandler = (event) => {
......@@ -62,6 +60,16 @@ function MonthCalendar() {
return iso;
}
const onChangeCurrentTaskHandler = (e) => {
const {name, value} = e.target;
setCurrentTask((prevState) => {
return {
...prevState,
[name]: value
}
});
};
const createTaskInCellHandler = (dayNumber, dayHour) => {
const hour = parseInt(dayHour.split(':')[0])
let hourDue
......@@ -73,24 +81,40 @@ function MonthCalendar() {
const newTask = {
title:"Задача",
description:"описание",
priority: null,
dateTimeStart: dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0)),
dateTimeDue: dateToISOLikeButLocal(new Date(year, month, dayNumber, hourDue, 59)),
}
console.log(newTask)
dispatch(addTask(newTask))
setCurrentTask((newTask))
}
const onChangeCellTaskTitle = (e) => {
e.stopPropagation()
const value = e.target.value;
const name = e.target.name;
setCurrentTask({ ...currentTask, [name]: value })
const sendNewTaskHandler = async () => {
if (currentTask.id) {
setCurrentTask(() => {
return{
...currentTask,
}}
)
delete currentTask.infoForCell
await dispatch(editTask(currentTask))
} else {
setCurrentTask(() => {
return{
...currentTask,
}}
)
delete currentTask.infoForCell
await dispatch(addTask(currentTask))
}
}
const deleteTaskHandler = async (taskId) => {
dispatch(deleteTask(taskId))
}
return (
<>
<Container>
<MonthCalendarHeader
month={month}
year={year}
......@@ -105,14 +129,16 @@ function MonthCalendar() {
<MonthCalendarBody
month={month}
year={year}
tasks={tasks}
tasks={calendarTasks}
createTaskInCellHandler={createTaskInCellHandler}
onChangeCellTaskTitle={onChangeCellTaskTitle}
setCurrentTask={setCurrentTask}
hourFormat={hourFormat}
setHourFormat={setHourFormat}
currentTask={currentTask}
onChangeCurrentTaskHandler={onChangeCurrentTaskHandler}
sendNewTaskHandler={sendNewTaskHandler}
deleteTaskHandler={deleteTaskHandler}
/>
</Container>
</>
);
}
......
......@@ -56,7 +56,7 @@ const Register = () => {
}
});
};
console.log(state)
const submitHandler = async (e) => {
e.preventDefault();
const formData = new FormData();
......
export const FETCH_TASKS_REQUEST = "FETCH_TASKS_REQUEST";
export const FETCH_TASKS_SUCCESS = "FETCH_TASKS_SUCCESS";
export const FETCH_TASKS_FAILURE = "FETCH_TASKS_FAILURE";
export const FETCH_CALENDAR_TASKS_REQUEST = "FETCH_CALENDAR_TASKS_REQUEST";
export const FETCH_CALENDAR_TASKS_SUCCESS = "FETCH_CALENDAR_TASKS_SUCCESS";
export const FETCH_CALENDAR_TASKS_FAILURE = "FETCH_CALENDAR_TASKS_FAILURE";
export const ADD_NEW_TASK_REQUEST = "ADD_NEW_TASK_REQUEST";
export const ADD_NEW_TASK_SUCCESS = "ADD_NEW_TASK_SUCCESS";
export const ADD_NEW_TASK_FAILURE = "ADD_NEW_TASK_FAILURE";
export const EDIT_TASK_REQUEST = "EDIT_TASK_REQUEST";
export const EDIT_TASK_SUCCESS = "EDIT_TASK_SUCCESS";
export const EDIT_TASK_FAILURE = "EDIT_TASK_FAILURE";
export const DELETE_TASK_REQUEST = "DELETE_TASK_REQUEST";
export const DELETE_TASK_SUCCESS = "DELETE_TASK_SUCCESS";
export const DELETE_TASK_FAILURE = "DELETE_TASK_FAILURE";
\ No newline at end of file
import { ADD_NEW_TASK_FAILURE, ADD_NEW_TASK_REQUEST, ADD_NEW_TASK_SUCCESS, FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
import {
ADD_NEW_TASK_FAILURE,
ADD_NEW_TASK_REQUEST,
ADD_NEW_TASK_SUCCESS,
DELETE_TASK_FAILURE,
DELETE_TASK_REQUEST,
DELETE_TASK_SUCCESS,
EDIT_TASK_FAILURE,
EDIT_TASK_REQUEST,
EDIT_TASK_SUCCESS,
FETCH_CALENDAR_TASKS_FAILURE,
FETCH_CALENDAR_TASKS_REQUEST,
FETCH_CALENDAR_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
import axios from '../../axiosPlanner'
const fetchTasksRequest = () => {
return {type: FETCH_TASKS_REQUEST}
const fetchCalendarTasksRequest = () => {
return {type: FETCH_CALENDAR_TASKS_REQUEST}
};
const fetchTasksSuccess = (tasks) => {
return {type: FETCH_TASKS_SUCCESS, tasks}
const fetchCalendarTasksSuccess = (tasks) => {
return {type: FETCH_CALENDAR_TASKS_SUCCESS, tasks}
};
const fetchTasksFailure = (error) => {
return {type: FETCH_TASKS_FAILURE, error}
const fetchCalendarTasksFailure = (error) => {
return {type: FETCH_CALENDAR_TASKS_FAILURE, error}
};
export const fetchTasks = () => {
export const fetchCalendarTasks = () => {
return async (dispatch) => {
dispatch(fetchTasksRequest());
dispatch(fetchCalendarTasksRequest());
try {
const response = await axios.get("/tasks");
dispatch(fetchTasksSuccess(response.data.tasks))
dispatch(fetchCalendarTasksSuccess(response.data.tasks))
} catch (error) {
dispatch(fetchTasksFailure(error.response.data));
dispatch(fetchCalendarTasksFailure(error.response.data));
}
}
}
......@@ -44,13 +56,73 @@ export const addTask = (task) => {
try {
await axios.post("/tasks", task, {
headers: {
'Authorization': 'yjBjcPCQwytwrYo9rRuiK'
'Authorization': 'IwGVRaksGTWtnKlOZd7zJ'
}
});
dispatch(addTaskSuccess())
dispatch(fetchTasks())
dispatch(fetchCalendarTasks())
} catch (error) {
dispatch(addTaskFailure(error.response.data));
}
}
}
const editTaskRequest = () => {
return {type: EDIT_TASK_REQUEST}
};
const editTaskSuccess = () => {
return {type: EDIT_TASK_SUCCESS}
};
const editTaskFailure = (error) => {
return {type: EDIT_TASK_FAILURE, error}
};
export const editTask = (task) => {
return async (dispatch, getState) => {
dispatch(editTaskRequest());
const token = getState().users?.user?.token;
try {
await axios.put("/tasks", task, {
headers: {
'Authorization': 'IwGVRaksGTWtnKlOZd7zJ'
}
});
dispatch(editTaskSuccess())
dispatch(fetchCalendarTasks())
} catch (error) {
dispatch(editTaskFailure(error.response.data));
}
}
}
const deleteTaskRequest = () => {
return {type: DELETE_TASK_REQUEST}
};
const deleteTaskSuccess = () => {
return {type: DELETE_TASK_SUCCESS}
};
const deleteTaskFailure = (error) => {
return {type: DELETE_TASK_FAILURE, error}
};
export const deleteTask = (taskId) => {
return async (dispatch, getState) => {
dispatch(deleteTaskRequest());
const token = getState().users?.user?.token;
try {
await axios.delete(`/tasks/${taskId}`, {
headers: {
'Authorization': 'IwGVRaksGTWtnKlOZd7zJ'
}
});
dispatch(deleteTaskSuccess())
dispatch(fetchCalendarTasks())
} catch (error) {
dispatch(deleteTaskFailure(error.response.data));
}
}
}
\ No newline at end of file
import { FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
import {
ADD_NEW_TASK_FAILURE,
ADD_NEW_TASK_REQUEST,
ADD_NEW_TASK_SUCCESS,
EDIT_TASK_FAILURE,
EDIT_TASK_REQUEST,
EDIT_TASK_SUCCESS,
FETCH_CALENDAR_TASKS_FAILURE,
FETCH_CALENDAR_TASKS_REQUEST,
FETCH_CALENDAR_TASKS_SUCCESS,
DELETE_TASK_SUCCESS,
DELETE_TASK_REQUEST,
DELETE_TASK_FAILURE} from "../actionTypes/tasksTypes";
const initialState = {
tasks: [],
calendarTasks: [],
loading: false,
error: null
error: null,
};
const tasksReduсer = (state = initialState, action) => {
switch(action.type) {
case FETCH_TASKS_REQUEST:
case FETCH_CALENDAR_TASKS_REQUEST:
return {...state, loading: true};
case FETCH_TASKS_SUCCESS:
case FETCH_CALENDAR_TASKS_SUCCESS:
const newArr = []
action.tasks.forEach((task)=>{
if (task.dateTimeStart && task.dateTimeDue) {
if (new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() < (4 * 3600000)) {
if (new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() < (10 * 3600000)) {
const dateStart = task.dateTimeStart.split('T')[0]
const timeStart = task.dateTimeStart.split('T')[1]
const timeEnd = task.dateTimeDue.split('T')[1]
......@@ -38,8 +50,26 @@ const tasksReduсer = (state = initialState, action) => {
}
}
})
return {...state, loading: false, tasks: newArr};
case FETCH_TASKS_FAILURE:
return {...state, loading: false, calendarTasks: newArr};
case FETCH_CALENDAR_TASKS_FAILURE:
return {...state, loading: false, error: action.error};
case ADD_NEW_TASK_SUCCESS:
return {...state, loading: false};
case ADD_NEW_TASK_REQUEST:
return {...state, loading: true};
case ADD_NEW_TASK_FAILURE:
return {...state, loading: false, error: action.error};
case EDIT_TASK_SUCCESS:
return {...state, loading: false};
case EDIT_TASK_REQUEST:
return {...state, loading: true};
case EDIT_TASK_FAILURE:
return {...state, loading: false, error: action.error};
case DELETE_TASK_SUCCESS:
return {...state, loading: false};
case DELETE_TASK_REQUEST:
return {...state, loading: true};
case DELETE_TASK_FAILURE:
return {...state, loading: false, error: action.error};
default:
return state;
......
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