Skip to content

Commit

Permalink
chore: working on course popup - stopping because abhinav already doing
Browse files Browse the repository at this point in the history
  • Loading branch information
@DhruvArora-03 @doprz
DhruvArora-03 authored and doprz committed Mar 6, 2024
1 parent 9d0f210 commit 5be7973
Show file tree
Hide file tree
Showing 2 changed files with 188 additions and 145 deletions.
152 changes: 83 additions & 69 deletions src/stories/injected/CoursePopup.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,97 +3,111 @@ import { CourseMeeting } from 'src/shared/types/CourseMeeting';
import { UserSchedule } from 'src/shared/types/UserSchedule';
import CoursePopup from 'src/views/components/injected/CoursePopup/CoursePopup';
import type { Meta, StoryObj } from '@storybook/react';
import Instructor from 'src/shared/types/Instructor';

const exampleCourse: Course = new Course({
courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
creditHours: 3,
department: 'C S',
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.',
'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.',
'Designed to accommodate 100 or more students.',
'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,
}),
courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
creditHours: 3,
department: 'C S',
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.',
'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.',
'Designed to accommodate 100 or more students.',
'Taught as a Web-based course.',
],
},
semester: {
code: '12345',
season: 'Spring',
year: 2024,
},
status: Status.CANCELLED,
uniqueId: 12345,
url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
flags: ['Quantitative Reasoning'],
fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB',
instructionMode: 'Online',
instructors: [
new Instructor({
firstName: 'William',
lastName: 'Young',
middleInitial: 'D',
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({
courses: [exampleCourse],
name: 'Example Schedule',
courses: [exampleCourse],
name: 'Example Schedule',
});

const meta = {
title: 'Components/Injected/CoursePopup',
component: CoursePopup,
// tags: ['autodocs'],
args: {
course: exampleCourse,
activeSchedule: exampleSchedule,
},
argTypes: {
course: {
control: {
type: 'other',
},
title: 'Components/Injected/CoursePopup',
component: CoursePopup,
// tags: ['autodocs'],
args: {
course: exampleCourse,
activeSchedule: exampleSchedule,
},
activeSchedule: {
control: {
type: 'other',
},
argTypes: {
course: {
control: {
type: 'other',
},
},
activeSchedule: {
control: {
type: 'other',
},
},
},
},
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=602-1879&mode=design&t=BoS5xBrpSsjgQXqv-11',
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=602-1879&mode=design&t=BoS5xBrpSsjgQXqv-11',
},
},
},
} satisfies Meta<typeof CoursePopup>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Open: Story = {
args: {
course: new Course({ ...exampleCourse, status: Status.OPEN }),
activeSchedule: new UserSchedule({
courses: [],
name: 'Example Schedule',
}),
},
args: {
course: new Course({ ...exampleCourse, status: Status.OPEN }),
activeSchedule: new UserSchedule({
courses: [],
name: 'Example Schedule',
}),
},
};

export const Closed: Story = {
args: {
course: new Course({ ...exampleCourse, status: Status.CLOSED }),
},
args: {
course: new Course({ ...exampleCourse, status: Status.CLOSED }),
},
};

export const Cancelled: Story = {
args: {
course: new Course({ ...exampleCourse, status: Status.CANCELLED }),
},
args: {
course: new Course({ ...exampleCourse, status: Status.CANCELLED }),
},
};
181 changes: 105 additions & 76 deletions src/views/components/injected/CoursePopup/CourseHeader/CourseHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,11 @@ import Card from '@views/components/common/Card/Card';
import Icon from '@views/components/common/Icon/Icon';
import Link from '@views/components/common/Link/Link';
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 CopyIcon from '~icons/material-symbols/content-copy';
import CloseIcon from '~icons/material-symbols/close';

type Props = {
course: Course;
Expand All @@ -19,86 +22,112 @@ type Props = {
* It displays the course name, unique id, instructors, and schedule, all formatted nicely.
*/
export default function CourseHeader({ course, activeSchedule, onClose }: Props) {
const getBuildingUrl = (building?: string): string | undefined => {
if (!building) return undefined;
return `https://utdirect.utexas.edu/apps/campus/buildings/nlogon/maps/UTM/${building}/`;
};
// const getBuildingUrl = (building?: string): string | undefined => {
// if (!building) return undefined;
// return `https://utdirect.utexas.edu/apps/campus/buildings/nlogon/maps/UTM/${building}/`;
// };

return (
<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})
<div className='mx-6 my-5'>
<div className='flex items-center justify-start'>
<Text variant='h1' className='shrink truncate'>
{course.courseName}
</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>
<Text variant='h1' className='ml-1 shrink-0'>
{`(${course.department} ${course.number})`}
</Text>
<div className='ml-auto min-w-fit flex shrink-0 gap-0'>
<Button icon={CopyIcon} variant='single' className='mr-1 px-2' color='ut-burntorange'>
{course.uniqueId}
</Button>
<button className='btn bg-transparent p-0'>
<CloseIcon className='h-7 w-7' />
</button>
</div>
</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',
});

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>
<div>
<Text variant='p'>
with{' '}
{course.instructors.map(instructor => (
<span className=''>{instructor.lastName}</span>
))}
</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',
// });

// 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>
// ))}

{/* <CourseButtons course={course} activeSchedule={activeSchedule} /> */}
</Card>
// <CourseButtons course={course} activeSchedule={activeSchedule} />
// </Card>
);
}

0 comments on commit 5be7973

Please sign in to comment.