alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

layout update

master
Alex Cheung 1 year ago
parent
cbd5b09fd0
commit
352ec3b96d
7 changed files with 99 additions and 89 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      src/components/AutoLogoutProvider.js
  2. +3
    -3
      src/index.js
  3. +47
    -49
      src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js
  4. +1
    -1
      src/pages/User/DetailsPage_Organization/index.js
  5. +5
    -3
      src/pages/authentication/auth-forms/AuthLogin.js
  6. +23
    -17
      src/pages/authentication/auth-forms/AuthLoginCustom.js
  7. +18
    -14
      src/utils/FieldUtils.js

+ 2
- 2
src/components/AutoLogoutProvider.js View File

@@ -56,10 +56,10 @@ const AutoLogoutProvider = ({ children }) => {
//TODO: get auto logout time here //TODO: get auto logout time here
if(isGLDLoggedIn()){ if(isGLDLoggedIn()){
setLogoutInterval(240); setLogoutInterval(240);
console.log("Set Logout Interval: 240")
// console.log("Set Logout Interval: 240")
}else{ }else{
setLogoutInterval(60); setLogoutInterval(60);
console.log("Set Logout Interval: 60")
// console.log("Set Logout Interval: 60")
} }
// axios.get(`${apiPath}${GET_IDLE_LOGOUT_TIME}`, // axios.get(`${apiPath}${GET_IDLE_LOGOUT_TIME}`,
// ) // )


+ 3
- 3
src/index.js View File

@@ -16,9 +16,9 @@ import 'assets/third-party/apex-chart.css';
import App from './App'; import App from './App';
import { store } from 'store'; import { store } from 'store';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
import {I18nProvider} from "./components/I18nProvider";
import {AutoLogoutProvider} from "./components/AutoLogoutProvider";
import {RefreshTokenProvider} from "./components/RefreshTokenProvider";
import {I18nProvider} from "components/I18nProvider";
import {AutoLogoutProvider} from "components/AutoLogoutProvider";
import {RefreshTokenProvider} from "components/RefreshTokenProvider";


// ==============================|| MAIN - REACT DOM RENDER ||============================== // // ==============================|| MAIN - REACT DOM RENDER ||============================== //




+ 47
- 49
src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js View File

@@ -43,7 +43,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
// console.log(currentApplicationDetailData) // console.log(currentApplicationDetailData)
if (Object.keys(currentUserData).length > 0) { if (Object.keys(currentUserData).length > 0) {
setOnReady(true); setOnReady(true);
console.log(currentUserData)
// console.log(currentUserData)
} }
}, [currentUserData]); }, [currentUserData]);


@@ -59,7 +59,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'require8Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))), phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'require8Number'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
}), }),
onSubmit: (values) => { onSubmit: (values) => {
console.log(values);
// console.log(values);
HttpUtils.post({ HttpUtils.post({
url: UrlUtils.POST_PUB_ORG_USER, url: UrlUtils.POST_PUB_ORG_USER,
params: { params: {
@@ -105,50 +105,48 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit}>


{/*top button*/} {/*top button*/}
<Grid item s={12} md={12} lg={12} sx={{ mb: 3, mt: 2 }} alignItems={"start"} justifyContent="center">
<Grid container maxWidth justifyContent="flex-start">
{editMode ?
<>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
variant="contained"
onClick={loadDataFun}
color="cancel"
>
<FormattedMessage id="resetAndBack" />

</Button>
</Grid>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
variant="contained"
type="submit"
color="success"
>
<FormattedMessage id="save" />

</Button>
</Grid>
</ThemeProvider>
</>
:
<>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
variant="contained"
onClick={onEditClick}
>
<FormattedMessage id="edit" />

</Button>
</Grid>
</ThemeProvider>
</>
}
<Grid container alignItems="center" justifyContent="flex-start">
<Grid item s={12} md={12} lg={12} sx={{ lg:{mb: 3}, mt: 2 }}>
<Grid container direction="row" justifyContent="flex-start">
{editMode ?
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item xs={4} sx={{ ml: 3, mr: 3 }}>
<Button
variant="contained"
onClick={loadDataFun}
color="cancel"
>
<FormattedMessage id="resetAndBack" />

</Button>
</Grid>
<Grid item xs={4} sx={{ ml: 3, mr: 3 }}>
<Button
variant="contained"
type="submit"
color="success"
>
<FormattedMessage id="save" />

</Button>
</Grid>
</ThemeProvider>
:
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{ ml:3, mr: 3 }}>
<Button
variant="contained"
onClick={onEditClick}
>
<FormattedMessage id="edit" />

</Button>
</Grid>
</ThemeProvider>
}




</Grid>
</Grid> </Grid>
</Grid> </Grid>
{/*end top button*/} {/*end top button*/}
@@ -157,7 +155,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
<FormattedMessage id="userDetail" /> <FormattedMessage id="userDetail" />
</Typography> </Typography>
<Grid container spacing={1}> <Grid container spacing={1}>
<Grid item lg={12}>
<Grid item xs={12} lg={12}>
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: intl.formatMessage({id: 'userLoginName'}) + ":", label: intl.formatMessage({id: 'userLoginName'}) + ":",
valueName: "username", valueName: "username",
@@ -166,7 +164,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
})} })}
</Grid> </Grid>


<Grid item lg={12}>
<Grid item xs={12} lg={12}>
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: intl.formatMessage({id: 'userContactName'}) + ":", label: intl.formatMessage({id: 'userContactName'}) + ":",
valueName: "contactPerson", valueName: "contactPerson",
@@ -175,7 +173,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
})} })}
</Grid> </Grid>


<Grid item lg={12}>
<Grid item xs={12} lg={12}>
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: intl.formatMessage({id: 'userContactEmail'}) + ":", label: intl.formatMessage({id: 'userContactEmail'}) + ":",
valueName: "emailBus", valueName: "emailBus",
@@ -184,7 +182,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
})} })}
</Grid> </Grid>


<Grid item lg={12}>
<Grid item xs={12} lg={12}>
{FieldUtils.getPhoneField({ {FieldUtils.getPhoneField({
label: intl.formatMessage({id: 'userContactNumber'}) + ":", label: intl.formatMessage({id: 'userContactNumber'}) + ":",
valueName: { valueName: {
@@ -196,7 +194,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
})} })}
</Grid> </Grid>


<Grid item lg={12}>
<Grid item xs={12} lg={12}>
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: intl.formatMessage({id: 'primaryUser'}) + ":", label: intl.formatMessage({id: 'primaryUser'}) + ":",
valueName: "primaryUser", valueName: "primaryUser",


+ 1
- 1
src/pages/User/DetailsPage_Organization/index.js View File

@@ -166,7 +166,7 @@ const UserMaintainPage_Organization = () => {
//response.data["orgId"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):""; //response.data["orgId"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate):"";
setUserData(response.data); setUserData(response.data);
setOrgData(response.orgList); setOrgData(response.orgList);
console.log(response.data)
// console.log(response.data)
} }
}); });
} }


+ 5
- 3
src/pages/authentication/auth-forms/AuthLogin.js View File

@@ -1,4 +1,6 @@
import React, {useContext, useEffect, useState} from 'react';
import React, {
// useContext,
useEffect, useState} from 'react';
import {useNavigate} from 'react-router-dom'; import {useNavigate} from 'react-router-dom';


// material-ui // material-ui
@@ -34,9 +36,9 @@ import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
import axios from "axios"; import axios from "axios";
import {useDispatch} from "react-redux"; import {useDispatch} from "react-redux";
import {handleLogin} from "auth/index"; import {handleLogin} from "auth/index";
import { notifyActionSuccess } from 'utils/CommonFunction';
// import { notifyActionSuccess } from 'utils/CommonFunction';
import {FormattedMessage} from "react-intl"; import {FormattedMessage} from "react-intl";
import LocaleContext from "../../../components/I18nProvider";
// import LocaleContext from "../../../components/I18nProvider";
// ============================|| FIREBASE - LOGIN ||============================ // // ============================|| FIREBASE - LOGIN ||============================ //


const AuthLogin = () => { const AuthLogin = () => {


+ 23
- 17
src/pages/authentication/auth-forms/AuthLoginCustom.js View File

@@ -47,6 +47,8 @@ import useJwt from "auth/jwt/useJwt";
import { handleLogoutFunction } from 'auth/index'; import { handleLogoutFunction } from 'auth/index';
import {FormattedMessage, useIntl} from "react-intl"; import {FormattedMessage, useIntl} from "react-intl";
// import LocaleContext from "components/I18nProvider"; // import LocaleContext from "components/I18nProvider";
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));

// ============================|| FIREBASE - LOGIN ||============================ // // ============================|| FIREBASE - LOGIN ||============================ //


const AuthLoginCustom = () => { const AuthLoginCustom = () => {
@@ -66,6 +68,7 @@ const AuthLoginCustom = () => {
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const [isButtonDisabled, setIsButtonDisabled] = useState(true); const [isButtonDisabled, setIsButtonDisabled] = useState(true);
const [errorMassage, setErrorMassage] = useState(''); const [errorMassage, setErrorMassage] = useState('');
const [onLogin, setOnLogin] = useState(false);


const handleMouseDownPassword = (event) => { const handleMouseDownPassword = (event) => {
event.preventDefault(); event.preventDefault();
@@ -74,7 +77,7 @@ const AuthLoginCustom = () => {
const tryLogin = () => { const tryLogin = () => {
if (isValid) { if (isValid) {
dispatch(handleLogoutFunction()); dispatch(handleLogoutFunction());
// setSumitting(true)
setOnLogin(true)
useJwt useJwt
.login({ username: values.username, password: values.password }) .login({ username: values.username, password: values.password })
.then((response) => { .then((response) => {
@@ -114,8 +117,7 @@ const AuthLoginCustom = () => {
}) })
.catch((error) => { .catch((error) => {
// setSuccess(false) // setSuccess(false)
console.error(error)
console.error(error.response.data.error)
setOnLogin(false)
setErrorMassage(error.response.data.error) setErrorMassage(error.response.data.error)
setOpen(true) setOpen(true)
}); });
@@ -323,20 +325,24 @@ const AuthLoginCustom = () => {
<Grid container> <Grid container>
<Grid item xs={12}> <Grid item xs={12}>
<AnimateButton> <AnimateButton>
<Button disableElevation disabled={isButtonDisabled}
fullWidth size="large" type="submit" variant="contained" color="primary"
sx={{
"&.Mui-disabled": {
background: "#bbdefb",
color: "#fff",
border: "2px solid",
borderColor: "#e7e7e7"
}
}}>
<Typography variant="h5">
<FormattedMessage id="login"/>
</Typography>
</Button>
{onLogin?
<LoadingComponent disableText={true} alignItems="center"/>
:
<Button disableElevation disabled={isButtonDisabled}
fullWidth size="large" type="submit" variant="contained" color="primary"
sx={{
"&.Mui-disabled": {
background: "#bbdefb",
color: "#fff",
border: "2px solid",
borderColor: "#e7e7e7"
}
}}>
<Typography variant="h5">
<FormattedMessage id="login"/>
</Typography>
</Button>
}
</AnimateButton> </AnimateButton>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>


+ 18
- 14
src/utils/FieldUtils.js View File

@@ -27,25 +27,29 @@ export const getDateField = ({ label, valueName, form, disabled }) => {
} }


export const getTextField = ({ label, valueName, form, disabled }) => { export const getTextField = ({ label, valueName, form, disabled }) => {
return <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{mb:2}}>
<Grid item xs={12} sm={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="pnspsFormParagraphBold">{label}</Typography>
</Grid>
<Grid item xs={12} sm={12} md={6} lg={6}>
{initField({
type: "text",
valueName: valueName,
form: form,
disabled: disabled
})}
return <Grid container alignItems={"center"} sx={{mb:2}}>
<Grid item xs={12} sm={12} md={12} lg={12}>
<Grid container>
<Grid item xs={12} sm={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }} mb={2} >
<Typography variant="pnspsFormParagraphBold">{label}</Typography>
</Grid>
<Grid item xs={12} sm={12} md={6} lg={6}>
{initField({
type: "text",
valueName: valueName,
form: form,
disabled: disabled
})}
</Grid>
</Grid>
</Grid> </Grid>
</Grid>; </Grid>;
} }


export const getTextArea = ({ label, valueName, form, disabled, inputProps, ...props }) => { export const getTextArea = ({ label, valueName, form, disabled, inputProps, ...props }) => {
return <Grid container alignItems={"center"}> return <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
<Grid item xs={12} md={3} lg={3} mb={2}
sx={{ display: 'flex', alignItems: 'center' }}> sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="pnspsFormParagraphBold">{label}</Typography> <Typography variant="pnspsFormParagraphBold">{label}</Typography>
</Grid> </Grid>
@@ -73,7 +77,7 @@ export const getTextArea = ({ label, valueName, form, disabled, inputProps, ...p
export const getPhoneField = ({ label, valueName, form, disabled }) => { export const getPhoneField = ({ label, valueName, form, disabled }) => {


return <Grid container alignItems={"center"} sx={{mb:2}}> return <Grid container alignItems={"center"} sx={{mb:2}}>
<Grid item xs={12} md={3} lg={3}
<Grid item xs={12} md={3} lg={3} mb={2}
sx={{ display: 'flex', alignItems: 'center' }}> sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="pnspsFormParagraphBold">{label}</Typography> <Typography variant="pnspsFormParagraphBold">{label}</Typography>
</Grid> </Grid>


Write Preview
Loading…
Cancel
Save