admin_lsac 2.0.20 → 2.0.21

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

@@ -36,12 +36,7 @@ function generateSingleField(formfield, fieldName, key) {
                     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]);
                         }
@@ -87,10 +82,12 @@ function getCustomInitialValues(fields) {
         return obj;
     }
     fields.forEach((field) => {
-        if (field.type === 'object')
+        if (field.type === 'object') {
             obj[field.name] = getCustomInitialValues(field.fields);
-        else
+        }
+        else {
             obj[field.name] = undefined;
+        }
     });
     return obj;
 }
@@ -107,12 +104,15 @@ 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);
 }
@@ -131,20 +131,25 @@ export function GenericForm({ action, onClose, rowId, rowObject }) {
     };
     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.21",
   "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}": [