admin_lsac 1.2.8 → 1.2.9

package/src/components/Page.tsx

@@ -1,223 +1,243 @@
-import { useEffect, useState } from "react";
-import { ChakraProvider } from "@chakra-ui/react";
-import { PageSchema, Action } from "../schema/schema";
-import {
-  Button,
-  Modal,
-  ModalHeader,
-  ModalBody,
-  useDisclosure,
-  ModalOverlay,
-  ModalContent,
-  ModalCloseButton,
-  Box,
-  Stack,
-} from "@chakra-ui/react";
-import { GenericForm } from "./GenericForm";
-import { ThemeProvider } from "@emotion/react";
-import { createTheme } from "@mui/material/styles";
-import { MaterialReactTable } from "material-react-table";
-import { mkConfig, generateCsv, download } from "export-to-csv";
-import Swal from "sweetalert2";
-import MenuItem from "@mui/material/MenuItem";
-
-export function pageToUrl(page: PageSchema): string {
-  return `${page.name.toLowerCase().replace(" ", "_")}`;
-}
-
-function Header({
-  pages,
-  data,
-  basePath,
-}: {
-  pages: PageSchema[];
-  data: any[];
-  basePath: string;
-}) {
-  return (
-    <Box background="blue.50" padding={1}>
-      <Stack
-        margin={3}
-        direction="row"
-        justifyContent="space-between"
-        alignItems="center"
-      >
-        <Stack margin={4} gap={10} direction="row" alignItems="center">
-          {pages.map((p) => (
-            <Box as="a" href={`${basePath}/${pageToUrl(p)}`}>
-              {p.name}
-            </Box>
-          ))}
-        </Stack>
-        <Stack direction="row">
-          <Button
-            colorScheme="red"
-            onClick={() => {
-              const filename = prompt("Enter filename:");
-              if (filename) exportToCSV(data, filename);
-            }}
-          >
-            Export Data
-          </Button>
-        </Stack>
-      </Stack>
-    </Box>
-  );
-}
-
-function exportToCSV(data: any[], filename: string) {
-  const formatImageData = (obj: any) => {
-    const formattedObj: any = {};
-    for (const key in obj) {
-      if (typeof obj[key] !== "object") {
-        formattedObj[key] = obj[key];
-      } else if (typeof obj[key] === "object" && obj[key] != null) {
-        Object.keys(obj[key]).forEach((k: any) => {
-          formattedObj[`${key}.${k}`] = obj[key][k];
-        });
-      }
-    }
-    return formattedObj;
-  };
-
-  const formattedData = data.map(formatImageData);
-
-  const csvConfig = mkConfig({
-    useKeysAsHeaders: true,
-    filename: filename,
-  });
-
-  if (formattedData.length > 0) {
-    const csv = generateCsv(csvConfig)(formattedData);
-    download(csvConfig)(csv);
-  } else {
-    Swal.fire({
-      title: "Error while exporting CSV!",
-      text: "There is no data to export.",
-    });
-  }
-}
-
-export function AdminPage({
-  pages,
-  selectedPage,
-  basePath,
-}: {
-  pages: PageSchema[];
-  selectedPage: PageSchema;
-  basePath: string;
-}) {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const [selectedAction, setSelectedAction] = useState({} as Action);
-  const [data, setData] = useState<any[]>([]);
-  const [displayData, setDisplayData] = useState<any[][]>([]);
-  const [rowId, setRowId] = useState<number>();
-
-  useEffect(() => {
-    selectedPage.getRequest().then((resArray) => {
-      setData(resArray);
-    });
-  }, []);
-
-  useEffect(() => {
-    setDisplayData(
-      data.map((table_data) =>
-        selectedPage.tableFields.map((field) => field.access(table_data))
-      )
-    );
-  }, [data]);
-
-  return (
-    <>
-      <Header pages={pages} data={data} basePath={basePath} />
-
-      <ThemeProvider theme={createTheme()}>
-        <MaterialReactTable
-          columns={selectedPage.tableFields.map((field, index) => ({
-            accessorFn: (row: any) => row[index],
-            header: field.name,
-          }))}
-          data={displayData}
-          muiTableContainerProps={{ sx: { maxHeight: "70vh" } }}
-          enableColumnResizing
-          enableColumnPinning
-          enableGlobalFilterModes
-          enablePagination={true}
-          paginationDisplayMode="pages"
-          enableRowVirtualization
-          rowVirtualizerOptions={{ overscan: 20 }}
-          renderTopToolbarCustomActions={() => (
-            <ChakraProvider>
-              <Stack margin={0} padding={3} direction="row">
-                {selectedPage.actions.map((action) => (
-                  <Button
-                    colorScheme="blue"
-                    onClick={() => {
-                      setSelectedAction(action);
-                      onOpen();
-                    }}
-                  >
-                    {action.name}
-                  </Button>
-                ))}
-              </Stack>
-            </ChakraProvider>
-          )}
-          enableRowActions
-          renderRowActionMenuItems={(obj: any) => {
-            return selectedPage.rowActions.map((rowAction) => (
-              <MenuItem
-                onClick={() => {
-                  setSelectedAction(rowAction);
-                  setRowId(obj.row.original[0]);
-                  onOpen();
-
-                  const rowActionsMenu = document.querySelector(
-                    ".MuiPaper-root.MuiPopover-paper.MuiMenu-paper"
-                  );
-                  if (rowActionsMenu) {
-                    rowActionsMenu.remove();
-                  }
-                }}
-              >
-                {rowAction.name + " " + obj.row.original[0]}
-              </MenuItem>
-            ));
-          }}
-        />
-      </ThemeProvider>
-
-      <Modal size={"6xl"} isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>{selectedAction.name}</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            {selectedAction.fields && selectedAction.fields?.length > 0 ? (
-              <GenericForm
-                action={selectedAction}
-                onClose={onClose}
-                rowId={rowId}
-              />
-            ) : (
-              <Button
-                colorScheme="blue"
-                mr={3}
-                onClick={() => {
-                  selectedAction.onSubmit(rowId);
-                  onClose();
-                  window.location.reload();
-                }}
-              >
-                Confirm Action
-              </Button>
-            )}
-            <Button colorScheme="red" mr={3} onClick={onClose}>
-              Close
-            </Button>
-          </ModalBody>
-        </ModalContent>
-      </Modal>
-    </>
-  );
-}
+import { useEffect, useState } from "react";
+import { ChakraProvider } from "@chakra-ui/react";
+import { PageSchema, Action } from "../schema/schema";
+import {
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  useDisclosure,
+  ModalOverlay,
+  ModalContent,
+  ModalCloseButton,
+  Box,
+  Stack,
+} from "@chakra-ui/react";
+import { GenericForm } from "./GenericForm";
+import { ThemeProvider } from "@emotion/react";
+import { createTheme } from "@mui/material/styles";
+import { MaterialReactTable } from "material-react-table";
+import { mkConfig, generateCsv, download } from "export-to-csv";
+import Swal from "sweetalert2";
+import MenuItem from "@mui/material/MenuItem";
+import { io } from "socket.io-client";
+import { newSocket } from "../utils/websockets";
+
+export function pageToUrl(page: PageSchema): string {
+  return `${page.name.toLowerCase().replace(" ", "_")}`;
+}
+
+function Header({
+  pages,
+  data,
+  basePath,
+}: {
+  pages: PageSchema[];
+  data: any[];
+  basePath: string;
+}) {
+  return (
+    <Box background="blue.50" padding={1}>
+      <Stack
+        margin={3}
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Stack margin={4} gap={10} direction="row" alignItems="center">
+          {pages.map((p) => (
+            <Box as="a" href={`${basePath}/${pageToUrl(p)}`}>
+              {p.name}
+            </Box>
+          ))}
+        </Stack>
+        <Stack direction="row">
+          <Button
+            colorScheme="red"
+            onClick={() => {
+              const filename = prompt("Enter filename:");
+              if (filename) exportToCSV(data, filename);
+            }}
+          >
+            Export Data
+          </Button>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}
+
+function exportToCSV(data: any[], filename: string) {
+  const formatImageData = (obj: any) => {
+    const formattedObj: any = {};
+    for (const key in obj) {
+      if (typeof obj[key] !== "object") {
+        formattedObj[key] = obj[key];
+      } else if (typeof obj[key] === "object" && obj[key] != null) {
+        Object.keys(obj[key]).forEach((k: any) => {
+          formattedObj[`${key}.${k}`] = obj[key][k];
+        });
+      }
+    }
+    return formattedObj;
+  };
+
+  const formattedData = data.map(formatImageData);
+
+  const csvConfig = mkConfig({
+    useKeysAsHeaders: true,
+    filename: filename,
+  });
+
+  if (formattedData.length > 0) {
+    const csv = generateCsv(csvConfig)(formattedData);
+    download(csvConfig)(csv);
+  } else {
+    Swal.fire({
+      title: "Error while exporting CSV!",
+      text: "There is no data to export.",
+    });
+  }
+}
+
+export function AdminPage({
+  pages,
+  selectedPage,
+  basePath,
+  apiURL=''
+}: {
+  pages: PageSchema[];
+  selectedPage: PageSchema;
+  basePath: string;
+  apiURL?: string;
+}) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [selectedAction, setSelectedAction] = useState({} as Action);
+  const [data, setData] = useState<any[]>([]);
+  const [displayData, setDisplayData] = useState<any[][]>([]);
+  const [rowId, setRowId] = useState<number>();
+  const [refetch, setRefetch] = useState<boolean>(false);
+  const [socket, setSocket] = useState(io);
+  newSocket(setSocket, apiURL);
+
+  useEffect(() => {
+    selectedPage.getRequest().then((resArray) => {
+      setData(resArray);
+      setRefetch(false);
+    });
+  }, [refetch]); // Do not remove 'refetch' from here !!!
+
+  useEffect(() => {
+    socket.on("updateData", (message) => {
+      console.log("Message emitted from socket: " + message);
+      setRefetch(true);
+      const rowActionsMenu = document.querySelector(
+        ".MuiPaper-root.MuiPopover-paper.MuiMenu-paper"
+      );
+      if (rowActionsMenu) {
+        rowActionsMenu.remove();
+      }
+    });
+  }, [socket, selectedPage]);
+
+  useEffect(() => {
+    setDisplayData(
+      data.map((table_data) =>
+        selectedPage.tableFields.map((field) => field.access(table_data))
+      )
+    );
+  }, [data]);
+
+  return (
+    <>
+      <Header pages={pages} data={data} basePath={basePath} />
+
+      <ThemeProvider theme={createTheme()}>
+        <MaterialReactTable
+          columns={selectedPage.tableFields.map((field, index) => ({
+            accessorFn: (row: any) => row[index],
+            header: field.name,
+          }))}
+          data={displayData}
+          muiTableContainerProps={{ sx: { maxHeight: "70vh" } }}
+          enableColumnResizing
+          enableColumnPinning
+          enableGlobalFilterModes
+          enablePagination={true}
+          paginationDisplayMode="pages"
+          enableRowVirtualization
+          rowVirtualizerOptions={{ overscan: 20 }}
+          renderTopToolbarCustomActions={() => (
+            <ChakraProvider>
+              <Stack margin={0} padding={3} direction="row">
+                {selectedPage.actions.map((action) => (
+                  <Button
+                    colorScheme="blue"
+                    onClick={() => {
+                      setSelectedAction(action);
+                      onOpen();
+                    }}
+                  >
+                    {action.name}
+                  </Button>
+                ))}
+              </Stack>
+            </ChakraProvider>
+          )}
+          enableRowActions
+          renderRowActionMenuItems={(obj: any) => {
+            return selectedPage.rowActions.map((rowAction) => (
+              <MenuItem
+                onClick={() => {
+                  setSelectedAction(rowAction);
+                  setRowId(obj.row.original[0]);
+                  onOpen();
+
+                  const rowActionsMenu = document.querySelector(
+                    ".MuiPaper-root.MuiPopover-paper.MuiMenu-paper"
+                  );
+                  if (rowActionsMenu) {
+                    rowActionsMenu.remove();
+                  }
+                }}
+              >
+                {rowAction.name + " " + obj.row.original[0]}
+              </MenuItem>
+            ));
+          }}
+        />
+      </ThemeProvider>
+
+      <Modal size={"6xl"} isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>{selectedAction.name}</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            {selectedAction.fields && selectedAction.fields?.length > 0 ? (
+              <GenericForm
+                action={selectedAction}
+                onClose={onClose}
+                rowId={rowId}
+              />
+            ) : (
+              <Button
+                colorScheme="blue"
+                mr={3}
+                onClick={() => {
+                  selectedAction.onSubmit(rowId);
+                  onClose();
+                }}
+              >
+                Confirm Action
+              </Button>
+            )}
+            <Button colorScheme="red" mr={3} onClick={onClose}>
+              Close
+            </Button>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}

package/src/index.tsx

@@ -1,20 +1,20 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import "./index.css";
-import AdminPanel from "./App";
-import reportWebVitals from "./reportWebVitals";
-import { event } from "./pages/event";
-
-const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
-);
-root.render(
-  <React.StrictMode>
-    <AdminPanel pages={[event]} basePath="" />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { pages } from "./schema/schema.config";
+
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App pages={pages} basePath="" />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();