admin_lsac 1.3.2 → 1.4.1

package/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

package/README.md

@@ -1,162 +1,162 @@
-# Generic Admin Panel
-
-For configuring your own admin panel, follow the next instructions.
-
-### `npm install admin_lsac`
-
-This command will download and install the specified package and its dependencies into your project's node_modules directory, making it available for use in your project.
-
-### `npm install export-to-csv@1.2.1`
-
-Export-to-csv package latest version is not working properly, so make sure you have the last functional version of this package install.
-
-## What do you need to import?
-
-### `import { ChakraProvider } from '@chakra-ui/react'`
-
-### `import { pageToUrl } from 'admin_lsac'`
-
-### `import { AdminPage } from 'admin_lsac'`
-
-You can import these in App.js / App.ts. If your project is TypeScript-based, you need to write the following line as well:
-
-### `import { PageSchema } from 'admin_lsac'`
-
-* Import the component from above where you want to write your schemas. (See below for details about schemas)
-
-You need to create an array of schemas for your own admin panel. You can write the following inside your Routes component from App.js / App.ts:
-
-```
-{your_array.map((page) => (
-  <Route
-    path={`${your_url_to_admin_panel}/${pageToUrl(page)}`}
-    element={
-      <AdminPage
-        pages={your_array}
-        selectedPage={page}
-        basePath={your_url_to_admin_panel}
-      />
-    }
-  />
-))}
-{your_array[0] ? (
-  <Route
-    path={`${your_url_to_admin_panel}/*`}
-    element={
-      <AdminPage
-        pages={your_array}
-        selectedPage={your_array[0]}
-        basePath={your_url_to_admin_panel}
-      />
-    }
-  />
-) : null}
-```
-
-#### ⚠️ Don't forget to wrap the Router component into a ChakraProvider component.
-
-## What is a schema?
-
-```
-export interface PageSchema {
-  name: string;
-  actions: Action[];
-  rowActions: RowAction[];
-  getRequest: () => Promise<any[]>;
-  tableFields: TableField[];
-}
-
-export interface TableField {
-  name: string;
-  access: (obj: any) => string | number | React.ReactElement;
-}
-
-export interface SimpleField {
-  name: string;
-  label: string;
-  type: "string" | "number" | "file";
-  validationSchema: any;
-}
-
-export interface Option {
-  value: string | number | boolean;
-  display: string;
-}
-
-export interface DropdownField {
-  name: string;
-  label: string;
-  type: "dropdown";
-  options?: Option[] | undefined;
-  getOptions: () => Promise<Option[]>;
-}
-
-export interface ObjectField {
-  name: string;
-  label: string;
-  type: "object";
-  fields: FormField[];
-}
-
-export interface ArrayField {
-  name: string;
-  label: string;
-  type: "array";
-  element: Exclude<FormField, ArrayField>;
-}
-
-export type FormField = SimpleField | DropdownField | ObjectField | ArrayField;
-
-export interface Action {
-  name: string;
-  fields?: FormField[];
-  onSubmit: (obj1: any, obj2?: any) => Promise<any>;
-}
-
-export interface RowAction {
-  name: string;
-  fields?: FormField[];
-  initialise?: (obj: any) => any;
-  onSubmit: (obj1: any, obj2?: any) => Promise<any>;
-}
-```
-
-A page schema is based on these interfaces, which can be imported into your files. A page schema describes how one table of your admin panel would need to be structured to accomplish what the user needs regarding an entity. (i.e. users, teams, companies, quizzes)
-
-#### An array of schemas would be defined as follows:
-
-```
-const your_array = [
-    {
-        // schema 1
-    },
-    {
-        // schema 2
-    },
-    ...
-];
-```
-
-* In TypeScript, it would slightly change:
-
-```
-const your_array: PageSchema[] = [
-    {
-        // schema 1
-    },
-    {
-        // schema 2
-    },
-    ...
-];
-```
-
-## Other Specifications
-
-Due to some corrupt dependencies, you need a Node version >= 20.5.0 to use this package in a Vite app.
-
-For every entity you describe through a page schema, getRequest and onSubmit functions will use routes created for the entity. `getRequest` function will make a GET request, while `onSumbit` will probably make a POST, PATCH or DELETE request.
-
-## Learn More
-
-For more details, especially about page schemas, contact the owner. :)
+# Generic Admin Panel
+
+For configuring your own admin panel, follow the next instructions.
+
+### `npm install admin_lsac`
+
+This command will download and install the specified package and its dependencies into your project's node_modules directory, making it available for use in your project.
+
+### `npm install export-to-csv@1.2.1`
+
+Export-to-csv package latest version is not working properly, so make sure you have the last functional version of this package install.
+
+## What do you need to import?
+
+### `import { ChakraProvider } from '@chakra-ui/react'`
+
+### `import { pageToUrl } from 'admin_lsac'`
+
+### `import { AdminPage } from 'admin_lsac'`
+
+You can import these in App.js / App.ts. If your project is TypeScript-based, you need to write the following line as well:
+
+### `import { PageSchema } from 'admin_lsac'`
+
+* Import the component from above where you want to write your schemas. (See below for details about schemas)
+
+You need to create an array of schemas for your own admin panel. You can write the following inside your Routes component from App.js / App.ts:
+
+```
+{your_array.map((page) => (
+  <Route
+    path={`${your_url_to_admin_panel}/${pageToUrl(page)}`}
+    element={
+      <AdminPage
+        pages={your_array}
+        selectedPage={page}
+        basePath={your_url_to_admin_panel}
+      />
+    }
+  />
+))}
+{your_array[0] ? (
+  <Route
+    path={`${your_url_to_admin_panel}/*`}
+    element={
+      <AdminPage
+        pages={your_array}
+        selectedPage={your_array[0]}
+        basePath={your_url_to_admin_panel}
+      />
+    }
+  />
+) : null}
+```
+
+#### ⚠️ Don't forget to wrap the Router component into a ChakraProvider component.
+
+## What is a schema?
+
+```
+export interface PageSchema {
+  name: string;
+  actions: Action[];
+  rowActions: RowAction[];
+  getRequest: () => Promise<any[]>;
+  tableFields: TableField[];
+}
+
+export interface TableField {
+  name: string;
+  access: (obj: any) => string | number | React.ReactElement;
+}
+
+export interface SimpleField {
+  name: string;
+  label: string;
+  type: "string" | "number" | "file";
+  validationSchema: any;
+}
+
+export interface Option {
+  value: string | number | boolean;
+  display: string;
+}
+
+export interface DropdownField {
+  name: string;
+  label: string;
+  type: "dropdown";
+  options?: Option[] | undefined;
+  getOptions: () => Promise<Option[]>;
+}
+
+export interface ObjectField {
+  name: string;
+  label: string;
+  type: "object";
+  fields: FormField[];
+}
+
+export interface ArrayField {
+  name: string;
+  label: string;
+  type: "array";
+  element: Exclude<FormField, ArrayField>;
+}
+
+export type FormField = SimpleField | DropdownField | ObjectField | ArrayField;
+
+export interface Action {
+  name: string;
+  fields?: FormField[];
+  onSubmit: (obj1: any, obj2?: any) => Promise<any>;
+}
+
+export interface RowAction {
+  name: string;
+  fields?: FormField[];
+  initialise?: (obj: any) => any;
+  onSubmit: (obj1: any, obj2?: any) => Promise<any>;
+}
+```
+
+A page schema is based on these interfaces, which can be imported into your files. A page schema describes how one table of your admin panel would need to be structured to accomplish what the user needs regarding an entity. (i.e. users, teams, companies, quizzes)
+
+#### An array of schemas would be defined as follows:
+
+```
+const your_array = [
+    {
+        // schema 1
+    },
+    {
+        // schema 2
+    },
+    ...
+];
+```
+
+* In TypeScript, it would slightly change:
+
+```
+const your_array: PageSchema[] = [
+    {
+        // schema 1
+    },
+    {
+        // schema 2
+    },
+    ...
+];
+```
+
+## Other Specifications
+
+Due to some corrupt dependencies, you need a Node version >= 20.5.0 to use this package in a Vite app.
+
+For every entity you describe through a page schema, getRequest and onSubmit functions will use routes created for the entity. `getRequest` function will make a GET request, while `onSumbit` will probably make a POST, PATCH or DELETE request.
+
+## Learn More
+
+For more details, especially about page schemas, contact the owner. :)

package/dist/src/App.d.ts

@@ -0,0 +1,7 @@
+import { PageSchema } from "./schema";
+import './App.css';
+declare function App({ pages, basePath, }: {
+    pages: PageSchema[];
+    basePath: string;
+}): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/src/App.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChakraProvider } from "@chakra-ui/react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { AdminPage } from "./components/AdminPage";
+import { pageToUrl } from "./components/AdminPage";
+import './App.css';
+function App({ pages, basePath, }) {
+    return (_jsx(ChakraProvider, { children: _jsx(BrowserRouter, { children: _jsxs(Routes, { children: [pages.map((page) => (_jsx(Route, { path: `${basePath}/${pageToUrl(page)}`, element: _jsx(AdminPage, { pages: pages, selectedPage: page, basePath: basePath, apiURL: "http://localhost:3001/" }) }))), pages[0] ? (_jsx(Route, { path: `${basePath}/*`, element: _jsx(AdminPage, { pages: pages, selectedPage: pages[0], basePath: basePath, apiURL: "http://localhost:3001/" }) })) : null] }) }) }));
+}
+export default App;

package/dist/src/components/AdminPage.d.ts

@@ -0,0 +1,8 @@
+import { PageSchema } from "../schema";
+export declare function pageToUrl(page: PageSchema): string;
+export declare function AdminPage({ pages, selectedPage, basePath, apiURL }: {
+    pages: PageSchema[];
+    selectedPage: PageSchema;
+    basePath: string;
+    apiURL?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/{esm/components/Page.js → src/components/AdminPage.js}

@@ -12,41 +12,37 @@ import MenuItem from "@mui/material/MenuItem";
 import { io } from "socket.io-client";
 import { newSocket } from "../utils/websockets";
 export function pageToUrl(page) {
-    return "".concat(page.name.toLowerCase().replace(" ", "_"));
+    return `${page.name.toLowerCase().replace(" ", "_")}`;
 }
-function Header(_a) {
-    var pages = _a.pages, data = _a.data, basePath = _a.basePath;
-    return (_jsx(Box, { background: "blue.50", padding: 1, children: _jsxs(Stack, { margin: 3, direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Stack, { margin: 4, gap: 10, direction: "row", alignItems: "center", children: pages.map(function (p) { return (_jsx(Box, { as: "a", href: "".concat(basePath, "/").concat(pageToUrl(p)), children: p.name })); }) }), _jsx(Stack, { direction: "row", children: _jsx(Button, { colorScheme: "red", onClick: function () {
-                            var filename = prompt("Enter filename:");
+function Header({ pages, data, basePath, }) {
+    return (_jsx(Box, { background: "blue.50", padding: 1, children: _jsxs(Stack, { margin: 3, direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Stack, { margin: 4, gap: 10, direction: "row", alignItems: "center", children: pages.map((p) => (_jsx(Box, { as: "a", href: `${basePath}/${pageToUrl(p)}`, children: p.name }))) }), _jsx(Stack, { direction: "row", children: _jsx(Button, { colorScheme: "red", onClick: () => {
+                            const filename = prompt("Enter filename:");
                             if (filename)
                                 exportToCSV(data, filename);
                         }, children: "Export Data" }) })] }) }));
 }
 function exportToCSV(data, filename) {
-    var formatImageData = function (obj) {
-        var formattedObj = {};
-        var _loop_1 = function (key) {
+    const formatImageData = (obj) => {
+        const formattedObj = {};
+        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(function (k) {
-                    formattedObj["".concat(key, ".").concat(k)] = obj[key][k];
+                Object.keys(obj[key]).forEach((k) => {
+                    formattedObj[`${key}.${k}`] = obj[key][k];
                 });
             }
-        };
-        for (var key in obj) {
-            _loop_1(key);
         }
         return formattedObj;
     };
-    var formattedData = data.map(formatImageData);
-    var csvConfig = mkConfig({
+    const formattedData = data.map(formatImageData);
+    const csvConfig = mkConfig({
         useKeysAsHeaders: true,
         filename: filename,
     });
     if (formattedData.length > 0) {
-        var csv = generateCsv(csvConfig)(formattedData);
+        const csv = generateCsv(csvConfig)(formattedData);
         download(csvConfig)(csv);
     }
     else {
@@ -56,55 +52,51 @@ function exportToCSV(data, filename) {
         });
     }
 }
-export function AdminPage(_a) {
-    var _b;
-    var pages = _a.pages, selectedPage = _a.selectedPage, basePath = _a.basePath, _c = _a.apiURL, apiURL = _c === void 0 ? '' : _c;
-    var _d = useDisclosure(), isOpen = _d.isOpen, onOpen = _d.onOpen, onClose = _d.onClose;
-    var _e = useState({}), selectedAction = _e[0], setSelectedAction = _e[1];
-    var _f = useState([]), data = _f[0], setData = _f[1];
-    var _g = useState([]), displayData = _g[0], setDisplayData = _g[1];
-    var _h = useState(), rowId = _h[0], setRowId = _h[1];
-    var _j = useState(false), refetch = _j[0], setRefetch = _j[1];
-    var _k = useState(io), socket = _k[0], setSocket = _k[1];
+export function AdminPage({ pages, selectedPage, basePath, apiURL = '' }) {
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const [selectedAction, setSelectedAction] = useState({});
+    const [data, setData] = useState([]);
+    const [displayData, setDisplayData] = useState([]);
+    const [rowId, setRowId] = useState();
+    const [refetch, setRefetch] = useState(false);
+    const [socket, setSocket] = useState(io);
     newSocket(setSocket, apiURL);
-    useEffect(function () {
-        selectedPage.getRequest().then(function (resArray) {
+    useEffect(() => {
+        selectedPage.getRequest().then((resArray) => {
             setData(resArray);
             setRefetch(false);
         });
     }, [refetch]); // Do not remove 'refetch' from here !!!
-    useEffect(function () {
-        socket.on("updateData", function (message) {
+    useEffect(() => {
+        socket.on("updateData", (message) => {
             console.log("Message emitted from socket: " + message);
             setRefetch(true);
-            var rowActionsMenu = document.querySelector(".MuiPaper-root.MuiPopover-paper.MuiMenu-paper");
+            const rowActionsMenu = document.querySelector(".MuiPaper-root.MuiPopover-paper.MuiMenu-paper");
             if (rowActionsMenu) {
                 rowActionsMenu.remove();
             }
         });
     }, [socket, selectedPage]);
-    useEffect(function () {
-        setDisplayData(data.map(function (table_data) {
-            return selectedPage.tableFields.map(function (field) { return field.access(table_data); });
-        }));
+    useEffect(() => {
+        setDisplayData(data.map((table_data) => selectedPage.tableFields.map((field) => field.access(table_data))));
     }, [data]);
-    return (_jsxs(_Fragment, { children: [_jsx(Header, { pages: pages, data: data, basePath: basePath }), _jsx(ThemeProvider, { theme: createTheme(), children: _jsx(MaterialReactTable, { columns: selectedPage.tableFields.map(function (field, index) { return ({
-                        accessorFn: function (row) { return row[index]; },
+    return (_jsxs(_Fragment, { children: [_jsx(Header, { pages: pages, data: data, basePath: basePath }), _jsx(ThemeProvider, { theme: createTheme(), children: _jsx(MaterialReactTable, { columns: selectedPage.tableFields.map((field, index) => ({
+                        accessorFn: (row) => row[index],
                         header: field.name,
-                    }); }), data: displayData, muiTableContainerProps: { sx: { maxHeight: "70vh" } }, enableColumnResizing: true, enableColumnPinning: true, enableGlobalFilterModes: true, enablePagination: true, paginationDisplayMode: "pages", enableRowVirtualization: true, rowVirtualizerOptions: { overscan: 20 }, renderTopToolbarCustomActions: function () { return (_jsx(ChakraProvider, { children: _jsx(Stack, { margin: 0, padding: 3, direction: "row", children: selectedPage.actions.map(function (action) { return (_jsx(Button, { colorScheme: "blue", onClick: function () {
+                    })), data: displayData, muiTableContainerProps: { sx: { maxHeight: "70vh" } }, enableColumnResizing: true, enableColumnPinning: true, enableGlobalFilterModes: true, enablePagination: true, paginationDisplayMode: "pages", enableRowVirtualization: true, rowVirtualizerOptions: { overscan: 20 }, renderTopToolbarCustomActions: () => (_jsx(ChakraProvider, { children: _jsx(Stack, { margin: 0, padding: 3, direction: "row", children: selectedPage.actions.map((action) => (_jsx(Button, { colorScheme: "blue", onClick: () => {
                                     setSelectedAction(action);
                                     onOpen();
-                                }, children: action.name })); }) }) })); }, enableRowActions: true, renderRowActionMenuItems: function (obj) {
-                        return selectedPage.rowActions.map(function (rowAction) { return (_jsx(MenuItem, { onClick: function () {
+                                }, children: action.name }))) }) })), enableRowActions: true, renderRowActionMenuItems: (obj) => {
+                        return selectedPage.rowActions.map((rowAction) => (_jsx(MenuItem, { onClick: () => {
                                 setSelectedAction(rowAction);
                                 setRowId(obj.row.original[0]);
                                 onOpen();
-                                var rowActionsMenu = document.querySelector(".MuiPaper-root.MuiPopover-paper.MuiMenu-paper");
+                                const rowActionsMenu = document.querySelector(".MuiPaper-root.MuiPopover-paper.MuiMenu-paper");
                                 if (rowActionsMenu) {
                                     rowActionsMenu.remove();
                                 }
-                            }, children: rowAction.name + " " + obj.row.original[0] })); });
-                    } }) }), _jsxs(Modal, { size: "6xl", isOpen: isOpen, onClose: onClose, children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { children: [_jsx(ModalHeader, { children: selectedAction.name }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { children: [selectedAction.fields && ((_b = selectedAction.fields) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (_jsx(GenericForm, { action: selectedAction, onClose: onClose, rowId: rowId })) : (_jsx(Button, { colorScheme: "blue", mr: 3, onClick: function () {
+                            }, children: rowAction.name + " " + obj.row.original[0] })));
+                    } }) }), _jsxs(Modal, { size: "6xl", isOpen: isOpen, onClose: onClose, children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { children: [_jsx(ModalHeader, { children: selectedAction.name }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { children: [selectedAction.fields && selectedAction.fields?.length > 0 ? (_jsx(GenericForm, { action: selectedAction, onClose: onClose, rowId: rowId })) : (_jsx(Button, { colorScheme: "blue", mr: 3, onClick: () => {
                                             selectedAction.onSubmit(rowId);
                                             onClose();
                                         }, children: "Confirm Action" })), _jsx(Button, { colorScheme: "red", mr: 3, onClick: onClose, children: "Close" })] })] })] })] }));

package/dist/src/components/GenericForm.d.ts

@@ -0,0 +1,8 @@
+import { Action, RowAction } from "../schema";
+interface GenericFormProps {
+    action: Action | RowAction;
+    onClose?: () => void;
+    rowId?: number;
+}
+export declare function GenericForm({ action, onClose, rowId }: GenericFormProps): import("react/jsx-runtime").JSX.Element;
+export {};