Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clicking outside closes Quarter and Add Year Popovers #406

Merged
merged 5 commits into from
Jan 29, 2024
Merged

Clicking outside closes Quarter and Add Year Popovers #406

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b5ff4c5
Clicking outside closes Add year & course popovers
Awesome-E Jan 24, 2024
91d48b2
Make trigger consistent
Awesome-E Jan 29, 2024
75e80a9
Merge branch 'master' into close-overlays
Awesome-E Jan 29, 2024
599d2e2
Make clearing also close the quarter menu
Awesome-E Jan 29, 2024
e6cac02
add toggle and show
Awesome-E Jan 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 82 additions & 86 deletions site/src/pages/RoadmapPage/AddYearPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { FC, useState, useRef, useEffect } from 'react';
import React, { FC, useState, useEffect } from 'react';
import './AddYearPopup.scss';
import { PlusCircleFill } from 'react-bootstrap-icons';
import { Button, Form, Popover, Overlay } from 'react-bootstrap';
import { Button, Form, Popover, OverlayTrigger } from 'react-bootstrap';
import { addYear } from '../../store/slices/roadmapSlice';
import { useAppDispatch } from '../../store/hooks';

Expand All @@ -16,99 +16,95 @@ const AddYearPopup: FC<AddYearPopupProps> = ({ placeholderName, placeholderYear
const [year, setYear] = useState(placeholderYear);
const [validated, setValidated] = useState(false);
const [show, setShow] = useState(false);
const target = useRef(null);

useEffect(() => {
setYear(placeholderYear);
setName(placeholderName);
}, [placeholderYear, placeholderName]);

const handleClick = () => {
setShow(!show);
};
const overlay = <Popover id="add-year-popover">
<Popover.Content>
<Form noValidate validated={validated}>
<Form.Group>
<Form.Label className="add-year-form-label">Name</Form.Label>
<Form.Control
required
type="text"
name="name"
value={name}
onChange={(e) => {
setName(e.target.value);
}}
onKeyDown={(e: React.KeyboardEvent) => {
// prevent submitting form (reloads the page)
if (e.key === 'Enter') {
e.preventDefault();
}
}}
maxLength={35}
placeholder={placeholderName}
></Form.Control>
</Form.Group>
<Form.Group>
<Form.Label className="add-year-form-label">Start Year</Form.Label>
<Form.Control
required
type="number"
name="year"
value={year}
onChange={(e) => {
setYear(parseInt(e.target.value));
}}
onKeyDown={(e: React.KeyboardEvent) => {
// prevent submitting form (reloads the page)
if (e.key === 'Enter') {
e.preventDefault();
}
}}
min={1000}
max={9999}
placeholder={placeholderYear.toString()}
></Form.Control>
</Form.Group>
<Button
className="popup-btn"
onClick={() => {
if (name === '' || year < 1000 || year > 9999 || Number.isNaN(year)) {
setValidated(true);
return;
}

setValidated(false);
setShow(!show);
dispatch(
addYear({
yearData: {
startYear: year,
name: name.trim(),
quarters: ['fall', 'winter', 'spring'].map((quarter) => {
return { name: quarter, courses: [] };
}),
},
}),
);
setYear(placeholderYear);
setName(placeholderName);
}}
>
Add Year
</Button>
</Form>
</Popover.Content>
</Popover>

return (
<div>
<Button variant="light" ref={target} className="add-year-btn" onClick={handleClick}>
<PlusCircleFill className="add-year-icon" />
<div className="add-year-text">Add year</div>
</Button>
<Overlay show={show} target={target} placement="top">
<Popover id="">
<Popover.Content>
<Form noValidate validated={validated}>
<Form.Group>
<Form.Label className="add-year-form-label">Name</Form.Label>
<Form.Control
required
type="text"
name="name"
value={name}
onChange={(e) => {
setName(e.target.value);
}}
onKeyDown={(e: React.KeyboardEvent) => {
// prevent submitting form (reloads the page)
if (e.key === 'Enter') {
e.preventDefault();
}
}}
maxLength={35}
placeholder={placeholderName}
></Form.Control>
</Form.Group>
<Form.Group>
<Form.Label className="add-year-form-label">Start Year</Form.Label>
<Form.Control
required
type="number"
name="year"
value={year}
onChange={(e) => {
setYear(parseInt(e.target.value));
}}
onKeyDown={(e: React.KeyboardEvent) => {
// prevent submitting form (reloads the page)
if (e.key === 'Enter') {
e.preventDefault();
}
}}
min={1000}
max={9999}
placeholder={placeholderYear.toString()}
></Form.Control>
</Form.Group>
<Button
className="popup-btn"
onClick={() => {
if (name === '' || year < 1000 || year > 9999 || Number.isNaN(year)) {
setValidated(true);
return;
}

setValidated(false);
setShow(!show);
dispatch(
addYear({
yearData: {
startYear: year,
name: name.trim(),
quarters: ['fall', 'winter', 'spring'].map((quarter) => {
return { name: quarter, courses: [] };
}),
},
}),
);
setYear(placeholderYear);
setName(placeholderName);
}}
>
Add Year
</Button>
</Form>
</Popover.Content>
</Popover>
</Overlay>
<OverlayTrigger placement="top" overlay={overlay} trigger={['click']} rootClose>
<Button variant="light" className="add-year-btn">
<PlusCircleFill className="add-year-icon" />
<div className="add-year-text">Add year</div>
</Button>
</OverlayTrigger>
</div>
);
};
Expand Down
60 changes: 29 additions & 31 deletions site/src/pages/RoadmapPage/Quarter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Course from './Course';
import { useAppDispatch, useAppSelector } from '../../store/hooks';
import { deleteQuarter, clearQuarter, deleteCourse } from '../../store/slices/roadmapSlice';
import { PlannerQuarterData } from '../../types/types';
import { Button, Overlay, Popover } from 'react-bootstrap';
import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
import { ThreeDots } from 'react-bootstrap-icons';
import { StrictModeDroppable } from './StrictModeDroppable';

Expand All @@ -23,11 +23,8 @@ const Quarter: FC<QuarterProps> = ({ year, yearIndex, quarterIndex, data }) => {
const invalidCourses = useAppSelector((state) => state.roadmap.invalidCourses);

const [showQuarterMenu, setShowQuarterMenu] = useState(false);
const [threeDotMenuTarget, setThreeDotMenuTarget] = useState<HTMLElement | null>(null);

const handleQuarterMenuClick = (event: React.MouseEvent) => {
const handleQuarterMenuClick = () => {
setShowQuarterMenu(!showQuarterMenu);
setThreeDotMenuTarget(event.target as HTMLElement);
};

const calculateQuarterStats = () => {
Expand Down Expand Up @@ -90,38 +87,39 @@ const Quarter: FC<QuarterProps> = ({ year, yearIndex, quarterIndex, data }) => {
});
};

const popover = <Popover id={`quarter-menu-${yearIndex}-${quarterIndex}`}>
<Popover.Content>
<div>
<Button
variant="light"
className="quarter-menu-btn red-menu-btn"
onClick={() => dispatch(clearQuarter({ yearIndex: yearIndex, quarterIndex: quarterIndex }))}
>
Clear
</Button>
<Button
variant="light"
className="quarter-menu-btn red-menu-btn"
onClick={() => {
dispatch(deleteQuarter({ yearIndex: yearIndex, quarterIndex: quarterIndex }));
setShowQuarterMenu(false);
}}
>
Delete
</Button>
</div>
</Popover.Content>
</Popover>

return (
<div className="quarter">
<span className="quarter-header">
<h2 className="quarter-title">
{quarterTitle} {year}
</h2>
<ThreeDots onClick={handleQuarterMenuClick} className="edit-btn" />
<Overlay show={showQuarterMenu} target={threeDotMenuTarget} placement="bottom">
<Popover id={`quarter-menu-${yearIndex}-${quarterIndex}`}>
<Popover.Content>
<div>
<Button
variant="light"
className="quarter-menu-btn red-menu-btn"
onClick={() => dispatch(clearQuarter({ yearIndex: yearIndex, quarterIndex: quarterIndex }))}
>
Clear
</Button>
<Button
variant="light"
className="quarter-menu-btn red-menu-btn"
onClick={() => {
dispatch(deleteQuarter({ yearIndex: yearIndex, quarterIndex: quarterIndex }));
setShowQuarterMenu(false);
}}
>
Delete
</Button>
</div>
</Popover.Content>
</Popover>
</Overlay>
<OverlayTrigger trigger="click" overlay={popover} rootClose onToggle={setShowQuarterMenu} show={showQuarterMenu}>
<ThreeDots onClick={handleQuarterMenuClick} className="edit-btn" />
</OverlayTrigger>
</span>
<div className="quarter-units">
{unitCount} {unitCount === 1 ? 'unit' : 'units'}
Expand Down