admin_lsac 2.0.4 → 2.0.5
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
CHANGED
|
@@ -27,8 +27,9 @@ Import the component from above where you want to write your schemas! (See below
|
|
|
27
27
|
## How to add routes to the admin panel's pages?
|
|
28
28
|
|
|
29
29
|
```
|
|
30
|
-
{your_array.map((page) => (
|
|
30
|
+
{your_array.map((page, index) => (
|
|
31
31
|
<Route
|
|
32
|
+
key={index}
|
|
32
33
|
path={`${your_url_to_admin_panel}/${pageToUrl(page)}`}
|
|
33
34
|
element={
|
|
34
35
|
<AdminPage
|
package/dist/esm/src/App.js
CHANGED
|
@@ -5,6 +5,6 @@ import { AdminPage } from './components/AdminPage';
|
|
|
5
5
|
import { pageToUrl } from './components/AdminPage';
|
|
6
6
|
import './App.css';
|
|
7
7
|
function App({ pages, basePath }) {
|
|
8
|
-
return (_jsx(ChakraProvider, { children: _jsx(BrowserRouter, { children: _jsxs(Routes, { children: [pages.map((page) => (_jsx(Route, { path: `${basePath}/${pageToUrl(page)}`, element: _jsx(AdminPage, { pages: pages, selectedPage: page, basePath: basePath, apiURL: "http://localhost:3001/" }) }))), pages[0] ? (_jsx(Route, { path: `${basePath}/*`, element: _jsx(AdminPage, { pages: pages, selectedPage: pages[0], basePath: basePath, apiURL: "http://localhost:3001/" }) })) : null] }) }) }));
|
|
8
|
+
return (_jsx(ChakraProvider, { children: _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
9
|
}
|
|
10
10
|
export default App;
|
|
@@ -15,14 +15,14 @@ export function pageToUrl(page) {
|
|
|
15
15
|
return `${page.name.toLowerCase().replace(' ', '_')}`;
|
|
16
16
|
}
|
|
17
17
|
function Header({ pages, data, basePath }) {
|
|
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", children: pages.map((p) => (_jsx(Box, { as: "a", href: `${basePath}/${pageToUrl(p)}`, children: p.name }))) }), _jsx(Stack, { direction: "row", children: _jsx(Button, { colorScheme: "red", onClick: () => {
|
|
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", 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
19
|
const filename = prompt('Enter filename:');
|
|
20
20
|
if (filename)
|
|
21
21
|
exportToCSV(data, filename);
|
|
22
22
|
}, children: "Export Data" }) })] }) }));
|
|
23
23
|
}
|
|
24
24
|
function exportToCSV(data, filename) {
|
|
25
|
-
const
|
|
25
|
+
const formatData = (obj) => {
|
|
26
26
|
const formattedObj = {};
|
|
27
27
|
for (const key in obj) {
|
|
28
28
|
if (typeof obj[key] !== 'object') {
|
|
@@ -42,10 +42,10 @@ function exportToCSV(data, filename) {
|
|
|
42
42
|
};
|
|
43
43
|
const allKeys = new Set();
|
|
44
44
|
data.forEach((item) => {
|
|
45
|
-
Object.keys(
|
|
45
|
+
Object.keys(formatData(removeTimestamps(item))).forEach((key) => allKeys.add(key));
|
|
46
46
|
});
|
|
47
47
|
const formattedData = data.map((item) => {
|
|
48
|
-
const newItem =
|
|
48
|
+
const newItem = formatData(removeTimestamps(item));
|
|
49
49
|
allKeys.forEach((key) => {
|
|
50
50
|
if (!(key in newItem)) {
|
|
51
51
|
newItem[key] = '';
|
|
@@ -97,13 +97,18 @@ export function AdminPage({ pages, selectedPage, basePath, apiURL = '', }) {
|
|
|
97
97
|
setDisplayData(data.map((table_data) => selectedPage.tableFields.map((field) => field.access(table_data))));
|
|
98
98
|
}, [data]);
|
|
99
99
|
return (_jsxs(_Fragment, { children: [_jsx(Header, { pages: pages, data: data, basePath: basePath }), _jsx(ThemeProvider, { theme: createTheme(), children: _jsx(MaterialReactTable, { columns: selectedPage.tableFields.map((field, index) => ({
|
|
100
|
-
accessorFn: (row) =>
|
|
100
|
+
accessorFn: (row) => {
|
|
101
|
+
if (typeof row[index] === 'boolean') {
|
|
102
|
+
row[index] = String(row[index]);
|
|
103
|
+
}
|
|
104
|
+
return row[index];
|
|
105
|
+
},
|
|
101
106
|
header: field.name,
|
|
102
|
-
})), data: displayData, muiTableContainerProps: { sx: { maxHeight: '70vh' } }, enableColumnResizing: true, enableColumnPinning: true, enableGlobalFilterModes: true, enablePagination: true, paginationDisplayMode: "pages", enableRowVirtualization: true, rowVirtualizerOptions: { overscan: 20 }, renderTopToolbarCustomActions: () => (_jsx(ChakraProvider, { children: _jsx(Stack, { margin: 0, padding: 3, direction: "row", children: selectedPage.actions.map((action) => (_jsx(Button, { colorScheme: "blue", onClick: () => {
|
|
107
|
+
})), data: displayData, muiTableContainerProps: { sx: { maxHeight: '70vh' } }, enableColumnResizing: true, enableColumnPinning: true, enableGlobalFilterModes: true, enablePagination: true, paginationDisplayMode: "pages", enableRowVirtualization: true, rowVirtualizerOptions: { overscan: 20 }, renderTopToolbarCustomActions: () => (_jsx(ChakraProvider, { children: _jsx(Stack, { margin: 0, padding: 3, direction: "row", children: selectedPage.actions.map((action, index) => (_jsx(Button, { colorScheme: "blue", onClick: () => {
|
|
103
108
|
setSelectedAction(action);
|
|
104
109
|
onOpen();
|
|
105
|
-
}, children: action.name }))) }) })), enableRowActions: true, renderRowActionMenuItems: (obj) => {
|
|
106
|
-
return selectedPage.rowActions.map((rowAction) => (_jsx(MenuItem, { onClick: () => {
|
|
110
|
+
}, children: action.name }, index))) }) })), enableRowActions: true, renderRowActionMenuItems: (obj) => {
|
|
111
|
+
return selectedPage.rowActions.map((rowAction, index) => (_jsx(MenuItem, { onClick: () => {
|
|
107
112
|
setSelectedAction(rowAction);
|
|
108
113
|
setRowId(obj.row.original[0]);
|
|
109
114
|
onOpen();
|
|
@@ -111,7 +116,7 @@ export function AdminPage({ pages, selectedPage, basePath, apiURL = '', }) {
|
|
|
111
116
|
if (rowActionsMenu) {
|
|
112
117
|
rowActionsMenu.remove();
|
|
113
118
|
}
|
|
114
|
-
}, children: rowAction.name + ' ' + obj.row.original[0] })));
|
|
119
|
+
}, children: rowAction.name + ' ' + obj.row.original[0] }, index)));
|
|
115
120
|
} }) }), _jsxs(Modal, { size: '6xl', isOpen: isOpen, onClose: onClose, children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { children: [_jsx(ModalHeader, { children: selectedAction.name }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { children: [selectedAction.fields && selectedAction.fields?.length > 0 ? (_jsx(GenericForm, { action: selectedAction, onClose: onClose, rowId: rowId })) : (_jsx(Button, { colorScheme: "blue", mr: 3, onClick: () => {
|
|
116
121
|
selectedAction.onSubmit(rowId);
|
|
117
122
|
onClose();
|
|
@@ -47,13 +47,13 @@ function parseFields(fields, previous) {
|
|
|
47
47
|
const fieldName = previous !== undefined ? previous + '.' + formfield.name : formfield.name;
|
|
48
48
|
if (formfield.type === 'object') {
|
|
49
49
|
const objectFields = parseFields(formfield.fields, fieldName);
|
|
50
|
-
return _jsx(FormControl, { children: objectFields },
|
|
50
|
+
return _jsx(FormControl, { children: objectFields }, key);
|
|
51
51
|
}
|
|
52
52
|
else if (formfield.type === 'array') {
|
|
53
53
|
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 &&
|
|
54
54
|
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'
|
|
55
55
|
? parseFields(formfield.element.fields, `${fieldName}.${index}`)
|
|
56
|
-
: 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: () => {
|
|
56
|
+
: 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: () => {
|
|
57
57
|
let value = undefined;
|
|
58
58
|
if (formfield.element.type === 'object') {
|
|
59
59
|
value = getCustomInitialValues(formfield.element.fields);
|
|
@@ -62,7 +62,7 @@ function parseFields(fields, previous) {
|
|
|
62
62
|
value = getCustomInitialValues([formfield.element])[0];
|
|
63
63
|
}
|
|
64
64
|
push(value);
|
|
65
|
-
}, children: ["Add ", fieldName] })] })) }));
|
|
65
|
+
}, children: ["Add ", fieldName] })] })) }, key));
|
|
66
66
|
}
|
|
67
67
|
else {
|
|
68
68
|
return generateSingleField(formfield, fieldName, key);
|
|
@@ -122,7 +122,6 @@ export function GenericForm({ action, onClose, rowId }) {
|
|
|
122
122
|
}, []);
|
|
123
123
|
const handleFormReset = async () => {
|
|
124
124
|
const newInitialValues = await getInitialValues(action, rowId);
|
|
125
|
-
console.log(newInitialValues);
|
|
126
125
|
setInitialValues(newInitialValues);
|
|
127
126
|
};
|
|
128
127
|
if (!action.fields)
|