working on course popup - stopping because abhinav already doing
This commit is contained in:
DhruvArora-03
@@ -3,6 +3,7 @@ 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',
|
||||||
@@ -18,7 +19,20 @@ const exampleCourse: Course = new Course({
|
|||||||
flags: ['Quantitative Reasoning'],
|
flags: ['Quantitative Reasoning'],
|
||||||
fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB',
|
fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB',
|
||||||
instructionMode: 'Online',
|
instructionMode: 'Online',
|
||||||
instructors: [],
|
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,
|
isReserved: false,
|
||||||
number: '303E',
|
number: '303E',
|
||||||
schedule: {
|
schedule: {
|
||||||
|
|||||||
@@ -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>
|
||||||
<Text /* size='medium' className={styles.instructors} */>
|
</div>
|
||||||
{`with ${!course.instructors.length ? 'TBA' : ''}`}
|
<div>
|
||||||
{course.instructors.map((instructor, index) => {
|
<Text variant='p'>
|
||||||
const name = instructor.toString({
|
with{' '}
|
||||||
format: 'first_last',
|
{course.instructors.map(instructor => (
|
||||||
case: 'capitalize',
|
<span className=''>{instructor.lastName}</span>
|
||||||
});
|
|
||||||
|
|
||||||
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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user