Revize bf332c46

re #9130 catalog header + fakerjs random data

frontend/package.json

@@ -6 +6 @@
   "dependencies": {
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
+    "@faker-js/faker": "^6.0.0",
     "@mui/icons-material": "^5.5.1",
     "@mui/material": "^5.5.2",
     "@testing-library/jest-dom": "^5.14.1",

frontend/src/features/Catalog/Catalog.tsx

@@ -7 +7 @@
     Stack,
     TextField,
 } from '@mui/material'
-import { useEffect, useState } from 'react'
 import { CatalogDto } from '../../swagger/data-contracts'
 import CatalogTable from './CatalogTable'
+import { faker } from '@faker-js/faker'
+
 
 const Catalog = () => {
+
+    // Creates a generic row for the table
     const createRow = (): CatalogDto => ({
-        name: 'Cell',
-        certainty: 100,
-        longitude: 1,
-        latitude: 2,
-        writtenForms: ['Written Form'],
-        bibliography: ['Bibliography'],
-        countries: ['Country'],
-        alternativeNames: ['Alternative Name'],
+        name: faker.commerce.product(),
+        certainty: faker.random.number({ min: 1, max: 1000 }),
+        longitude: faker.address.latitude() as unknown as number,
+        latitude: faker.address.longitude() as unknown as number,
+        writtenForms: [faker.name.firstName()],
+        bibliography: [faker.name.lastName()],
+        types: [faker.commerce.color()],
+        countries: [faker.address.country()],
+        alternativeNames: [faker.commerce.productName()],
     })
-    const data: CatalogDto[] = Array(25).fill(createRow())
+    const data: CatalogDto[] = Array(33).fill({}).map(() => createRow())
 
     return (
         <>

frontend/src/features/Catalog/CatalogService.ts

@@ -1 @@
-import axios from "../../api/axiosInstance"
-import { CatalogDto } from "../../swagger/data-contracts"
-
-export const getCatalogItems = async (componentMounted: boolean, setCatalog: (catalogItems: CatalogDto[]) => void, ) => {
-    try {
-        const { data } = await axios.get('/catalog')
-    }
-    catch (err: any) {
-
-    }
-}
-
-export const getCatalogItem = (id: string) => {
-
-}

frontend/src/features/Catalog/CatalogTable.tsx

@@ -2 +2 @@
 import {
     Box,
     Paper,
+    Stack,
     Table,
     TableBody,
     TableCell,
     TableContainer,
     TableFooter,
+    TableHead,
     TablePagination,
     TableRow,
+    Typography,
 } from '@mui/material'
-import TablePaginationActions, { TablePaginationActionsProps } from '@mui/material/TablePagination/TablePaginationActions'
+import TablePaginationActions, {
+    TablePaginationActionsProps,
+} from '@mui/material/TablePagination/TablePaginationActions'
 import { FunctionComponent, useState } from 'react'
 import IconButton from '@mui/material/IconButton'
 import FirstPageIcon from '@mui/icons-material/FirstPage'
@@ -19 +24 @@
 import LastPageIcon from '@mui/icons-material/LastPage'
 import { CatalogDto } from '../../swagger/data-contracts'
 
+// Currently adapted from https://mui.com/components/tables/
 
 const CatalogTableActions: FunctionComponent<TablePaginationActionsProps> = ({
     count,
@@ -122 +128 @@
     createData('Oreo', 437, 18.0),
 ].sort((a, b) => (a.calories < b.calories ? -1 : 1))
 
-
 export interface CatalogTableProps {
     data: CatalogDto[]
 }
@@ -149 +154 @@
         setPage(0)
     }
 
+    // Table columns
+    const columns = [
+        'Name',
+        'Alternative names',
+        'Written form',
+        'Type',
+        'State or territory',
+        'Coordinates',
+        'Certainty',
+    ]
+
     return (
-        <TableContainer component={Paper}>
-            <Table sx={{ minWidth: 500 }} aria-label="custom pagination table">
+        // TODO remove mb
+        <TableContainer component={Paper} sx={{mb: 16 }} >
+            <Table
+                sx={{ minWidth: 500 }}
+                aria-label="sticky table"
+                stickyHeader
+            >
+                <TableHead>
+                    <TableRow>
+                        {columns.map((col, idx) => (
+                            <TableCell key={idx} align="left">
+                                <Typography fontWeight="bold">{col}</Typography>
+                            </TableCell>
+                        ))}
+                    </TableRow>
+                </TableHead>
                 <TableBody>
                     {(rowsPerPage > 0
                         ? data.slice(
@@ -164 +194 @@
                             <TableCell component="th" scope="row">
                                 {row.name}
                             </TableCell>
-                            <TableCell style={{ width: 160 }} align="right">
-                                {row?.alternativeNames ? row.alternativeNames.join(', ') : ''}
+                            <TableCell>
+                                {row?.alternativeNames
+                                    ? row.alternativeNames.join(', ')
+                                    : 'N/A'}
+                            </TableCell>
+                            <TableCell>
+                                {row?.writtenForms
+                                    ? row.writtenForms.join(', ')
+                                    : 'N/A'}
                             </TableCell>
-                            <TableCell style={{ width: 160 }} align="right">
-                                {row?.writtenForms ? row.writtenForms.join(', ') : ''}
+                            <TableCell>
+                                {row?.types ? row.types.join(', ') : 'N/A'}
                             </TableCell>
-                            <TableCell style={{ width: 160 }} align="right">
-                                {row?.writtenForms ? row.writtenForms.join(', ') : ''}
+                            <TableCell>
+                                {/* Here should be State or Territory but not currently present in DTO */}
+                                {row?.countries
+                                    ? row.countries.join(', ')
+                                    : 'N/A'}
+                            </TableCell>
+                            <TableCell>
+                                {row?.latitude && row?.longitude
+                                    ? `${row.latitude}, ${row.longitude}`
+                                    : 'N/A'}
+                            </TableCell>
+                            <TableCell>
+                                {row?.certainty ? row.certainty : 'N/A'}
                             </TableCell>
                         </TableRow>
                     ))}
-                    {emptyRows > 0 && (
+                    {/* {emptyRows > 0 && (
                         <TableRow style={{ height: 53 * emptyRows }}>
                             <TableCell colSpan={6} />
                         </TableRow>
-                    )}
+                    )} */}
                 </TableBody>
-                <TableFooter>
-                    <TableRow>
-                        <TablePagination
-                            rowsPerPageOptions={[
-                                5,
-                                10,
-                                25,
-                                { label: 'All', value: -1 },
-                            ]}
-                            colSpan={3}
-                            count={rows.length}
+            </Table>
+            <TablePagination
+                            rowsPerPageOptions={[5, 10, 25]}
+                            component="div"
+                            count={data.length}
                             rowsPerPage={rowsPerPage}
                             page={page}
-                            SelectProps={{
-                                inputProps: {
-                                    'aria-label': 'rows per page',
-                                },
-                                native: true,
-                            }}
                             onPageChange={handleChangePage}
                             onRowsPerPageChange={handleChangeRowsPerPage}
-                            ActionsComponent={CatalogTableActions}
                         />
-                    </TableRow>
-                </TableFooter>
-            </Table>
         </TableContainer>
     )
 }

frontend/src/features/Theme/themeReducer.ts

@@ -12 +12 @@
 const initialTheme = createTheme({
     palette: {
         mode: 'light'
+    },
+    typography: {
+        fontFamily: [
+      '-apple-system',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      'Roboto',
+      '"Helvetica Neue"',
+      'Arial',
+      'sans-serif',
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"',
+    ].join(','),
     }
 })
 const initialState: ThemeState = {