add DataGrid and some css (#87)

Made the Members Table with DataGrid MUI component. The main advantage
is that the component have included filtering and sorting so we dont
need to write it on our own. It added new dependency (MUI-X), also did
some very small things in css. Every feedback very appreciated.

administration-panel/default.nix

@@ -12,7 +12,7 @@ buildNpmPackage {
     nodejs
   ];
   src = nix-gitignore.gitignoreSource [] ./.;
-  npmDepsHash = "sha256-0oOi5EVRR6Fl9Zlp9XEkIeSP2P45JdBwm0V8RfWfspo=";
+  npmDepsHash = "sha256-Kh+9ri5JnjO0fqZOZuQxA7gzHMYGHSrcKuKyvb+tjxA=";
 
   configurePhase = ''
     echo '${config-json}' > config.json

administration-panel/package.json

@@ -30,6 +30,7 @@
     "@fontsource/roboto": "^5.0.8",
     "@mui/icons-material": "^5.14.3",
     "@mui/material": "^5.14.5",
+    "@mui/x-data-grid": "^6.12.0",
     "@supabase/postgrest-js": "^1.8.0",
     "keycloak-js": "^22.0.1",
     "react": "^18.2.0",

administration-panel/src/pages/MembersTable.tsx

@@ -1,73 +1,131 @@
-import * as React from 'react';
-import { PostgrestClient, PostgrestSingleResponse } from '@supabase/postgrest-js'
+import * as React from "react";
+import {
+  PostgrestClient,
+  PostgrestSingleResponse,
+} from "@supabase/postgrest-js";
+import { DataGrid, GridColDef, GridValueGetterParams } from "@mui/x-data-grid";
+import Box from "@mui/material/Box";
 
 interface Props {
-    postgrest: PostgrestClient;
+  postgrest: PostgrestClient;
 }
 
 interface Member {
-    email: string;
-    first_name: string;
-    last_name: string;
-    occupations: [Occupation];
+  member_number: number;
+  id: string;
+  email: string;
+  first_name: string;
+  last_name: string;
+  phone_number: string;
 }
 
 interface Occupation {
-    company_name: string | null;
-    position: string | null;
+  company_name: string | null;
+  position: string | null;
 }
 
 interface State {
-    data: Member[] | null; // TODO: fix me
-    isLoading: boolean;
-}
-
-const TableRow = (member: Member) => {
-    return (
-        <tr>
-            <td>{member.email}</td>
-            <td>{member.first_name}</td>
-            <td>{member.last_name}</td>
-            <td>{member.occupations.length > 0 ? member.occupations[0].company_name : null}</td>
-        </tr>
-    )
+  data: Member[] | [];
+  isLoading: boolean;
+  initialDataLoaded: boolean;
 }
 
 const MembersTable = (props: Props) => {
-    const [state, setState] = React.useState<State>({
-        data: null,
-        isLoading: false,
-    });
+  const [state, setState] = React.useState<State>({
+    data: [],
+    isLoading: false,
+    initialDataLoaded: false,
+  });
 
-    const columns = ['email', 'first_name', 'last_name', 'occupations(company_name, position)'];
-    React.useEffect(() => {
-        if (state.data !== null || state.isLoading) {
-            return;
+  const columns = [
+    "member_number",
+    "id",
+    "email",
+    "first_name",
+    "last_name",
+    "phone_number",
+  ];
+  React.useEffect(() => {
+    if (state.initialDataLoaded !== false || state.isLoading) {
+      return;
+    }
+    setState({ ...state, isLoading: true });
+    props.postgrest
+      .from("members")
+      .select(columns.join(","))
+      .then((result: PostgrestSingleResponse<any[]>) => {
+        if (result.data !== null) {
+          setState({
+            ...state,
+            initialDataLoaded: true,
+            data: result.data,
+            isLoading: false,
+          });
+        } else {
+          setState({ ...state, isLoading: false });
         }
-        setState({ ...state, isLoading: true });
-        props.postgrest.from('members').select(columns.join(','))
-            .then((result: PostgrestSingleResponse<any[]>) => setState({ ...state, data: result.data, isLoading: false }))
-    });
+      });
+  });
 
-    return (
-        <div>
-            <div>Table</div>
-            <table>
-                <thead>
-                    <tr>
-                        {columns.map((v) => {
-                            return (
-                                <th>{v}</th>
-                            )
-                        })}
-                    </tr>
-                </thead>
-                <tbody>
-                    {(state.data || []).map(TableRow)}
-                </tbody>
-            </table>
-        </div>
-    )
-}
+  const gridcolumns: GridColDef[] = [
+    {
+      field: "member_number",
+      headerName: "Member Number",
+      headerClassName: "table-header", //TODO: refactor so the classname is generated
+      description: "Member number",
+      flex: 0.5,
+      minWidth: 120,
+    },
+    {
+      field: "last_name",
+      headerName: "Last name",
+      headerClassName: "table-header",
+      flex: 1.5,
+      minWidth: 150,
+    },
+    {
+      field: "first_name",
+      headerName: "First Name",
+      headerClassName: "table-header",
+      flex: 1.5,
+      minWidth: 150,
+    },
+    {
+      field: "phone_number",
+      headerName: "Phone number",
+      headerClassName: "table-header",
+      flex: 1.0,
+      minWidth: 150,
+    },
+    {
+      field: "email",
+      headerName: "Email",
+      headerClassName: "table-header",
+      flex: 1.5,
+      minWidth: 150,
+    },
+  ];
+
+  return (
+    <div>
+      <h1>Members Table</h1>
+      <Box sx={{ height: "100%", width: "100%" }}>
+        <DataGrid
+          rows={state.data}
+          columns={gridcolumns}
+          initialState={{
+            pagination: {
+              paginationModel: {
+                pageSize: 100,
+              },
+            },
+          }}
+          pageSizeOptions={[100, 50, 25]}
+          disableRowSelectionOnClick
+        />
+      </Box>
+    </div>
+  );
+};
 
 export default MembersTable;

administration-panel/src/styles/index.css

@@ -1,22 +1,30 @@
-html, body {
-    padding: 0;
-    margin: 0;
-    height: 100%;
+html,
+body {
+  font-family: "Roboto", sans-serif;
+  padding: 0;
+  margin: 0;
+  height: 100%;
 }
 
 #app {
-    height: 100%;
+  height: 100%;
 }
 
 .app-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-    min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  min-height: 100%;
 }
 
 .app-main {
-    flex-grow: 1;
-    flex-shrink: 0;
-    padding: 0 24px;
+  flex-grow: 1;
+  flex-shrink: 0;
+  padding: 0 24px;
+}
+
+.table-header {
+  background-color: #42a5f5;
+  color: white;
+  font-weight: bold;
 }