update component

uwblueprint · Oct 26, 2024 · 5949915 · 5949915
1 parent 200b375
commit 5949915
Show file tree

Hide file tree

Showing 2 changed files with 164 additions and 8 deletions.
diff --git a/frontend/src/components/pages/schedule/ScheduleListView.tsx b/frontend/src/components/pages/schedule/ScheduleListView.tsx
@@ -0,0 +1,154 @@
+import React, { useEffect, useState } from "react";
+import { Flex, Tabs, TabList, Tab, Text } from "@chakra-ui/react";
+
+import { tasksColumnTypes } from "./columnKeys";
+
+import {
+  scheduleTasksMockData,
+  sundayScheduleTasksMockData,
+  mondayScheduleTasksMockData,
+  tuesdayScheduleTasksMockData,
+  wednesdayScheduleTasksMockData,
+  thursdayScheduleTasksMockData,
+  fridayScheduleTasksMockData,
+  saturdayScheduleTasksMockData,
+} from "../../../mocks/scheduletasks";
+
+import ScheduleTable, { ColumnInfoTypes, TableData } from "./ScheduleTable";
+
+const ScheduleListView = (): React.ReactElement => {
+  const enum Dates {
+    SUNDAY = "SUNDAY",
+    MONDAY = "MONDAY",
+    TUESDAY = "TUESDAY",
+    WEDNESDAY = "WEDNESDAY",
+    THURSDAY = "THURSDAY",
+    FRIDAY = "FRIDAY",
+    SATURDAY = "SATURDAY",
+  }
+
+  const [taskData, setTaskData] = useState<TableData[]>([]);
+  const [taskDataColumns, setTaskDataColumns] = useState<ColumnInfoTypes[]>([]);
+  const [taskDate, setTaskDate] = useState(Dates.SUNDAY);
+  const [dailyTaskData, setDailyTaskData] = useState<TableData[]>([]);
+
+  useEffect(() => {
+    setTaskDataColumns(tasksColumnTypes);
+    setTaskData(scheduleTasksMockData);
+    if (taskDate === Dates.SUNDAY) {
+      setDailyTaskData(sundayScheduleTasksMockData);
+    } else if (taskDate === Dates.MONDAY) {
+      setDailyTaskData(mondayScheduleTasksMockData);
+    } else if (taskDate === Dates.TUESDAY) {
+      setDailyTaskData(tuesdayScheduleTasksMockData);
+    } else if (taskDate === Dates.WEDNESDAY) {
+      setDailyTaskData(wednesdayScheduleTasksMockData);
+    } else if (taskDate === Dates.THURSDAY) {
+      setDailyTaskData(thursdayScheduleTasksMockData);
+    } else if (taskDate === Dates.FRIDAY) {
+      setDailyTaskData(fridayScheduleTasksMockData);
+    } else if (taskDate === Dates.SATURDAY) {
+      setDailyTaskData(saturdayScheduleTasksMockData);
+    } else {
+      setDailyTaskData(sundayScheduleTasksMockData);
+    }
+  }, [taskDate]);
+
+  return (
+    <>
+      <Flex flexDir="column" flexGrow={1} p="20px">
+        <Text as="b" display="block" margin="10px" textAlign="left">
+          Weekly Tasks
+        </Text>
+        <ScheduleTable
+          data={taskData}
+          columnInfo={taskDataColumns}
+          maxResults={8}
+          onEdit={() => {}}
+          isSelectable
+        />
+      </Flex>
+      <Flex flexDir="column" flexGrow={1} p="20px">
+        <Text as="b" display="block" margin="10px" textAlign="left">
+          Daily Tasks
+        </Text>
+        <Tabs variant="enclosed-colored" h="30px" mb="10px" isFitted>
+          <TabList margin="10px">
+            <Tab
+              _selected={{ color: "white", bg: "purple.main" }}
+              borderRadius="8px 8px 0 0"
+              onClick={() => {
+                setTaskDate(Dates.SUNDAY);
+              }}
+            >
+              Sunday
+            </Tab>
+            <Tab
+              _selected={{ color: "white", bg: "purple.main" }}
+              borderRadius="8px 8px 0 0"
+              onClick={() => {
+                setTaskDate(Dates.MONDAY);
+              }}
+            >
+              Monday
+            </Tab>
+            <Tab
+              _selected={{ color: "white", bg: "purple.main" }}
+              borderRadius="8px 8px 0 0"
+              onClick={() => {
+                setTaskDate(Dates.TUESDAY);
+              }}
+            >
+              Tuesday
+            </Tab>
+            <Tab
+              _selected={{ color: "white", bg: "purple.main" }}
+              borderRadius="8px 8px 0 0"
+              onClick={() => {
+                setTaskDate(Dates.WEDNESDAY);
+              }}
+            >
+              Wednesday
+            </Tab>
+            <Tab
+              _selected={{ color: "white", bg: "purple.main" }}
+              borderRadius="8px 8px 0 0"
+              onClick={() => {
+                setTaskDate(Dates.THURSDAY);
+              }}
+            >
+              Thursday
+            </Tab>
+            <Tab
+              _selected={{ color: "white", bg: "purple.main" }}
+              borderRadius="8px 8px 0 0"
+              onClick={() => {
+                setTaskDate(Dates.FRIDAY);
+              }}
+            >
+              Friday
+            </Tab>
+            <Tab
+              _selected={{ color: "white", bg: "purple.main" }}
+              borderRadius="8px 8px 0 0"
+              onClick={() => {
+                setTaskDate(Dates.SATURDAY);
+              }}
+            >
+              Saturday
+            </Tab>
+          </TabList>
+        </Tabs>
+        <ScheduleTable
+          data={dailyTaskData}
+          columnInfo={taskDataColumns}
+          maxResults={8}
+          onEdit={() => {}}
+          isSelectable
+        />
+      </Flex>
+    </>
+  );
+};
+
+export default ScheduleListView;
diff --git a/frontend/src/components/pages/schedule/SchedulePage.tsx b/frontend/src/components/pages/schedule/SchedulePage.tsx
@@ -20,6 +20,7 @@ import {
 } from "@mui/icons-material";
 
 import { ScheduleType } from "../../../types/ScheduleTypes";
+import ScheduleListView from "./ScheduleListView";
 
 const SchedulePage = (): React.ReactElement => {
   const [rooms, setRooms] = useState<number[]>([]);
@@ -66,7 +67,7 @@ const SchedulePage = (): React.ReactElement => {
 
       <Flex justifyContent="space-between" mt={10} ml={8} mr={10}>
         <Flex>
-          <Heading size="lg" fontSize="36px" w="14vw" color="purple.main">
+          <Heading size="lg" fontSize="36px" color="purple.main" whiteSpace="nowrap">
             January 2025
             {/* see announcements page for how to determine what text shows */}
           </Heading>
@@ -161,13 +162,14 @@ const SchedulePage = (): React.ReactElement => {
           Update Selected
         </Button>
       </Flex>
-      <Box mt={8} ml={10} mr={10} padding={40} borderWidth="1px">
-        {scheduleType === "CALENDAR" ? (
-          <Heading size="md">TEMP CALENDAR</Heading>
-        ) : (
-          <Heading size="md">{scheduleData}</Heading>
-        )}
-      </Box>
+      {/* <Box mt={8} ml={10} mr={10} padding={40} borderWidth="1px"> */}
+      {scheduleType === "CALENDAR" ? (
+        <Heading size="md">TEMP CALENDAR</Heading>
+      ) : (
+        // <Heading size="md">{scheduleData}</Heading>
+        <ScheduleListView />
+      )}
+      {/* </Box> */}
     </Flex>
   );
 };