#2217 working prototype

walker-sean · walker-sean · commit 1a985a8c1d86 · 2024-03-17T23:43:29.000-04:00
diff --git a/src/frontend/src/pages/CalendarPage/CalendarComponents/CalendarDayCard.tsx b/src/frontend/src/pages/CalendarPage/CalendarComponents/CalendarDayCard.tsx
@@ -1,4 +1,4 @@
-import { Box, Card, CardContent, Grid, IconButton, Stack, Typography } from '@mui/material';
+import { Box, Card, CardContent, Grid, IconButton, Link, Stack, Tooltip, Typography } from '@mui/material';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import { DesignReview } from 'shared';
 import { meetingStartTimePipe } from '../../../utils/pipes';
@@ -8,15 +8,16 @@ import ElectricalServicesIcon from '@mui/icons-material/ElectricalServices';
 import TerminalIcon from '@mui/icons-material/Terminal';
 import { useState } from 'react';
 import DRCSummaryModal from '../DesignReviewSummaryModal';
+import DynamicTooltip from '../../../components/DynamicTooltip';
 
-export const getTeamTypeIcon = (teamTypeId: string, isLarge?: boolean) => {
+export const getTeamTypeIcon = (teamTypeName: string, isLarge?: boolean) => {
   const teamIcons: Map<string, JSX.Element> = new Map([
     ['Software', <TerminalIcon fontSize={isLarge ? 'large' : 'small'} />],
     ['Business', <WorkOutlineIcon fontSize={isLarge ? 'large' : 'small'} />],
     ['Electrical', <ElectricalServicesIcon fontSize={isLarge ? 'large' : 'small'} />],
     ['Mechanical', <ConstructionIcon fontSize={isLarge ? 'large' : 'small'} />]
   ]);
-  return teamIcons.get(teamTypeId);
+  return teamIcons.get(teamTypeName);
 };
 
 interface CalendarDayCardProps {
@@ -49,24 +50,68 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({ cardDate, events }) =
         <Box marginLeft={0.5} marginBottom={0.5} onClick={() => setIsSummaryModalOpen(true)} sx={{ cursor: 'pointer' }}>
           <Card sx={{ backgroundColor: 'red', borderRadius: 1, minWidth: 140, maxWidth: 140, minHeight: 20, maxHeight: 20 }}>
             <Stack direction="row">
-              {getTeamTypeIcon(event.teamType.teamTypeId)}
-              <Typography marginLeft={0.5} marginBottom={0.3} fontSize={14}>
-                {name + (event.meetingTimes.length > 0 ? ' ' + meetingStartTimePipe(event.meetingTimes) : '')}
-              </Typography>
+              {getTeamTypeIcon(event.teamType.name)}
+              <DynamicTooltip
+                title={name + (event.meetingTimes.length > 0 ? ' - ' + meetingStartTimePipe(event.meetingTimes) : '')}
+              >
+                <Typography marginLeft={0.5} marginBottom={0.3} fontSize={14} noWrap>
+                  {name + (event.meetingTimes.length > 0 ? ' ' + meetingStartTimePipe(event.meetingTimes) : '')}
+                </Typography>
+              </DynamicTooltip>
             </Stack>
           </Card>
         </Box>
       </>
     );
   };
 
-  const ExtraEventsCard = (extraEvents: number) => {
+  const ExtraEventNote = (event: DesignReview) => {
+    const [isSummaryModalOpen, setIsSummaryModalOpen] = useState(false);
+
+    return (
+      <>
+        <DRCSummaryModal open={isSummaryModalOpen} onHide={() => setIsSummaryModalOpen(false)} designReview={event} />
+        <Link style={{ cursor: 'pointer' }} fontSize={15} onClick={() => setIsSummaryModalOpen(true)}>
+          {event.wbsName + (event.meetingTimes.length > 0 ? ' - ' + meetingStartTimePipe(event.meetingTimes) : '')}
+        </Link>
+      </>
+    );
+  };
+
+  const ExtraEventsCard = (extraEvents: DesignReview[]) => {
     return (
       <Box marginLeft={0.5} marginBottom={0.2}>
         <Card sx={{ backgroundColor: 'grey', borderRadius: 1, minWidth: 140, maxWidth: 140, minHeight: 20, maxHeight: 20 }}>
-          <Typography marginLeft={0.5} marginBottom={0.3} align="center">
-            {'+' + extraEvents}
-          </Typography>
+          <Tooltip
+            id="tooltip"
+            placement="right"
+            PopperProps={{
+              popperOptions: {
+                modifiers: [
+                  {
+                    name: 'flip',
+                    options: {
+                      fallbackPlacements: ['top', 'bottom'],
+                      padding: -1,
+                      rootBoundary: 'document'
+                    }
+                  },
+                  {
+                    name: 'offset',
+                    options: {
+                      offset: [0, -1]
+                    }
+                  }
+                ]
+              }
+            }}
+            arrow
+            title={<Stack direction="column">{extraEvents.map((event) => ExtraEventNote(event))}</Stack>}
+          >
+            <Typography marginLeft={0.5} marginBottom={0.3} align="center">
+              {'+' + extraEvents.length}
+            </Typography>
+          </Tooltip>
         </Card>
       </Box>
     );
@@ -80,8 +125,8 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({ cardDate, events }) =
           events.map((event) => EventCard(event))
         ) : (
           <>
-            {EventCard(events[1])}
-            {ExtraEventsCard(events.length - 1)}
+            {EventCard(events[0])}
+            {ExtraEventsCard(events.slice(1))}
           </>
         )}
       </CardContent>
diff --git a/src/frontend/src/pages/CalendarPage/CalendarPage.tsx b/src/frontend/src/pages/CalendarPage/CalendarPage.tsx
@@ -7,9 +7,9 @@ import { Box, Grid, Stack, Typography, useTheme } from '@mui/material';
 import PageLayout from '../../components/PageLayout';
 import { DesignReview, DesignReviewStatus } from 'shared';
 import MonthSelector from './CalendarComponents/MonthSelector';
-import CalendarDayCard from './CalendarComponents/CalendarDayCard';
+import CalendarDayCard, { getTeamTypeIcon } from './CalendarComponents/CalendarDayCard';
 import FillerCalendarDayCard from './CalendarComponents/FillerCalendarDayCard';
-import { DAY_NAMES, EnumToArray, calendarPaddingDays, daysInMonth } from '../../utils/design-review.utils';
+import { DAY_NAMES, EnumToArray, calendarPaddingDays, daysInMonth, isConfirmed } from '../../utils/design-review.utils';
 import ActionsMenu from '../../components/ActionsMenu';
 import { useAllDesignReviews } from '../../hooks/design-reviews.hooks';
 import LoadingIndicator from '../../components/LoadingIndicator';
@@ -20,37 +20,27 @@ import { datePipe } from '../../utils/pipes';
 const CalendarPage = () => {
   const theme = useTheme();
   const [displayMonthYear, setDisplayMonthYear] = useState<Date>(new Date());
-  const { isLoading, isError, error, data: designReviews } = useAllDesignReviews();
+  const { isLoading, isError, error, data: allDesignReviews } = useAllDesignReviews();
   const user = useCurrentUser();
 
-  if (isLoading || !designReviews) return <LoadingIndicator />;
+  if (isLoading || !allDesignReviews) return <LoadingIndicator />;
   if (isError) return <ErrorPage message={error.message} />;
 
-  const EventDict = new Map<string, DesignReview[]>();
+  const designReviews = allDesignReviews.filter(isConfirmed);
 
+  const eventDict = new Map<string, DesignReview[]>();
   designReviews.forEach((designReview) => {
-    if (
-      EventDict.has(
-        datePipe(new Date(designReview.dateScheduled.getTime() - designReview.dateScheduled.getTimezoneOffset() * -60000))
-      )
-    ) {
-      EventDict.set(
-        datePipe(designReview.dateScheduled),
-        EventDict.get(
-          datePipe(new Date(designReview.dateScheduled.getTime() - designReview.dateScheduled.getTimezoneOffset() * -60000))
-        )!.concat(designReview)
-      );
+    const date = datePipe(
+      new Date(designReview.dateScheduled.getTime() - designReview.dateScheduled.getTimezoneOffset() * -60000)
+    );
+    if (eventDict.has(date)) {
+      eventDict.get(date)?.push(designReview);
     } else {
-      EventDict.set(
-        datePipe(new Date(designReview.dateScheduled.getTime() - designReview.dateScheduled.getTimezoneOffset() * -60000)),
-        [designReview]
-      );
+      eventDict.set(date, [designReview]);
     }
-
-    console.log(designReview.wbsName);
   });
 
-  const unconfirmedDR = designReviews.filter(
+  const unconfirmedDR = allDesignReviews.filter(
     (designReview) =>
       designReview.userCreated.userId === user.userId && designReview.status === DesignReviewStatus.UNCONFIRMED
   );
@@ -64,6 +54,7 @@ const CalendarPage = () => {
   const designReviewButtons = (designReviews: DesignReview[]) => {
     return designReviews.map((designReview) => {
       return {
+        icon: getTeamTypeIcon(designReview.teamType.name),
         title: designReview.wbsName,
         onClick: () => {},
         disabled: false
@@ -122,7 +113,13 @@ const CalendarPage = () => {
                       {isDayInDifferentMonth(day, week) ? (
                         <FillerCalendarDayCard day={day} />
                       ) : (
-                        <CalendarDayCard cardDate={cardDate} events={EventDict.get(datePipe(cardDate)) ?? []} />
+                        <CalendarDayCard
+                          cardDate={cardDate}
+                          events={
+                            eventDict.get(datePipe(new Date(cardDate.getTime() - cardDate.getTimezoneOffset() * -60000))) ??
+                            []
+                          }
+                        />
                       )}
                     </Box>
                   </Grid>
diff --git a/src/frontend/src/utils/design-review.utils.ts b/src/frontend/src/utils/design-review.utils.ts
@@ -80,53 +80,6 @@ export const calendarPaddingDays = (month: Date): number => {
   return new Date(month.getFullYear(), month.getMonth(), 0).getDay();
 };
 
-// TODO remove during wire up ticket
-export const testDesignReview1: DesignReview = {
-  designReviewId: 'Meeting',
-  dateScheduled: new Date(),
-  meetingTimes: [16],
-  dateCreated: new Date(),
-  userCreated: batman,
-  status: DesignReviewStatus.UNCONFIRMED,
-  teamType: { teamTypeId: 'Mechanical', name: 'Mechanical', iconName: '' },
-  requiredMembers: [],
-  optionalMembers: [],
-  confirmedMembers: [],
-  deniedMembers: [],
-  isOnline: false,
-  isInPerson: false,
-  attendees: [],
-  wbsName: 'bruh',
-  wbsNum: { carNumber: 1, workPackageNumber: 1, projectNumber: 1 }
-};
-
-// TODO remove during wire up ticket
-export const exampleDesignReview1: DesignReview = {
-  designReviewId: 'Wiring',
-  dateScheduled: new Date(),
-  meetingTimes: [1, 2, 5],
-  dateCreated: new Date(),
-  userCreated: superman,
-  status: DesignReviewStatus.DONE,
-  teamType: {
-    teamTypeId: 'Electrical',
-    name: 'thisteam',
-    iconName: ''
-  },
-  requiredMembers: [batman, superman, greenlantern, flash, aquaman],
-  optionalMembers: [wonderwoman, alfred],
-  confirmedMembers: [],
-  deniedMembers: [],
-  location: 'Room 101',
-  isOnline: true,
-  isInPerson: false,
-  zoomLink: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
-  attendees: [],
-  wbsName: 'Battery',
-  wbsNum: { carNumber: 1, projectNumber: 1, workPackageNumber: 1 },
-  docTemplateLink: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
-};
-
 // TODO: We will have to make a call to the backend to get this data
 export const usersToAvailabilities = new Map([
   [superman, [1, 2, 3, 4, 5, 6, 7]],
@@ -145,3 +98,11 @@ existingMeetingData.set(5, 'warning');
 existingMeetingData.set(10, 'build');
 existingMeetingData.set(20, 'computer');
 existingMeetingData.set(50, 'electrical');
+
+export const isConfirmed = (designReview: DesignReview): boolean => {
+  return (
+    designReview.status === DesignReviewStatus.CONFIRMED ||
+    designReview.status === DesignReviewStatus.SCHEDULED ||
+    designReview.status === DesignReviewStatus.DONE
+  );
+};
