admin_lsac 1.4.7 → 1.4.8

package/dist/esm/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/esm/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/esm/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/src/components/AdminPage.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { ChakraProvider } from "@chakra-ui/react";
+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) {
+    return `${page.name.toLowerCase().replace(" ", "_")}`;
+}
+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) {
+    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((k) => {
+                    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 = '' }) {
+    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(() => {
+        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 (_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: () => (_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: (obj) => {
+                        return selectedPage.rowActions.map((rowAction) => (_jsx(MenuItem, { onClick: () => {
+                                setSelectedAction(rowAction);
+                                setRowId(obj.row.original[0]);
+                                onOpen();
+                                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 && 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/esm/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 {};

package/dist/esm/src/components/GenericForm.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Button, FormControl, FormErrorMessage, FormLabel, Input, Select, } from "@chakra-ui/react";
+import { Field, Form, Formik, FieldArray, getIn } from "formik";
+import * as Yup from "yup";
+import Swal from "sweetalert2";
+import { useEffect, useState } from "react";
+function parseValidation(fields) {
+    if (!fields) {
+        return {};
+    }
+    return fields.reduce((acc, field) => {
+        if (field.type !== "dropdown" &&
+            field.type !== "object" &&
+            field.type !== "array") {
+            acc[field.name] = field.validationSchema;
+        }
+        else if (field.type === "array") {
+            if (field.element.type === "dropdown") {
+                acc[field.name] = Yup.array().of(Yup.string().required());
+            }
+            else if (field.element.type === "object") {
+                acc[field.name] = Yup.array().of(Yup.object(parseValidation(field.element.fields)));
+            }
+            else {
+                acc[field.name] = Yup.array().of(field.element.validationSchema);
+            }
+        }
+        else if (field.type === "object") {
+            acc[field.name] = Yup.object(parseValidation(field.fields));
+        }
+        if (field.type === "dropdown") {
+            acc[field.name] = Yup.string().required();
+        }
+        return acc;
+    }, {});
+}
+function generateSingleField(formfield, fieldName, key) {
+    return (_jsx(Field, { name: fieldName, children: ({ field, form }) => (_jsxs(FormControl, { isInvalid: getIn(form.touched, fieldName) && getIn(form.errors, fieldName), children: [_jsx(FormLabel, { marginTop: 2, children: formfield.label }), formfield.type === "string" || formfield.type === "number" ? (_jsx(Input, { ...field, type: formfield.type === "number" ? "number" : "text", placeholder: "" })) : formfield.type === "file" ? (_jsx(Input, { type: "file", name: fieldName, onChange: (event) => {
+                        if (event.currentTarget.files != null) {
+                            form.setFieldValue(fieldName, event.currentTarget.files[0]);
+                        }
+                    } })) : (_jsxs(Select, { ...field, defaultValue: "", children: [_jsx("option", { disabled: true, value: "", children: "Select an option!" }), formfield.options?.map((option, key) => (_jsx("option", { value: `${option.value}`, children: option.display }, key)))] })), _jsx(FormErrorMessage, { children: getIn(form.errors, fieldName) })] })) }, key));
+}
+function parseFields(fields, previous) {
+    if (!fields) {
+        return [];
+    }
+    const computedFields = fields.map((formfield, key) => {
+        let fieldName = previous !== undefined ? previous + "." + formfield.name : formfield.name;
+        if (formfield.type === "object") {
+            const objectFields = parseFields(formfield.fields, fieldName);
+            return _jsx(FormControl, { children: objectFields }, fieldName);
+        }
+        else if (formfield.type === "array") {
+            return (_jsx(FieldArray, { name: fieldName, children: ({ remove, push, form }) => (_jsxs("div", { children: [_jsx(FormLabel, { marginTop: 2, children: formfield.label }), getIn(form.values, fieldName).length > 0 &&
+                            getIn(form.values, fieldName).map((_, index) => (_jsxs(Box, { paddingLeft: 10, children: [_jsx("h4", { children: _jsx("b", { children: `${fieldName}.${index}` }) }), _jsx(Box, { paddingLeft: 10, children: formfield.element.type === "object"
+                                            ? parseFields(formfield.element.fields, `${fieldName}.${index}`)
+                                            : generateSingleField(formfield.element, `${fieldName}.${index}`, key) }), _jsxs(Button, { type: "button", colorScheme: "red", marginY: 2, onClick: () => remove(index), children: ["Remove ", `${fieldName}.${index}`] })] }))), _jsxs(Button, { type: "button", marginY: 2, colorScheme: "blue", onClick: () => {
+                                let value = undefined;
+                                if (formfield.element.type === "object") {
+                                    value = getCustomInitialValues(formfield.element.fields);
+                                }
+                                else {
+                                    value = getCustomInitialValues([formfield.element])[0];
+                                }
+                                push(value);
+                            }, children: ["Add ", fieldName] })] })) }));
+        }
+        else {
+            return generateSingleField(formfield, fieldName, key);
+        }
+    });
+    return computedFields;
+}
+function getCustomInitialValues(fields) {
+    let obj = {};
+    if (!fields) {
+        return obj;
+    }
+    fields.forEach((field) => {
+        if (field.type === "array")
+            obj[field.name] = [];
+        else if (field.type === "object")
+            obj[field.name] = getCustomInitialValues(field.fields);
+        else if (field.type === "string")
+            obj[field.name] = "";
+        else if (field.type === "number")
+            obj[field.name] = 0;
+        else
+            obj[field.name] = null;
+    });
+    return obj;
+}
+async function getInitialValues(action, rowId) {
+    let obj = {};
+    if (action.initialise) {
+        obj = await action.initialise(rowId);
+    }
+    const customInitialValues = getCustomInitialValues(action.fields);
+    return Object.assign({}, customInitialValues, obj);
+}
+async function setOptions(fields) {
+    if (!fields) {
+        return;
+    }
+    const promises = fields.map(async (field) => {
+        if (field.type === "dropdown")
+            field.options = await field.getOptions();
+        else if (field.type === "array")
+            await setOptions([field.element]);
+        else if (field.type === "object")
+            await setOptions(field.fields);
+    });
+    await Promise.all(promises);
+}
+export function GenericForm({ action, onClose, rowId }) {
+    const [formFields, setFormFields] = useState(parseFields(action.fields));
+    const [initialValues, setInitialValues] = useState(getCustomInitialValues(action.fields));
+    const [validationSchema, _] = useState(parseValidation(action.fields));
+    useEffect(() => {
+        setOptions(action.fields).then(() => {
+            setFormFields(parseFields(action.fields));
+        });
+    }, []);
+    const handleFormReset = async () => {
+        const newInitialValues = await getInitialValues(action, rowId);
+        console.log(newInitialValues);
+        setInitialValues(newInitialValues);
+    };
+    if (!action.fields)
+        return _jsx(_Fragment, {});
+    return (_jsx(_Fragment, { children: _jsx(Formik, { enableReinitialize: true, initialValues: initialValues, validationSchema: Yup.object(validationSchema), onReset: handleFormReset, onSubmit: async (values) => {
+                try {
+                    if (rowId)
+                        await action.onSubmit(values, rowId);
+                    else
+                        await action.onSubmit(values);
+                    if (onClose)
+                        onClose();
+                    Swal.fire("Ok");
+                }
+                catch (e) {
+                    if (onClose)
+                        onClose();
+                    const err = e.request.response;
+                    Swal.fire({
+                        text: "Error: " + err,
+                    });
+                }
+            }, children: ({ isSubmitting }) => (_jsxs(Form, { children: [formFields, _jsx(Button, { mt: 4, colorScheme: "teal", isLoading: isSubmitting, type: "submit", children: "Submit" }), _jsx(Button, { mt: 4, colorScheme: "teal", type: "reset", children: "Initialise Form" })] })) }) }));
+}

package/dist/esm/src/main.d.ts

@@ -0,0 +1 @@
+import './index.css';

package/dist/esm/src/main.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import { event } from './testSchemas/event';
+import './index.css';
+ReactDOM.createRoot(document.getElementById('root')).render(_jsx(React.StrictMode, { children: _jsx(App, { pages: [event], basePath: '' }) }));

package/dist/esm/src/schema.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+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>;
+}
+export interface PageSchema {
+    name: string;
+    actions: Action[];
+    rowActions: RowAction[];
+    getRequest: () => Promise<any[]>;
+    tableFields: TableField[];
+}

package/dist/esm/src/schema.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/testSchemas/event.d.ts

@@ -0,0 +1,2 @@
+import { PageSchema } from '../schema';
+export declare const event: PageSchema;

package/dist/esm/src/testSchemas/event.js

@@ -0,0 +1,89 @@
+// import axios from "axios";
+import React from 'react';
+// const domain = "http://localhost:3001";
+export const event = {
+    name: 'Events',
+    actions: [],
+    rowActions: [
+    // {
+    //   name: "Delete Event",
+    //   fields: [
+    //     {
+    //       name: "input",
+    //       label: "Mock Field",
+    //       type: "string",
+    //       validationSchema: "",
+    //     },
+    //   ],
+    //   initialise: async (eventId: number) => {
+    //     const res = await axios.get(domain + "/events/" + eventId);
+    //     let obj: any = {};
+    //     obj.input = res.data.name;
+    //     return obj;
+    //   },
+    //   onSubmit: async (_: any, eventId: number) => {
+    //     const res = await axios.delete(
+    //       domain + "/events/" + eventId
+    //     );
+    //     return res.data;
+    //   },
+    // }
+    ],
+    getRequest: async () => {
+        // const res = await axios.get(domain + "/events");
+        // return res.data;
+        return [];
+    },
+    tableFields: [
+        {
+            name: 'Id',
+            access: (obj) => obj.id,
+        },
+        {
+            name: 'Event Name',
+            access: (obj) => obj.name,
+        },
+        {
+            name: 'Description',
+            access: (obj) => obj.description,
+        },
+        {
+            name: 'Category',
+            access: (obj) => obj.category,
+        },
+        {
+            name: 'Ticket Type',
+            access: (obj) => obj.ticketType,
+        },
+        {
+            name: 'Date',
+            access: (obj) => obj.date,
+        },
+        {
+            name: 'Release',
+            access: (obj) => obj.release,
+        },
+        {
+            name: 'Is Released',
+            access: (obj) => (obj.isReleased ? 'Is Released' : 'Not Released'),
+        },
+        {
+            name: 'Available Tickets',
+            access: (obj) => obj.availableTickets,
+        },
+        {
+            name: 'Max Tickets',
+            access: (obj) => obj.maxTickets,
+        },
+        {
+            name: 'Image',
+            access: (obj) => obj.imgUrl
+                ? React.createElement('img', {
+                    src: obj.imgUrl,
+                    alt: 'ERROR',
+                    style: { width: '100px' },
+                })
+                : 'No Image Available',
+        },
+    ],
+};

package/dist/esm/src/utils/websockets.d.ts

@@ -0,0 +1 @@
+export declare const newSocket: (setSocket: any, apiURL: string) => void;

package/dist/esm/src/utils/websockets.js

@@ -0,0 +1,15 @@
+import io from "socket.io-client";
+import { useEffect } from "react";
+const Socket = (setSocket, apiURL) => {
+    useEffect(() => {
+        const socketRef = io(apiURL, {
+            transports: ["websocket"],
+        });
+        setSocket(socketRef);
+        return () => {
+            socketRef.removeAllListeners();
+            socketRef.disconnect();
+        };
+    }, []);
+};
+export const newSocket = (setSocket, apiURL) => Socket(setSocket, apiURL);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "admin_lsac",
   "private": false,
-  "version": "1.4.7",
+  "version": "1.4.8",
   "description": "Generic Admin Panel created for storing events' data",
   "scripts": {
     "dev": "vite",