Merge branch 'Longhorn-Developers:main' into master
This commit is contained in:
@@ -84,18 +84,29 @@ type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
courses: [
|
||||
courseCells: [
|
||||
{
|
||||
async: true,
|
||||
calendarGridPoint: { dayIndex: -1, endIndex: -1, startIndex: -1 },
|
||||
componentProps: {
|
||||
colors: getCourseColors('pink', 200),
|
||||
courseDeptAndInstr: `${exampleGovCourse.department} ${exampleGovCourse.number} – ${exampleGovCourse.instructors[0]!.lastName}`,
|
||||
status: exampleGovCourse.status,
|
||||
},
|
||||
course: exampleGovCourse,
|
||||
},
|
||||
{
|
||||
async: true,
|
||||
calendarGridPoint: { dayIndex: -1, endIndex: -1, startIndex: -1 },
|
||||
componentProps: {
|
||||
colors: getCourseColors('slate', 500),
|
||||
courseDeptAndInstr: `${examplePsyCourse.department} ${examplePsyCourse.number} – ${examplePsyCourse.instructors[0]!.lastName}`,
|
||||
status: examplePsyCourse.status,
|
||||
},
|
||||
course: examplePsyCourse,
|
||||
},
|
||||
],
|
||||
setCourse: () => {},
|
||||
},
|
||||
render: props => (
|
||||
<div className='outline-red outline w-292.5!'>
|
||||
@@ -105,7 +116,7 @@ export const Default: Story = {
|
||||
};
|
||||
export const Empty: Story = {
|
||||
args: {
|
||||
courses: [],
|
||||
courseCells: [],
|
||||
},
|
||||
render: props => (
|
||||
<div className='outline-red outline w-292.5!'>
|
||||
|
||||
@@ -35,6 +35,7 @@ const testData: CalendarGridCourse[] = [
|
||||
colors: getCourseColors('emerald', 500),
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
},
|
||||
{
|
||||
calendarGridPoint: {
|
||||
@@ -49,6 +50,7 @@ const testData: CalendarGridCourse[] = [
|
||||
colors: getCourseColors('emerald', 500),
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
},
|
||||
{
|
||||
calendarGridPoint: {
|
||||
@@ -63,6 +65,7 @@ const testData: CalendarGridCourse[] = [
|
||||
colors: getCourseColors('emerald', 500),
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
},
|
||||
{
|
||||
calendarGridPoint: {
|
||||
@@ -77,6 +80,7 @@ const testData: CalendarGridCourse[] = [
|
||||
colors: getCourseColors('emerald', 500),
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
},
|
||||
{
|
||||
calendarGridPoint: {
|
||||
@@ -91,6 +95,7 @@ const testData: CalendarGridCourse[] = [
|
||||
colors: getCourseColors('emerald', 500),
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
},
|
||||
{
|
||||
calendarGridPoint: {
|
||||
@@ -105,6 +110,7 @@ const testData: CalendarGridCourse[] = [
|
||||
colors: getCourseColors('emerald', 500),
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
},
|
||||
{
|
||||
calendarGridPoint: {
|
||||
@@ -119,6 +125,7 @@ const testData: CalendarGridCourse[] = [
|
||||
colors: getCourseColors('emerald', 500),
|
||||
},
|
||||
course: ExampleCourse,
|
||||
async: false,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@@ -87,7 +87,7 @@ export default function Calendar(): JSX.Element {
|
||||
<div className='min-h-2xl flex-grow overflow-auto pl-2 pr-4 pt-6 screenshot:min-h-xl'>
|
||||
<CalendarGrid courseCells={courseCells} setCourse={setCourse} />
|
||||
</div>
|
||||
<CalendarBottomBar />
|
||||
<CalendarBottomBar courseCells={courseCells} setCourse={setCourse} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
import type { Course } from '@shared/types/Course';
|
||||
import { saveAsCal, saveCalAsPng } from '@views/components/calendar/utils';
|
||||
import { Button } from '@views/components/common/Button';
|
||||
import Divider from '@views/components/common/Divider';
|
||||
import Text from '@views/components/common/Text/Text';
|
||||
import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
|
||||
import ImageIcon from '~icons/material-symbols/image';
|
||||
|
||||
import type { CalendarCourseCellProps } from './CalendarCourseCell';
|
||||
import CalendarCourseBlock from './CalendarCourseCell';
|
||||
|
||||
type CalendarBottomBarProps = {
|
||||
courses?: CalendarCourseCellProps[];
|
||||
courseCells?: CalendarGridCourse[];
|
||||
setCourse: React.Dispatch<React.SetStateAction<Course | null>>;
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -21,8 +23,9 @@ type CalendarBottomBarProps = {
|
||||
* @param {Object[]} courses - The list of courses to display in the calendar.
|
||||
* @returns {JSX.Element} The rendered bottom bar component.
|
||||
*/
|
||||
export default function CalendarBottomBar({ courses }: CalendarBottomBarProps): JSX.Element {
|
||||
const displayCourses = courses && courses.length > 0;
|
||||
export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBottomBarProps): JSX.Element {
|
||||
const asyncCourseCells = courseCells?.filter(block => block.async);
|
||||
const displayCourses = asyncCourseCells && asyncCourseCells.length > 0;
|
||||
|
||||
return (
|
||||
<div className='w-full flex py-1.25 pl-7.5 pr-6.25'>
|
||||
@@ -35,15 +38,19 @@ export default function CalendarBottomBar({ courses }: CalendarBottomBarProps):
|
||||
<>
|
||||
<Text variant='h4'>Async/Other:</Text>
|
||||
<div className='inline-flex gap-2.5'>
|
||||
{courses.map(({ courseDeptAndInstr, status, colors, className }) => (
|
||||
{asyncCourseCells.map(block => {
|
||||
const { courseDeptAndInstr, status, colors, className } = block.componentProps;
|
||||
return (
|
||||
<CalendarCourseBlock
|
||||
courseDeptAndInstr={courseDeptAndInstr}
|
||||
status={status}
|
||||
colors={colors}
|
||||
key={courseDeptAndInstr}
|
||||
className={clsx(className, 'w-35! h-15!')}
|
||||
onClick={() => setCourse(block.course)}
|
||||
/>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -123,8 +123,10 @@ function AccountForCourseConflicts({ courseCells, setCourse }: AccountForCourseC
|
||||
});
|
||||
});
|
||||
|
||||
return courseCells.map((block, i) => {
|
||||
const { courseDeptAndInstr, timeAndLocation, status } = courseCells[i]!.componentProps;
|
||||
return courseCells
|
||||
.filter(block => !block.async)
|
||||
.map(block => {
|
||||
const { courseDeptAndInstr, timeAndLocation, status } = block.componentProps;
|
||||
|
||||
return (
|
||||
<div
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import type { HexColor } from '@shared/types/Color';
|
||||
import type { Course, StatusType } from '@shared/types/Course';
|
||||
import type { CourseMeeting } from '@shared/types/CourseMeeting';
|
||||
import { colors } from '@shared/types/ThemeColors';
|
||||
import type { UserSchedule } from '@shared/types/UserSchedule';
|
||||
import type { CalendarCourseCellProps } from '@views/components/calendar/CalendarCourseCell';
|
||||
|
||||
@@ -34,6 +32,7 @@ export interface CalendarGridCourse {
|
||||
calendarGridPoint: CalendarGridPoint;
|
||||
componentProps: CalendarCourseCellProps;
|
||||
course: Course;
|
||||
async: boolean;
|
||||
gridColumnStart?: number;
|
||||
gridColumnEnd?: number;
|
||||
totalColumns?: number;
|
||||
@@ -103,25 +102,23 @@ function processAsyncCourses({
|
||||
courseDeptAndInstr: string;
|
||||
status: StatusType;
|
||||
course: Course;
|
||||
}) {
|
||||
}): CalendarGridCourse[] {
|
||||
return [
|
||||
{
|
||||
calendarGridPoint: {
|
||||
dayIndex: 0,
|
||||
startIndex: 0,
|
||||
endIndex: 0,
|
||||
dayIndex: -1,
|
||||
startIndex: -1,
|
||||
endIndex: -1,
|
||||
},
|
||||
componentProps: {
|
||||
courseDeptAndInstr,
|
||||
status,
|
||||
colors: {
|
||||
primaryColor: colors.ut.gray as HexColor,
|
||||
secondaryColor: colors.ut.gray as HexColor,
|
||||
},
|
||||
colors: course.colors,
|
||||
},
|
||||
course,
|
||||
async: true,
|
||||
},
|
||||
] satisfies CalendarGridCourse[];
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -132,7 +129,7 @@ function processInPersonMeetings(
|
||||
courseDeptAndInstr: string,
|
||||
status: StatusType,
|
||||
course: Course
|
||||
) {
|
||||
): CalendarGridCourse[] {
|
||||
const { days, startTime, endTime, location } = meeting;
|
||||
const midnightIndex = 1440;
|
||||
const normalizingTimeFactor = 720;
|
||||
@@ -151,13 +148,11 @@ function processInPersonMeetings(
|
||||
courseDeptAndInstr,
|
||||
timeAndLocation,
|
||||
status,
|
||||
colors: {
|
||||
primaryColor: colors.ut.orange as HexColor,
|
||||
secondaryColor: colors.ut.orange as HexColor,
|
||||
},
|
||||
colors: course.colors,
|
||||
},
|
||||
course,
|
||||
})) satisfies CalendarGridCourse[];
|
||||
async: false,
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -118,10 +118,29 @@ export async function querySemesterDistribution(course: Course, semester: Semest
|
||||
throw new NoDataError(course);
|
||||
}
|
||||
|
||||
let row: Required<CourseSQLRow> = {} as Required<CourseSQLRow>;
|
||||
res.columns.forEach((col, i) => {
|
||||
row[col as keyof CourseSQLRow] = res.values[0]![i]! as never;
|
||||
});
|
||||
const row: Required<CourseSQLRow> = {} as Required<CourseSQLRow>;
|
||||
for (let i = 0; i < res.columns.length; i++) {
|
||||
const col = res.columns[i] as keyof CourseSQLRow;
|
||||
switch (col) {
|
||||
case 'A':
|
||||
case 'A_Minus':
|
||||
case 'B_Plus':
|
||||
case 'B':
|
||||
case 'B_Minus':
|
||||
case 'C_Plus':
|
||||
case 'C':
|
||||
case 'C_Minus':
|
||||
case 'D_Plus':
|
||||
case 'D':
|
||||
case 'D_Minus':
|
||||
case 'F':
|
||||
case 'Other':
|
||||
row[col] = res.values.reduce((acc, cur) => acc + (cur[i] as number), 0) as never;
|
||||
break;
|
||||
default:
|
||||
row[col] = res.columns[i]![0]! as never;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
A: row.A,
|
||||
|
||||
Reference in New Issue
Block a user