admin_lsac 1.3.2 → 1.4.1

package/dist/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/src/main.d.ts

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

package/dist/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/{App.d.ts → src/schema.d.ts}

@@ -1,76 +1,53 @@
-import * as React from "react";
-
-declare module "admin_lsac" {
-  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[];
-  }
-
-  export interface PageProps {
-    pages: PageSchema[];
-    selectedPage: PageSchema;
-    basePath: string;
-    apiURL?: string;
-  }
-
-  export function AdminPage(props: PageProps): React.ReactElement;
-
-  export function pageToUrl(page: PageSchema): string;
-}
+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/src/testSchemas/event.d.ts

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

package/dist/src/testSchemas/event.js

@@ -0,0 +1,86 @@
+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) => {
+                const res = await axios.get(domain + "/events/" + eventId);
+                let obj = {};
+                obj.input = res.data.name;
+                return obj;
+            },
+            onSubmit: async (_, eventId) => {
+                const res = await axios.delete(domain + "/events/" + eventId);
+                return res.data;
+            },
+        }
+    ],
+    getRequest: async () => {
+        const res = await axios.get(domain + "/events");
+        return res.data;
+    },
+    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/src/utils/websockets.d.ts

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

package/dist/{esm → src}/utils/websockets.js

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

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Admin Panel</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -1,73 +1,42 @@
-{
-  "name": "admin_lsac",
-  "version": "1.3.2",
-  "description": "Generic Admin Panel created for storing events' data",
-  "private": false,
-  "dependencies": {
-    "@chakra-ui/react": "^2.5.5",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "@tanstack/match-sorter-utils": "^8.8.4",
-    "@tanstack/react-table": "^8.10.7",
-    "@tanstack/react-virtual": "^3.0.0-beta.68",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.23",
-    "@types/react-dom": "^18.0.11",
-    "axios": "^1.3.5",
-    "export-to-csv": "^1.2.1",
-    "formik": "^2.2.9",
-    "framer-motion": "^10.11.6",
-    "material-react-table": "^2.0.2",
-    "nth-check": "^2.1.1",
-    "postcss": "^8.4.35",
-    "prettier": "^2.8.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router": "^6.10.0",
-    "react-router-dom": "^6.10.0",
-    "react-scripts": "^5.0.1",
-    "react-table": "^7.8.0",
-    "socket.io-client": "^4.7.5",
-    "sweetalert2": "^11.6.13",
-    "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4",
-    "yup": "^1.0.2"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.tsx\""
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.65",
-    "@types/react-table": "^7.7.17",
-    "ts-loader": "^9.5.1",
-    "webpack-cli": "^5.1.4"
-  },
-  "main": "dist/components/Page.js",
-  "module": "dist/esm/components/Page.js",
-  "types": "dist/App.d.ts"
-}
+{
+  "name": "admin_lsac",
+  "private": false,
+  "version": "1.4.1",
+  "description": "Generic Admin Panel created for storing events' data",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^2.8.2",
+    "@mui/material": "^5.15.20",
+    "axios": "^1.7.2",
+    "export-to-csv": "^1.3.0",
+    "formik": "^2.4.6",
+    "material-react-table": "^2.13.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.24.0",
+    "socket.io-client": "^4.7.5",
+    "sweetalert2": "^11.12.0",
+    "yup": "^1.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1"
+  },
+  "main": "dist/src/components/AdminPage.js",
+  "module": "dist/src/components/AdminPage.js",
+  "types": "dist/App.d.ts"
+}

package/tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "outDir": "./dist/esm",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": false,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -1,31 +1,11 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": false,
-    "jsx": "react-jsx",
-    "noUncheckedIndexedAccess": true,
-    "outDir": "./dist/cjs"
-  },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

package/dist/App.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var react_router_dom_1 = require("react-router-dom");
-var Page_1 = require("./components/Page");
-var Page_2 = require("./components/Page");
-function App(_a) {
-    var pages = _a.pages, basePath = _a.basePath;
-    return ((0, jsx_runtime_1.jsx)(react_1.ChakraProvider, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [pages.map(function (page) { return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "".concat(basePath, "/").concat((0, Page_2.pageToUrl)(page)), element: (0, jsx_runtime_1.jsx)(Page_1.AdminPage, { pages: pages, selectedPage: page, basePath: basePath, apiURL: "http://localhost:3001" }) })); }), pages[0] ? ((0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "".concat(basePath, "/*"), element: (0, jsx_runtime_1.jsx)(Page_1.AdminPage, { pages: pages, selectedPage: pages[0], basePath: basePath, apiURL: "http://localhost:3001" }) })) : null] }) }) }));
-}
-exports.default = App;