SF Claim Summary Improvements (#165)

Relates to #169, partially resolved by adding hyperlink elements in 3 places: - WATonomous Finance System "logo" at top left - "View Claim" button in SFAdminContentTable - Ticket Tree on claim summary pages --------- Co-authored-by: Anson He <[email protected]>
WATonomous · Dec 24, 2023 · c24055c · c24055c
1 parent f0df110
commit c24055c
Show file tree

Hide file tree

Showing 14 changed files with 433 additions and 155 deletions.
diff --git a/backend/controller/files.controller.js b/backend/controller/files.controller.js
@@ -1,6 +1,7 @@
 const {
     getFile,
     getAllFilesByReference,
+    getAllFilesBySF,
     bulkCreateFiles,
     deleteFile,
 } = require('../service/files.service')
@@ -29,6 +30,14 @@ const getAllFilesByReferenceController = (req, res) => {
         .catch((err) => res.status(500).json('Error: ' + err))
 }
 
+const getAllFilesBySFId = (req, res) => {
+    getAllFilesBySF(Number(req.params.sf_id))
+        .then((files) => {
+            res.status(200).json(files)
+        })
+        .catch((err) => res.status(500).json('Error: ' + err))
+}
+
 const bulkCreateFileController = (req, res) => {
     bulkCreateFiles(
         req.files,
@@ -42,6 +51,7 @@ const bulkCreateFileController = (req, res) => {
 module.exports = {
     getFileController,
     getAllFilesByReferenceController,
+    getAllFilesBySFId,
     bulkCreateFileController,
     deleteFileController,
 }
diff --git a/backend/routes/files.routes.js b/backend/routes/files.routes.js
@@ -32,6 +32,11 @@ router.get(
     authenticateUser,
     FilesController.getAllFilesByReferenceController
 )
+router.get(
+    '/getallbysf/:sf_id',
+    authenticateUser,
+    FilesController.getAllFilesBySFId
+)
 router.post(
     '/bulk/:reference_code',
     authenticateUser,

diff --git a/backend/service/files.service.js b/backend/service/files.service.js
@@ -4,6 +4,7 @@ const {
     deleteS3File,
     generatePresignedUrl,
 } = require('../aws/s3')
+const { getAllChildren } = require('./sponsorshipfunds.service')
 
 const getFile = async (id) => {
     return File.findById(id)
@@ -26,6 +27,35 @@ const getAllFilesByReference = async (reference) => {
     )
 }
 
+// returns list of ticket codes from output of getAllChildren
+const extractAllTicketCodes = (sf) => {
+    const output = [sf.code]
+    for (const fi of sf.fundingItems) {
+        output.push(fi.code)
+        for (const ppr of fi.personalPurchases) {
+            output.push(ppr.code)
+        }
+        for (const upr of fi.uwFinancePurchases) {
+            output.push(upr.code)
+        }
+    }
+    return output
+}
+
+// returns map of ticket code to each ticket's list of files for all tickets associated with sf_id
+const getAllFilesBySF = async (sf_id) => {
+    const sf = await getAllChildren(sf_id)
+    const ticketCodes = extractAllTicketCodes(sf)
+    const attachmentsByKey = {}
+    await Promise.all(
+        ticketCodes.map(async (code) => {
+            const attachments = await getAllFilesByReference(code)
+            attachmentsByKey[code] = attachments
+        })
+    )
+    return attachmentsByKey
+}
+
 const createFile = async (file, referenceCode, isSupportingDocument) => {
     const newFile = new File({
         reference_code: referenceCode,
@@ -60,6 +90,7 @@ const deleteFile = async (referenceCode, fileName) => {
 module.exports = {
     getFile,
     getAllFilesByReference,
+    getAllFilesBySF,
     createFile,
     bulkCreateFiles,
     deleteFile,

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -9,16 +9,11 @@ import {
 import { ChakraProvider } from '@chakra-ui/react'
 
 import { AuthLayout } from './contexts/AuthContext'
-import {
-    PrivateRoute,
-    LoggedInRedirect,
-    PublicRoute,
-} from './contexts/CustomRoutes'
+import { PrivateRoute, LoggedInRedirect } from './contexts/CustomRoutes'
 import { RecoilRoot } from 'recoil'
 
 import Login from './pages/Login'
 import Dashboard from './pages/Dashboard'
-import ClaimSummary from './pages/ClaimSummary'
 import NotFound from './pages/NotFound'
 
 const router = createBrowserRouter(
@@ -27,15 +22,13 @@ const router = createBrowserRouter(
             <Route element={<LoggedInRedirect />}>
                 <Route path="/login" element={<Login />} />
             </Route>
-            <Route element={<PublicRoute />}>
-                <Route path="/claim/:id" element={<ClaimSummary />} />
-            </Route>
             <Route element={<PrivateRoute />}>
                 <Route path="/" element={<Dashboard />} />
                 <Route path="/SF/:id" element={<Dashboard />} />
                 <Route path="/FI/:id" element={<Dashboard />} />
                 <Route path="/PPR/:id" element={<Dashboard />} />
                 <Route path="/UPR/:id" element={<Dashboard />} />
+                <Route path="/claim/:id" element={<Dashboard />} />
             </Route>
             <Route path="/notfound" element={<NotFound />} />
             <Route path="*" element={<Navigate replace to="/notfound" />} />

diff --git a/frontend/src/components/CommentSection.js b/frontend/src/components/CommentSection.js
@@ -1,27 +1,16 @@
 // modified version of https://github.com/ianstormtaylor/slate/blob/main/site/examples/richtext.tsx
 import React, { useCallback, useMemo } from 'react'
 import isHotkey from 'is-hotkey'
-import { Editable, withReact, useSlate, Slate } from 'slate-react'
-import {
-    Editor,
-    Transforms,
-    createEditor,
-    Element as SlateElement,
-} from 'slate'
+import { Editable, withReact, Slate } from 'slate-react'
+import { createEditor } from 'slate'
 import { withHistory } from 'slate-history'
 
 import {
     BlockButton,
-    Button,
     Element,
-    Icon,
     Leaf,
     MarkButton,
-    TEXT_ALIGN_TYPES,
     Toolbar,
-    isBlockActive,
-    isMarkActive,
-    toggleBlock,
     toggleMark,
 } from './SlateComponents'
 import { Box, Heading } from '@chakra-ui/react'

diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.js
@@ -1,6 +1,13 @@
 import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Button, Flex, Heading, Spacer, useDisclosure } from '@chakra-ui/react'
+import {
+    Button,
+    Flex,
+    Heading,
+    Spacer,
+    useDisclosure,
+    Link,
+} from '@chakra-ui/react'
 import { useAuth } from '../contexts/AuthContext'
 import { CreateTicketModal } from './CreateTicketModal'
 const Navbar = () => {
@@ -44,14 +51,14 @@ const Navbar = () => {
             w="100%"
             h="80px"
         >
-            <Heading
-                lineHeight="48px"
-                fontSize={{ base: 'lg', md: '2xl', lg: '3xl' }}
-                onClick={() => navigate('/')}
-                cursor="pointer"
-            >
-                WATonomous Finance System
-            </Heading>
+            <Link href="/">
+                <Heading
+                    lineHeight="48px"
+                    fontSize={{ base: 'lg', md: '2xl', lg: '3xl' }}
+                >
+                    WATonomous Finance System
+                </Heading>
+            </Link>
             <Spacer />
             {currentUser && (
                 <Button onClick={onOpen} colorScheme="green" mr="20px">

diff --git a/frontend/src/components/TicketContent/SFAdminContentTable.js b/frontend/src/components/TicketContent/SFAdminContentTable.js
@@ -1,10 +1,12 @@
-import { Button, Center, Heading, VStack } from '@chakra-ui/react'
+import { Button, Center, Heading, VStack, Link } from '@chakra-ui/react'
 import React from 'react'
 import { useRecoilValue } from 'recoil'
 import { currentTicketState } from '../../state/atoms'
+import { useGetPreserveParamsHref } from '../../hooks/hooks'
 
-const UPRAdminContentTable = () => {
+const SFAdminContentTable = () => {
     const currentTicket = useRecoilValue(currentTicketState)
+    const getPreserveParamsHref = useGetPreserveParamsHref()
     return (
         <VStack
             border="1px solid black"
@@ -14,7 +16,7 @@ const UPRAdminContentTable = () => {
         >
             <Heading size="md">Admin View</Heading>
             {
-                <Center pb="7px">
+                <Center pb="7px" gap="10px">
                     <Button
                         colorScheme="blue"
                         size="sm"
@@ -26,10 +28,20 @@ const UPRAdminContentTable = () => {
                     >
                         Transition Status
                     </Button>
+                    {/* can remove getPreserveParamsHref if it does not make sense to preserve params */}
+                    <Link
+                        href={getPreserveParamsHref(
+                            `/claim/${currentTicket._id}`
+                        )}
+                    >
+                        <Button colorScheme="green" size="sm">
+                            View Claim Page
+                        </Button>
+                    </Link>
                 </Center>
             }
         </VStack>
     )
 }
 
-export default UPRAdminContentTable
+export default SFAdminContentTable
diff --git a/frontend/src/components/TicketContent/SFContentTable.js b/frontend/src/components/TicketContent/SFContentTable.js
@@ -7,7 +7,6 @@ import { currentTicketState } from '../../state/atoms'
 
 const SFContentTable = () => {
     const currentTicket = useRecoilValue(currentTicketState)
-
     return (
         <VStack>
             <Table>

diff --git a/frontend/src/components/TreeView.js b/frontend/src/components/TreeView.js
@@ -10,7 +10,7 @@ const TreeView = () => {
     const preserveParamsNavigate = usePreserveParamsNavigate()
 
     const sortTickets = (ticketList) => {
-        return [...ticketList].sort((a, b) => (a._id > b._id ? 1 : -1))
+        return ticketList.toSorted((a, b) => a._id - b._id)
     }
 
     const getFundingItemTree = (fi) => (

diff --git a/frontend/src/components/TreeViewWithLinks.js b/frontend/src/components/TreeViewWithLinks.js
@@ -0,0 +1,123 @@
+import React from 'react'
+import { Text, Box, Stack, Link } from '@chakra-ui/react'
+import { useGetPreserveParamsHref } from '../hooks/hooks'
+import { useRecoilValue } from 'recoil'
+import { currentTicketState, currentTreeState } from '../state/atoms'
+
+const TreeViewWithLinks = () => {
+    const currentTicket = useRecoilValue(currentTicketState)
+    const currentTree = useRecoilValue(currentTreeState)
+    const getPreserveParamsHref = useGetPreserveParamsHref()
+
+    const sortTickets = (ticketList) => {
+        return ticketList.toSorted((a, b) => a._id - b._id)
+    }
+
+    const getFundingItemTree = (fi) => (
+        <Box key={fi.code} m="0 !important">
+            <Link href={getPreserveParamsHref(fi.path)}>
+                <Box
+                    bgColor="blue.200"
+                    m="4px 10% 0"
+                    p="4px 8px"
+                    borderRadius="8px"
+                >
+                    <Text
+                        fontWeight={
+                            currentTicket.code === fi.code ? '800' : '600'
+                        }
+                        fontSize="xs"
+                    >
+                        {fi.codename}
+                    </Text>
+                </Box>
+            </Link>
+            {sortTickets(fi.personalPurchases).map((ppr) => {
+                return (
+                    <Link key={ppr.code} href={getPreserveParamsHref(ppr.path)}>
+                        <Box
+                            bgColor="cyan.200"
+                            m="4px 0 0 20%"
+                            p="4px 8px"
+                            borderRadius="8px"
+                        >
+                            <Text
+                                fontWeight={
+                                    currentTicket.code === ppr.code
+                                        ? '800'
+                                        : '600'
+                                }
+                                fontSize="xs"
+                            >
+                                {ppr.codename}
+                            </Text>
+                        </Box>
+                    </Link>
+                )
+            })}
+            {sortTickets(fi.uwFinancePurchases).map((upr) => {
+                return (
+                    <Link key={upr.code} href={getPreserveParamsHref(upr.path)}>
+                        <Box
+                            bgColor="teal.200"
+                            m="4px 0 0 20%"
+                            p="4px 8px"
+                            borderRadius="8px"
+                        >
+                            <Text
+                                fontWeight={
+                                    currentTicket.code === upr.code
+                                        ? '800'
+                                        : '600'
+                                }
+                                fontSize="xs"
+                            >
+                                {upr.codename}
+                            </Text>
+                        </Box>
+                    </Link>
+                )
+            })}
+        </Box>
+    )
+
+    if (
+        !currentTicket.type ||
+        !currentTree ||
+        Object.keys(currentTree).length === 0
+    )
+        return <Text>No tree to display</Text>
+
+    // Special Case: WATO Cash
+    // OR UPR/PPR with fi_link to WATO Cash
+    if (currentTree.sf_link === -1) {
+        return <Stack>{getFundingItemTree(currentTree)}</Stack>
+    }
+
+    return (
+        <Stack w="100%">
+            <Link href={getPreserveParamsHref(currentTree.path)}>
+                <Box
+                    bgColor="purple.200"
+                    p="4px 8px"
+                    mr="20%"
+                    borderRadius="8px"
+                >
+                    <Text
+                        fontWeight={
+                            currentTicket.code === currentTree.code
+                                ? '800'
+                                : '600'
+                        }
+                        fontSize="xs"
+                    >
+                        {currentTree.codename}
+                    </Text>
+                </Box>
+            </Link>
+            {sortTickets(currentTree.fundingItems).map(getFundingItemTree)}
+        </Stack>
+    )
+}
+
+export default TreeViewWithLinks
diff --git a/frontend/src/hooks/hooks.js b/frontend/src/hooks/hooks.js
@@ -9,3 +9,13 @@ export const usePreserveParamsNavigate = () => {
         navigate(`${path}?${oldSearchParams.toString()}`)
     }
 }
+
+export const useGetPreserveParamsHref = () => {
+    const [searchParams] = useSearchParams()
+    const oldSearchParams = new URLSearchParams(searchParams)
+    const newSearchParams =
+        oldSearchParams.toString().trim() === ''
+            ? ''
+            : `?${oldSearchParams.toString()}`
+    return (path) => `${path}${newSearchParams}`
+}