admin_lsac 2.0.20 → 2.0.22

package/README.md

@@ -61,7 +61,7 @@ You will need to create an array of schemas for your own admin panel.
 ```
 export interface TableField {
   name: string;
-  access: (obj: any) => Promise<any>;
+  access: (obj: any) => any;
 }
 
 export interface SimpleField {

package/admin_lsac.d.ts

@@ -1,7 +1,7 @@
 declare module 'admin_lsac' {
   export interface TableField {
     name: string;
-    access: (obj: any) => Promise<any>;
+    access: (obj: any) => any;
   }
   export interface SimpleField {
     name: string;

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

@@ -1,7 +1,7 @@
 declare module 'admin_lsac' {
   export interface TableField {
     name: string;
-    access: (obj: any) => Promise<any>;
+    access: (obj: any) => any;
   }
   export interface SimpleField {
     name: string;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+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 { GenericForm } from './GenericForm';
@@ -17,8 +17,9 @@ export function pageToUrl(page) {
 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", wrap: "wrap", children: pages.map((p, index) => (_jsx(Box, { as: "a", href: `${basePath}/${pageToUrl(p)}`, children: p.name }, index))) }), _jsx(Stack, { direction: "row", children: _jsx(Button, { colorScheme: "red", onClick: () => {
                             const filename = prompt('Enter filename: (without file extension)');
-                            if (filename)
+                            if (filename) {
                                 exportToCSV(data, filename);
+                            }
                         }, children: "Export Data" }) })] }) }));
 }
 function exportToCSV(data, filename) {
@@ -67,7 +68,18 @@ export function AdminPage({ pages, selectedPage, basePath, apiURL = '', }) {
     useEffect(() => {
         setDisplayData(data.map((table_data) => selectedPage.tableFields.map((field) => field.access(table_data))));
     }, [data]);
-    return (_jsxs(ChakraProvider, { 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) => ({
+    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) => ({
                         accessorFn: (row) => {
                             if (typeof row[index] === 'boolean') {
                                 row[index] = String(row[index]);
@@ -75,7 +87,7 @@ export function AdminPage({ pages, selectedPage, basePath, apiURL = '', }) {
                             return row[index];
                         },
                         header: field.name,
-                    })), data: displayData, muiTableContainerProps: { sx: { height: '80vh' } }, 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: { 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: () => {
                                     setSelectedAction(action);
                                     onOpen();
                                 }, children: action.name }, index))) }) })), enableRowActions: true, renderRowActionMenuItems: (obj) => {

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

@@ -4,44 +4,12 @@ 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' ||
                     formfield.type === 'date' ||
                     formfield.type === 'datetime-local' ||
-                    formfield.type === 'time' ? (_jsx(Input, { ...field, value: field.value ?? '', type: formfield.type === 'number' ||
-                        formfield.type === 'date' ||
-                        formfield.type === 'datetime-local' ||
-                        formfield.type === 'time'
-                        ? formfield.type
-                        : 'text' })) : formfield.type === 'file' ? (_jsx(Input, { type: "file", name: fieldName, onChange: (event) => {
+                    formfield.type === 'time' ? (_jsx(Input, { ...field, value: field.value ?? '', type: formfield.type !== 'string' ? formfield.type : 'text' })) : formfield.type === 'file' ? (_jsx(Input, { type: "file", name: fieldName, onChange: (event) => {
                         if (event.currentTarget.files != null) {
                             form.setFieldValue(fieldName, event.currentTarget.files[0]);
                         }
@@ -61,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);
@@ -81,25 +49,54 @@ 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);
-        else
+        if (field.type === 'object') {
+            obj[field.name] = getDefaultValues(field.fields);
+        }
+        else if (field.type === 'array') {
+            obj[field.name] = [];
+        }
+        else {
             obj[field.name] = undefined;
+        }
     });
     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) {
@@ -107,18 +104,21 @@ async function setOptions(fields) {
         return;
     }
     const promises = fields.map(async (field) => {
-        if (field.type === 'dropdown')
+        if (field.type === 'dropdown') {
             field.options = field.options || (field.getOptions && (await field.getOptions()));
-        else if (field.type === 'array')
+        }
+        else if (field.type === 'array') {
             await setOptions([field.element]);
-        else if (field.type === 'object')
+        }
+        else if (field.type === 'object') {
             await setOptions(field.fields);
+        }
     });
     await Promise.all(promises);
 }
 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,25 +126,30 @@ 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) => {
                 try {
-                    if (rowObject !== undefined)
+                    if (rowObject !== undefined) {
                         await action.onSubmit(values, rowId, rowObject);
-                    else if (rowId !== undefined)
+                    }
+                    else if (rowId !== undefined) {
                         await action.onSubmit(values, rowId);
-                    else
+                    }
+                    else {
                         await action.onSubmit(values);
-                    if (onClose)
+                    }
+                    if (onClose) {
                         onClose();
+                    }
                     Swal.fire('Action/RowAction executed successfully');
                 }
                 catch (e) {
-                    if (onClose)
-                        onClose();
                     const err = e.message;
+                    if (onClose) {
+                        onClose();
+                    }
                     Swal.fire({
                         text: 'Error: ' + err,
                     });

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

@@ -1,6 +1,6 @@
 export interface TableField {
     name: string;
-    access: (obj: any) => Promise<any>;
+    access: (obj: any) => any;
 }
 export interface SimpleField {
     name: string;

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

@@ -9,7 +9,7 @@ export const event = {
             name: 'Delete Event - Variant 1', // without form
             onSubmit: async (eventId) => {
                 // onSubmit has only param, the row's ID
-                const res = await axios.delete(domain + '/something/' + eventId);
+                const res = await axios.delete(domain + '/events/' + eventId);
                 return res.data;
             },
         },
@@ -53,15 +53,14 @@ export const event = {
                 // onSubmit has two params
                 // the first param - formValues, while the second is the row's ID
                 console.log(formValues);
-                const res = await axios.delete(domain + '/something/' + eventId);
+                const res = await axios.delete(domain + '/events/' + eventId);
                 return res.data;
             },
         },
     ],
     getRequest: async () => {
-        // const res = await axios.get(domain + '/events');
-        // return res.data;
-        return [];
+        const res = await axios.get(domain + '/events');
+        return res.data;
     },
     tableFields: [
         {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "admin_lsac",
   "private": false,
-  "version": "2.0.20",
+  "version": "2.0.22",
   "description": "Generic Admin Panel created for storing events' data",
   "scripts": {
     "dev": "vite",
@@ -12,7 +12,7 @@
     "lint-staged": "lint-staged"
   },
   "lint-staged": {
-    "*.{js,ts,tsx, jsx}": [
+    "*.{js,ts,tsx,jsx}": [
       "eslint --quiet --fix"
     ],
     "*.{json,md,html,js,jsx,ts,tsx}": [