admin_lsac 2.0.17 → 2.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -4
- package/dist/esm/src/App.js +1 -2
- package/dist/esm/src/components/AdminPage.js +4 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,8 +10,6 @@ This command will download and install the specified package and its dependencie
|
|
|
10
10
|
|
|
11
11
|
## What do you need to import?
|
|
12
12
|
|
|
13
|
-
- `import { ChakraProvider } from '@chakra-ui/react'`
|
|
14
|
-
|
|
15
13
|
- `import { pageToUrl } from 'admin_lsac'`
|
|
16
14
|
|
|
17
15
|
- `import { AdminPage } from 'admin_lsac'`
|
|
@@ -58,8 +56,6 @@ Import the component from above where you want to write your schemas! (See below
|
|
|
58
56
|
|
|
59
57
|
You will need to create an array of schemas for your own admin panel.
|
|
60
58
|
|
|
61
|
-
#### ⚠️ Don't forget to wrap the Router component into a ChakraProvider component. Otherwise, you will not like the way it looks. :)
|
|
62
|
-
|
|
63
59
|
## What is a schema?
|
|
64
60
|
|
|
65
61
|
```
|
package/dist/esm/src/App.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ChakraProvider } from '@chakra-ui/react';
|
|
3
2
|
import { BrowserRouter, Route, Routes } from 'react-router-dom';
|
|
4
3
|
import { AdminPage } from './components/AdminPage';
|
|
5
4
|
import { pageToUrl } from './components/AdminPage';
|
|
6
5
|
import './App.css';
|
|
7
6
|
function App({ pages, basePath }) {
|
|
8
|
-
return (_jsx(
|
|
7
|
+
return (_jsx(BrowserRouter, { children: _jsxs(Routes, { children: [pages.map((page, index) => (_jsx(Route, { path: `${basePath}/${pageToUrl(page)}`, element: _jsx(AdminPage, { pages: pages, selectedPage: page, basePath: basePath, apiURL: "http://localhost:3001/" }) }, index))), pages[0] ? (_jsx(Route, { path: `${basePath}/*`, element: _jsx(AdminPage, { pages: pages, selectedPage: pages[0], basePath: basePath, apiURL: "http://localhost:3001/" }) })) : null] }) }));
|
|
9
8
|
}
|
|
10
9
|
export default App;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useState } from 'react';
|
|
3
3
|
import { ChakraProvider } from '@chakra-ui/react';
|
|
4
4
|
import { Button, Modal, ModalHeader, ModalBody, useDisclosure, ModalOverlay, ModalContent, ModalCloseButton, Box, Stack, } from '@chakra-ui/react';
|
|
@@ -16,7 +16,7 @@ export function pageToUrl(page) {
|
|
|
16
16
|
}
|
|
17
17
|
function Header({ pages, data, basePath }) {
|
|
18
18
|
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: () => {
|
|
19
|
-
const filename = prompt('Enter filename:');
|
|
19
|
+
const filename = prompt('Enter filename: (without file extension)');
|
|
20
20
|
if (filename)
|
|
21
21
|
exportToCSV(data, filename);
|
|
22
22
|
}, children: "Export Data" }) })] }) }));
|
|
@@ -67,7 +67,7 @@ export function AdminPage({ pages, selectedPage, basePath, apiURL = '', }) {
|
|
|
67
67
|
useEffect(() => {
|
|
68
68
|
setDisplayData(data.map((table_data) => selectedPage.tableFields.map((field) => field.access(table_data))));
|
|
69
69
|
}, [data]);
|
|
70
|
-
return (_jsxs(
|
|
70
|
+
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) => ({
|
|
71
71
|
accessorFn: (row) => {
|
|
72
72
|
if (typeof row[index] === 'boolean') {
|
|
73
73
|
row[index] = String(row[index]);
|
|
@@ -75,7 +75,7 @@ export function AdminPage({ pages, selectedPage, basePath, apiURL = '', }) {
|
|
|
75
75
|
return row[index];
|
|
76
76
|
},
|
|
77
77
|
header: field.name,
|
|
78
|
-
})), data: displayData, muiTableContainerProps: { sx: {
|
|
78
|
+
})), 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: () => {
|
|
79
79
|
setSelectedAction(action);
|
|
80
80
|
onOpen();
|
|
81
81
|
}, children: action.name }, index))) }) })), enableRowActions: true, renderRowActionMenuItems: (obj) => {
|