feat: basic teams table

src/components/admin/EditTeam/index.module.scss

@@ -0,0 +1,32 @@
+@import "~/styles/variables.scss";
+@import "~/styles/mixins.scss";
+
+.modal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 60%;
+  background-image: $dialog-container-gradient;
+  box-shadow: $dialog-container-box-shadow;
+  backdrop-filter: blur(4px);
+  padding: 2em;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  max-height: 80%;
+  overflow: auto;
+}
+
+.statusLabel {
+  font-weight: bold;
+}
+
+.icon {
+  height: 2rem;
+}
+
+
+#save_button {
+  float: left;
+}

src/components/admin/EditTeam/index.tsx

@@ -0,0 +1,73 @@
+import {
+  Box,
+  CircularProgress,
+  Collapse,
+  TextField,
+  Button,
+  Typography
+} from "@mui/material"
+import { Cancel, Check, OpenInNew } from "@mui/icons-material"
+import { Status } from "enums/Status"
+import React, { useState } from "react"
+import { useDispatch, useSelector } from "react-redux"
+import actions from "src/actions"
+import { Team } from "types/Team"
+import styles from "./index.module.scss"
+
+const EditTeam = ({ team }: { team: Team }) => {
+  const dispatch = useDispatch()
+  const [loading, setLoading] = useState(false)
+
+  const [name, setName] = useState(team.name)
+  const [desc, setDesc] = useState(team.description)
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault()
+    setLoading(true)
+    try {
+      await dispatch(actions.teams.editTeamInfo(name, desc))
+    } catch (err) {
+      console.error("Error setting team info: " + err)
+    } finally {
+      setLoading(false)
+    }
+  }
+  return (
+    <Box className={styles.modal} component="form" onSubmit={handleSubmit}>
+      <Typography variant="h5">Team Information</Typography>
+      <TextField
+        label="Team Name"
+        variant="outlined"
+        fullWidth
+        margin="normal"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+      />
+
+      <TextField
+        label="Team Description"
+        variant="outlined"
+        fullWidth
+        margin="normal"
+        value={desc}
+        onChange={(e) => setDesc(e.target.value)}
+      />
+
+      <Button
+        variant="outlined"
+        id="save_button"
+        type="submit"
+        disabled={loading}
+      >
+        {loading ? (
+          <Collapse in={loading}>
+            <CircularProgress />
+          </Collapse>
+        ) : (
+          "Save"
+        )}
+      </Button>
+    </Box>
+  )
+}
+export default EditTeam

src/components/admin/Teams/index.tsx

@@ -36,6 +36,7 @@ import { Participant } from "types/Participant"
 import ProfileBox from "../ProfileBox"
 import RectangleButton from "src/components/design/RectangleButton"
 import admin from "pages/admin"
+import EditTeam from "../EditTeam"
 export default () => {
   const dispatch = useDispatch()
 
@@ -44,12 +45,17 @@ export default () => {
   const [teams, setTeams] = useState<Team[]>([])
 
   const [selectedUser, setSelectedUser] = useState<Participant | null>(null)
-  const [canSelectedUserBePromoted, setCanSelectedUserBePromoted] =
-    useState(false)
 
-  const [editing, setEditing] = useState<Team | null>(null)
+  const [selectedTeam, setSelectedTeam] = useState<Team | null>(null)
 
+  const [page, setPage] = useState(0)
+  const [rowsPerPage, setRowsPerPage] = useState(5)
+
+  const [teamOpen, setTeamOpen] = useState(false)
   const [profileOpen, setProfileOpen] = useState(false)
+
+  const [search, setSearch] = useState("")
+
   const user = useSelector((state: RootState) => state.accounts.data)
   useEffect(() => {
     const fetchData = async () => {
@@ -71,27 +77,7 @@ export default () => {
     () => [
       {
         Header: "Name",
-        accessor: "name",
-        Cell: ({ cell }: { cell: any }) => {
-          return (
-            <span className={styles.withIcon}>
-              {editing == cell.row.original ? (
-                <input value={"editing"} />
-              ) : (
-                cell.row.original.name
-              )}
-              <EditOutlinedIcon
-                width="24"
-                height="24"
-                className={styles.editIcon}
-                onClick={() => {
-                  setEditing(cell.row.original)
-                  console.log(editing)
-                }}
-              />{" "}
-            </span>
-          )
-        }
+        accessor: "name"
       },
       {
         Header: "Description",
@@ -142,6 +128,19 @@ export default () => {
             </RectangleButton>
           ))
         }
+      },
+      {
+        Header: "Actions",
+        Cell: (cell) => (
+          <RectangleButton
+            onClick={() => {
+              setTeamOpen(true)
+              setSelectedTeam(cell.row.original)
+            }}
+          >
+            Edit
+          </RectangleButton>
+        )
       }
     ],
     []
@@ -159,12 +158,21 @@ export default () => {
   return (
     <>
       <Modal
-        open={profileOpen}
-        onClose={() => setProfileOpen(false)}
+        open={profileOpen || teamOpen}
+        onClose={() => {
+          setProfileOpen(false)
+          setTeamOpen(false)
+        }}
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
       >
-        <ProfileBox participant={selectedUser as Participant} />
+        {profileOpen ? (
+          <ProfileBox participant={selectedUser as Participant} />
+        ) : teamOpen ? (
+          <EditTeam team={selectedTeam} />
+        ) : (
+          <div></div>
+        )}
       </Modal>
       <div className={styles.container}>
         <Snackbar
@@ -181,28 +189,22 @@ export default () => {
             e.preventDefault()
           }}
         >
-          <div className={styles.headerContainer}>
-            <Typography variant="h4" className={styles.header}>
-              View Teams
-            </Typography>
-            {}
-          </div>
           <div className={styles.formContents}>
             <div className={styles.buttonContainer}></div>
           </div>
         </form>
         <TableContainer>
           <TextField
             variant="outlined"
-            placeholder="Search"
+            placeholder="Search by team name..."
             fullWidth={true}
-            // value={searchString}
+            value={search}
             InputProps={{
               classes: { notchedOutline: styles.textFieldInput }
             }}
             onChange={(e) => {
-              //   setSearchString(e.target.value)
-              //   setPage(0)
+              setSearch(e.target.value)
+              setPage(0)
             }}
           />
           <Table {...getTableProps()}>
@@ -236,8 +238,8 @@ export default () => {
               {
                 // Loop over the table rows
                 rows
-                  //   .filter((row) => row.original.email.includes(searchString))
-                  //   .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                  .filter((row) => row.original.name.includes(search))
+                  .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                   .map((row, rowIdx) => {
                     // Prepare the row for display
                     prepareRow(row)
@@ -265,6 +267,18 @@ export default () => {
             </TableBody>
           </Table>
         </TableContainer>
+        <TablePagination
+          rowsPerPageOptions={[5, 10, 25]}
+          component="div"
+          count={rows.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onPageChange={(e, newPage: number) => setPage(newPage)}
+          onRowsPerPageChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+            setRowsPerPage(parseInt(event.target.value, 10))
+            setPage(0)
+          }}
+        />
       </div>
     </>
   )