DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: popup misaligned but clickable on calendar grid

Browse Source
This commit is contained in:
Casey Charleston
2024-02-23 09:52:53 -06:00
parent 5daccc8349
commit 2c4dd36f27
7 changed files with 142 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/stories/components/calendar/CalendarGrid.stories.tsx
View File

@@ -1,8 +1,13 @@
import { Meta, StoryObj } from '@storybook/react';
import CalendarGrid from 'src/views/components/calendar/CalendarGrid/CalendarGrid';
import { Course, Status } from '@shared/types/Course';
import { getCourseColors } from '@shared/util/colors';
import { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
import { Status } from '@shared/types/Course';
import type { Meta, StoryObj } from '@storybook/react';
import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
import { Serialized } from 'chrome-extension-toolkit';
import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
import { CourseSchedule } from 'src/shared/types/CourseSchedule';
import Instructor from 'src/shared/types/Instructor';
import { UserSchedule } from 'src/shared/types/UserSchedule';
import CalendarGrid from 'src/views/components/calendar/CalendarGrid/CalendarGrid';
const meta = {
title: 'Components/Calendar/CalendarGrid',
@@ -17,6 +22,57 @@ const meta = {
} satisfies Meta<typeof CalendarGrid>;
export default meta;
const exampleCourse: Course = new Course({
uniqueId: 50805,
number: '314',
fullName: 'C S 314 DATA STRUCTURES',
courseName: 'DATA STRUCTURES',
department: 'C S',
creditHours: 3,
status: Status.OPEN,
instructors: [
new Instructor({ fullName: 'SCOTT, MICHAEL', firstName: 'MICHAEL', lastName: 'SCOTT', middleInitial: 'D' }),
],
isReserved: true,
description: [
'Second part of a two-part sequence in programming. Introduction to specifications, simple unit testing, and debugging; building and using canonical data structures; algorithm analysis and reasoning techniques such as assertions and invariants.',
'Computer Science 314 and 314H may not both be counted.',
'BVO 311C and 312H may not both be counted.',
'Prerequisite: Computer Science 312 or 312H with a grade of at least C-.',
'May be counted toward the Quantitative Reasoning flag requirement.',
],
schedule: new CourseSchedule({
meetings: [
new CourseMeeting({
days: [DAY_MAP.T, DAY_MAP.TH],
startTime: 480,
endTime: 570,
location: { building: 'UTC', room: '123' },
}),
new CourseMeeting({
days: [DAY_MAP.TH],
startTime: 570,
endTime: 630,
location: { building: 'JES', room: '123' },
}),
],
}),
url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
flags: ['Writing', 'Independent Inquiry'],
instructionMode: 'In Person',
semester: {
code: '12345',
year: 2024,
season: 'Spring',
},
});
const exampleSchedule = new UserSchedule({
name: 'Example Schedule',
courses: [exampleCourse],
hours: 3,
} as Serialized<UserSchedule>);
const testData: CalendarGridCourse[] = [
{
calendarGridPoint: {
@@ -30,6 +86,11 @@ const testData: CalendarGridCourse[] = [
status: Status.OPEN,
colors: getCourseColors('emerald', 500),
},
popupProps: {
course: exampleCourse,
activeSchedule: exampleSchedule,
onClose: () => {},
},
},
{
calendarGridPoint: {
@@ -43,6 +104,11 @@ const testData: CalendarGridCourse[] = [
status: Status.OPEN,
colors: getCourseColors('emerald', 500),
},
popupProps: {
course: exampleCourse,
activeSchedule: exampleSchedule,
onClose: () => {},
},
},
{
calendarGridPoint: {
@@ -56,6 +122,11 @@ const testData: CalendarGridCourse[] = [
status: Status.CLOSED,
colors: getCourseColors('emerald', 500),
},
popupProps: {
course: exampleCourse,
activeSchedule: exampleSchedule,
onClose: () => {},
},
},
{
calendarGridPoint: {
@@ -69,6 +140,11 @@ const testData: CalendarGridCourse[] = [
status: Status.OPEN,
colors: getCourseColors('emerald', 500),
},
popupProps: {
course: exampleCourse,
activeSchedule: exampleSchedule,
onClose: () => {},
},
},
{
calendarGridPoint: {
@@ -82,6 +158,11 @@ const testData: CalendarGridCourse[] = [
status: Status.CLOSED,
colors: getCourseColors('emerald', 500),
},
popupProps: {
course: exampleCourse,
activeSchedule: exampleSchedule,
onClose: () => {},
},
},
{
calendarGridPoint: {
@@ -95,6 +176,11 @@ const testData: CalendarGridCourse[] = [
status: Status.CLOSED,
colors: getCourseColors('emerald', 500),
},
popupProps: {
course: exampleCourse,
activeSchedule: exampleSchedule,
onClose: () => {},
},
},
{
calendarGridPoint: {
@@ -108,6 +194,11 @@ const testData: CalendarGridCourse[] = [
status: Status.CLOSED,
colors: getCourseColors('emerald', 500),
},
popupProps: {
course: exampleCourse,
activeSchedule: exampleSchedule,
onClose: () => {},
},
},
];

22
src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx
View File

@@ -1,10 +1,13 @@
import { Status } from '@shared/types/Course';
import clsx from 'clsx';
import React from 'react';
import { CourseColors, pickFontColor } from 'src/shared/util/colors';
import type { CourseColors } from 'src/shared/util/colors';
import { pickFontColor } from 'src/shared/util/colors';
import ClosedIcon from '~icons/material-symbols/lock';
import WaitlistIcon from '~icons/material-symbols/timelapse';
import CancelledIcon from '~icons/material-symbols/warning';
import Text from '../../common/Text/Text';
export interface CalendarCourseCellProps {
@@ -13,6 +16,7 @@ export interface CalendarCourseCellProps {
status: Status;
colors: CourseColors;
className?: string;
popup?: any;
}
const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({
@@ -21,7 +25,9 @@ const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({
status,
colors,
className,
popup,
}: CalendarCourseCellProps) => {
const [showPopup, setShowPopup] = React.useState(false);
let rightIcon: React.ReactNode | null = null;
if (status === Status.WAITLISTED) {
rightIcon = <WaitlistIcon className='h-5 w-5' />;
@@ -31,15 +37,26 @@ const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({
rightIcon = <CancelledIcon className='h-5 w-5' />;
}
// popup.onClose = () => setShowPopup(false);
const handleClick = () => {
setShowPopup(true);
};
// whiteText based on secondaryColor
const fontColor = pickFontColor(colors.primaryColor);
return (
<div
className={clsx('h-full w-full flex justify-center rounded p-2 overflow-x-hidden', fontColor, className)}
className={clsx(
'h-full w-full flex justify-center rounded p-2 overflow-x-hidden cursor-pointer',
fontColor,
className
)}
style={{
backgroundColor: colors.primaryColor,
}}
onClick={handleClick}
>
<div className='flex flex-1 flex-col gap-1'>
<Text
@@ -66,6 +83,7 @@ const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({
{rightIcon}
</div>
)}
<div>{showPopup ? popup : null}</div>
</div>
);
};

10
src/views/components/calendar/CalendarGrid/CalendarGrid.tsx
View File

@@ -1,14 +1,17 @@
import React, { useState, useRef, useEffect } from 'react';
import React, { useEffect, useRef, useState } from 'react';
// import html2canvas from 'html2canvas';
import { DAY_MAP } from 'src/shared/types/CourseMeeting';
import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
import CourseCatalogInjectedPopup from 'src/views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
import type { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
/* import calIcon from 'src/assets/icons/cal.svg';
import pngIcon from 'src/assets/icons/png.svg';
*/
import CalendarCell from '../CalendarGridCell/CalendarGridCell';
import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
import styles from './CalendarGrid.module.scss';
/* const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
const grid = [];
@@ -203,6 +206,7 @@ function AccountForCourseConflicts({ courseCells }: AccountForCourseConflictsPro
timeAndLocation={block.componentProps.timeAndLocation}
status={block.componentProps.status}
colors={block.componentProps.colors}
popup={<CourseCatalogInjectedPopup course={block.popupProps.course} activeSchedule={block.popupProps.activeSchedule} onClose={block.popupProps.onClose} />}
/>
</div>
));

1
src/views/components/calendar/CalendarGridCell/CalendarGridCell.tsx
View File

@@ -1,4 +1,5 @@
import React from 'react';
import styles from './CalendarGridCell.module.scss';
interface Props {

3
src/views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup.tsx
View File

@@ -3,11 +3,12 @@ import React from 'react';
import type { Course } from 'src/shared/types/Course';
import type { UserSchedule } from 'src/shared/types/UserSchedule';
import Description from './Description';
import GradeDistribution from './GradeDistribution';
import HeadingAndActions from './HeadingAndActions';
interface CourseCatalogInjectedPopupProps {
export interface CourseCatalogInjectedPopupProps {
course: Course;
activeSchedule?: UserSchedule;
onClose: () => void;

5
src/views/components/injected/CoursePopupOld/CoursePopup.tsx
View File

@@ -1,6 +1,7 @@
import { Course } from '@shared/types/Course';
import { UserSchedule } from '@shared/types/UserSchedule';
import type { Course } from '@shared/types/Course';
import type { UserSchedule } from '@shared/types/UserSchedule';
import React from 'react';
import Popup from '../../common/Popup/Popup';
import CourseDescription from './CourseDescription/CourseDescription';
import CourseHeader from './CourseHeader/CourseHeader';

13
src/views/hooks/useFlattenedCourseSchedule.ts
View File

@@ -1,4 +1,5 @@
import type { CalendarCourseCellProps } from 'src/views/components/calendar/CalendarCourseCell/CalendarCourseCell';
import type { CourseCatalogInjectedPopupProps } from 'src/views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
import useSchedules from './useSchedules';
@@ -25,6 +26,7 @@ export interface CalendarGridCourse {
gridColumnStart?: number;
gridColumnEnd?: number;
totalColumns?: number;
popupProps: CourseCatalogInjectedPopupProps;
}
export const convertMinutesToIndex = (minutes: number): number => Math.floor(minutes - 420 / 30);
@@ -58,6 +60,7 @@ export function useFlattenedCourseSchedule(): CalendarGridCourse[] {
},
componentProps: {
courseDeptAndInstr,
timeAndLocation: 'Asynchronous',
status,
colors: {
// TODO: figure out colors - these are defaults
@@ -65,6 +68,11 @@ export function useFlattenedCourseSchedule(): CalendarGridCourse[] {
secondaryColor: 'ut-gray',
},
},
popupProps: {
course,
activeSchedule,
onClose: () => {},
},
},
];
}
@@ -91,6 +99,11 @@ export function useFlattenedCourseSchedule(): CalendarGridCourse[] {
secondaryColor: 'ut-orange',
},
},
popupProps: {
course,
activeSchedule,
onClose: () => {}, // Add onClose property here
},
}));
});
})