y0rune
/
frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added popover and removed onClick event from scheduler

This commit is contained in:
Maciek Głowacki 2020-09-19 00:17:23 +02:00
parent 0ae374a0fb
commit 44150eb322
4 changed files with 90 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Dropdown.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useContext, useEffect, MouseEvent } from 'react';
import React, { useState, useContext, useEffect, MouseEvent, ChangeEvent } from 'react';
import axios from 'axios';
import { Input } from '@material-ui/core';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
@ -64,13 +64,10 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
}, [input, open, basket]);
useEffect(() => {
if (clearInput) {
setInput('');
handleClearInput();
}
clearInput && (setInput(''), handleClearInput());
}, [clearInput]);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
const handleChange = (event: ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
const handleClick = () => setOpen(true);

30
src/components/Scheduler.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useLayoutEffect, useRef } from 'react';
import React, { useEffect, MouseEvent, useRef } from 'react';
import { useState } from 'react';
import { SchedulerEvents } from './SchedulerEvents';
import { days, hours } from '../constants/index';
@ -44,7 +44,6 @@ const T = styled.table`
`;
export const Scheduler = () => {
const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
const cellRef = useRef<HTMLDivElement>(null);
const [cellWidth, setCellWidth] = useState(0);
const [cellTop, setCellTop] = useState(0);
@ -52,10 +51,6 @@ export const Scheduler = () => {
const wrapperRef = useRef<HTMLDivElement>(null);
const [wrapperHeight, setWrapperHeight] = useState(0);
useEffect(() => {
console.log(cellTop);
}, [cellTop]);
useEffect(() => {
const handleResize = () => {
if (cellRef.current && wrapperRef.current) {
@ -68,27 +63,6 @@ export const Scheduler = () => {
window.addEventListener('resize', handleResize);
}, []);
useEffect(() => {
const displayEvents = () => {
currentEventsIds.map((eventId: string) => {
const event = document.getElementById(eventId);
if (event) {
event.style.backgroundColor = 'blue';
}
});
};
displayEvents();
}, [currentEventsIds]);
const handleClick = (e: React.MouseEvent) => {
const cellId = e.currentTarget.id;
// const column = cellId.slice(0, 9);
// const row = cellId.slice(1);
//const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
console.log(currentEventsIds)
setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, cellId]);
};
return (
<>
<SchedulerWrapper ref={wrapperRef}>
@ -114,7 +88,7 @@ export const Scheduler = () => {
</TableRow>
))}
</TableBody>
<SchedulerEvents onClick={handleClick} cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 13}/>
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 13} />
</SchedulerWrapper>
</>
);

39
src/components/SchedulerEvents.tsx
View File

@ -7,10 +7,9 @@ interface SchedulerEventsProps {
cellTop: number;
cellWidth: number;
cellHeight: number;
onClick: (e: MouseEvent) => void;
}
export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight, onClick }: SchedulerEventsProps) => {
export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => {
const { basket } = useContext(coursesContext)!;
const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
@ -29,27 +28,20 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight, onClick }: Sch
useEffect(() => {
function mapGroupTimeToEventRow(basket: Array<Basket>) {
const classes = basket.map(({ classes, name }) => ({ ...classes, name })).filter((cl) => cl !== null) as Array<
Group & { name: string }
>;
const lectures = basket.map(({ lecture, name }) => ({ ...lecture, name })).filter((lec) => lec !== null) as Array<
Group & { name: string }
>;
const classes = basket.map(({ classes, name }) => ({ ...classes, name })) as Array<Group & { name: string }>;
const lectures = basket.map(({ lecture, name }) => ({ ...lecture, name })) as Array<Group & { name: string }>;
const merged = [...classes, ...lectures];
console.log('merged');
console.log(merged);
if (merged.length >= 1) {
const groupsMapped = merged.map(({ id, day, lecturer, room, time, name }) => ({
id,
day,
lecturer,
room,
eventRow: groupTimeToEventRowMapping[time],
name,
}));
setChoosenGroupsMappedToEvents(groupsMapped);
}
//deleted if statement, maybe it is needed
const groupsMapped = merged.map(({ id, day, lecturer, room, time, name }) => ({
id,
day: day === 5 ? 4 : day,
lecturer,
room,
eventRow: groupTimeToEventRowMapping[time],
name,
}));
setChoosenGroupsMappedToEvents(groupsMapped);
}
mapGroupTimeToEventRow(basket);
}, [basket]);
@ -58,11 +50,8 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight, onClick }: Sch
<div>
{[...Array(6)].map((_, index) => (
<SchedulerRow
onClick={onClick}
key={index}
groups={choosenGroupsMappedToEvents.filter((group: any) => {
return group.eventRow === index;
})}
groups={choosenGroupsMappedToEvents.filter((group: any) => group.eventRow === index)}
indexRow={index}
cellTop={
index === 0

88
src/components/SchedulerRow.tsx
View File

@ -1,6 +1,20 @@
import React, { MouseEvent } from 'react';
import { Group } from '../types';
import styled from 'styled-components';
import styled from 'styled-components/macro';
import Popover from '@material-ui/core/Popover';
import Typography from '@material-ui/core/Typography';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
popover: {
pointerEvents: 'none',
},
paper: {
padding: theme.spacing(1),
},
}),
);
interface SchedulerEventProps {
eventIndex: number;
@ -11,14 +25,15 @@ interface SchedulerEventProps {
const SchedulerEvent = styled.div<SchedulerEventProps>`
position: absolute;
display: flex;
top: ${({ cellTop }) => cellTop}px;
left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
z-index: 2;
`;
const ClassDiv = styled.div<SchedulerEventProps>`
width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
const Classes = styled.div<SchedulerEventProps>`
z-index: 2;
border-radius: 10px;
padding-left: 5px;
@ -31,15 +46,27 @@ interface SchedulerRowProps {
cellTop: number;
cellWidth: number;
cellHeight: number;
onClick: (e: MouseEvent) => void;
}
export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight, onClick }: SchedulerRowProps) => {
export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
//looks weird
const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
setAnchorEl(event.currentTarget);
};
const handlePopoverClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
return (
<>
{[...Array(5)].map((_, eventIndex) => (
<SchedulerEvent
onClick={onClick}
eventIndex={eventIndex}
cellTop={cellTop}
cellWidth={cellWidth}
@ -50,16 +77,43 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight,
{groups.map(
(group, index) =>
group.day === eventIndex && (
<ClassDiv
eventIndex={eventIndex}
cellTop={cellTop}
cellWidth={cellWidth}
cellHeight={cellHeight}
id={`eventRow${indexRow}eventCol${eventIndex}`}
key={index}
>
{groups[index].name}
</ClassDiv>
<>
<Classes
eventIndex={eventIndex}
cellTop={cellTop}
cellWidth={cellWidth}
cellHeight={cellHeight}
id={`eventRow${indexRow}eventCol${eventIndex}`}
key={index}
aria-owns={open ? 'mouse-over-popover' : undefined}
aria-haspopup="true"
onMouseEnter={handlePopoverOpen}
onMouseLeave={handlePopoverClose}
>
{groups[index].name}
</Classes>
<Popover
id="mouse-over-popover"
className={classes.popover}
classes={{
paper: classes.paper,
}}
open={open}
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
onClose={handlePopoverClose}
disableRestoreFocus
>
<Typography>I use Popover.</Typography>
</Popover>
</>
),
)}
</SchedulerEvent>