From 42d24f636790a876810e3fa1ea7e24056298682b Mon Sep 17 00:00:00 2001 From: DhruvArora-03 Date: Sat, 17 Feb 2024 13:02:06 -0600 Subject: [PATCH 1/2] create empty settings component - waiting on design --- src/stories/components/Settings.stories.tsx | 19 +++++++++++++++++++ src/views/components/Settings.tsx | 14 ++++++++++++++ 2 files changed, 33 insertions(+) create mode 100644 src/stories/components/Settings.stories.tsx create mode 100644 src/views/components/Settings.tsx diff --git a/src/stories/components/Settings.stories.tsx b/src/stories/components/Settings.stories.tsx new file mode 100644 index 00000000..68ecc9c0 --- /dev/null +++ b/src/stories/components/Settings.stories.tsx @@ -0,0 +1,19 @@ +import { Meta, StoryObj } from '@storybook/react'; +import Settings from 'src/views/components/Settings'; + +const meta = { + title: 'Components/Common/Settings', + component: Settings, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta; +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/src/views/components/Settings.tsx b/src/views/components/Settings.tsx new file mode 100644 index 00000000..b83e4373 --- /dev/null +++ b/src/views/components/Settings.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +type Props = { + className?: string; +}; + +/** + * Component to hold everything for the settings page + * @param props className + * @returns The content for the settings page + */ +export default function Settings({ className }: Props) { + return
this will be finished laterrrrrrr
; +} From a46526fa40ea67106e315757fc8d4e0c55a74b55 Mon Sep 17 00:00:00 2001 From: DhruvArora-03 Date: Sat, 17 Feb 2024 14:32:28 -0600 Subject: [PATCH 2/2] working on course popup - stopping because abhinav already doing --- src/stories/injected/CoursePopup.stories.ts | 152 ++++++++------- .../CoursePopup/CourseHeader/CourseHeader.tsx | 181 ++++++++++-------- 2 files changed, 188 insertions(+), 145 deletions(-) diff --git a/src/stories/injected/CoursePopup.stories.ts b/src/stories/injected/CoursePopup.stories.ts index 9245a6ea..ca510458 100644 --- a/src/stories/injected/CoursePopup.stories.ts +++ b/src/stories/injected/CoursePopup.stories.ts @@ -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; export default meta; type Story = StoryObj; 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 }), + }, }; diff --git a/src/views/components/injected/CoursePopup/CourseHeader/CourseHeader.tsx b/src/views/components/injected/CoursePopup/CourseHeader/CourseHeader.tsx index 0dc97ab4..327de7f2 100644 --- a/src/views/components/injected/CoursePopup/CourseHeader/CourseHeader.tsx +++ b/src/views/components/injected/CoursePopup/CourseHeader/CourseHeader.tsx @@ -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; @@ -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 ( - - -
- - {course.courseName} ({course.department} {course.number}) +
+
+ + {course.courseName} - - #{course.uniqueId} - + + {`(${course.department} ${course.number})`} + +
+ + +
- - {`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 ( - - {numInstructors > 1 && index === course.instructors.length - 1 ? '& ' : ''} - - {name} - - {numInstructors > 2 && !isLast ? ', ' : ''} - - ); - })} - - {course.schedule.meetings.map(meeting => ( - - - {meeting.getDaysString({ - format: 'long', - separator: 'short', - })} - - {' at '} - - {meeting.getTimeString({ - separator: 'to', - capitalize: true, - })} - - {' in '} - - {meeting.location?.building ?? 'TBA'} - +
+ + with{' '} + {course.instructors.map(instructor => ( + {instructor.lastName} + ))} - ))} +
+
+ // + // + //
+ // + // {course.courseName} ({course.department} {course.number}) blahhhhh + // + // + // #{course.uniqueId} + // + //
+ // + // {`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 ( + // + // {numInstructors > 1 && index === course.instructors.length - 1 ? '& ' : ''} + // + // {name} + // + // {numInstructors > 2 && !isLast ? ', ' : ''} + // + // ); + // })} + // + // {course.schedule.meetings.map(meeting => ( + // + // + // {meeting.getDaysString({ + // format: 'long', + // separator: 'short', + // })} + // + // {' at '} + // + // {meeting.getTimeString({ + // separator: 'to', + // capitalize: true, + // })} + // + // {' in '} + // + // {meeting.location?.building ?? 'TBA'} + // + // + // ))} + + // + // ); }