Skip to content

Commit

Permalink
Merge branch 'bog-changes-s23-merged' of https://github.com/gt-schedu…
Browse files Browse the repository at this point in the history 
…ler/website into bog-changes-s23-merged
  • Loading branch information
@yatharth-b
yatharth-b committed Apr 1, 2024
2 parents edf1d2a + 9921ed0 commit f9c64df
Show file tree
Hide file tree
Showing 8 changed files with 222 additions and 114 deletions.
132 changes: 74 additions & 58 deletions src/components/CombinationContainer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,64 +58,80 @@ export default function CombinationContainer({
return (
<>
<div className="CombinationContainer">
<Select
onChange={(newSortingOptionIndex): void =>
patchSchedule({ sortingOptionIndex: newSortingOptionIndex })
}
current={sortingOptionIndex}
options={oscar.sortingOptions.map((sortingOption, i) => ({
id: i,
label: sortingOption.label,
}))}
/>
<Button
className="reset"
onClick={handleResetPinnedCrns}
disabled={pinnedCrns.length === 0}
>
Reset Sections
</Button>
<div className="scroller">
<AutoSizer>
{({ width, height }): React.ReactElement => (
<List
width={width}
height={height}
style={{ outline: 'none' }}
rowCount={sortedCombinations.length}
rowHeight={108}
// List.rowRenderer is a normal render prop, not a component.
// eslint-disable-next-line react/no-unstable-nested-components
rowRenderer={({ index, key, style }): React.ReactElement => {
const { crns } = sortedCombinations[index] as Combination;
return (
<div className="list-item" style={style} key={key}>
<div
className="combination"
onMouseEnter={(): void => setOverlayCrns(crns)}
onMouseLeave={(): void => setOverlayCrns([])}
onClick={(): void =>
patchSchedule({
pinnedCrns: [...pinnedCrns, ...crns],
})
}
>
<div className="number">{index + 1}</div>
<Calendar
className="calendar-preview"
overlayCrns={crns}
isAutosized
compare={compare}
preview
/>
</div>
</div>
);
}}
/>
)}
</AutoSizer>
</div>
{compare ? (
<div className="turn-off-compare-text">
Turn compare schedules off to view section combinations!
</div>
) : (
<>
<Select
onChange={(newSortingOptionIndex): void =>
patchSchedule({ sortingOptionIndex: newSortingOptionIndex })
}
current={sortingOptionIndex}
options={oscar.sortingOptions.map((sortingOption, i) => ({
id: i,
label: sortingOption.label,
}))}
/>
<Button
className="reset"
onClick={handleResetPinnedCrns}
disabled={pinnedCrns.length === 0}
>
Reset Sections
</Button>
<div className="scroller">
<AutoSizer>
{({ width, height }): React.ReactElement => (
<List
width={width}
height={height}
style={{ outline: 'none' }}
rowCount={sortedCombinations.length}
rowHeight={108}
/*
List.rowRenderer is a normal render prop,
not a component.
*/
// eslint-disable-next-line max-len
// eslint-disable-next-line react/no-unstable-nested-components
rowRenderer={({
index,
key,
style,
}): React.ReactElement => {
const { crns } = sortedCombinations[index] as Combination;
return (
<div className="list-item" style={style} key={key}>
<div
className="combination"
onMouseEnter={(): void => setOverlayCrns(crns)}
onMouseLeave={(): void => setOverlayCrns([])}
onClick={(): void =>
patchSchedule({
pinnedCrns: [...pinnedCrns, ...crns],
})
}
>
<div className="number">{index + 1}</div>
<Calendar
className="calendar-preview"
overlayCrns={crns}
isAutosized
compare={compare}
preview
/>
</div>
</div>
);
}}
/>
)}
</AutoSizer>
</div>
</>
)}
</div>

<Modal
Expand Down
4 changes: 4 additions & 0 deletions src/components/CombinationContainer/stylesheet.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@
align-items: stretch;
border-right: 1px solid $color-border;

.turn-off-compare-text {
margin: 0px 12px 0px 12px;
font-size: 14px;
}
.scroller {
flex: 1;
overflow-y: auto;
Expand Down
134 changes: 105 additions & 29 deletions src/components/ComparisonContainer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,7 @@ export default function ComparisonContainer({
<div className="comparison-body">
<div className="comparison-content">
<div className="my-schedule">
<p className="content-title">My Schedule</p>
<p className="my-schedule-title">My Schedule</p>
{allVersionNames
// .filter((version) => version.id === currentVersion)
.map((version) => {
Expand Down Expand Up @@ -563,6 +563,10 @@ function ScheduleRow({
const tooltipId = useId();
const [tooltipHover, setTooltipHover] = useState(false);
const [divHover, setDivHover] = useState(false);
const [showPaletteTooltip, setShowPaletteTooltip] = useState(false);
const [showShareTooltip, setShowShareTooltip] = useState(false);
const [showEditTooltip, setShowEditTooltip] = useState(false);
const [showRemoveTooltip, setShowRemoveTooltip] = useState(false);

const edit =
hasEdit &&
Expand Down Expand Up @@ -620,11 +624,13 @@ function ScheduleRow({
className={classes('name', hasCheck && 'check')}
onMouseEnter={(): void => setTooltipHover(true)}
onMouseLeave={(): void => setTooltipHover(false)}
onClick={onClick}
>
<div
className={classes(
type === 'User' && 'friend-name',
type !== 'User' && checkboxColor !== '' && 'checked'
type !== 'User' && checkboxColor !== '' && 'checked',
type !== 'User' && 'schedule-name'
)}
>
<p>{name}</p>
Expand All @@ -650,47 +656,117 @@ function ScheduleRow({
</>
)}
{(divHover || edit) && hasPalette && setPaletteInfo && (
<Button
className="icon"
onClick={(): void => setPaletteInfo(palette ? '' : id)}
key={`${id}-palette`}
<div
onMouseEnter={(): void => setShowPaletteTooltip(true)}
onMouseLeave={(): void => setShowPaletteTooltip(false)}
id={`${tooltipId}-palette`}
>
<FontAwesomeIcon icon={faPalette} size="xs" />
</Button>
<Button
className="icon"
onClick={(): void => setPaletteInfo(palette ? '' : id)}
key={`${id}-palette`}
>
<FontAwesomeIcon icon={faPalette} size="xs" />
</Button>
<ReactTooltip
key={`palette-tooltip-${id}`}
anchorId={`${tooltipId}-palette`}
place="top"
isOpen={showPaletteTooltip}
setIsOpen={setShowPaletteTooltip}
className="tooltip"
variant="dark"
>
Edit Color
</ReactTooltip>
</div>
)}
{(divHover || edit) &&
hasEdit &&
setInvitationModalOpen !== undefined &&
setInvitationModalEmail !== undefined &&
email && (
<Button
className="icon"
onClick={(): void => {
setInvitationModalEmail(email);
setInvitationModalOpen(true);
}}
key={`${id}-share`}
<div
onMouseEnter={(): void => setShowShareTooltip(true)}
onMouseLeave={(): void => setShowShareTooltip(false)}
id={`${tooltipId}-share`}
>
<FontAwesomeIcon icon={faShareFromSquare} size="xs" />
</Button>
<Button
className="icon"
onClick={(): void => {
setInvitationModalEmail(email);
setInvitationModalOpen(true);
}}
key={`${id}-share`}
data-for={`share-tooltip-${id}`}
data-tip="Share"
>
<FontAwesomeIcon icon={faShareFromSquare} size="xs" />
</Button>
<ReactTooltip
key={`share-tooltip-${id}`}
anchorId={`${tooltipId}-share`}
place="top"
isOpen={showShareTooltip}
setIsOpen={setShowShareTooltip}
className="tooltip"
variant="dark"
>
Share Back
</ReactTooltip>
</div>
)}
{(divHover || edit) && hasEdit && (
<Button
className="icon"
onClick={handleEditSchedule}
key={`${id}-edit`}
<div
onMouseEnter={(): void => setShowEditTooltip(true)}
onMouseLeave={(): void => setShowEditTooltip(false)}
id={`${tooltipId}-edit`}
>
<FontAwesomeIcon icon={faPencil} size="xs" />
</Button>
<Button
className="icon"
onClick={handleEditSchedule}
key={`${id}-edit`}
>
<FontAwesomeIcon icon={faPencil} size="xs" />
</Button>
<ReactTooltip
key={`edit-tooltip-${id}`}
anchorId={`${tooltipId}-edit`}
place="top"
isOpen={showEditTooltip}
setIsOpen={setShowEditTooltip}
className="tooltip"
variant="dark"
>
Edit
</ReactTooltip>
</div>
)}
{(divHover || edit) && hasDelete && (
<Button
className="icon"
onClick={handleRemoveSchedule}
key={`${id}-delete`}
<div
onMouseEnter={(): void => setShowRemoveTooltip(true)}
onMouseLeave={(): void => setShowRemoveTooltip(false)}
id={`${tooltipId}-delete`}
>
<FontAwesomeIcon icon={faCircleXmark} size="xs" />
</Button>
<Button
className="icon"
onClick={handleRemoveSchedule}
key={`${id}-delete`}
>
<FontAwesomeIcon icon={faCircleXmark} size="xs" />
</Button>
<ReactTooltip
key={`delete-tooltip-${id}`}
anchorId={`${tooltipId}-delete`}
place="top"
isOpen={showRemoveTooltip}
setIsOpen={setShowRemoveTooltip}
className="tooltip"
variant="dark"
>
Remove
</ReactTooltip>
</div>
)}
</div>
{hasPalette && palette && setFriendScheduleColor && setPaletteInfo && (
Expand Down
Loading

0 comments on commit f9c64df

Please sign in to comment.