admin_lsac 2.0.21 → 2.0.23

package/README.md

@@ -33,7 +33,7 @@ Import the component from above where you want to write your schemas! (See below
       <AdminPage
         pages={your_array}
         selectedPage={page} // 'page' param from above
-        basePath={your_url_to_admin_panel}
+        basePath={your_url_to_admin_panel} // use '', NOT '/' if at root
         apiURL={your_url_to_backend} // optional, for websockets
       />
     }
@@ -46,7 +46,7 @@ Import the component from above where you want to write your schemas! (See below
       <AdminPage
         pages={your_array}
         selectedPage={your_array[0]}
-        basePath={your_url_to_admin_panel}
+        basePath={your_url_to_admin_panel} // use '', NOT '/' if at root
         apiURL={your_url_to_backend} // optional, for websockets
       />
     }

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, useRef } from 'react';
-import { ChakraProvider } from '@chakra-ui/react';
-import { Button, Modal, ModalHeader, ModalBody, useDisclosure, ModalOverlay, ModalContent, ModalCloseButton, Box, Stack, } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalOverlay, ModalContent, ModalCloseButton, useDisclosure, Box, Stack, ChakraProvider, } from '@chakra-ui/react';
 import { GenericForm } from './GenericForm';
 import { ThemeProvider } from '@emotion/react';
 import { createTheme } from '@mui/material/styles';
@@ -66,28 +65,21 @@ export function AdminPage({ pages, selectedPage, basePath, apiURL = '', }) {
         });
     }, [socket, selectedPage]);
     useEffect(() => {
-        setDisplayData(data.map((table_data) => selectedPage.tableFields.map((field) => field.access(table_data))));
+        setDisplayData(data.map((row) => selectedPage.tableFields.map((field) => field.access(row))));
     }, [data]);
-    const headerRef = useRef(null);
-    const [tableHeight, setTableHeight] = useState('80vh');
-    useEffect(() => {
-        const updateTableHeight = () => {
-            if (headerRef.current) {
-                const headerHeight = headerRef.current.clientHeight;
-                setTableHeight(`calc(88vh - ${headerHeight}px)`);
-            }
-        };
-        updateTableHeight();
-    }, []);
-    return (_jsxs(ChakraProvider, { children: [_jsx(Box, { ref: headerRef, children: _jsx(Header, { pages: pages, data: [selectedPage.tableFields.map((field) => field.name), ...displayData], basePath: basePath }) }), _jsx(ThemeProvider, { theme: createTheme(), children: _jsx(MaterialReactTable, { columns: selectedPage.tableFields.map((field, index) => ({
+    return (_jsxs(ChakraProvider, { children: [_jsx(Box, { children: _jsx(Header, { pages: pages, data: [selectedPage.tableFields.map((field) => field.name), ...displayData], basePath: basePath }) }), _jsx(ThemeProvider, { theme: createTheme(), children: _jsx(MaterialReactTable, { columns: selectedPage.tableFields.map((field, colIndex) => ({
                         accessorFn: (row) => {
-                            if (typeof row[index] === 'boolean') {
-                                row[index] = String(row[index]);
-                            }
-                            return row[index];
+                            const value = row[colIndex];
+                            return typeof value === 'boolean' ? String(value) : value;
                         },
                         header: field.name,
-                    })), data: displayData, muiTableContainerProps: { sx: { height: tableHeight } }, enableColumnResizing: true, enableColumnPinning: true, enableGlobalFilterModes: true, enablePagination: false, paginationDisplayMode: "pages", enableRowVirtualization: true, rowVirtualizerOptions: { overscan: 20 }, renderTopToolbarCustomActions: () => (_jsx(ChakraProvider, { children: _jsx(Stack, { margin: 0, padding: 2, direction: "row", wrap: "wrap", children: selectedPage.actions.map((action, index) => (_jsx(Button, { colorScheme: "blue", onClick: () => {
+                    })), data: displayData, muiTableContainerProps: {
+                        sx: {
+                            maxHeight: 'none',
+                            overflowY: 'visible',
+                            overflowX: 'auto',
+                        },
+                    }, enableColumnResizing: true, enableColumnPinning: true, enableGlobalFilterModes: true, enablePagination: false, paginationDisplayMode: "pages", enableRowVirtualization: true, rowVirtualizerOptions: { overscan: 20 }, renderTopToolbarCustomActions: () => (_jsx(ChakraProvider, { children: _jsx(Stack, { margin: 0, padding: 2, direction: "row", wrap: "wrap", children: selectedPage.actions.map((action, index) => (_jsx(Button, { colorScheme: "blue", onClick: () => {
                                     setSelectedAction(action);
                                     onOpen();
                                 }, children: action.name }, index))) }) })), enableRowActions: true, renderRowActionMenuItems: (obj) => {

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

@@ -4,33 +4,6 @@ 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 !== 'object' && field.type !== 'array') {
-            acc[field.name] = field.validationSchema ? field.validationSchema : '';
-        }
-        else if (field.type === 'array') {
-            if (field.element.type === 'dropdown') {
-                acc[field.name] = field.element.validationSchema
-                    ? Yup.array().of(field.element.validationSchema)
-                    : '';
-            }
-            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));
-        }
-        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' ||
@@ -56,19 +29,19 @@ function parseFields(fields, previous) {
             return _jsx(FormControl, { children: objectFields }, key);
         }
         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 &&
+            return (_jsx(FieldArray, { name: fieldName, children: ({ pop, 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}`] })] }, index))), _jsxs(Button, { type: "button", marginY: 2, colorScheme: "blue", onClick: () => {
-                                let value = undefined;
+                                            : generateSingleField(formfield.element, `${fieldName}.${index}`, key) })] }, index))), _jsxs(Button, { type: "button", marginY: 4, colorScheme: "blue", onClick: () => {
+                                let value;
                                 if (formfield.element.type === 'object') {
-                                    value = getCustomInitialValues(formfield.element.fields);
+                                    value = getDefaultValues(formfield.element.fields);
                                 }
                                 else {
-                                    value = getCustomInitialValues([formfield.element])[0];
+                                    value = getDefaultValues([formfield.element])[0];
                                 }
                                 push(value);
-                            }, children: ["Add ", fieldName] })] })) }, key));
+                            }, children: ["Add ", fieldName] }), getIn(form.values, fieldName).length > 0 && (_jsxs(Button, { type: "button", colorScheme: "red", marginY: 4, ml: 4, onClick: () => pop(), children: ["Remove last ", fieldName] }))] })) }, key));
         }
         else {
             return generateSingleField(formfield, fieldName, key);
@@ -76,14 +49,41 @@ function parseFields(fields, previous) {
     });
     return computedFields;
 }
-function getCustomInitialValues(fields) {
+function parseValidation(fields) {
+    if (!fields) {
+        return {};
+    }
+    return fields.reduce((acc, field) => {
+        if (field.type !== 'object' && field.type !== 'array') {
+            acc[field.name] = field.validationSchema ? field.validationSchema : '';
+        }
+        else if (field.type === 'array') {
+            if (field.element.type !== 'object') {
+                acc[field.name] = Yup.isSchema(field.element.validationSchema)
+                    ? Yup.array().of(field.element.validationSchema)
+                    : '';
+            }
+            else if (field.element.type === 'object') {
+                acc[field.name] = Yup.array().of(Yup.object(parseValidation(field.element.fields)));
+            }
+        }
+        else if (field.type === 'object') {
+            acc[field.name] = Yup.object(parseValidation(field.fields));
+        }
+        return acc;
+    }, {});
+}
+function getDefaultValues(fields) {
     const obj = {};
     if (!fields) {
         return obj;
     }
     fields.forEach((field) => {
         if (field.type === 'object') {
-            obj[field.name] = getCustomInitialValues(field.fields);
+            obj[field.name] = getDefaultValues(field.fields);
+        }
+        else if (field.type === 'array') {
+            obj[field.name] = [];
         }
         else {
             obj[field.name] = undefined;
@@ -91,12 +91,12 @@ function getCustomInitialValues(fields) {
     });
     return obj;
 }
-async function getInitialValues(action, rowId) {
+async function getValuesFromInitialise(action, rowId) {
     let obj = {};
     if (action.initialise) {
         obj = await action.initialise(rowId);
     }
-    const customInitialValues = getCustomInitialValues(action.fields);
+    const customInitialValues = getDefaultValues(action.fields);
     return Object.assign({}, customInitialValues, obj);
 }
 async function setOptions(fields) {
@@ -118,7 +118,7 @@ async function setOptions(fields) {
 }
 export function GenericForm({ action, onClose, rowId, rowObject }) {
     const [formFields, setFormFields] = useState(parseFields(action.fields));
-    const [initialValues, setInitialValues] = useState(getCustomInitialValues(action.fields));
+    const [initialValues, setInitialValues] = useState(getDefaultValues(action.fields));
     const [validationSchema, _] = useState(parseValidation(action.fields));
     useEffect(() => {
         setOptions(action.fields).then(() => {
@@ -126,7 +126,7 @@ export function GenericForm({ action, onClose, rowId, rowObject }) {
         });
     }, []);
     const handleFormReset = async () => {
-        const newInitialValues = await getInitialValues(action, rowId);
+        const newInitialValues = await getValuesFromInitialise(action, rowId);
         setInitialValues(newInitialValues);
     };
     return (_jsx(_Fragment, { children: _jsx(Formik, { enableReinitialize: true, initialValues: initialValues, validationSchema: Yup.object(validationSchema), onReset: handleFormReset, onSubmit: async (values) => {

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

@@ -6,7 +6,7 @@ export interface SimpleField {
     name: string;
     label: string;
     type: 'string' | 'number' | 'file' | 'date' | 'datetime-local' | 'time';
-    validationSchema: any;
+    validationSchema?: any;
 }
 export interface Option {
     value: string | number | boolean;
@@ -48,6 +48,6 @@ export interface PageSchema {
     name: string;
     actions: Action[];
     rowActions: RowAction[];
-    getRequest: () => Promise<any[]>;
+    getRequest: (filter?: any) => Promise<any[]>;
     tableFields: TableField[];
 }

package/package.json

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