70 | {suggestion.displayName}
71 |
72 | );
73 | };
74 |
75 | onSuggestionsFetchRequested = ({ value }) => {
76 | this.setState({
77 | suggestions: this.sortSuggestions(this.getSuggestions(value), value)
78 | });
79 | };
80 |
81 | sortSuggestions(suggestions, value) {
82 | var results = _.sortBy(suggestions, (element) => {
83 | return element.displayName
84 | })
85 | return results;
86 | }
87 |
88 | onSuggestionsClearRequested = () => {
89 | this.setState({
90 | suggestions: []
91 | });
92 | };
93 |
94 | onSuggestionSelected = (event, selected) => {
95 | this.props.onSelected(selected.suggestion)
96 | this.setState({
97 | textInput: selected.suggestion && selected.suggestion.displayName
98 | });
99 | };
100 |
101 | handleChangeInput = (event, { newValue }) => {
102 | this.setState({
103 | textInput: newValue || ''
104 | });
105 | };
106 |
107 | reset() {
108 | this.setState({
109 | textInput: ''
110 | });
111 | this.onSuggestionsFetchRequested({ value: '' });
112 | }
113 |
114 | handleBlurInput() {
115 | // this.setState({
116 | // textInput: ''
117 | // });
118 | }
119 |
120 | render() {
121 | const { textInput, suggestions } = this.state;
122 | const inputProps = {
123 | value: textInput,
124 | className: "custom-form-control",
125 | onChange: this.handleChangeInput,
126 | onClick: () => {
127 | this.reset();
128 | },
129 | onBlur: () => {
130 | this.handleBlurInput();
131 | }
132 | };
133 | return (
134 |
15 |
17 | -
18 | {children}
19 |
41 |
42 |
43 |
44 |
45 |
49 | -
46 | {children}
47 |
-
192 | {
193 | menus.map((group, groupIndex) => {
194 | return (
195 |
46 |
51 |
55 |
56 |
57 |
64 |
16 | {/* thanh navigator */}
17 |
26 | );
27 | }
28 |
29 | }
30 |
31 | const mapStateToProps = state => {
32 | return {
33 | isLoggedIn: state.admin.isLoggedIn
34 | };
35 | };
36 |
37 | const mapDispatchToProps = dispatch => {
38 | return {
39 | processLogout: () => dispatch(actions.processLogout()),
40 | };
41 | };
42 |
43 | export default connect(mapStateToProps, mapDispatchToProps)(Header);
44 |
--------------------------------------------------------------------------------
/src/containers/Header/Header.scss:
--------------------------------------------------------------------------------
1 | @import "../../styles/common.scss";
2 |
3 | .header-container {
4 | z-index: 99;
5 | display: flex;
6 | justify-content: space-between;
7 | background-color: $colormain;
8 | color: $common-text-color;
9 | height: 40px;
10 | position: relative;
11 | .btn-logout {
12 | color: $common-text-color;
13 | line-height: 40px;
14 | height: 40px;
15 | padding: 0 10px;
16 | &:hover {
17 | background-color: darken($colormain, 5);
18 | }
19 | i {
20 | font-size: $base-size + 1px;
21 | }
22 | }
23 | }
--------------------------------------------------------------------------------
/src/containers/Header/menuApp.js:
--------------------------------------------------------------------------------
1 | export const adminMenu = [
2 | { //hệ thống
3 | name: 'menu.system.header', menus: [
4 | {
5 | name: 'menu.system.system-administrator.header',
6 | subMenus: [
7 | { name: 'menu.system.system-administrator.user-manage', link: '/system/user-manage' },
8 | { name: 'menu.system.system-administrator.product-manage', link: '/system/product-manage' },
9 | { name: 'menu.system.system-administrator.register-package-group-or-account', link: '/system/register-package-group-or-account' },
10 | ]
11 | },
12 | // { name: 'menu.system.system-parameter.header', link: '/system/system-parameter' },
13 | ]
14 | },
15 | ];
--------------------------------------------------------------------------------
/src/containers/System/ProductManage.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { FormattedMessage } from 'react-intl';
3 | import { connect } from 'react-redux';
4 | class ProductManage extends Component {
5 |
6 | state = {
7 |
8 | }
9 |
10 | componentDidMount() {
11 | }
12 |
13 |
14 | render() {
15 | return (
16 |
18 |
20 |
21 | {/* nút logout */}
22 |
23 |
24 |
25 | Manage products
17 | )
18 | }
19 |
20 | }
21 |
22 | const mapStateToProps = state => {
23 | return {
24 | };
25 | };
26 |
27 | const mapDispatchToProps = dispatch => {
28 | return {
29 | };
30 | };
31 |
32 | export default connect(mapStateToProps, mapDispatchToProps)(ProductManage);
33 |
--------------------------------------------------------------------------------
/src/containers/System/RegisterPackageGroupOrAcc.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { FormattedMessage } from 'react-intl';
3 | import { connect } from 'react-redux';
4 | class RegisterPackageGroupOrAcc extends Component {
5 |
6 | constructor(props) {
7 | super(props);
8 |
9 | }
10 |
11 |
12 |
13 | render() {
14 | return (
15 |
16 | register package group or account
17 |
)
18 | }
19 |
20 | }
21 |
22 | const mapStateToProps = state => {
23 | return {
24 |
25 | };
26 | };
27 |
28 | const mapDispatchToProps = dispatch => {
29 | return {
30 | };
31 | };
32 |
33 | export default connect(mapStateToProps, mapDispatchToProps)(RegisterPackageGroupOrAcc);
34 |
--------------------------------------------------------------------------------
/src/containers/System/UserManage.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { FormattedMessage } from 'react-intl';
3 | import { connect } from 'react-redux';
4 | class UserManage extends Component {
5 |
6 | state = {
7 |
8 | }
9 |
10 | componentDidMount() {
11 |
12 | }
13 |
14 |
15 | render() {
16 | return (
17 | Manage users
18 | );
19 | }
20 |
21 | }
22 |
23 | const mapStateToProps = state => {
24 | return {
25 | };
26 | };
27 |
28 | const mapDispatchToProps = dispatch => {
29 | return {
30 | };
31 | };
32 |
33 | export default connect(mapStateToProps, mapDispatchToProps)(UserManage);
34 |
--------------------------------------------------------------------------------
/src/hoc/IntlProviderWrapper.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { connect } from 'react-redux';
3 | import { IntlProvider } from "react-intl";
4 |
5 | import '@formatjs/intl-pluralrules/polyfill';
6 | import '@formatjs/intl-pluralrules/locale-data/en';
7 | import '@formatjs/intl-pluralrules/locale-data/vi';
8 |
9 | import '@formatjs/intl-relativetimeformat/polyfill';
10 | import '@formatjs/intl-relativetimeformat/locale-data/en';
11 | import '@formatjs/intl-relativetimeformat/locale-data/vi';
12 |
13 | import { LanguageUtils } from '../utils'
14 |
15 | const messages = LanguageUtils.getFlattenedMessages();
16 |
17 | class IntlProviderWrapper extends Component {
18 |
19 | render() {
20 | const { children, language } = this.props;
21 | return (
22 |
105 |
155 | )
156 | }
157 | }
158 |
159 | const mapStateToProps = state => {
160 | return {
161 | lang: state.app.language
162 | };
163 | };
164 |
165 | const mapDispatchToProps = dispatch => {
166 | return {
167 | navigate: (path) => dispatch(push(path)),
168 | adminLoginSuccess: (adminInfo) => dispatch(actions.adminLoginSuccess(adminInfo)),
169 | adminLoginFail: () => dispatch(actions.adminLoginFail()),
170 | };
171 | };
172 |
173 | export default connect(mapStateToProps, mapDispatchToProps)(Login);
174 |
--------------------------------------------------------------------------------
/src/routes/Login.scss:
--------------------------------------------------------------------------------
1 | @import "../styles/common.scss";
2 |
3 | .login-wrapper {
4 | .form-signin input[type=email],
5 | .form-signin input[type=password],
6 | .form-signin input[type=text],
7 | .form-signin button {
8 | -moz-box-sizing: border-box;
9 | -webkit-box-sizing: border-box;
10 | box-sizing: border-box;
11 | display: block;
12 | height: 55px;
13 | position: relative;
14 | width: 100%;
15 | z-index: 1;
16 | }
17 |
18 | .form-signin .form-control:focus {
19 | border-color: rgb(104, 145, 162);
20 | -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162);
21 | box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162);
22 | outline: 0;
23 | }
24 |
25 | .login-container {
26 | height: 100vh;
27 | margin: auto 0 auto auto;
28 | padding: auto;
29 | width: 100%;
30 | }
31 | //huy.quang: disable default eye icon on ie < 10
32 | input::-ms-reveal,
33 | input::-ms-clear
34 | {
35 | display: none;
36 | }
37 | .login-container {
38 | padding: 100px 0 0 0;
39 | }
40 | .form_login {
41 | background: $colormain;
42 | border:none;
43 | border-radius: 8px; -webkit-border-radius:8px;
44 | height: 475px;
45 | margin: 50px auto 0;
46 | max-width: 470px;padding: 20px 50px;
47 | padding: 20px 50px;
48 | .title {
49 | color: $common-text-color;
50 | background-color: transparent;
51 | font-size: 18px;
52 | font-weight: bold;
53 | line-height: 1.4;
54 | margin: 20px 0 20px 0;
55 | text-align: center;
56 | text-transform: uppercase;
57 | }
58 | .error-msg {
59 | color:$common-error;
60 | margin-top:10px;
61 | text-align: center
62 | }
63 | .notify-msg {
64 | color:$common-notify;
65 | margin-top:10px;
66 | text-align: center
67 | }
68 | .form-group {
69 | input[type=submit], input[type=button] {
70 | &:focus, &:hover {
71 | background: $common-btn-deny;
72 | border: 1px solid $common-btn-deny;
73 | filter: brightness(120%);
74 | }
75 | }
76 | margin-bottom:20px;
77 | position: relative;
78 | &.separator {
79 | background: $common-text-color;
80 | border: none;
81 | height: 1px;
82 | padding: 0 50px;
83 | }
84 | .form-control{
85 | background: $common-text-color;
86 | border: 1px solid rgba(0, 0, 0, 0.8);
87 | border-radius: 3px;
88 | -webkit-border-radius: 3px;
89 | box-sizing: border-box;
90 | color: rgba(0,0,0,0.8);
91 | height: 40px;
92 | margin-bottom: 0;
93 | &:focus, &:hover{
94 | border: 3px solid $input-focus;
95 | }
96 | }
97 | &.icon-true {
98 | .form-control {
99 | background: $common-text-color;
100 | padding-left: 40px;
101 | width: 100%;
102 | }
103 | .icon {
104 | left: 0;
105 | position: absolute;top: 0;
106 | }
107 | }
108 | .error {
109 | display: none;
110 | text-align: right
111 | }
112 | }
113 | .login{
114 | .btn{
115 | background: $common-btn-confirm;
116 | color: #fff;
117 | display: block;
118 | font-size: 14px;
119 | height: 40px;
120 | margin-bottom: 13px;
121 | width: 100%;
122 | &.dn {
123 | background: $common-btn-confirm;
124 | }
125 | &.dk {
126 | background: $common-btn-confirm;
127 | }
128 | }
129 | }
130 | }
131 | .login-error {
132 | width: 100%;
133 | margin-bottom: 10px;
134 | text-align: center;
135 | .login-error-message {
136 | color: $common-error;
137 | }
138 | }
139 |
140 | /*=============END FOOTER==========*/
141 |
142 | /*=============MENU MOBILE==========*/
143 | /*=============END MENU MOBILE==========*/
144 |
145 | /*RESPONSIVE*/
146 | @media screen and (min-device-width: 1280px) and (max-device-width: 2400px) {
147 | .login-container {
148 | padding: 30px 0 0 0;
149 | }
150 | }
151 | @media (max-width: 1600px){
152 | .login-container {
153 | padding: 100px 0 0 0;
154 | }
155 | .form_login{
156 | height: 475px;
157 | max-width: 360px;
158 | .form-group {
159 | margin-bottom: 20px;
160 | }
161 | }
162 | }
163 | @media (max-width: 1479px){
164 | .login-container {
165 | padding: 80px 0 0 0;
166 | }
167 | .form_login{
168 | height: 475px;
169 | max-width: 360px;
170 | .form-group {
171 | margin-bottom: 20px;
172 | }
173 | }
174 | }
175 | @media (max-width: 1380px){
176 | .form_login{
177 | height: 475px;
178 | max-width: 360px;
179 | .form-group {
180 | margin-bottom: 20px;
181 | }
182 | }
183 | }
184 | @media (max-width: 1280px){
185 | .login-container {
186 | padding: 30px 0 0 0;
187 | }
188 | .form_login{
189 | height: 475px;
190 | max-width: 360px;
191 | .form-group {
192 | margin-bottom: 20px;
193 | }
194 | }
195 | }
196 | @media (max-width: 960px){
197 | .form_login {
198 | margin: auto
199 | }
200 | .login-container {
201 | padding: 40px 30px 0 30px;
202 | }
203 | }
204 |
205 | @media (max-width: 740px){
206 | .form_login {
207 | margin: auto
208 | }
209 | .login-container {
210 | padding: 40px 30px 0 30px;
211 | }
212 | }
213 |
214 | @media (max-width: 590px){
215 | .form_login{
216 | margin: auto
217 | }
218 | .login-container {
219 | padding: 40px 30px 0 30px;
220 | }
221 | }
222 | @media (max-width: 420px){
223 | .form_login{
224 | margin: auto
225 | }
226 | .login-container {
227 | padding: 40px 30px 0 30px;
228 | }
229 | }
230 | @media (max-width: 340px){
231 | .form_login{
232 | margin: auto
233 | }
234 | .login-container {
235 | padding: 40px 30px 0 30px;
236 | }
237 | }
238 | }
239 |
--------------------------------------------------------------------------------
/src/routes/System.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from "react-redux";
3 | import { Redirect, Route, Switch } from 'react-router-dom';
4 | import UserManage from '../containers/System/UserManage';
5 | import ProductManage from '../containers/System/ProductManage';
6 | import RegisterPackageGroupOrAcc from '../containers/System/RegisterPackageGroupOrAcc';
7 |
8 | class System extends Component {
9 | render() {
10 | const { systemMenuPath } = this.props;
11 | return (
12 |
106 |
154 |
107 |
108 |
110 |
153 |
108 |
110 |
111 | 
112 |
121 |
122 |
123 |
124 | 
125 |
134 |
135 |
136 | {loginError !== '' && (
137 |
138 | {loginError}
139 |
140 | )}
141 |
142 |
143 |
151 |
152 |
13 |
22 | );
23 | }
24 | }
25 |
26 | const mapStateToProps = state => {
27 | return {
28 | systemMenuPath: state.app.systemMenuPath
29 | };
30 | };
31 |
32 | const mapDispatchToProps = dispatch => {
33 | return {
34 | };
35 | };
36 |
37 | export default connect(mapStateToProps, mapDispatchToProps)(System);
38 |
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.'
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/src/services/adminService.js:
--------------------------------------------------------------------------------
1 | import axios from '../axios';
2 | import * as queryString from 'query-string';
3 |
4 | const adminService = {
5 |
6 | /**
7 | * Đăng nhập hệ thống
8 | * {
9 | * "username": "string",
10 | * "password": "string"
11 | * }
12 | */
13 | login(loginBody) {
14 | return axios.post(`/admin/login`, loginBody)
15 | },
16 |
17 | };
18 |
19 | export default adminService;
--------------------------------------------------------------------------------
/src/services/index.js:
--------------------------------------------------------------------------------
1 | export { default as adminService } from './adminService';
--------------------------------------------------------------------------------
/src/store/actions/actionTypes.js:
--------------------------------------------------------------------------------
1 | const actionTypes = Object.freeze({
2 | //app
3 | APP_START_UP_COMPLETE: 'APP_START_UP_COMPLETE',
4 | SET_CONTENT_OF_CONFIRM_MODAL: 'SET_CONTENT_OF_CONFIRM_MODAL',
5 |
6 | //admin
7 | ADMIN_LOGIN_SUCCESS: 'ADMIN_LOGIN_SUCCESS',
8 | ADMIN_LOGIN_FAIL: 'ADMIN_LOGIN_FAIL',
9 | PROCESS_LOGOUT: 'PROCESS_LOGOUT',
10 |
11 | //user
12 | ADD_USER_SUCCESS: 'ADD_USER_SUCCESS',
13 | })
14 |
15 | export default actionTypes;
--------------------------------------------------------------------------------
/src/store/actions/adminActions.js:
--------------------------------------------------------------------------------
1 | import actionTypes from './actionTypes';
2 |
3 | export const adminLoginSuccess = (adminInfo) => ({
4 | type: actionTypes.ADMIN_LOGIN_SUCCESS,
5 | adminInfo: adminInfo
6 | })
7 |
8 | export const adminLoginFail = () => ({
9 | type: actionTypes.ADMIN_LOGIN_FAIL
10 | })
11 |
12 | export const processLogout = () => ({
13 | type: actionTypes.PROCESS_LOGOUT
14 | })
--------------------------------------------------------------------------------
/src/store/actions/appActions.js:
--------------------------------------------------------------------------------
1 | import actionTypes from './actionTypes';
2 |
3 | export const appStartUpComplete = () => ({
4 | type: actionTypes.APP_START_UP_COMPLETE
5 | });
6 |
7 | export const setContentOfConfirmModal = (contentOfConfirmModal) => ({
8 | type: actionTypes.SET_CONTENT_OF_CONFIRM_MODAL,
9 | contentOfConfirmModal: contentOfConfirmModal
10 | });
--------------------------------------------------------------------------------
/src/store/actions/index.js:
--------------------------------------------------------------------------------
1 | export * from './appActions'
2 | export * from './adminActions'
3 | export * from './userActions'
--------------------------------------------------------------------------------
/src/store/actions/userActions.js:
--------------------------------------------------------------------------------
1 | import actionTypes from './actionTypes';
2 |
3 | export const addUserSuccess = () => ({
4 | type: actionTypes.ADD_USER_SUCCESS
5 | })
--------------------------------------------------------------------------------
/src/store/reducers/adminReducer.js:
--------------------------------------------------------------------------------
1 | import actionTypes from '../actions/actionTypes';
2 |
3 | const initialState = {
4 | isLoggedIn: false,
5 | adminInfo: null
6 | }
7 |
8 | const appReducer = (state = initialState, action) => {
9 | switch (action.type) {
10 | case actionTypes.ADMIN_LOGIN_SUCCESS:
11 | return {
12 | ...state,
13 | isLoggedIn: true,
14 | adminInfo: action.adminInfo
15 | }
16 | case actionTypes.ADMIN_LOGIN_FAIL:
17 | return {
18 | ...state,
19 | isLoggedIn: false,
20 | adminInfo: null
21 | }
22 | case actionTypes.PROCESS_LOGOUT:
23 | return {
24 | ...state,
25 | isLoggedIn: false,
26 | adminInfo: null
27 | }
28 | default:
29 | return state;
30 | }
31 | }
32 |
33 | export default appReducer;
--------------------------------------------------------------------------------
/src/store/reducers/appReducer.js:
--------------------------------------------------------------------------------
1 | import actionTypes from '../actions/actionTypes';
2 |
3 | const initContentOfConfirmModal = {
4 | isOpen: false,
5 | messageId: "",
6 | handleFunc: null,
7 | dataFunc: null
8 | }
9 |
10 | const initialState = {
11 | started: true,
12 | language: 'vi',
13 | systemMenuPath: '/system/user-manage',
14 | contentOfConfirmModal: {
15 | ...initContentOfConfirmModal
16 | }
17 | }
18 |
19 | const appReducer = (state = initialState, action) => {
20 | switch (action.type) {
21 | case actionTypes.APP_START_UP_COMPLETE:
22 | return {
23 | ...state,
24 | started: true
25 | }
26 | case actionTypes.SET_CONTENT_OF_CONFIRM_MODAL:
27 | return {
28 | ...state,
29 | contentOfConfirmModal: {
30 | ...state.contentOfConfirmModal,
31 | ...action.contentOfConfirmModal
32 | }
33 | }
34 | default:
35 | return state;
36 | }
37 | }
38 |
39 | export default appReducer;
--------------------------------------------------------------------------------
/src/store/reducers/rootReducer.js:
--------------------------------------------------------------------------------
1 | import {combineReducers} from 'redux';
2 | import { connectRouter } from 'connected-react-router';
3 |
4 | import appReducer from "./appReducer";
5 | import adminReducer from "./adminReducer";
6 | import userReducer from "./userReducer";
7 |
8 | import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
9 | import storage from 'redux-persist/lib/storage';
10 | import { persistReducer } from 'redux-persist';
11 |
12 | const persistCommonConfig = {
13 | storage: storage,
14 | stateReconciler: autoMergeLevel2,
15 | };
16 |
17 | const adminPersistConfig = {
18 | ...persistCommonConfig,
19 | key: 'admin',
20 | whitelist: ['isLoggedIn', 'adminInfo']
21 | };
22 |
23 | export default (history) => combineReducers({
24 | router: connectRouter(history),
25 | admin: persistReducer(adminPersistConfig, adminReducer),
26 | user: userReducer,
27 | app: appReducer
28 | })
--------------------------------------------------------------------------------
/src/store/reducers/userReducer.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/haryphamdev/Frontend-React.JS-QuickStart/b0f772df40c293463f1958c50c13c71534c3c04e/src/store/reducers/userReducer.js
--------------------------------------------------------------------------------
/src/styles/_base.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * General styles
3 | */
4 | body, html {
5 | background-image: "#fff";
6 | background-repeat: no-repeat;
7 | background-size: cover;
8 | font-family: $fontmain;
9 | font-size: $base-size - 2px;
10 | height: 100vh;
11 | overflow: hidden;
12 | }
13 |
14 | .btn {
15 | padding: 0;
16 | border: none;
17 | cursor: pointer;
18 | font-weight: 700;
19 | height: 30px;
20 | line-height: 30px;
21 | -moz-user-select: none;
22 | -webkit-user-select: none;
23 | user-select: none;
24 | i {
25 | font-size: $base-size - 3px;
26 | }
27 | }
28 |
29 | .btn-edit,
30 | .btn-add,
31 | .btn-delete,
32 | .btn-assign {
33 | background-color: $colormain;
34 | color: $common-text-color;
35 | &:hover {
36 | color: $common-text-color;
37 | background-color: darken($colormain, 5);
38 | }
39 | }
40 |
41 | #password:invalid {
42 | font-family: $fontmain; // Fixed TH hien thi placeholder cho EDGE
43 | }
44 | #password:-webkit-input-placeholder {
45 | font-family: $fontmain; // CHROME 1
46 | }
47 | #password::-webkit-input-placeholder {
48 | font-family: $fontmain; //CHROME 2 EDGE 1
49 | }
50 | #password:-moz-placeholder {
51 | font-family: $fontmain; // Firefox 4-18
52 | }
53 | #password::-moz-placeholder {
54 | font-family: $fontmain; // Firefox 19+
55 | }
56 | #password:-ms-input-placeholder {
57 | font-family: $fontmain; // IE 10-11
58 | }
59 | #password::-ms-input-placeholder {
60 | font-family: $fontmain; // EDGE 2
61 | }
62 | #password::placeholder {
63 | font-family: $fontmain;
64 | }
65 |
66 | .content-container {
67 | .title {
68 | text-align: center;
69 | text-transform: uppercase;
70 | font-weight: bold;
71 | font-size: $base-size + 4px;
72 | margin-top: 15px;
73 | color: $colormain;
74 | }
75 | .content {
76 | margin: 15px 30px;
77 | box-shadow: 2px 2px 4px 0 $box-shadow-color;
78 | -webkit-box-shadow: 2px 2px 4px 0 $box-shadow-color;
79 | }
80 | }
81 |
82 | .modal {
83 | .modal-dialog {
84 | .modal-content {
85 | .modal-header {
86 | padding: 0 10px;
87 | height: 35px;
88 | background-color: $colormain;
89 | color: $common-text-color;
90 | .modal-title {
91 | line-height: 35px;
92 | font-weight: 500;
93 | font-size: $base-size + 1px;
94 | }
95 | .btn-close {
96 | position: absolute;
97 | color: $common-text-color;
98 | i {
99 | line-height: 35px;
100 | font-size: $base-size + 2px;
101 | }
102 | }
103 | }
104 | }
105 | }
106 | }
--------------------------------------------------------------------------------
/src/styles/_form.scss:
--------------------------------------------------------------------------------
1 | @import "common";
2 |
3 | .custom-form-group {
4 |
5 | .custom-form-control {
6 | background-color: $common-white;
7 | border: 1px solid $border;
8 | &.readonly {
9 | cursor: not-allowed;
10 | background-color: darken($common-white, 5);
11 | }
12 | &:focus {
13 | outline: none;
14 | border: 1px solid darken($border, 50);
15 | }
16 | }
17 |
18 | select.custom-form-control {
19 | background-image: $dropdown-image;
20 | }
21 |
22 | margin-bottom: 10px;
23 |
24 | label {
25 | margin-bottom: 1px;
26 | }
27 |
28 | .custom-form-control {
29 | display: block;
30 | width: 100%;
31 | height: 28px;
32 | padding: 0 5px;
33 | line-height: 26px;
34 | border-radius: 5px;
35 | }
36 |
37 | textarea.custom-form-control {
38 | min-height: 28px;
39 | height: auto;
40 | }
41 |
42 | select.custom-form-control {
43 | -webkit-appearance: none;
44 | -moz-appearance: none;
45 |
46 | padding-right: 15px;
47 |
48 | background-position: right top;
49 | background-repeat: no-repeat;
50 | background-size: 15px 100%;
51 |
52 | cursor: pointer;
53 |
54 | &:disabled {
55 | cursor: not-allowed;
56 | }
57 | }
58 |
59 | .custom-checkbox-control {
60 | line-height: 28px;
61 |
62 | input {
63 | cursor: pointer;
64 | }
65 |
66 | label {
67 | margin-left: 5px;
68 | }
69 | }
70 |
71 | }
72 |
--------------------------------------------------------------------------------
/src/styles/_variables.scss:
--------------------------------------------------------------------------------
1 | $base-size: 16px;
2 | $lh: 1.313;
3 | $fontmain:"Helvetica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
4 | $colormain:#0071ba;
5 | $colorsub:#bb8d09;
6 | $common-text-color:white;
7 | $common-btn-confirm: #185ba8;
8 | $common-btn-deny: #bb8d09;
9 | $common-error: #ff9600;
10 | $common-notify: greenyellow;
11 | $common-green: #00C087;
12 | $common-red: #d01a1d;
13 | $common-white: #fff;
14 | $common-orange: #FFAC42;
15 | $border: #ccc;
16 | $text-in-light: #181818;
17 |
18 | $input-focus: #FFAC42;
19 |
20 | $footer-container: #f5f5f5;
21 | $footer-text: #262626;
22 | $footer-next-disable: #ccc;
23 |
24 | $bg-menu-color: #f5f5f5;
25 | $bg-scrollbar: #000;
26 | $bg-table-color: #f5f5f5;
27 | $box-shadow-color: #0000004d;
28 |
29 | $dropdown-image: url("../assets/images/dropdown.svg");
30 |
31 | //date picker
32 | $date-picker-bg: $common-white;
33 | $date-picker-border: darken(#3f4458, 50%);
34 | $date-picker-arrow-hover: $common-orange;
35 | $date-picker-month-fg: #000;
36 | $date-picker-month-bg: $common-white;
37 | $date-picker-weekdays-fg: #000;
38 | $date-picker-weekdays-bg: transparent;
39 | $date-picker-day-fg: #000;
40 | $date-picker-day-hover-bg: darken($common-white, 25%);
41 | $date-picker-today-border: $common-orange;
42 | $date-picker-today-bg: $common-orange;
43 | $date-picker-today-fg: #000;
44 | $date-picker-day-selected-fg: $common-white;
--------------------------------------------------------------------------------
/src/styles/common.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .text-center {
4 | text-align: center !important;
5 | }
6 |
7 | .text-left {
8 | text-align: left !important;
9 | }
10 |
11 | .text-right {
12 | text-align: right !important;
13 | }
14 |
15 | .text-red {
16 | color: $common-red !important;
17 | }
--------------------------------------------------------------------------------
/src/styles/styles.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 | @import "../../node_modules/bootstrap/scss/bootstrap";
3 |
4 | $fa-font-path : "~@fortawesome/fontawesome-free-webfonts/webfonts";
5 | @import "~@fortawesome/fontawesome-free-webfonts/scss/fontawesome.scss";
6 | @import "~@fortawesome/fontawesome-free-webfonts/scss/fa-solid.scss";
7 | @import "~@fortawesome/fontawesome-free-webfonts/scss/fa-regular.scss";
8 | @import "~@fortawesome/fontawesome-free-webfonts/scss/fa-brands.scss";
9 |
10 | @import "base";
11 | @import "form";
--------------------------------------------------------------------------------
/src/translations/en.json:
--------------------------------------------------------------------------------
1 | {
2 | "common": {
3 | "add": "Add",
4 | "edit": "Edit",
5 | "delete": "Delete",
6 | "decentralize": "Decentralize",
7 | "close": "Close",
8 | "save": "Save",
9 | "refresh": "Refresh",
10 | "accept": "Accept",
11 | "confirm": "Confirm",
12 | "confirm-this-task": "Are you sure to process this task?",
13 | "fail-to-load-data": "Fail to load data",
14 | "unknown-error": "There was an error",
15 | "internal-server-error": "Internal server error",
16 | "bad-request": "Bad request",
17 | "forbiden-request": "Invalid input data",
18 | "fail-to-load-all-code": "Fail to load data from allcode",
19 | "sum": "Sum",
20 | "date-range-invalid": "Date range invalid"
21 | },
22 | "login": {
23 | "login": "Login",
24 | "username": "Username",
25 | "password": "Password",
26 | "userpass-wrong": "Invalid username or password!"
27 | },
28 | "menu": {
29 | "system": {
30 | "header": "System",
31 | "system-administrator": {
32 | "header": "System Administrator",
33 | "user-manage": "User manage",
34 | "product-manage": "Package manage",
35 | "register-package-group-or-account": "Register service package for group/account"
36 | },
37 | "system-parameter": {
38 | "header": "System-parameter"
39 | }
40 | }
41 | },
42 | "system": {
43 | "user-manage": {
44 | "fail-to-load-fouser": "Fail to load system users list",
45 | "user-id": "User ID",
46 | "usertype": "User type",
47 | "username": "Username",
48 | "fullname": "Fullname",
49 | "mobile": "Phone",
50 | "email": "Email",
51 | "status": "Status",
52 | "add-user": "Add user",
53 | "edit-user": "Edit user information",
54 | "password": "Password",
55 | "retype-password": "Retype password",
56 | "add-user-success": "Add user successfully",
57 | "edit-user-success": "Change user information successfully",
58 | "add-user-fail": "Fail to add user",
59 | "edit-user-fail": "Fail to change user information",
60 | "del-user-success": "Delete user successfully",
61 | "del-user-fail": "Fail to delete user",
62 | "invalid-input": {
63 | "username": "Please fill in username",
64 | "fullname": "Please fill in fullname",
65 | "password": "Please fill in password"
66 | },
67 | "sure-delete-user": "Are you sure to delete this user?"
68 | },
69 | "product-manage": {
70 | "fail-to-load-foprtype": "Fail to load packages list",
71 | "prid": "Package ID",
72 | "prname": "Package name",
73 | "prtype": "Package type",
74 | "status": "Status",
75 | "description": "Description",
76 | "effective-date": "Effective date",
77 | "expiration-date": "Expiration date",
78 | "add-product": "Add package",
79 | "add-product-success": "Add package successfully",
80 | "add-product-fail": "Fail to add package",
81 | "edit-product": "Edit package information",
82 | "package-decentralize": "Package decentralize",
83 | "edit-product-success": "Edit package information successfully",
84 | "edit-product-fail": "Fail to edit package information",
85 | "delete-product-success": "Delete package successfully",
86 | "delete-product-fail": "Fail to delete package",
87 | "invalid-input": {
88 | "prid": "Please fill in package ID",
89 | "prname": "Please fill in package name"
90 | },
91 | "fail-to-load-decentralize-info": "Fail to load decentralize info",
92 | "save-decentralize-success": "Save decentralization successfully",
93 | "save-decentralize-fail": "Fail to save decentralization",
94 | "sure-delete-package": "Are you sure to delete this package?"
95 | },
96 | "register-package-group-or-acc": {
97 | "assign-service-package-to-customer": "Assign service package to customer",
98 | "package-name": "Package name",
99 | "assign-type": "Assign type",
100 | "cust-acc-group": "Customer/account group",
101 | "effective-date": "Effective date",
102 | "expiration-date": "Expiration date",
103 | "assign": "Assign",
104 | "manage-assign-groups": "Manage assign groups",
105 | "group-cust-acc-name": "Group/customer account name",
106 | "del-assign": "Del assign",
107 | "fail-to-load-manage-assign-groups-list": "Fail to load manage assign groups list",
108 | "invalid-selected": {
109 | "currentfoProduct": "Invalid package",
110 | "currentAssignType": "Invalid assign type",
111 | "currentFoUser": "Invalid customer/account group"
112 | },
113 | "assign-service-package-to-customer-success": "Assign service package to customer successfully",
114 | "assign-service-package-to-customer-fail": "Fail to assign service package to customer",
115 | "remove-assign-success": "Unassign service package to customer successfully",
116 | "remove-assign-fail": "Fail to unassign service package to customer",
117 | "sure-delete-assign": "Are you sure to unassign service package to customer?"
118 | }
119 | }
120 | }
--------------------------------------------------------------------------------
/src/translations/vi.json:
--------------------------------------------------------------------------------
1 | {
2 | "common": {
3 | "add": "Thêm",
4 | "edit": "Sửa",
5 | "delete": "Xóa",
6 | "decentralize": "Phân quyền",
7 | "close": "Đóng",
8 | "save": "Lưu",
9 | "refresh": "Refresh",
10 | "accept": "Chấp nhận",
11 | "confirm": "Xác nhận",
12 | "confirm-this-task": "Bạn có chắc chắn thực hiện tác vụ này?",
13 | "fail-to-load-data": "Không thể tải về dữ liệu",
14 | "unknown-error": "Có lỗi xảy ra",
15 | "internal-server-error": "Lỗi kết nối",
16 | "bad-request": "Yêu cầu không hợp lệ",
17 | "forbiden-request": "Thông tin truyền vào không hợp lệ",
18 | "fail-to-load-all-code": "Không thể tải về dữ liệu allcode",
19 | "sum": "Tổng",
20 | "date-range-invalid": "Khoảng thời gian không hợp lệ"
21 | },
22 | "login": {
23 | "login": "Đăng nhập",
24 | "username": "Tên đăng nhập",
25 | "password": "Mật khẩu",
26 | "userpass-wrong": "Sai tên đăng nhập hoặc mật khẩu!"
27 | },
28 | "menu": {
29 | "system": {
30 | "header": "Hệ thống",
31 | "system-administrator": {
32 | "header": "Quản trị hệ thống",
33 | "user-manage": "Quản lý người sử dụng",
34 | "product-manage": "Quản lý gói",
35 | "register-package-group-or-account": "Đăng ký gói dịch vụ cho nhóm/tài khoản"
36 | },
37 | "system-parameter": {
38 | "header": "Tham số hệ thống"
39 | }
40 | }
41 | },
42 | "system": {
43 | "user-manage": {
44 | "fail-to-load-fouser": "Không thể tải về danh sách người dùng",
45 | "user-id": "Mã người sử dụng",
46 | "usertype": "Loại người dùng",
47 | "username": "Tên người dùng",
48 | "fullname": "Tên đầy đủ",
49 | "mobile": "Số điện thoại",
50 | "email": "Email",
51 | "status": "Trạng thái",
52 | "add-user": "Thêm người dùng",
53 | "edit-user": "Sửa thông tin người dùng",
54 | "password": "Mật khẩu",
55 | "retype-password": "Nhập lại mật khẩu",
56 | "add-user-success": "Thêm người dùng thành công",
57 | "edit-user-success": "Thay đổi thông tin người dùng thành công",
58 | "add-user-fail": "Thêm người dùng thất bại",
59 | "edit-user-fail": "Thay đổi thông tin người dùng thất bại",
60 | "del-user-success": "Xóa người dùng thành công",
61 | "del-user-fail": "Xóa người dùng thất bại",
62 | "invalid-input": {
63 | "username": "Quý khách vui lòng nhập tên người dùng",
64 | "fullname": "Quý khách vui lòng nhập tên đầy đủ",
65 | "password": "Quý khách vui lòng nhập mật khẩu"
66 | },
67 | "sure-delete-user": "Bạn có chắc chắn muốn xóa người dùng này?"
68 | },
69 | "product-manage": {
70 | "fail-to-load-foprtype": "Không thể tải về danh sách gói",
71 | "prid": "Mã gói",
72 | "prname": "Tên gói",
73 | "prtype": "Loại gói",
74 | "status": "Trạng thái",
75 | "description": "Diễn giải",
76 | "effective-date": "Ngày hiệu lực",
77 | "expiration-date": "Ngày hết hiệu lực",
78 | "add-product": "Thêm gói",
79 | "add-product-success": "Thêm gói thành công",
80 | "add-product-fail": "Thêm gói thất bại",
81 | "edit-product": "Sửa thông tin gói",
82 | "package-decentralize": "Phân quyền chức năng",
83 | "edit-product-success": "Thay đổi thông tin gói thành công",
84 | "edit-product-fail": "Thay đổi thông tin gói thất bại",
85 | "delete-product-success": "Xóa gói thành công",
86 | "delete-product-fail": "Xóa gói thất bại",
87 | "invalid-input": {
88 | "prid": "Quý khách vui lòng nhập mã gói",
89 | "prname": "Quý khách vui lòng nhập tên gói"
90 | },
91 | "fail-to-load-decentralize-info": "Không thể tải về thông tin phân quyền chức năng",
92 | "save-decentralize-success": "Lưu phân quyền chức năng thành công",
93 | "save-decentralize-fail": "Lưu phân quyền chức năng thất bại",
94 | "sure-delete-package": "Bạn có chắc chắn muốn xóa gói này?"
95 | },
96 | "register-package-group-or-acc": {
97 | "assign-service-package-to-customer": "Gán gói dịch vụ cho khách hàng",
98 | "package-name": "Tên gói",
99 | "assign-type": "Loại gán",
100 | "cust-acc-group": "Nhóm KH/Tài khoản",
101 | "effective-date": "Ngày hiệu lực",
102 | "expiration-date": "Ngày hết hiệu lực",
103 | "assign": "Gán",
104 | "manage-assign-groups": "Quản lý gán nhóm",
105 | "group-cust-acc-name": "Tên nhóm/tài khoản KH",
106 | "del-assign": "Xóa gán",
107 | "fail-to-load-manage-assign-groups-list": "Không thể tải về thông tin quản lý gán nhóm",
108 | "invalid-selected": {
109 | "currentfoProduct": "Gói đang chọn không hợp lệ",
110 | "currentAssignType": "Loại gán không hợp lệ",
111 | "currentFoUser": "Nhóm KH/Tài khoản không hợp lệ"
112 | },
113 | "assign-service-package-to-customer-success": "Gán gói dịch vụ cho khách hàng thành công",
114 | "assign-service-package-to-customer-fail": "Gán gói dịch vụ cho khách hàng thất bại",
115 | "remove-assign-success": "Bỏ gán gói dịch vụ cho khách hàng thành công",
116 | "remove-assign-fail": "Bỏ gán gói dịch vụ cho khách hàng thất bại",
117 | "sure-delete-assign": "Bạn có chắc chắn muốn bỏ gán gói dịch vụ cho khách hàng?"
118 | }
119 | }
120 | }
--------------------------------------------------------------------------------
/src/utils/CommonUtils.js:
--------------------------------------------------------------------------------
1 | class CommonUtils {
2 | static isNumber1 (number) {
3 | if (number === 1) return true;
4 | return false;
5 | }
6 | }
7 |
8 | export default CommonUtils;
--------------------------------------------------------------------------------
/src/utils/KeyCodeUtils.js:
--------------------------------------------------------------------------------
1 | class KeyCodeUtils {
2 |
3 | static UP = 38;
4 |
5 | static DOWN = 40;
6 |
7 | static TAB = 9;
8 |
9 | static ENTER = 13;
10 |
11 | static E = 69;
12 |
13 | static ESCAPE = 27;
14 |
15 | static isNavigation(e) {
16 | return (e >= 33 && e <= 40) || e === 9 || e === 8 || e === 46 || e === 14 || e === 13;
17 | }
18 |
19 | static isNumeric(e) {
20 | return (e >= 48 && e <= 57) || (e >= 96 && e <= 105);
21 | }
22 | static isAlphabetic(e) {
23 | return (e >= 65 && e <= 90);
24 | }
25 | static isDecimal(e) {
26 | return e === 190 || e === 188 || e === 108 || e === 110;
27 | }
28 |
29 | static isDash(e) {
30 | return e === 109 || e === 189;
31 | }
32 | }
33 |
34 | export default KeyCodeUtils;
--------------------------------------------------------------------------------
/src/utils/LanguageUtils.js:
--------------------------------------------------------------------------------
1 | import messages_vi from '../translations/vi.json';
2 | import messages_en from '../translations/en.json';
3 |
4 | const flattenMessages = ((nestedMessages, prefix = '') => {
5 | if (nestedMessages == null) {
6 | return {}
7 | }
8 | return Object.keys(nestedMessages).reduce((messages, key) => {
9 | const value = nestedMessages[key];
10 | const prefixedKey = prefix ? `${prefix}.${key}` : key;
11 |
12 | if (typeof value === 'string') {
13 | Object.assign(messages, {[prefixedKey]: value})
14 | } else {
15 | Object.assign(messages, flattenMessages(value, prefixedKey))
16 | }
17 |
18 | return messages
19 | }, {})
20 | });
21 |
22 | const messages = {
23 | 'vi': flattenMessages(messages_vi),
24 | 'en': flattenMessages(messages_en),
25 | };
26 |
27 | export default class LanguageUtils {
28 | static getMessageByKey(key, lang) {
29 | return messages[lang][key]
30 | }
31 |
32 | static getFlattenedMessages() {
33 | return messages;
34 | }
35 | }
--------------------------------------------------------------------------------
/src/utils/ToastUtil.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { toast } from 'react-toastify';
3 | import axios from 'axios';
4 |
5 | import CustomToast from "../components/CustomToast";
6 |
7 | const TYPE_SUCCESS = 'SUCCESS';
8 | const TYPE_INFO = 'INFO';
9 | const TYPE_WARN = 'WARN';
10 | const TYPE_ERROR = 'ERROR';
11 |
12 | class ToastUtil {
13 |
14 | static success(title, message) {
15 | this.show(TYPE_SUCCESS, title, message);
16 | }
17 |
18 | static info(title, message) {
19 | this.show(TYPE_INFO, title, message);
20 | }
21 |
22 | static warn(title, message) {
23 | this.show(TYPE_WARN, title, message);
24 | }
25 |
26 | static error(title, message) {
27 | this.show(TYPE_ERROR, title, message);
28 | }
29 |
30 | static successRaw(title, message) {
31 | this.show(TYPE_SUCCESS, title, message, true);
32 | }
33 |
34 | static errorRaw(title, message, autoCloseDelay = 3000) {
35 | this.show(TYPE_ERROR, title, message, true, autoCloseDelay);
36 | }
37 | static errorApi(error, title = 'common.fail-to-load-data', autoCloseDelay = 3000) {
38 | if (axios.isCancel(error)) {
39 | // Do nothing if request was cancelled
40 | return;
41 | }
42 | let message = null;
43 | let messageId = 'common.unknown-error';
44 | if (error.httpStatusCode >= 500) {
45 | messageId = 'common.internal-server-error';
46 | } else if (error.httpStatusCode < 500 && error.httpStatusCode >= 400) {
47 | if (error.httpStatusCode === 400) {
48 | messageId = 'common.bad-request';
49 | } else if (error.httpStatusCode === 403) {
50 | messageId = 'common.forbiden-request';
51 | }
52 | } else {
53 | // Request fail even server was returned a success response
54 | if (error.errorMessage) {
55 | message = error.errorMessage
56 | }
57 | }
58 | toast.error(
14 |
15 | { return (
20 |
21 |