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

working on course popup - stopping because abhinav already doing

Browse Source
This commit is contained in:
DhruvArora-03
2024-02-17 14:32:28 -06:00
parent 42d24f6367
commit a46526fa40
2 changed files with 188 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/stories/injected/CoursePopup.stories.ts
View File

@@ -3,97 +3,111 @@ import { CourseMeeting } from 'src/shared/types/CourseMeeting';
import { UserSchedule } from 'src/shared/types/UserSchedule'; import { UserSchedule } from 'src/shared/types/UserSchedule';
import CoursePopup from 'src/views/components/injected/CoursePopup/CoursePopup'; import CoursePopup from 'src/views/components/injected/CoursePopup/CoursePopup';
import type { Meta, StoryObj } from '@storybook/react'; import type { Meta, StoryObj } from '@storybook/react';
import Instructor from 'src/shared/types/Instructor';
const exampleCourse: Course = new Course({ const exampleCourse: Course = new Course({
courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB', courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
creditHours: 3, creditHours: 3,
department: 'C S', department: 'C S',
description: [ description: [
'Problem solving and fundamental algorithms for various applications in science, business, and on the World Wide Web, and introductory programming in a modern object-oriented programming language.', 'Problem solving and fundamental algorithms for various applications in science, business, and on the World Wide Web, and introductory programming in a modern object-oriented programming language.',
'Only one of the following may be counted: Computer Science 303E, 312, 312H. Credit for Computer Science 303E may not be earned after a student has received credit for Computer Science 314, or 314H. May not be counted toward a degree in computer science.', 'Only one of the following may be counted: Computer Science 303E, 312, 312H. Credit for Computer Science 303E may not be earned after a student has received credit for Computer Science 314, or 314H. May not be counted toward a degree in computer science.',
'May be counted toward the Quantitative Reasoning flag requirement.', 'May be counted toward the Quantitative Reasoning flag requirement.',
'Designed to accommodate 100 or more students.', 'Designed to accommodate 100 or more students.',
'Taught as a Web-based course.', 'Taught as a Web-based course.',
],
flags: ['Quantitative Reasoning'],
fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB',
instructionMode: 'Online',
instructors: [],
isReserved: false,
number: '303E',
schedule: {
meetings: [
new CourseMeeting({
days: ['Tuesday', 'Thursday'],
endTime: 660,
startTime: 570,
}),
], ],
}, flags: ['Quantitative Reasoning'],
semester: { fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB',
code: '12345', instructionMode: 'Online',
season: 'Spring', instructors: [
year: 2024, new Instructor({
}, firstName: 'William',
status: Status.CANCELLED, lastName: 'Young',
uniqueId: 12345, middleInitial: 'D',
url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/', fullName: 'William D Young',
}),
new Instructor({
firstName: 'William',
lastName: 'Young',
middleInitial: 'D',
fullName: 'William D Young',
}),
],
isReserved: false,
number: '303E',
schedule: {
meetings: [
new CourseMeeting({
days: ['Tuesday', 'Thursday'],
endTime: 660,
startTime: 570,
}),
],
},
semester: {
code: '12345',
season: 'Spring',
year: 2024,
},
status: Status.CANCELLED,
uniqueId: 12345,
url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
}); });
const exampleSchedule: UserSchedule = new UserSchedule({ const exampleSchedule: UserSchedule = new UserSchedule({
courses: [exampleCourse], courses: [exampleCourse],
name: 'Example Schedule', name: 'Example Schedule',
}); });
const meta = { const meta = {
title: 'Components/Injected/CoursePopup', title: 'Components/Injected/CoursePopup',
component: CoursePopup, component: CoursePopup,
// tags: ['autodocs'], // tags: ['autodocs'],
args: { args: {
course: exampleCourse, course: exampleCourse,
activeSchedule: exampleSchedule, activeSchedule: exampleSchedule,
},
argTypes: {
course: {
control: {
type: 'other',
},
}, },
activeSchedule: { argTypes: {
control: { course: {
type: 'other', control: {
}, type: 'other',
},
},
activeSchedule: {
control: {
type: 'other',
},
},
}, },
}, parameters: {
parameters: { design: {
design: { type: 'figma',
type: 'figma', url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=602-1879&mode=design&t=BoS5xBrpSsjgQXqv-11',
url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=602-1879&mode=design&t=BoS5xBrpSsjgQXqv-11', },
}, },
},
} satisfies Meta<typeof CoursePopup>; } satisfies Meta<typeof CoursePopup>;
export default meta; export default meta;
type Story = StoryObj<typeof meta>; type Story = StoryObj<typeof meta>;
export const Open: Story = { export const Open: Story = {
args: { args: {
course: new Course({ ...exampleCourse, status: Status.OPEN }), course: new Course({ ...exampleCourse, status: Status.OPEN }),
activeSchedule: new UserSchedule({ activeSchedule: new UserSchedule({
courses: [], courses: [],
name: 'Example Schedule', name: 'Example Schedule',
}), }),
}, },
}; };
export const Closed: Story = { export const Closed: Story = {
args: { args: {
course: new Course({ ...exampleCourse, status: Status.CLOSED }), course: new Course({ ...exampleCourse, status: Status.CLOSED }),
}, },
}; };
export const Cancelled: Story = { export const Cancelled: Story = {
args: { args: {
course: new Course({ ...exampleCourse, status: Status.CANCELLED }), course: new Course({ ...exampleCourse, status: Status.CANCELLED }),
}, },
}; };

181
src/views/components/injected/CoursePopup/CourseHeader/CourseHeader.tsx
View File

@@ -5,8 +5,11 @@ import Card from '@views/components/common/Card/Card';
import Icon from '@views/components/common/Icon/Icon'; import Icon from '@views/components/common/Icon/Icon';
import Link from '@views/components/common/Link/Link'; import Link from '@views/components/common/Link/Link';
import Text from '@views/components/common/Text/Text'; import Text from '@views/components/common/Text/Text';
// import CourseButtons from './CourseButtons/CourseButtons'; import { Button } from 'src/views/components/common/Button/Button';
import CourseButtons from './CourseButtons/CourseButtons';
import styles from './CourseHeader.module.scss'; import styles from './CourseHeader.module.scss';
import CopyIcon from '~icons/material-symbols/content-copy';
import CloseIcon from '~icons/material-symbols/close';
type Props = { type Props = {
course: Course; course: Course;
@@ -19,86 +22,112 @@ type Props = {
* It displays the course name, unique id, instructors, and schedule, all formatted nicely. * It displays the course name, unique id, instructors, and schedule, all formatted nicely.
*/ */
export default function CourseHeader({ course, activeSchedule, onClose }: Props) { export default function CourseHeader({ course, activeSchedule, onClose }: Props) {
const getBuildingUrl = (building?: string): string | undefined => { // const getBuildingUrl = (building?: string): string | undefined => {
if (!building) return undefined; // if (!building) return undefined;
return `https://utdirect.utexas.edu/apps/campus/buildings/nlogon/maps/UTM/${building}/`; // return `https://utdirect.utexas.edu/apps/campus/buildings/nlogon/maps/UTM/${building}/`;
}; // };
return ( return (
<Card className={styles.header}> <div className='mx-6 my-5'>
<Icon className={styles.close} /* size='large' */ name='close' onClick={onClose} /> <div className='flex items-center justify-start'>
<div className={styles.title}> <Text variant='h1' className='shrink truncate'>
<Text className={styles.courseName} /* size='large' weight='bold' color='black' */> {course.courseName}
{course.courseName} ({course.department} {course.number})
</Text> </Text>
<Link <Text variant='h1' className='ml-1 shrink-0'>
url={course.url} {`(${course.department} ${course.number})`}
className={styles.uniqueId} </Text>
/* size='medium' <div className='ml-auto min-w-fit flex shrink-0 gap-0'>
weight='semi_bold' */ <Button icon={CopyIcon} variant='single' className='mr-1 px-2' color='ut-burntorange'>
color='burnt_orange' {course.uniqueId}
title='View course details on UT Course Schedule' </Button>
> <button className='btn bg-transparent p-0'>
#{course.uniqueId} <CloseIcon className='h-7 w-7' />
</Link> </button>
</div>
</div> </div>
<Text /* size='medium' className={styles.instructors} */> <div>
{`with ${!course.instructors.length ? 'TBA' : ''}`} <Text variant='p'>
{course.instructors.map((instructor, index) => { with{' '}
const name = instructor.toString({ {course.instructors.map(instructor => (
format: 'first_last', <span className=''>{instructor.lastName}</span>
case: 'capitalize', ))}
});
const url = instructor.getDirectoryUrl();
const numInstructors = course.instructors.length;
const isLast = course.instructors.length > 1 && index === course.instructors.length - 1;
return (
<span key={name}>
{numInstructors > 1 && index === course.instructors.length - 1 ? '& ' : ''}
<Link
key={name}
/* size='medium'
weight='normal' */
url={url}
title="View instructor's directory page"
>
{name}
</Link>
{numInstructors > 2 && !isLast ? ', ' : ''}
</span>
);
})}
</Text>
{course.schedule.meetings.map(meeting => (
<Text /* size='medium' */ className={styles.meeting} key={meeting.startTime}>
<Text as='span' /* size='medium' weight='bold' */ color='black'>
{meeting.getDaysString({
format: 'long',
separator: 'short',
})}
</Text>
{' at '}
<Text as='span' /* size='medium' */>
{meeting.getTimeString({
separator: 'to',
capitalize: true,
})}
</Text>
{' in '}
<Link
/* size='medium'
weight='normal' */
title='View building on UT Map'
url={getBuildingUrl(meeting.location?.building)}
disabled={!meeting.location?.building}
>
{meeting.location?.building ?? 'TBA'}
</Link>
</Text> </Text>
))} </div>
</div>
// <Card className={styles.header}>
// <Icon className={styles.close} /* size='large' */ name='close' onClick={onClose} />
// <div className={styles.title}>
// <Text className={styles.courseName} /* size='large' weight='bold' color='black' */>
// {course.courseName} ({course.department} {course.number}) blahhhhh
// </Text>
// <Link
// url={course.url}
// className={styles.uniqueId}
// /* size='medium'
// weight='semi_bold' */
// color='burnt_orange'
// title='View course details on UT Course Schedule'
// >
// #{course.uniqueId}
// </Link>
// </div>
// <Text /* size='medium' className={styles.instructors} */>
// {`with ${!course.instructors.length ? 'TBA' : ''}`}
// {course.instructors.map((instructor, index) => {
// const name = instructor.toString({
// format: 'first_last',
// case: 'capitalize',
// });
{/* <CourseButtons course={course} activeSchedule={activeSchedule} /> */} // const url = instructor.getDirectoryUrl();
</Card> // const numInstructors = course.instructors.length;
// const isLast = course.instructors.length > 1 && index === course.instructors.length - 1;
// return (
// <span key={name}>
// {numInstructors > 1 && index === course.instructors.length - 1 ? '& ' : ''}
// <Link
// key={name}
// /* size='medium'
// weight='normal' */
// url={url}
// title="View instructor's directory page"
// >
// {name}
// </Link>
// {numInstructors > 2 && !isLast ? ', ' : ''}
// </span>
// );
// })}
// </Text>
// {course.schedule.meetings.map(meeting => (
// <Text /* size='medium' */ className={styles.meeting} key={meeting.startTime}>
// <Text as='span' /* size='medium' weight='bold' */ color='black'>
// {meeting.getDaysString({
// format: 'long',
// separator: 'short',
// })}
// </Text>
// {' at '}
// <Text as='span' /* size='medium' */>
// {meeting.getTimeString({
// separator: 'to',
// capitalize: true,
// })}
// </Text>
// {' in '}
// <Link
// /* size='medium'
// weight='normal' */
// title='View building on UT Map'
// url={getBuildingUrl(meeting.location?.building)}
// disabled={!meeting.location?.building}
// >
// {meeting.location?.building ?? 'TBA'}
// </Link>
// </Text>
// ))}
// <CourseButtons course={course} activeSchedule={activeSchedule} />
// </Card>
); );
} }