@asaleh37/ui-base 1.2.1 → 1.2.3
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/.env +4 -0
- package/.env.development +1 -0
- package/.env.production +1 -0
- package/dist/index.d.ts +7 -37
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +5 -5
- package/dist/index.mjs.map +1 -1
- package/index.html +13 -0
- package/package.json +1 -1
- package/public/__logo.png +0 -0
- package/public/logo.png +0 -0
- package/public/vite.svg +1 -0
- package/rollup.config-1748377725725.cjs +16 -16
- package/src/assets/logo.png +0 -0
- package/src/components/App.tsx +39 -9
- package/src/components/BaseApp.tsx +37 -25
- package/src/components/admin/RoleAuthoritiesForm.tsx +65 -0
- package/src/components/admin/RoleGrid.tsx +67 -13
- package/src/components/common/Login.tsx +10 -3
- package/src/components/templates/TransferList.tsx +4 -7
- package/src/hooks/useApiActions.ts +1 -2
- package/src/layout/Layout.tsx +36 -29
- package/src/main.tsx +25 -0
- package/src/redux/features/CounterSlice.tsx +13 -0
- package/src/redux/features/common/AppInfoSlice.ts +1 -1
- package/src/redux/features/common/CommonStoreSlice.ts +19 -5
- package/src/redux/store.ts +25 -24
- package/src/util/constants.ts +5 -1
- package/vite.config.ts +10 -0
package/index.html
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/logo.png" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Loading...</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="root"></div>
|
|
11
|
+
<script type="module" src="/src/main.tsx"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
package/package.json
CHANGED
|
Binary file
|
package/public/logo.png
ADDED
|
Binary file
|
package/public/vite.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var resolve = require('@rollup/plugin-node-resolve');
|
|
6
|
-
var commonjs = require('@rollup/plugin-commonjs');
|
|
7
|
-
var typescript = require('@rollup/plugin-typescript');
|
|
8
|
-
var dts = require('rollup-plugin-dts');
|
|
9
|
-
var terser = require('@rollup/plugin-terser');
|
|
10
|
-
var json = require('@rollup/plugin-json');
|
|
11
|
-
var peerDepsExternal = require('rollup-plugin-peer-deps-external');
|
|
12
|
-
var postcss = require('rollup-plugin-postcss');
|
|
13
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var resolve = require('@rollup/plugin-node-resolve');
|
|
6
|
+
var commonjs = require('@rollup/plugin-commonjs');
|
|
7
|
+
var typescript = require('@rollup/plugin-typescript');
|
|
8
|
+
var dts = require('rollup-plugin-dts');
|
|
9
|
+
var terser = require('@rollup/plugin-terser');
|
|
10
|
+
var json = require('@rollup/plugin-json');
|
|
11
|
+
var peerDepsExternal = require('rollup-plugin-peer-deps-external');
|
|
12
|
+
var postcss = require('rollup-plugin-postcss');
|
|
13
|
+
|
|
14
14
|
const packageJson = require("./package.json");
|
|
15
15
|
|
|
16
16
|
var rollup_config = [
|
|
@@ -45,6 +45,6 @@ var rollup_config = [
|
|
|
45
45
|
plugins: [dts.default()],
|
|
46
46
|
external: [/\.css$/],
|
|
47
47
|
},
|
|
48
|
-
];
|
|
49
|
-
|
|
50
|
-
exports.default = rollup_config;
|
|
48
|
+
];
|
|
49
|
+
|
|
50
|
+
exports.default = rollup_config;
|
|
Binary file
|
package/src/components/App.tsx
CHANGED
|
@@ -2,12 +2,20 @@ import { useDispatch, useSelector } from "react-redux";
|
|
|
2
2
|
import { createTheme, ThemeOptions } from "@mui/material";
|
|
3
3
|
import { ThemeProvider } from "@emotion/react";
|
|
4
4
|
import React, { useEffect } from "react";
|
|
5
|
-
import { RootState } from "../redux/store";
|
|
6
5
|
import Layout from "../layout/Layout";
|
|
7
6
|
import { AppInfo, AppInfoActions } from "../redux/features/common/AppInfoSlice";
|
|
8
7
|
import { LicenseInfo } from "@mui/x-license";
|
|
8
|
+
import {
|
|
9
|
+
DARK_THEME_INITIAL_MAIN_COLOR,
|
|
10
|
+
DARK_THEME_INITIAL_SECANDARY_COLOR,
|
|
11
|
+
LIGHT_THEME_INITIAL_MAIN_COLOR,
|
|
12
|
+
LIGHT_THEME_INITIAL_SECANDARY_COLOR,
|
|
13
|
+
} from "../util";
|
|
14
|
+
import { setStoresMetaData } from "../redux/features/common/CommonStoreSlice";
|
|
15
|
+
import { ADMINISTRATION_STORES } from "../redux/features/administration/AdministrationStoresMetaData";
|
|
9
16
|
|
|
10
17
|
const App: React.FC<AppInfo> = (props: AppInfo) => {
|
|
18
|
+
const dispatch = useDispatch();
|
|
11
19
|
LicenseInfo.setLicenseKey(props.muiPremiumKey);
|
|
12
20
|
const LightThemeOptions: ThemeOptions = {
|
|
13
21
|
components: {
|
|
@@ -16,7 +24,10 @@ const App: React.FC<AppInfo> = (props: AppInfo) => {
|
|
|
16
24
|
/* Custom Scrollbar */
|
|
17
25
|
* {
|
|
18
26
|
scrollbar-width: thin;
|
|
19
|
-
scrollbar-color: ${
|
|
27
|
+
scrollbar-color: ${
|
|
28
|
+
props.appTheme?.light?.primaryColor ||
|
|
29
|
+
LIGHT_THEME_INITIAL_MAIN_COLOR
|
|
30
|
+
} #ffffff;
|
|
20
31
|
}
|
|
21
32
|
|
|
22
33
|
/* Webkit Browsers */
|
|
@@ -30,10 +41,13 @@ const App: React.FC<AppInfo> = (props: AppInfo) => {
|
|
|
30
41
|
palette: {
|
|
31
42
|
mode: "light",
|
|
32
43
|
primary: {
|
|
33
|
-
main:
|
|
44
|
+
main:
|
|
45
|
+
props.appTheme?.light?.primaryColor || LIGHT_THEME_INITIAL_MAIN_COLOR,
|
|
34
46
|
},
|
|
35
47
|
secondary: {
|
|
36
|
-
main:
|
|
48
|
+
main:
|
|
49
|
+
props.appTheme?.light?.secondaryColor ||
|
|
50
|
+
LIGHT_THEME_INITIAL_SECANDARY_COLOR,
|
|
37
51
|
},
|
|
38
52
|
background: {
|
|
39
53
|
default: "#f5f5f5",
|
|
@@ -48,7 +62,9 @@ const App: React.FC<AppInfo> = (props: AppInfo) => {
|
|
|
48
62
|
/* Custom Scrollbar */
|
|
49
63
|
* {
|
|
50
64
|
scrollbar-width: thin;
|
|
51
|
-
scrollbar-color: ${
|
|
65
|
+
scrollbar-color: ${
|
|
66
|
+
props.appTheme?.dark?.primaryColor || DARK_THEME_INITIAL_MAIN_COLOR
|
|
67
|
+
} #121212;
|
|
52
68
|
}
|
|
53
69
|
|
|
54
70
|
/* Webkit Browsers */
|
|
@@ -62,15 +78,29 @@ const App: React.FC<AppInfo> = (props: AppInfo) => {
|
|
|
62
78
|
palette: {
|
|
63
79
|
mode: "dark",
|
|
64
80
|
primary: {
|
|
65
|
-
main:
|
|
81
|
+
main:
|
|
82
|
+
props.appTheme?.dark?.primaryColor || DARK_THEME_INITIAL_MAIN_COLOR,
|
|
66
83
|
},
|
|
67
84
|
secondary: {
|
|
68
|
-
main:
|
|
85
|
+
main:
|
|
86
|
+
props.appTheme?.dark?.secondaryColor ||
|
|
87
|
+
DARK_THEME_INITIAL_SECANDARY_COLOR,
|
|
69
88
|
},
|
|
70
89
|
},
|
|
71
90
|
};
|
|
72
|
-
|
|
73
|
-
|
|
91
|
+
|
|
92
|
+
let commonStores = {};
|
|
93
|
+
if (props.enableAdministrationModule) {
|
|
94
|
+
commonStores = { ...ADMINISTRATION_STORES };
|
|
95
|
+
}
|
|
96
|
+
if (props.businessCommonStoresMetaData) {
|
|
97
|
+
commonStores = {
|
|
98
|
+
...commonStores,
|
|
99
|
+
...props.businessCommonStoresMetaData,
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
dispatch(setStoresMetaData(commonStores));
|
|
103
|
+
const AppLayoutState = useSelector((state: any) => state.AppLayout);
|
|
74
104
|
let themeOptions = { ...LightThemeOptions };
|
|
75
105
|
if (AppLayoutState.themeMode === "dark") {
|
|
76
106
|
themeOptions = { ...DarkThemeOptions };
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { Provider } from "react-redux";
|
|
2
|
-
import { addReducer, store } from "../redux/store";
|
|
3
2
|
import { library } from "@fortawesome/fontawesome-svg-core";
|
|
4
3
|
import { fab } from "@fortawesome/free-brands-svg-icons";
|
|
5
4
|
import { far } from "@fortawesome/free-regular-svg-icons";
|
|
@@ -8,36 +7,49 @@ import "../styles/index.css";
|
|
|
8
7
|
import "react-toastify/dist/ReactToastify.css";
|
|
9
8
|
import App from "./App";
|
|
10
9
|
import { AppInfo } from "../redux/features/common/AppInfoSlice";
|
|
11
|
-
import
|
|
12
|
-
import
|
|
10
|
+
import AppLayoutReducer from "../redux/features/common/AppLayoutSlice";
|
|
11
|
+
import UserSessionReducer from "../redux/features/common/UserSessionSlice";
|
|
12
|
+
import LoadingMaskReducer from "../redux/features/common/LoadingMaskSlice";
|
|
13
|
+
import CommonStoreReducer from "../redux/features/common/CommonStoreSlice";
|
|
14
|
+
import AppInfoReducer from "../redux/features/common/AppInfoSlice";
|
|
15
|
+
import { configureStore } from "@reduxjs/toolkit";
|
|
13
16
|
|
|
14
17
|
library.add(fab);
|
|
15
18
|
library.add(far);
|
|
16
19
|
library.add(fas);
|
|
17
20
|
|
|
18
21
|
export const BaseApp: React.FC<AppInfo> = (props) => {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
22
|
+
const systemReducers = {
|
|
23
|
+
AppLayout: AppLayoutReducer,
|
|
24
|
+
UserSession: UserSessionReducer,
|
|
25
|
+
loadingMask: LoadingMaskReducer,
|
|
26
|
+
commonStores: CommonStoreReducer,
|
|
27
|
+
AppInfo: AppInfoReducer,
|
|
28
|
+
...props.businessReduxReducers,
|
|
29
|
+
};
|
|
30
|
+
const store = configureStore({
|
|
31
|
+
reducer: systemReducers,
|
|
32
|
+
});
|
|
33
|
+
// let csInitialState: CommonStoresInterface = {};
|
|
34
|
+
// if (props.enableAdministrationModule) {
|
|
35
|
+
// for (let adminStoreKey of Object.keys(ADMINISTRATION_STORES)) {
|
|
36
|
+
// csInitialState[adminStoreKey] = ADMINISTRATION_STORES[adminStoreKey];
|
|
37
|
+
// addCommonStore(adminStoreKey, ADMINISTRATION_STORES[adminStoreKey]);
|
|
38
|
+
// }
|
|
39
|
+
// }
|
|
40
|
+
// if (props?.businessCommonStoresMetaData) {
|
|
41
|
+
// for (let businessStoreKey of Object.keys(
|
|
42
|
+
// props.businessCommonStoresMetaData
|
|
43
|
+
// )) {
|
|
44
|
+
// csInitialState[businessStoreKey] =
|
|
45
|
+
// props.businessCommonStoresMetaData[businessStoreKey];
|
|
46
|
+
// addCommonStore(
|
|
47
|
+
// businessStoreKey,
|
|
48
|
+
// props.businessCommonStoresMetaData[businessStoreKey]
|
|
49
|
+
// );
|
|
50
|
+
// }
|
|
51
|
+
// }
|
|
52
|
+
|
|
41
53
|
return (
|
|
42
54
|
<Provider store={store}>
|
|
43
55
|
<App {...props} />
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { useState } from "react";
|
|
2
|
+
import { Box, Button } from "@mui/material";
|
|
3
|
+
import { toast } from "react-toastify";
|
|
4
|
+
import { useAxios } from "../../hooks";
|
|
5
|
+
import { TransferList } from "../templates";
|
|
6
|
+
|
|
7
|
+
type RoleAuthoritiesFormProps = {
|
|
8
|
+
roleId: number;
|
|
9
|
+
availableAuthorities: Array<any>;
|
|
10
|
+
currentRoleAuthorities: Array<any>;
|
|
11
|
+
closeModalFn: () => void;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const RoleAuthoritiesForm: React.FC<RoleAuthoritiesFormProps> = (props) => {
|
|
15
|
+
const [selectedOptions, setSelectedOptions] = useState([
|
|
16
|
+
...props.currentRoleAuthorities,
|
|
17
|
+
]);
|
|
18
|
+
const { handlePostRequest } = useAxios();
|
|
19
|
+
const saveRoleAuthorities = async () => {
|
|
20
|
+
await handlePostRequest({
|
|
21
|
+
endPointURI: "api/v1/admin/role/authorities",
|
|
22
|
+
showMask: true,
|
|
23
|
+
parameters: { roleId: props.roleId },
|
|
24
|
+
data: selectedOptions,
|
|
25
|
+
successCallBkFn: () => {
|
|
26
|
+
toast.success("Your request has been proccesed successfully");
|
|
27
|
+
if (props.closeModalFn) {
|
|
28
|
+
props.closeModalFn();
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
return (
|
|
34
|
+
<>
|
|
35
|
+
<TransferList
|
|
36
|
+
displayField="authorityName"
|
|
37
|
+
options={props.availableAuthorities}
|
|
38
|
+
valueField="id"
|
|
39
|
+
selectedOptions={selectedOptions}
|
|
40
|
+
setSelection={setSelectedOptions}
|
|
41
|
+
/>
|
|
42
|
+
<Box
|
|
43
|
+
sx={{
|
|
44
|
+
display: "flex",
|
|
45
|
+
alignItems: "center",
|
|
46
|
+
justifyContent: "flex-end",
|
|
47
|
+
width: "100%",
|
|
48
|
+
}}
|
|
49
|
+
>
|
|
50
|
+
<Button
|
|
51
|
+
variant="contained"
|
|
52
|
+
onClick={saveRoleAuthorities}
|
|
53
|
+
sx={{ marginRight: 1, marginLeft: 1 }}
|
|
54
|
+
>
|
|
55
|
+
Save
|
|
56
|
+
</Button>
|
|
57
|
+
<Button variant="contained" color="error" onClick={props.closeModalFn}>
|
|
58
|
+
Cancel
|
|
59
|
+
</Button>
|
|
60
|
+
</Box>
|
|
61
|
+
</>
|
|
62
|
+
);
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export default RoleAuthoritiesForm;
|
|
@@ -2,6 +2,8 @@ import { useState } from "react";
|
|
|
2
2
|
import TemplateGrid from "../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
|
|
3
3
|
import useApiActions from "../../hooks/useApiActions";
|
|
4
4
|
import { FormElementProps } from "../templates/DataEntryTemplates/DataEntryTypes";
|
|
5
|
+
import { useAxios, useWindow } from "../../hooks";
|
|
6
|
+
import RoleAuthoritiesForm from "./RoleAuthoritiesForm";
|
|
5
7
|
|
|
6
8
|
const RoleGrid: React.FC = () => {
|
|
7
9
|
const [data, setData] = useState([]);
|
|
@@ -12,7 +14,37 @@ const RoleGrid: React.FC = () => {
|
|
|
12
14
|
findById: "api/v1/admin/role",
|
|
13
15
|
setData: setData,
|
|
14
16
|
});
|
|
15
|
-
|
|
17
|
+
const [selectedRole, setSelectedRole] = useState<any>(null);
|
|
18
|
+
const { handleGetRequest } = useAxios();
|
|
19
|
+
const [selectedRoleAuthorities, setSelectedRoleAuthorities] = useState<any>(
|
|
20
|
+
[]
|
|
21
|
+
);
|
|
22
|
+
const [
|
|
23
|
+
selectedRoleAvailableAuthorities,
|
|
24
|
+
setSelectedRoleAvailableAuthorities,
|
|
25
|
+
] = useState<any>([]);
|
|
26
|
+
const {
|
|
27
|
+
Window: RoleAuthoritiesWindow,
|
|
28
|
+
setWindowState: setRoleAuthorirtiesWindowOpen,
|
|
29
|
+
} = useWindow({
|
|
30
|
+
width: "50%",
|
|
31
|
+
windowIcon: "key",
|
|
32
|
+
windowTitle: "Role Authorities",
|
|
33
|
+
});
|
|
34
|
+
const loadRoleAuthorities = async (data: any) => {
|
|
35
|
+
await handleGetRequest({
|
|
36
|
+
endPointURI: "api/v1/admin/role/authorities",
|
|
37
|
+
showMask: true,
|
|
38
|
+
parameters: {
|
|
39
|
+
roleId: data.id,
|
|
40
|
+
},
|
|
41
|
+
successCallBkFn: (response: any) => {
|
|
42
|
+
setRoleAuthorirtiesWindowOpen(true);
|
|
43
|
+
setSelectedRoleAuthorities(response.data.selectedAuthorities);
|
|
44
|
+
setSelectedRoleAvailableAuthorities(response.data.availableAuthorities);
|
|
45
|
+
},
|
|
46
|
+
});
|
|
47
|
+
};
|
|
16
48
|
const formElements: Array<FormElementProps> = [
|
|
17
49
|
{
|
|
18
50
|
type: "field",
|
|
@@ -60,18 +92,40 @@ const RoleGrid: React.FC = () => {
|
|
|
60
92
|
];
|
|
61
93
|
|
|
62
94
|
return (
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
95
|
+
<>
|
|
96
|
+
<RoleAuthoritiesWindow>
|
|
97
|
+
<RoleAuthoritiesForm
|
|
98
|
+
roleId={selectedRole?.id}
|
|
99
|
+
availableAuthorities={selectedRoleAvailableAuthorities}
|
|
100
|
+
currentRoleAuthorities={selectedRoleAuthorities}
|
|
101
|
+
closeModalFn={() => {
|
|
102
|
+
setRoleAuthorirtiesWindowOpen(false);
|
|
103
|
+
}}
|
|
104
|
+
/>
|
|
105
|
+
</RoleAuthoritiesWindow>
|
|
106
|
+
<TemplateGrid
|
|
107
|
+
rowActions={[
|
|
108
|
+
{
|
|
109
|
+
icon: "key",
|
|
110
|
+
label: "authorities",
|
|
111
|
+
actionFn: async (data) => {
|
|
112
|
+
setSelectedRole(data);
|
|
113
|
+
loadRoleAuthorities(data);
|
|
114
|
+
},
|
|
115
|
+
},
|
|
116
|
+
]}
|
|
117
|
+
apiActions={apiActions}
|
|
118
|
+
data={data}
|
|
119
|
+
setData={setData}
|
|
120
|
+
editMode={{ editMode: "row", reloadAfterSave: true }}
|
|
121
|
+
formElements={formElements}
|
|
122
|
+
keyColumnName={"id"}
|
|
123
|
+
gridTitle="ROLE_PLURAL"
|
|
124
|
+
girdIcon="table-cells"
|
|
125
|
+
editAction={{ isEnabled: true, authority: "ROLE_EDIT" }}
|
|
126
|
+
deleteAction={{ isEnabled: true, authority: "ROLE_DELETE" }}
|
|
127
|
+
/>
|
|
128
|
+
</>
|
|
75
129
|
);
|
|
76
130
|
};
|
|
77
131
|
|
|
@@ -14,6 +14,7 @@ import axios from "axios";
|
|
|
14
14
|
import { toast } from "react-toastify";
|
|
15
15
|
import { RootState } from "../../redux/store";
|
|
16
16
|
import { UserSessionActions } from "../../redux/features/common/UserSessionSlice";
|
|
17
|
+
import { DARK_THEME_INITIAL_MAIN_COLOR, DARK_THEME_INITIAL_SECANDARY_COLOR } from "../../util";
|
|
17
18
|
|
|
18
19
|
const Login: React.FC = () => {
|
|
19
20
|
const appInfo = useSelector((state: RootState) => state.AppInfo.value);
|
|
@@ -73,7 +74,10 @@ const Login: React.FC = () => {
|
|
|
73
74
|
/* Custom Scrollbar */
|
|
74
75
|
* {
|
|
75
76
|
scrollbar-width: thin;
|
|
76
|
-
scrollbar-color: ${
|
|
77
|
+
scrollbar-color: ${
|
|
78
|
+
appInfo.appTheme?.dark?.primaryColor ||
|
|
79
|
+
DARK_THEME_INITIAL_MAIN_COLOR
|
|
80
|
+
} #121212;
|
|
77
81
|
}
|
|
78
82
|
|
|
79
83
|
/* Webkit Browsers */
|
|
@@ -87,10 +91,13 @@ const Login: React.FC = () => {
|
|
|
87
91
|
palette: {
|
|
88
92
|
mode: "dark",
|
|
89
93
|
primary: {
|
|
90
|
-
main:
|
|
94
|
+
main:
|
|
95
|
+
appInfo.appTheme?.dark?.primaryColor || DARK_THEME_INITIAL_MAIN_COLOR,
|
|
91
96
|
},
|
|
92
97
|
secondary: {
|
|
93
|
-
main:
|
|
98
|
+
main:
|
|
99
|
+
appInfo.appTheme?.dark?.secondaryColor ||
|
|
100
|
+
DARK_THEME_INITIAL_SECANDARY_COLOR,
|
|
94
101
|
},
|
|
95
102
|
},
|
|
96
103
|
});
|
|
@@ -8,7 +8,7 @@ import ListItemIcon from "@mui/material/ListItemIcon";
|
|
|
8
8
|
import Checkbox from "@mui/material/Checkbox";
|
|
9
9
|
import Button from "@mui/material/Button";
|
|
10
10
|
import Divider from "@mui/material/Divider";
|
|
11
|
-
import { Box, Grid2 } from "@mui/material";
|
|
11
|
+
import { Box, Grid2, ListItemButton } from "@mui/material";
|
|
12
12
|
import TemplateTextField from "./DataEntryTemplates/TemplateDataForm/FormFields/TemplateTextField";
|
|
13
13
|
|
|
14
14
|
function not(a, b) {
|
|
@@ -172,27 +172,24 @@ const TransferList: React.FC<TransferListProps> = ({
|
|
|
172
172
|
const labelId = `transfer-list-all-item-${value[valueField]}-label`;
|
|
173
173
|
|
|
174
174
|
return (
|
|
175
|
-
<
|
|
175
|
+
<ListItemButton
|
|
176
176
|
key={value[valueField]}
|
|
177
177
|
role="listitem"
|
|
178
|
-
component="button"
|
|
179
178
|
onClick={handleToggle(value)}
|
|
179
|
+
sx={{ cursor: "pointer" }}
|
|
180
180
|
>
|
|
181
181
|
<ListItemIcon>
|
|
182
182
|
<Checkbox
|
|
183
183
|
checked={checked.indexOf(value) !== -1}
|
|
184
184
|
tabIndex={-1}
|
|
185
185
|
disableRipple
|
|
186
|
-
inputProps={{
|
|
187
|
-
"aria-labelledby": labelId,
|
|
188
|
-
}}
|
|
189
186
|
/>
|
|
190
187
|
</ListItemIcon>
|
|
191
188
|
<ListItemText
|
|
192
189
|
id={value[valueField]}
|
|
193
190
|
primary={value[displayField]}
|
|
194
191
|
/>
|
|
195
|
-
</
|
|
192
|
+
</ListItemButton>
|
|
196
193
|
);
|
|
197
194
|
})}
|
|
198
195
|
</List>
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { useDispatch, useSelector } from "react-redux";
|
|
2
|
-
import { RootState } from "../redux/store";
|
|
3
2
|
import useSession from "./UseSession";
|
|
4
3
|
import useAxios from "./useAxios";
|
|
5
4
|
import { setStoreData } from "../redux/features/common/CommonStoreSlice";
|
|
@@ -25,7 +24,7 @@ export type ApiActions = {
|
|
|
25
24
|
const useApiActions: (apiActionsProps: ApiActionsProps) => ApiActions = (
|
|
26
25
|
apiActionsProps: ApiActionsProps
|
|
27
26
|
) => {
|
|
28
|
-
const CommonStores = useSelector((state:
|
|
27
|
+
const CommonStores = useSelector((state: any) => state.commonStores.stores);
|
|
29
28
|
const dispatch = useDispatch();
|
|
30
29
|
const session = useSession();
|
|
31
30
|
const { handleGetRequest, handlePostRequest, handleDeleteRequest } =
|
package/src/layout/Layout.tsx
CHANGED
|
@@ -8,8 +8,7 @@ import MainContent from "./MainContent";
|
|
|
8
8
|
import { BrowserRouter } from "react-router-dom";
|
|
9
9
|
import MobileDrawer from "./MobileDrawer";
|
|
10
10
|
import { ToastContainer } from "react-toastify";
|
|
11
|
-
import { useEffect } from "react";
|
|
12
|
-
import { RootState } from "../redux/store";
|
|
11
|
+
import { useEffect, useState } from "react";
|
|
13
12
|
import useLoadingMask from "../hooks/useLoadingMask";
|
|
14
13
|
import { useIsMobile } from "../hooks/UseMobile";
|
|
15
14
|
import useSession from "../hooks/UseSession";
|
|
@@ -25,10 +24,11 @@ const Main = styled("main", {
|
|
|
25
24
|
})<{
|
|
26
25
|
open?: boolean;
|
|
27
26
|
}>(({ theme: any, open }) => {
|
|
28
|
-
const AppLayout = useSelector((state:
|
|
27
|
+
const AppLayout = useSelector((state: any) => state.AppLayout);
|
|
29
28
|
const dispatch = useDispatch();
|
|
30
29
|
const { show, hide } = useLoadingMask();
|
|
31
|
-
const
|
|
30
|
+
const commonStores = useSelector((state: any) => state.commonStores);
|
|
31
|
+
const [isAutoLoadLoaded, setAutoLoadLoaded] = useState<boolean>(false);
|
|
32
32
|
const theme = useTheme();
|
|
33
33
|
const isMobile = useIsMobile();
|
|
34
34
|
const { isUserAuthorized } = useSession();
|
|
@@ -36,34 +36,41 @@ const Main = styled("main", {
|
|
|
36
36
|
// loadCommonStores
|
|
37
37
|
const { handleGetRequest } = useAxios();
|
|
38
38
|
const loadCommonStores = async () => {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
39
|
+
debugger;
|
|
40
|
+
if (!isAutoLoadLoaded) {
|
|
41
|
+
setAutoLoadLoaded(true);
|
|
42
|
+
show("Loading ... please wait");
|
|
43
|
+
const stores = commonStores.stores;
|
|
44
|
+
const storeKeys = commonStores.storeKeys;
|
|
45
|
+
for (let storeKey of storeKeys) {
|
|
46
|
+
if (
|
|
47
|
+
(stores[storeKey]?.authority === undefined ||
|
|
48
|
+
stores[storeKey]?.authority === null ||
|
|
49
|
+
isUserAuthorized(stores[storeKey]?.authority)) &&
|
|
50
|
+
stores[storeKey]?.url != "" &&
|
|
51
|
+
stores[storeKey].autoLoad === true
|
|
52
|
+
) {
|
|
53
|
+
await handleGetRequest({
|
|
54
|
+
endPointURI: stores[storeKey].url,
|
|
55
|
+
showMask: false,
|
|
56
|
+
successCallBkFn: (response) => {
|
|
57
|
+
dispatch(setStoreData({ storeKey, data: response.data }));
|
|
58
|
+
},
|
|
59
|
+
failureCallBkFn: () => {
|
|
60
|
+
dispatch(setStoreData({ storeKey, data: [] }));
|
|
61
|
+
},
|
|
62
|
+
});
|
|
63
|
+
}
|
|
59
64
|
}
|
|
65
|
+
hide();
|
|
60
66
|
}
|
|
61
|
-
hide();
|
|
62
67
|
};
|
|
63
68
|
|
|
64
69
|
useEffect(() => {
|
|
65
|
-
|
|
66
|
-
|
|
70
|
+
if (commonStores.storeKeys) {
|
|
71
|
+
loadCommonStores();
|
|
72
|
+
}
|
|
73
|
+
}, [commonStores.storeKeys]);
|
|
67
74
|
|
|
68
75
|
return {
|
|
69
76
|
display: "flex",
|
|
@@ -95,10 +102,10 @@ const Main = styled("main", {
|
|
|
95
102
|
});
|
|
96
103
|
|
|
97
104
|
export default function Layout() {
|
|
98
|
-
const AppLayoutState = useSelector((state:
|
|
105
|
+
const AppLayoutState = useSelector((state: any) => state.AppLayout);
|
|
99
106
|
const isMobile = useIsMobile();
|
|
100
107
|
const UserSession: UserSessionProps = useSelector(
|
|
101
|
-
(state:
|
|
108
|
+
(state: any) => state.UserSession
|
|
102
109
|
);
|
|
103
110
|
return (
|
|
104
111
|
<BrowserRouter>
|
package/src/main.tsx
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { StrictMode } from "react";
|
|
2
|
+
import { createRoot } from "react-dom/client";
|
|
3
|
+
import { BaseApp } from "./components";
|
|
4
|
+
import logo from "./assets/logo.png";
|
|
5
|
+
import CounterReducer from "./redux/features/CounterSlice";
|
|
6
|
+
|
|
7
|
+
createRoot(document.getElementById("root")!).render(
|
|
8
|
+
<BaseApp
|
|
9
|
+
apiBaseUrl="http://localhost:8080/as-api"
|
|
10
|
+
appLogo={logo}
|
|
11
|
+
appName="UI Base Library"
|
|
12
|
+
appVersion="0.0"
|
|
13
|
+
businessCommonStoresMetaData={{}}
|
|
14
|
+
businessNavigationItems={[]}
|
|
15
|
+
businessReduxReducers={
|
|
16
|
+
{
|
|
17
|
+
counter: CounterReducer
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
businessRoutes={[]}
|
|
21
|
+
documentTitle="UI Base"
|
|
22
|
+
enableAdministrationModule={true}
|
|
23
|
+
muiPremiumKey="c2bd611fa642666253500ab9c8e4f78fTz0xMTE4MjEsRT0xNzc2OTg4Nzk5MDAwLFM9cHJlbWl1bSxMTT1zdWJzY3JpcHRpb24sUFY9aW5pdGlhbCxLVj0y"
|
|
24
|
+
/>
|
|
25
|
+
);
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { createSlice } from "@reduxjs/toolkit";
|
|
2
|
+
|
|
3
|
+
const CounterSlice = createSlice({
|
|
4
|
+
name: "counter",
|
|
5
|
+
initialState: { value: 0 },
|
|
6
|
+
reducers: {
|
|
7
|
+
increment: (state) => {
|
|
8
|
+
state.value = state.value + 1;
|
|
9
|
+
},
|
|
10
|
+
},
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
export default CounterSlice.reducer;
|
|
@@ -15,7 +15,7 @@ export type AppInfo = {
|
|
|
15
15
|
businessCommonStoresMetaData: { [key: string]: StoreMetaData };
|
|
16
16
|
muiPremiumKey: string;
|
|
17
17
|
enableAdministrationModule: boolean;
|
|
18
|
-
appTheme
|
|
18
|
+
appTheme?: {
|
|
19
19
|
light: { primaryColor: string; secondaryColor: string };
|
|
20
20
|
dark: { primaryColor: string; secondaryColor: string };
|
|
21
21
|
};
|