admin_lsac 1.2.3 → 1.2.4

package/src/components/Page.tsx

@@ -1,209 +1,219 @@
-import { useEffect, useState } from "react";
-import { ChakraProvider } from "@chakra-ui/react";
-import { PageSchema, Action, pageToUrl } from "../schema/schema";
-import {
-  Button,
-  Modal,
-  ModalHeader,
-  ModalBody,
-  useDisclosure,
-  ModalOverlay,
-  ModalContent,
-  ModalCloseButton,
-  Box,
-  Stack,
-} from "@chakra-ui/react";
-import { GenericForm } from "./GenericForm";
-import { useNavigate } from "react-router";
-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";
-
-function Header({ pages, data, basePath }: { pages: PageSchema[]; data: any[], basePath: string }) {
-  const nav = useNavigate();
-  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];
-      }
-    }
-    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 Page({
-  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, pageToUrl } 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";
+
+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>
+    </>
+  );
+}

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 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();

package/src/pages/event.ts

@@ -1,69 +1,69 @@
-import axios from "axios";
-import React from "react";
-import { PageSchema } from "../schema/schema";
-
-const domain = "http://localhost:3001";
-
-export const event: PageSchema = {
-  name: "Events",
-  actions: [],
-  rowActions: [],
-  getRequest: async () => {
-    // const res = await axios.get(domain + "/events");
-    // return res.data;
-    return [];
-  },
-  tableFields: [
-    {
-      name: "Id",
-      access: (obj: any) => obj.id,
-    },
-    {
-      name: "Event Name",
-      access: (obj: any) => obj.name,
-    },
-    {
-      name: "Description",
-      access: (obj: any) => obj.description,
-    },
-    {
-      name: "Category",
-      access: (obj: any) => obj.category,
-    },
-    {
-      name: "Ticket Type",
-      access: (obj: any) => obj.ticketType,
-    },
-    {
-      name: "Date",
-      access: (obj: any) => obj.date,
-    },
-    {
-      name: "Release",
-      access: (obj: any) => obj.release,
-    },
-    {
-      name: "Is Released",
-      access: (obj: any) => (obj.isReleased ? "Is Released" : "Not Released"),
-    },
-    {
-      name: "Available Tickets",
-      access: (obj: any) => obj.availableTickets,
-    },
-    {
-      name: "Max Tickets",
-      access: (obj: any) => obj.maxTickets,
-    },
-    {
-      name: "Image",
-      access: (obj: any) =>
-        obj.imgUrl
-          ? React.createElement("img", {
-              src: obj.imgUrl,
-              alt: "ERROR",
-              style: { width: "100px" },
-            })
-          : "No Image Available",
-    },
-  ],
-};
+import axios from "axios";
+import React from "react";
+import { PageSchema } from "../schema/schema";
+
+const domain = "http://localhost:3001";
+
+export const event: PageSchema = {
+  name: "Events",
+  actions: [],
+  rowActions: [],
+  getRequest: async () => {
+    // const res = await axios.get(domain + "/events");
+    // return res.data;
+    return [];
+  },
+  tableFields: [
+    {
+      name: "Id",
+      access: (obj: any) => obj.id,
+    },
+    {
+      name: "Event Name",
+      access: (obj: any) => obj.name,
+    },
+    {
+      name: "Description",
+      access: (obj: any) => obj.description,
+    },
+    {
+      name: "Category",
+      access: (obj: any) => obj.category,
+    },
+    {
+      name: "Ticket Type",
+      access: (obj: any) => obj.ticketType,
+    },
+    {
+      name: "Date",
+      access: (obj: any) => obj.date,
+    },
+    {
+      name: "Release",
+      access: (obj: any) => obj.release,
+    },
+    {
+      name: "Is Released",
+      access: (obj: any) => (obj.isReleased ? "Is Released" : "Not Released"),
+    },
+    {
+      name: "Available Tickets",
+      access: (obj: any) => obj.availableTickets,
+    },
+    {
+      name: "Max Tickets",
+      access: (obj: any) => obj.maxTickets,
+    },
+    {
+      name: "Image",
+      access: (obj: any) =>
+        obj.imgUrl
+          ? React.createElement("img", {
+              src: obj.imgUrl,
+              alt: "ERROR",
+              style: { width: "100px" },
+            })
+          : "No Image Available",
+    },
+  ],
+};