admin_lsac 2.0.4 → 2.0.6
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 +2 -1
- package/admin_lsac.d.ts +1 -0
- package/dist/esm/src/App.js +1 -1
- package/dist/esm/src/admin_lsac.d.ts +1 -0
- package/dist/esm/src/components/AdminPage.js +14 -9
- package/dist/esm/src/components/GenericForm.js +8 -10
- package/dist/esm/src/schema.d.ts +1 -0
- package/package.json +1 -1
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/admin_lsac.d.ts
CHANGED
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();
|
|
@@ -9,12 +9,14 @@ function parseValidation(fields) {
|
|
|
9
9
|
return {};
|
|
10
10
|
}
|
|
11
11
|
return fields.reduce((acc, field) => {
|
|
12
|
-
if (field.type !== '
|
|
13
|
-
acc[field.name] = field.validationSchema;
|
|
12
|
+
if (field.type !== 'object' && field.type !== 'array') {
|
|
13
|
+
acc[field.name] = field.validationSchema ? field.validationSchema : '';
|
|
14
14
|
}
|
|
15
15
|
else if (field.type === 'array') {
|
|
16
16
|
if (field.element.type === 'dropdown') {
|
|
17
|
-
acc[field.name] =
|
|
17
|
+
acc[field.name] = field.element.validationSchema
|
|
18
|
+
? Yup.array().of(field.element.validationSchema)
|
|
19
|
+
: '';
|
|
18
20
|
}
|
|
19
21
|
else if (field.element.type === 'object') {
|
|
20
22
|
acc[field.name] = Yup.array().of(Yup.object(parseValidation(field.element.fields)));
|
|
@@ -26,9 +28,6 @@ function parseValidation(fields) {
|
|
|
26
28
|
else if (field.type === 'object') {
|
|
27
29
|
acc[field.name] = Yup.object(parseValidation(field.fields));
|
|
28
30
|
}
|
|
29
|
-
if (field.type === 'dropdown') {
|
|
30
|
-
acc[field.name] = Yup.string().required();
|
|
31
|
-
}
|
|
32
31
|
return acc;
|
|
33
32
|
}, {});
|
|
34
33
|
}
|
|
@@ -47,13 +46,13 @@ function parseFields(fields, previous) {
|
|
|
47
46
|
const fieldName = previous !== undefined ? previous + '.' + formfield.name : formfield.name;
|
|
48
47
|
if (formfield.type === 'object') {
|
|
49
48
|
const objectFields = parseFields(formfield.fields, fieldName);
|
|
50
|
-
return _jsx(FormControl, { children: objectFields },
|
|
49
|
+
return _jsx(FormControl, { children: objectFields }, key);
|
|
51
50
|
}
|
|
52
51
|
else if (formfield.type === 'array') {
|
|
53
52
|
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
53
|
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
54
|
? 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: () => {
|
|
55
|
+
: 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
56
|
let value = undefined;
|
|
58
57
|
if (formfield.element.type === 'object') {
|
|
59
58
|
value = getCustomInitialValues(formfield.element.fields);
|
|
@@ -62,7 +61,7 @@ function parseFields(fields, previous) {
|
|
|
62
61
|
value = getCustomInitialValues([formfield.element])[0];
|
|
63
62
|
}
|
|
64
63
|
push(value);
|
|
65
|
-
}, children: ["Add ", fieldName] })] })) }));
|
|
64
|
+
}, children: ["Add ", fieldName] })] })) }, key));
|
|
66
65
|
}
|
|
67
66
|
else {
|
|
68
67
|
return generateSingleField(formfield, fieldName, key);
|
|
@@ -122,7 +121,6 @@ export function GenericForm({ action, onClose, rowId }) {
|
|
|
122
121
|
}, []);
|
|
123
122
|
const handleFormReset = async () => {
|
|
124
123
|
const newInitialValues = await getInitialValues(action, rowId);
|
|
125
|
-
console.log(newInitialValues);
|
|
126
124
|
setInitialValues(newInitialValues);
|
|
127
125
|
};
|
|
128
126
|
if (!action.fields)
|
package/dist/esm/src/schema.d.ts
CHANGED