[feat] Table Top Bar Component (#177)

discord · Oct 30, 2024 · ecac23f · ecac23f
1 parent 3c51142
commit ecac23f
Show file tree

Hide file tree

Showing 13 changed files with 1,427 additions and 1,656 deletions.
diff --git a/src/components/DateRange.tsx b/src/components/DateRange.tsx
@@ -91,27 +91,24 @@ function ButtonField(props: ButtonFieldProps) {
 
   return (
     <Box component={'div'} sx={{position: 'relative'}}>
-      <Box component={'div'} sx={{marginTop: '7px'}}>
-        <Button
-          variant="outlined"
-          id={id}
-          disabled={disabled}
-          ref={ref}
-          aria-label={ariaLabel}
-          onClick={() => setOpen?.((prev) => !prev)}
-          sx={{
-            color: theme.palette.text.secondary,
-            borderColor: theme.palette.action.disabled,
-            height: '48.5px',
-            minWidth: '245px',
-            fontSize: '15px',
-            position: 'relative',
-            zIndex: '1',
-            padding: '0 8px',
-          }}>
-          {displayString} <EventIcon sx={{marginLeft: '20px', color: theme.palette.text.secondary}} />
-        </Button>
-      </Box>
+      <Button
+        variant="outlined"
+        size="medium"
+        id={id}
+        disabled={disabled}
+        ref={ref}
+        aria-label={ariaLabel}
+        onClick={() => setOpen?.((prev) => !prev)}
+        sx={{
+          color: theme.palette.text.secondary,
+          borderColor: theme.palette.action.disabled,
+          minWidth: '245px',
+          fontSize: '15px',
+          position: 'relative',
+          zIndex: '1',
+        }}>
+        {displayString} <EventIcon sx={{marginLeft: '20px', color: theme.palette.text.secondary}} />
+      </Button>
       <Typography
         component={'span'}
         sx={{
@@ -125,6 +122,7 @@ function ButtonField(props: ButtonFieldProps) {
           zIndex: '2',
           top: '0.01%',
           left: '1%',
+          transform: 'translateY(-7px)',
         }}>
         Ending Date Range
       </Typography>

diff --git a/src/components/TableTopBar.tsx b/src/components/TableTopBar.tsx
@@ -0,0 +1,75 @@
+import {Launch} from '@mui/icons-material';
+import {Autocomplete, AutocompleteProps, Box, Grid, IconButton, Stack, TextField, Typography} from '@mui/material';
+
+import * as React from 'react';
+import {useNavigate} from 'react-router-dom';
+
+export function renderUserOption(props: React.HTMLAttributes<HTMLLIElement>, option: any) {
+  const [displayName, email] = option.split(';');
+  return (
+    <li {...props} key={option}>
+      <Grid container alignItems="center">
+        <Grid item>
+          <Box>{displayName}</Box>
+          <Typography variant="body2" color="text.secondary">
+            {email}
+          </Typography>
+        </Grid>
+      </Grid>
+    </li>
+  );
+}
+
+export function TableTopBarAutocomplete({
+  defaultValue,
+  filterOptions = (x) => x,
+  ...restProps
+}: Omit<AutocompleteProps<any, any, any, any>, 'renderInput'>) {
+  return (
+    <Autocomplete
+      key={defaultValue}
+      defaultValue={defaultValue}
+      size="small"
+      sx={{width: 320}}
+      freeSolo
+      filterOptions={filterOptions}
+      renderInput={(params) => <TextField {...params} label="Search" />}
+      {...restProps}
+    />
+  );
+}
+
+interface TableTopBarProps {
+  title: string;
+  link?: string;
+  children?: React.ReactNode;
+}
+
+export default function TableTopBar({title, link, children}: TableTopBarProps) {
+  const navigate = useNavigate();
+  return (
+    <Stack
+      direction="row"
+      paddingTop={2}
+      paddingBottom={1}
+      paddingX={2}
+      gap={4}
+      justifyContent="space-between"
+      flexWrap="wrap"
+      alignItems="flex-end">
+      <Stack direction="row" gap={1} alignItems="center">
+        <Typography component="h5" variant="h5" color="text.accent">
+          {title}
+        </Typography>
+        {link != null && (
+          <IconButton size="small" onClick={() => navigate(link)}>
+            <Launch />
+          </IconButton>
+        )}
+      </Stack>
+      <Stack direction="row" flexWrap="wrap" gap={1} alignItems="center">
+        {children}
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/src/pages/apps/List.tsx b/src/pages/apps/List.tsx
@@ -24,6 +24,7 @@ import CreateUpdateApp from './CreateUpdate';
 import {perPage} from '../../helpers';
 import {useGetApps} from '../../api/apiComponents';
 import TablePaginationActions from '../../components/actions/TablePaginationActions';
+import TableTopBar, {TableTopBarAutocomplete} from '../../components/TableTopBar';
 
 export default function ListApps() {
   const navigate = useNavigate();
@@ -105,96 +106,70 @@ export default function ListApps() {
   };
 
   return (
-    <React.Fragment>
-      <TableContainer component={Paper}>
-        <Table sx={{minWidth: 650}} size="small" aria-label="apps">
-          <TableHead>
-            <TableRow>
+    <TableContainer component={Paper}>
+      <TableTopBar title="Applications">
+        <Button variant="contained" onClick={() => navigate('/tags/')} endIcon={<TagIcon />}>
+          Tags
+        </Button>
+        <CreateUpdateApp currentUser={currentUser}></CreateUpdateApp>
+        <TableTopBarAutocomplete
+          options={searchRows.map((row) => row.name)}
+          onChange={handleSearchSubmit}
+          onInputChange={(event, newInputValue) => setSearchInput(newInputValue)}
+          defaultValue={searchQuery}
+        />
+      </TableTopBar>
+      <Table sx={{minWidth: 650}} size="small" aria-label="apps">
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell>Description</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={row.id}>
               <TableCell>
-                <Typography component="h5" variant="h5" color="text.accent">
-                  Applications
-                </Typography>
+                <Link to={`/apps/${row.name}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
+                  {row.name}
+                </Link>
               </TableCell>
-              <TableCell align="right">
-                <Box
-                  sx={{
-                    display: 'flex',
-                    justifyContent: 'flex-start',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                  }}>
-                  <Box>
-                    <Button variant="contained" onClick={() => navigate('/tags/')} endIcon={<TagIcon />}>
-                      Tags
-                    </Button>
-                  </Box>
-                  <Box sx={{mx: 2, width: '200px'}}>
-                    <CreateUpdateApp currentUser={currentUser}></CreateUpdateApp>
-                  </Box>
-                  <Autocomplete
-                    fullWidth
-                    freeSolo
-                    filterOptions={(x) => x}
-                    options={searchRows.map((row) => row.name)}
-                    onChange={handleSearchSubmit}
-                    onInputChange={(event, newInputValue) => setSearchInput(newInputValue)}
-                    defaultValue={searchQuery}
-                    key={searchQuery}
-                    renderInput={(params) => <TextField {...params} label={'Search' as any} />}
-                  />
-                </Box>
+              <TableCell>
+                <Link to={`/apps/${row.name}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
+                  {(row.description ?? '').length > 115
+                    ? row.description?.substring(0, 114) + '...'
+                    : row.description ?? ''}
+                </Link>
               </TableCell>
             </TableRow>
-            <TableRow>
-              <TableCell>Name</TableCell>
-              <TableCell>Description</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <TableRow key={row.id}>
-                <TableCell>
-                  <Link to={`/apps/${row.name}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
-                    {row.name}
-                  </Link>
-                </TableCell>
-                <TableCell>
-                  <Link to={`/apps/${row.name}`} sx={{textDecoration: 'none', color: 'inherit'}} component={RouterLink}>
-                    {(row.description ?? '').length > 115
-                      ? row.description?.substring(0, 114) + '...'
-                      : row.description ?? ''}
-                  </Link>
-                </TableCell>
-              </TableRow>
-            ))}
-            {emptyRows > 0 && (
-              <TableRow style={{height: 33 * emptyRows}}>
-                <TableCell colSpan={6} />
-              </TableRow>
-            )}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={perPage}
-                colSpan={3}
-                count={totalRows}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                SelectProps={{
-                  inputProps: {
-                    'aria-label': 'rows per page',
-                  },
-                  native: true,
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
+          ))}
+          {emptyRows > 0 && (
+            <TableRow style={{height: 33 * emptyRows}}>
+              <TableCell colSpan={6} />
             </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </React.Fragment>
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={perPage}
+              colSpan={3}
+              count={totalRows}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: {
+                  'aria-label': 'rows per page',
+                },
+                native: true,
+              }}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              ActionsComponent={TablePaginationActions}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
   );
 }