Docx Export (#241)

* add option to export logs as docx and include sort direction

* run the linter

frontend/package.json

@@ -27,6 +27,7 @@
     "bootstrap": "^4.6.0",
     "date-fns": "^2.30.0",
     "dayzed": "^3.2.3",
+    "docx": "8.0.0",
     "framer-motion": "^4.1.17",
     "graphql": "^15.5.0",
     "humps": "^2.0.1",

frontend/src/components/forms/ExportToCSV.tsx → frontend/src/components/forms/ExportLogs.tsx

@@ -20,16 +20,21 @@ import {
   ModalCloseButton,
   Spinner,
   FormLabel,
+  Flex,
 } from "@chakra-ui/react";
+import { ArrowDownIcon, ArrowUpIcon } from "@chakra-ui/icons";
 import { TiExport } from "react-icons/ti";
 import LogRecordAPIClient from "../../APIClients/LogRecordAPIClient";
 import { singleDatePickerStyle } from "../../theme/forms/datePickerStyles";
-import convertLogsToCSV from "../../helper/csvHelpers";
+import {
+  convertLogsToDOCX,
+  convertLogsToCSV,
+} from "../../helper/exportHelpers";
 import CreateToast from "../common/Toasts";
 import { getFormattedDateAndTime } from "../../helper/dateHelpers";
 import { SingleDatepicker } from "../common/Datepicker";
 
-const ExportToCSV = (): React.ReactElement => {
+const ExportLogs = (): React.ReactElement => {
   const [startDate, setStartDate] = useState<Date | undefined>();
   const [isStartDateEmpty, setIsStartDateEmpty] = useState<boolean>(true);
   const [endDate, setEndDate] = useState<Date | undefined>();
@@ -39,6 +44,8 @@ const ExportToCSV = (): React.ReactElement => {
   const [endDateError, setEndDateError] = useState<boolean>(false);
   const [dateError, setDateError] = useState<boolean>(false);
 
+  const [sortDirection, setSortDirection] = useState("desc");
+
   const [isOpen, setOpen] = useState(false);
 
   const [loading, setLoading] = useState(false);
@@ -47,6 +54,7 @@ const ExportToCSV = (): React.ReactElement => {
   const handleClear = () => {
     setStartDate(undefined);
     setEndDate(undefined);
+    setSortDirection("desc");
     setDateError(false);
     setStartDateError(false);
     setEndDateError(false);
@@ -93,20 +101,23 @@ const ExportToCSV = (): React.ReactElement => {
     setOpen(false);
   };
 
-  const handleSubmit = async () => {
+  const validateDates = (): boolean => {
     if (!startDate && !isStartDateEmpty) {
       setStartDateError(true);
-      return;
+      return false;
     }
     if (!endDate && !isEndDateEmpty) {
       setEndDateError(true);
-      return;
+      return false;
     }
     if (startDate && endDate && startDate > endDate) {
       setDateError(true);
-      return;
+      return false;
     }
+    return true;
+  };
 
+  const constructDateRange = (): (string | null)[] | undefined => {
     let dateRange;
     if (startDate || endDate) {
       startDate?.setHours(0, 0, 0, 0);
@@ -117,10 +128,57 @@ const ExportToCSV = (): React.ReactElement => {
         endDate ? endDate.toISOString() : null,
       ];
     }
+
+    return dateRange;
+  };
+
+  const handleDocxExport = async () => {
+    if (!validateDates()) {
+      return;
+    }
+
     setLoading(true);
     const data = await LogRecordAPIClient.filterLogRecords({
-      dateRange,
-      returnAll: true, // return all data
+      dateRange: constructDateRange(),
+      sortDirection,
+      returnAll: true,
+    });
+
+    if (!data || data.logRecords.length === 0) {
+      newToast(
+        "Error downloading DOCX",
+        "No records found in the provided date range.",
+        "error",
+      );
+    } else {
+      const formattedLogRecords = data.logRecords.map((logRecord) => {
+        const { date, time } = getFormattedDateAndTime(
+          new Date(logRecord.datetime),
+          true,
+        );
+        return { ...logRecord, datetime: `${date}, ${time}` };
+      });
+      const success = await convertLogsToDOCX(formattedLogRecords);
+      if (success) {
+        newToast("DOCX downloaded", "Successfully downloaded DOCX.", "success");
+        handleClose();
+      } else {
+        newToast("Error downloading DOCX", "Unable to download DOCX.", "error");
+      }
+    }
+    setLoading(false);
+  };
+
+  const handleCsvExport = async () => {
+    if (!validateDates()) {
+      return;
+    }
+
+    setLoading(true);
+    const data = await LogRecordAPIClient.filterLogRecords({
+      dateRange: constructDateRange(),
+      sortDirection,
+      returnAll: true,
     });
 
     if (!data || data.logRecords.length === 0) {
@@ -150,9 +208,9 @@ const ExportToCSV = (): React.ReactElement => {
 
   return (
     <>
-      <Tooltip label="Export to CSV">
+      <Tooltip label="Export Logs">
         <IconButton
-          aria-label="Export to CSV"
+          aria-label="Export Logs"
           icon={<Icon boxSize="36px" as={TiExport} />}
           variant="tertiary"
           onClick={handleOpen}
@@ -163,7 +221,7 @@ const ExportToCSV = (): React.ReactElement => {
         <Modal isOpen={isOpen} onClose={handleClose} size="xl">
           <ModalOverlay />
           <ModalContent>
-            <ModalHeader>Export to CSV File</ModalHeader>
+            <ModalHeader>Export Logs</ModalHeader>
             <ModalCloseButton size="lg" />
             <ModalBody>
               <FormControl isInvalid={dateError}>
@@ -225,6 +283,32 @@ const ExportToCSV = (): React.ReactElement => {
                   Note: If a range is not selected, all records will be printed.
                 </FormHelperText>
               </FormControl>
+              <FormControl>
+                <FormLabel mt={4}>Sort Direction</FormLabel>
+                <Flex alignItems="center" gap="10px">
+                  <IconButton
+                    aria-label="calendar"
+                    size="sm"
+                    variant="secondary"
+                    fontSize="20px"
+                    icon={
+                      sortDirection === "desc" ? (
+                        <ArrowDownIcon />
+                      ) : (
+                        <ArrowUpIcon />
+                      )
+                    }
+                    onClick={() =>
+                      setSortDirection(
+                        sortDirection === "desc" ? "asc" : "desc",
+                      )
+                    }
+                  />
+                  <Text>
+                    {sortDirection === "desc" ? "Descending" : "Ascending"}
+                  </Text>
+                </Flex>
+              </FormControl>
             </ModalBody>
 
             <ModalFooter>
@@ -237,8 +321,16 @@ const ExportToCSV = (): React.ReactElement => {
                   marginRight="10px"
                 />
               )}
-              <Button onClick={handleSubmit} variant="primary" type="submit">
-                Export
+              <Button
+                onClick={handleDocxExport}
+                variant="primary"
+                type="submit"
+                marginRight="10px"
+              >
+                Export As DOCX
+              </Button>
+              <Button onClick={handleCsvExport} variant="primary" type="submit">
+                Export As CSV
               </Button>
             </ModalFooter>
           </ModalContent>
@@ -248,4 +340,4 @@ const ExportToCSV = (): React.ReactElement => {
   );
 };
 
-export default ExportToCSV;
+export default ExportLogs;

frontend/src/components/pages/HomePage/HomePage.tsx

@@ -7,7 +7,7 @@ import CreateLog from "../../forms/CreateLog";
 import { LogRecord } from "../../../types/LogRecordTypes";
 import LogRecordsTable from "./LogRecordsTable";
 import HomePageFilters from "./HomePageFilters";
-import ExportToCSV from "../../forms/ExportToCSV";
+import ExportLogs from "../../forms/ExportLogs";
 import LogRecordAPIClient from "../../../APIClients/LogRecordAPIClient";
 import { SelectLabel } from "../../../types/SharedTypes";
 
@@ -219,7 +219,7 @@ const HomePage = (): React.ReactElement => {
               countRecords={countLogRecords}
               setUserPageNum={setUserPageNum}
             />
-            <ExportToCSV />
+            <ExportLogs />
           </Flex>
         </Flex>
 

frontend/src/components/pages/HomePage/LogRecordsTable.tsx

@@ -238,7 +238,7 @@ const LogRecordsTable = ({
                 <Th>Tenants</Th>
                 <Th>Note</Th>
                 <Th>Employee</Th>
-                <Th>Attn To</Th>
+                <Th>Attn Tos</Th>
                 <Th>Tags</Th>
                 <Th> </Th>
               </Tr>