Vertical content cards

client/src/Tools/_framework/Paths/Assigned.tsx

@@ -1,41 +1,127 @@
 // import axios from 'axios';
-import { Button, Box, Icon, Text, Flex, Wrap, Heading } from "@chakra-ui/react";
-import React, { useEffect } from "react";
+import {
+  Button,
+  Box,
+  Icon,
+  Text,
+  Flex,
+  Wrap,
+  Heading,
+  ButtonGroup,
+  Tooltip,
+  VStack,
+  HStack,
+} from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
 import { useLoaderData, useNavigate, useFetcher } from "react-router-dom";
 
 import { RiEmotionSadLine } from "react-icons/ri";
+import { FaListAlt, FaRegListAlt } from "react-icons/fa";
+import { IoGrid, IoGridOutline } from "react-icons/io5";
 import ContentCard from "../../../Widgets/ContentCard";
 import axios from "axios";
 import { createFullName } from "../../../_utils/names";
 import { ContentStructure } from "./ActivityEditor";
 import { DateTime } from "luxon";
+import ActivityTable from "../../../Widgets/ActivityTable";
+
+export async function action({ request }) {
+  const formData = await request.formData();
+  let formObj = Object.fromEntries(formData);
+
+  if (formObj?._action == "Set List View Preferred") {
+    await axios.post(`/api/setPreferredFolderView`, {
+      cardView: formObj.listViewPref === "false",
+    });
+    return true;
+  }
+
+  throw Error(`Action "${formObj?._action}" not defined or not handled.`);
+}
 
 export async function loader({ params }) {
   const { data: assignmentData } = await axios.get(`/api/getAssigned`);
 
+  let prefData = await axios.get(`/api/getPreferredFolderView`);
+  let listViewPref = !prefData.data.cardView;
+
   return {
     user: assignmentData.user,
     assignments: assignmentData.assignments,
+    listViewPref,
   };
 }
 
 export function Assigned() {
-  let { user, assignments } = useLoaderData() as {
+  let { user, assignments, listViewPref } = useLoaderData() as {
     user: {
       userId: number;
       firstNames: string | null;
       lastNames: string;
     };
     assignments: ContentStructure[];
+    listViewPref: Boolean;
   };
 
   const navigate = useNavigate();
+  const fetcher = useFetcher();
+
+  const [listView, setListView] = useState(listViewPref);
 
   useEffect(() => {
     document.title = `Assigned - Doenet`;
   }, []);
 
-  const fetcher = useFetcher();
+  function formatTime(time: string | null) {
+    let timeFormatted: string | undefined;
+
+    if (time !== null) {
+      const sameDay = (a: DateTime, b: DateTime): boolean => {
+        return (
+          a.hasSame(b, "day") && a.hasSame(b, "month") && a.hasSame(b, "year")
+        );
+      };
+
+      let closeDateTime = DateTime.fromISO(time);
+      let now = DateTime.now();
+      let tomorrow = now.plus({ day: 1 });
+
+      if (sameDay(closeDateTime, now)) {
+        if (closeDateTime.minute === 0) {
+          timeFormatted = `today, ${closeDateTime.toLocaleString({ hour: "2-digit" })}`;
+        } else {
+          timeFormatted = `today, ${closeDateTime.toLocaleString({ hour: "2-digit", minute: "2-digit" })}`;
+        }
+      } else if (sameDay(closeDateTime, tomorrow)) {
+        if (closeDateTime.minute === 0) {
+          timeFormatted = `tomorrow, ${closeDateTime.toLocaleString({ hour: "2-digit" })}`;
+        } else {
+          timeFormatted = `tomorrow, ${closeDateTime.toLocaleString({ hour: "2-digit", minute: "2-digit" })}`;
+        }
+      } else if (closeDateTime.year === now.year) {
+        if (closeDateTime.minute === 0) {
+          timeFormatted = closeDateTime.toLocaleString({
+            weekday: "short",
+            month: "short",
+            day: "numeric",
+            hour: "2-digit",
+          });
+        } else {
+          timeFormatted = closeDateTime.toLocaleString({
+            weekday: "short",
+            month: "short",
+            day: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+          });
+        }
+      } else {
+        timeFormatted = closeDateTime.toLocaleString(DateTime.DATETIME_MED);
+      }
+    }
+
+    return timeFormatted;
+  }
 
   return (
     <>
@@ -45,110 +131,134 @@ export function Assigned() {
         height="80px"
         width="100%"
         textAlign="center"
+        padding=".5em 0"
       >
         <Heading as="h2" size="lg">
           {createFullName(user)}
         </Heading>
         <Heading as="h3" size="md">
           Assigned Activities
         </Heading>
-        <div style={{ float: "right", marginTop: "-10px" }}>
-          <Button
-            margin="3px"
-            size="xs"
-            colorScheme="blue"
-            onClick={() => navigate(`/code`)}
-          >
-            Class code
-          </Button>
-          <Button
-            margin="3px"
-            size="xs"
-            colorScheme="blue"
-            onClick={() => navigate(`/assignedData`)}
+        <VStack align="flex-end" float="right" marginRight=".5em">
+          <HStack>
+            <Button
+              size="sm"
+              colorScheme="blue"
+              onClick={() => navigate(`/code`)}
+            >
+              Class code
+            </Button>
+            <Button
+              size="sm"
+              colorScheme="blue"
+              onClick={() => navigate(`/assignedData`)}
+            >
+              See Scores
+            </Button>
+          </HStack>
+          <ButtonGroup
+            size="sm"
+            isAttached
+            variant="outline"
+            marginBottom=".5em"
           >
-            See Scores
-          </Button>
-        </div>
+            <Tooltip label="Toggle List View">
+              <Button isActive={listView === true}>
+                <Icon
+                  as={listView ? FaListAlt : FaRegListAlt}
+                  boxSize={10}
+                  p=".5em"
+                  cursor="pointer"
+                  onClick={() => {
+                    if (listView === false) {
+                      setListView(true);
+                      fetcher.submit(
+                        {
+                          _action: "Set List View Preferred",
+                          listViewPref: true,
+                        },
+                        { method: "post" },
+                      );
+                    }
+                  }}
+                />
+              </Button>
+            </Tooltip>
+            <Tooltip label="Toggle Card View">
+              <Button isActive={listView === false}>
+                <Icon
+                  as={listView ? IoGridOutline : IoGrid}
+                  boxSize={10}
+                  p=".5em"
+                  cursor="pointer"
+                  onClick={() => {
+                    if (listView === true) {
+                      setListView(false);
+                      fetcher.submit(
+                        {
+                          _action: "Set List View Preferred",
+                          listViewPref: false,
+                        },
+                        { method: "post" },
+                      );
+                    }
+                  }}
+                />
+              </Button>
+            </Tooltip>
+          </ButtonGroup>
+        </VStack>
       </Box>
       <Flex
         data-test="Assigned Activities"
-        padding="10px"
-        margin="0px"
+        padding=".5em 10px"
+        margin="0"
         width="100%"
-        justifyContent="center"
-        background="var(--lightBlue)"
-        minHeight="calc(100vh - 120px)"
+        background={
+          listView && assignments.length > 0 ? "white" : "var(--lightBlue)"
+        }
+        minHeight="calc(100vh - 188px)"
+        flexDirection="column"
       >
-        <Wrap p="10px" overflow="visible">
-          {assignments.length < 1 ? (
-            <Flex
-              flexDirection="column"
-              justifyContent="center"
-              alignItems="center"
-              alignContent="center"
-              minHeight={200}
-              background="doenet.canvas"
-              padding={20}
-              width="100%"
-            >
-              <Icon fontSize="48pt" as={RiEmotionSadLine} />
-              <Text fontSize="36pt">Nothing Assigned</Text>
-            </Flex>
-          ) : (
-            <>
+        {assignments.length < 1 ? (
+          <Flex
+            flexDirection="column"
+            justifyContent="center"
+            alignItems="center"
+            alignContent="center"
+            minHeight={200}
+            padding={20}
+            width="100%"
+          >
+            <Icon fontSize="48pt" as={RiEmotionSadLine} />
+            <Text fontSize="36pt">Nothing Assigned</Text>
+          </Flex>
+        ) : listView ? (
+          <ActivityTable
+            suppressAvatar={true}
+            showPublicStatus={false}
+            showAssignmentStatus={true}
+            content={assignments.map((assignment) => {
+              return {
+                id: assignment.id,
+                title: assignment.name,
+                cardLink:
+                  assignment.assignmentStatus === "Open"
+                    ? `/code/${assignment.classCode}`
+                    : `/assignedData/${assignment.id}`,
+                assignmentStatus: assignment.assignmentStatus,
+                closeTime: formatTime(assignment.codeValidUntil),
+              };
+            })}
+          />
+        ) : (
+          <Flex
+            justifyContent="center"
+            alignItems="center"
+            alignContent="center"
+          >
+            <Wrap p="10px" overflow="visible">
               {assignments.map((assignment) => {
-                let closes: string | undefined;
-                if (assignment.codeValidUntil !== null) {
-                  const sameDay = (a: DateTime, b: DateTime): boolean => {
-                    return (
-                      a.hasSame(b, "day") &&
-                      a.hasSame(b, "month") &&
-                      a.hasSame(b, "year")
-                    );
-                  };
-
-                  let closeDateTime = DateTime.fromISO(
-                    assignment.codeValidUntil,
-                  );
-                  let now = DateTime.now();
-                  let tomorrow = now.plus({ day: 1 });
-
-                  if (sameDay(closeDateTime, now)) {
-                    if (closeDateTime.minute === 0) {
-                      closes = `today, ${closeDateTime.toLocaleString({ hour: "2-digit" })}`;
-                    } else {
-                      closes = `today, ${closeDateTime.toLocaleString({ hour: "2-digit", minute: "2-digit" })}`;
-                    }
-                  } else if (sameDay(closeDateTime, tomorrow)) {
-                    if (closeDateTime.minute === 0) {
-                      closes = `tomorrow, ${closeDateTime.toLocaleString({ hour: "2-digit" })}`;
-                    } else {
-                      closes = `tomorrow, ${closeDateTime.toLocaleString({ hour: "2-digit", minute: "2-digit" })}`;
-                    }
-                  } else if (closeDateTime.year === now.year) {
-                    if (closeDateTime.minute === 0) {
-                      closes = closeDateTime.toLocaleString({
-                        weekday: "short",
-                        month: "short",
-                        day: "numeric",
-                        hour: "2-digit",
-                      });
-                    } else {
-                      closes = closeDateTime.toLocaleString({
-                        weekday: "short",
-                        month: "short",
-                        day: "numeric",
-                        hour: "2-digit",
-                        minute: "2-digit",
-                      });
-                    }
-                  } else {
-                    closes = closeDateTime.toLocaleString(
-                      DateTime.DATETIME_MED,
-                    );
-                  }
-                }
                 return (
                   <ContentCard
                     key={`Card${assignment.id}`}
@@ -165,13 +275,13 @@ export function Assigned() {
                     showPublicStatus={false}
                     showAssignmentStatus={true}
                     assignmentStatus={assignment.assignmentStatus}
-                    closeTime={closes}
+                    closeTime={formatTime(assignment.codeValidUntil)}
                   />
                 );
               })}
-            </>
-          )}
-        </Wrap>
+            </Wrap>
+          </Flex>
+        )}
       </Flex>
     </>
   );