design changes
This commit is contained in:
Maciek Głowacki
parent
3ae44b5bcf
commit
e7d8e024d6
@ -66,7 +66,7 @@ interface ExpandIconProps {
|
||||
selected: boolean;
|
||||
}
|
||||
|
||||
const ExpandIcon = styled(Expand)<ExpandIconProps>`
|
||||
export const ExpandIcon = styled(Expand)<ExpandIconProps>`
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
max-width: 20px;
|
||||
@ -144,10 +144,14 @@ export const CourseCard = ({ course }: CourseCardProps) => {
|
||||
} = useContext(coursesContext)!;
|
||||
const [isSelected, setSelected] = useState(false);
|
||||
const groups = [...course.lectures!, ...course.classes!];
|
||||
const [courseLecture, courseClasses] = selectBasketCourseGroups(course.id);
|
||||
const basketCourseGroups = useMemo(() => selectBasketCourseGroups(course.id), []);
|
||||
const [previous, setPrevious] = useState(basketCourseGroups);
|
||||
// console.log('lecture is: ', courseLecture);
|
||||
// console.log('class is: ', courseClasses);
|
||||
const onGroupClick = (group: Group, courseId: number) => changeGroupInBasket(group, courseId);
|
||||
const onGroupClick = (group: Group, courseId: number) => {
|
||||
setPrevious((prev) => (group.type === GroupType.CLASS ? { ...prev, classes: group } : { ...prev, lecture: group }));
|
||||
changeGroupInBasket(group, courseId);
|
||||
};
|
||||
|
||||
return (
|
||||
<CourseCardWrapper>
|
||||
@ -168,20 +172,23 @@ export const CourseCard = ({ course }: CourseCardProps) => {
|
||||
key={index}
|
||||
onClick={() => onGroupClick(group, course.id)}
|
||||
onMouseEnter={() => {
|
||||
if (group.type === GroupType.CLASS && courseClasses !== undefined) {
|
||||
if (group.type === GroupType.CLASS) {
|
||||
changeGroupInBasket(group, course.id);
|
||||
// setTimeout(()=> { changeHoveredGroup(courseClasses)},[500])
|
||||
|
||||
}
|
||||
if (group.type === GroupType.LECTURE && courseLecture !== undefined) {
|
||||
if (group.type === GroupType.LECTURE) {
|
||||
changeGroupInBasket(group, course.id);
|
||||
// setTimeout(()=> { changeHoveredGroup(courseLecture)},[500])
|
||||
}
|
||||
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
if (hoveredGroup) {
|
||||
changeGroupInBasket(hoveredGroup, course.id);
|
||||
if (hoveredGroup.type === GroupType.CLASS && previous.classes !== undefined) {
|
||||
changeGroupInBasket(previous.classes, course.id);
|
||||
}
|
||||
if (hoveredGroup.type === GroupType.LECTURE && previous.lecture !== undefined) {
|
||||
changeGroupInBasket(previous.lecture, course.id);
|
||||
}
|
||||
changeHoveredGroup(null);
|
||||
}
|
||||
}}
|
||||
|
||||
@ -34,7 +34,7 @@ const CourseContainer = styled.div`
|
||||
background-color: #f2f4f7;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
scroll-snap-align: end;
|
||||
/* scroll-snap-align: end; */
|
||||
:hover {
|
||||
background-color: #eceef4;
|
||||
cursor: pointer;
|
||||
|
||||
@ -5,12 +5,11 @@ import Popover from '@material-ui/core/Popover';
|
||||
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
|
||||
import { MONDAY_TO_FRIDAY } from '../constants';
|
||||
import { coursesContext } from '../contexts/CoursesProvider';
|
||||
import { group } from 'console';
|
||||
import { ClickAwayListener, Popper } from '@material-ui/core';
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
popover: {
|
||||
pointerEvents: 'none',
|
||||
fontSize: '14px',
|
||||
},
|
||||
paper: {
|
||||
@ -56,7 +55,7 @@ const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
z-index: 20000;
|
||||
font-size: 0.65vw;
|
||||
line-height: normal;
|
||||
border-radius: 10px;
|
||||
@ -129,28 +128,30 @@ const getGroupsPerDay = (groups: Array<SchedulerEvent>) => {
|
||||
};
|
||||
|
||||
export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }: SchedulerRowProps) => {
|
||||
const { hoveredGroup, selectBasketNames } = useContext(coursesContext)!;
|
||||
console.log('hovered group is: ', hoveredGroup);
|
||||
console.log('groups: ', groups);
|
||||
const basketNames = useMemo(() => selectBasketNames(), [selectBasketNames]);
|
||||
console.log('basket names: ', basketNames);
|
||||
console.log('groups: ', groups);
|
||||
const { hoveredGroup } = useContext(coursesContext)!;
|
||||
const classes = useStyles();
|
||||
const groupsPerDay = getGroupsPerDay(groups);
|
||||
const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
|
||||
const [popoverId, setPopoverId] = useState<string | null>(null);
|
||||
//looks weird
|
||||
const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
|
||||
console.log('I was clicked!!!!');
|
||||
setAnchorEl(event.currentTarget);
|
||||
setPopoverId(event.currentTarget.id);
|
||||
};
|
||||
|
||||
const handlePopoverClose = () => {
|
||||
setAnchorEl(null);
|
||||
const handlePopoverClose = (e: MouseEvent<any>) => {
|
||||
console.log('current target:', e.currentTarget);
|
||||
console.log(' target:', e.target);
|
||||
setPopoverId(null);
|
||||
setAnchorEl(null);
|
||||
console.log('click awayyy');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log('anchorEl: ', anchorEl);
|
||||
}, [anchorEl]);
|
||||
const open = Boolean(anchorEl);
|
||||
const id = open ? 'simple-popover' : undefined;
|
||||
|
||||
return (
|
||||
<div>
|
||||
@ -168,6 +169,7 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
|
||||
group.day === eventIndex && (
|
||||
<Fragment key={index}>
|
||||
<StyledSchedulerEvent
|
||||
aria-describedby={id}
|
||||
isHovered={group.id === hoveredGroup?.id}
|
||||
groupType={group.type}
|
||||
cellWidth={cellWidth}
|
||||
@ -176,8 +178,7 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
|
||||
key={index}
|
||||
aria-owns={open ? `mouse-over-popover` : undefined}
|
||||
aria-haspopup="true"
|
||||
onMouseEnter={(e) => handlePopoverOpen(e)}
|
||||
onMouseLeave={handlePopoverClose}
|
||||
onClick={(e) => handlePopoverOpen(e)}
|
||||
>
|
||||
<ClassWrap>
|
||||
<BoldParagraph isThree={groupsPerDay[group.day] >= 3}>{groups[index].name}</BoldParagraph>
|
||||
@ -194,7 +195,7 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
|
||||
</ClassWrap>
|
||||
</StyledSchedulerEvent>
|
||||
<Popover
|
||||
id={`mouse-over-popover`}
|
||||
id={id}
|
||||
className={classes.popover}
|
||||
classes={{
|
||||
paper: classes.paper,
|
||||
@ -212,7 +213,12 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
|
||||
onClose={handlePopoverClose}
|
||||
disableRestoreFocus
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div
|
||||
style={{ display: 'flex', flexDirection: 'column', zIndex: 20000 }}
|
||||
onClick={() => {
|
||||
console.log('XDD');
|
||||
}}
|
||||
>
|
||||
<p style={{ margin: '7px 0 7px 0', fontWeight: 'bold' }}>{groups[index].name}</p>
|
||||
<p style={{ margin: '2px 0 2px 0' }}>
|
||||
<PopoverSpan>Prowadzący:</PopoverSpan> {groups[index].lecturer}
|
||||
|
||||
95
src/components/SelectMenu.tsx
Normal file
95
src/components/SelectMenu.tsx
Normal file
@ -0,0 +1,95 @@
|
||||
import { ClickAwayListener } from '@material-ui/core';
|
||||
import React, { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { ExpandIcon } from './CourseCard';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
width: 10%;
|
||||
margin-top: 15px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #f1f2f5;
|
||||
color: black;
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
padding-left: 15px;
|
||||
cursor: pointer;
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
user-select: none;
|
||||
`;
|
||||
const Header = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
const HeaderTitle = styled.div`
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
`;
|
||||
const List = styled.ul`
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f2f4f7;
|
||||
`;
|
||||
const ListItem = styled.li`
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 16px;
|
||||
user-select: none;
|
||||
font-weight: 400;
|
||||
:hover {
|
||||
background-color: #eceef4;
|
||||
}
|
||||
`;
|
||||
const ExpandIconSelect = styled(ExpandIcon)`
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
`;
|
||||
export const SelectMenu = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selectedOption, setSelectedOption] = useState('przedmioty');
|
||||
return (
|
||||
<ClickAwayListener
|
||||
onClickAway={() => {
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<Wrapper>
|
||||
<Header
|
||||
onClick={() => {
|
||||
console.log('clicked');
|
||||
setIsOpen(!isOpen);
|
||||
}}
|
||||
>
|
||||
<HeaderTitle>{selectedOption}</HeaderTitle>
|
||||
<ExpandIconSelect selected={isOpen} />
|
||||
</Header>
|
||||
{isOpen && (
|
||||
<List>
|
||||
<ListItem
|
||||
onClick={() => {
|
||||
setSelectedOption('przedmioty');
|
||||
}}
|
||||
>
|
||||
przedmioty
|
||||
</ListItem>
|
||||
<ListItem
|
||||
onClick={() => {
|
||||
setSelectedOption('studenci');
|
||||
}}
|
||||
>
|
||||
studenci
|
||||
</ListItem>
|
||||
</List>
|
||||
)}
|
||||
</Wrapper>
|
||||
</ClickAwayListener>
|
||||
);
|
||||
};
|
||||
@ -7,6 +7,7 @@ import PolishIcon from '../assets/poland.svg';
|
||||
import EnglishIcon from '../assets/united-kingdom.svg';
|
||||
import styled from 'styled-components/macro';
|
||||
import ClickAwayListener from 'react-click-away-listener';
|
||||
import { SelectMenu } from './SelectMenu';
|
||||
|
||||
const Topbar = styled.div`
|
||||
background-color: #e3e5ed;
|
||||
@ -51,11 +52,12 @@ const FlexboxColumn = styled.div`
|
||||
`;
|
||||
|
||||
const InputWrapper = styled.div`
|
||||
width: 95%;
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
max-height: 40px;
|
||||
background-color: #f2f4f7;
|
||||
border-radius: 6px;
|
||||
align-items: center;
|
||||
border-radius: 0 6px 6px 0;
|
||||
&:hover {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
@ -91,17 +93,17 @@ const Input = styled.input`
|
||||
font-size: 18px;
|
||||
background-color: #f1f2f5;
|
||||
height: 40px;
|
||||
max-height: 40px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
margin-left: 5px;
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const CloseIcon = styled(Close)`
|
||||
align-self: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 5px;
|
||||
@ -130,6 +132,10 @@ const Icon = styled.img`
|
||||
}
|
||||
`;
|
||||
|
||||
export const Flexbox = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
interface TopbarProps {
|
||||
handleTransfer: (e: MouseEvent) => void;
|
||||
}
|
||||
@ -173,13 +179,16 @@ export default function ({ handleTransfer }: TopbarProps) {
|
||||
</LogoWrapper>
|
||||
<FlexboxColumn>
|
||||
<ClickAwayListener onClickAway={handleCloseDropdown}>
|
||||
<Flexbox>
|
||||
<SelectMenu />
|
||||
|
||||
<InputWrapper>
|
||||
<SelectSearch value={value} onChange={Change}>
|
||||
{/* <SelectSearch value={value} onChange={Change}>
|
||||
<SelectOption value="przedmiot">Przedmiot</SelectOption>
|
||||
<SelectOption value="student">Student</SelectOption>
|
||||
</SelectSearch>
|
||||
</SelectSearch> */}
|
||||
<Input
|
||||
placeholder={`Wyszukaj ${value}...`}
|
||||
placeholder={`Wyszukaj...`}
|
||||
onChange={handleChange}
|
||||
value={input}
|
||||
onFocus={() => {
|
||||
@ -188,6 +197,7 @@ export default function ({ handleTransfer }: TopbarProps) {
|
||||
/>
|
||||
<CloseIcon onClick={handleClearInput} />
|
||||
</InputWrapper>
|
||||
</Flexbox>
|
||||
<Dropdown open={open} input={input} handleCloseDropdown={handleCloseDropdown} />
|
||||
</ClickAwayListener>
|
||||
</FlexboxColumn>
|
||||
|
||||
@ -7,7 +7,9 @@ import CloseIcon from '@material-ui/icons/Close';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledCloseIcon = styled(CloseIcon)`
|
||||
color: #000000;
|
||||
&:hover {
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
@ -25,7 +27,7 @@ interface CourseContext {
|
||||
selectSchedulerEvents: () => Array<SchedulerEvent>;
|
||||
selectBasketNames: () => Array<string>;
|
||||
selectBasketCourses: () => Array<Course>;
|
||||
selectBasketCourseGroups: (courseId: number) => Array<Group | undefined>;
|
||||
selectBasketCourseGroups: (courseId: number) => { lecture: Group | undefined; classes: Group | undefined };
|
||||
}
|
||||
export const coursesContext = createContext<CourseContext | undefined>(undefined);
|
||||
|
||||
@ -41,9 +43,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
||||
const [courses, setCourses] = useState<Array<Course>>([]);
|
||||
const [basket, setBasket] = useState<Array<Basket>>([]);
|
||||
const [hoveredGroup, setHoveredGroup] = useState<Group | undefined | null>(null);
|
||||
useEffect(() => {
|
||||
console.log('actually hovered group is: ', hoveredGroup);
|
||||
}, [hoveredGroup]);
|
||||
const selectBasketIds = () => {
|
||||
const classesIds = basket.map((course) => course?.classes?.id).filter((course) => course !== undefined);
|
||||
const lecturesIds = basket.map((course) => course?.lecture?.id).filter((course) => course !== undefined);
|
||||
@ -78,9 +77,9 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
||||
const selectBasketCourseGroups = (courseId: number) => {
|
||||
const course = basket.find(({ id }) => id === courseId);
|
||||
if (course !== undefined) {
|
||||
return [course.lecture, course.classes];
|
||||
return { lecture: course.lecture, classes: course.classes };
|
||||
} else {
|
||||
return [undefined, undefined];
|
||||
return { lecture: undefined, classes: undefined };
|
||||
}
|
||||
};
|
||||
|
||||
@ -172,7 +171,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
||||
`${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`,
|
||||
);
|
||||
const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1));
|
||||
console.log('courses: ', courses);
|
||||
setCourses(sortedCourses);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user