Merge branch 'hackathon' of https://github.com/ut-developers/UT-Registration-Plus into hackathon

2024-02-17 14:37:59 -06:00
parent 7550b55b9b 9ce69c2f2e
commit 66fea21abd
4 changed files with 221 additions and 145 deletions
--- a/src/stories/components/Settings.stories.tsx
+++ 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<typeof Settings>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+};
--- 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<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 }),
+    },
 };
--- a/src/views/components/Settings.tsx
+++ 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 <div className={className}>this will be finished laterrrrrrr</div>;
+}
--- 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 (
-        <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',
+        //             });

-            {/* <CourseButtons course={course} activeSchedule={activeSchedule} />   */}
-        </Card>
+        //             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>
    );
 }