alex
/
PNSPS-frontend-MaterialUI
1
0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki Activity
瀏覽代碼

update ui

master
Anna Ho 1 年之前
父節點
c95c9fce7e
當前提交
503957eb31
共有 7 個文件被更改，包括 755 次插入 和 734 次删除
分割檢視
Diff Options
Show Stats Download Patch File Download Diff File
  1. +36
    -27
      src/pages/OrganizationDetailPage/OrganizationCard.js
  2. +1
    -1
      src/pages/OrganizationDetailPage/index.js
  3. +352
    -329
      src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js
  4. +1
    -4
      src/pages/pnspsUserDetailPage_Individual/index.js
  5. +287
    -264
      src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js
  6. +1
    -1
      src/pages/pnspsUserDetailPage_Organization/index.js
  7. +77
    -108
      src/utils/FieldUtils.js

+ 36
- 27
src/pages/OrganizationDetailPage/OrganizationCard.js 查看文件

@@ -1,6 +1,6 @@
// material-ui
import {
Grid, Typography, Button, Checkbox
Grid, Button, Checkbox
} from '@mui/material';
import { FormControlLabel } from '@material-ui/core';
import MainCard from "../../components/MainCard";
@@ -33,7 +33,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
addressLine3: yup.string().max(255, "length must <= 255"),
fax_countryCode: yup.string().min(3, '請輸入國際區號').nullable(),
tel_countryCode: yup.string().min(3, '請輸入國際區號'),
phoneNumber: yup.string().min(8,'請輸入有效聯絡電話').required('請輸入聯絡電話'),
phoneNumber: yup.string().min(8, '請輸入有效聯絡電話').required('請輸入聯絡電話'),
faxNumber: yup.string().min(8, '請輸入8位數字').nullable(),
brExpiryDate: yup.string().min(8).required('請輸入商業登記證有效日期'),
brNo: yup.string().min(8, '請輸入有效商業登記證號碼').max(8, '請輸入有效商業登記證號碼').required('請輸入商業登記證號碼'),
@@ -93,11 +93,8 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
border={false}
content={false}
>
<Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 1 }}>
Information
</Typography>

<form onSubmit={formik.handleSubmit}>
<form onSubmit={formik.handleSubmit} style={{ padding: 24 }}>

{/*top*/}
<Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">
@@ -176,24 +173,18 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {

<Grid container spacing={1}>

{FieldUtils.getTextField({
label: FieldUtils.notNullFieldLabel("BR No.:"),
valueName: "brNo",
disabled: (!editMode && !createMode),
form: formik
})}
<Grid item lg={4} >
{FieldUtils.getTextField({
label: FieldUtils.notNullFieldLabel("BR No.:"),
valueName: "brNo",
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>

<Grid item lg={4} >
{/* <Checkbox
name="creditor"
label="is Creditor"
checked={formik.values.creditor}
onChange={formik.handleChange}
disabled={!editMode && !createMode}
/> */}
<FormControlLabel
control={<Checkbox checked={formik.values.creditor}/>}
control={<Checkbox checked={formik.values.creditor} />}
label="is Creditor"
name="creditor"
onChange={formik.handleChange}
@@ -203,34 +194,43 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {

<Grid item lg={4} ></Grid>

{FieldUtils.getTextField({
label: FieldUtils.notNullFieldLabel("Name (Eng):"),
valueName: "enCompanyName",
disabled: (!editMode && !createMode),
form: formik
})}
<Grid item lg={4} >
{FieldUtils.getTextField({
label: FieldUtils.notNullFieldLabel("Name (Eng):"),
valueName: "enCompanyName",
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>

<Grid item lg={4} >
{FieldUtils.getTextField({
label: "Name (Ch):",
valueName: "chCompanyName",
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>

<Grid item lg={4} >
{FieldUtils.getDateField({
label: FieldUtils.notNullFieldLabel("Expiry Date:"),
valueName: "brExpiryDate",
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>

<Grid item lg={4} >
{FieldUtils.getTextField({
label: FieldUtils.notNullFieldLabel("Contact Person:"),
valueName: "contactPerson",
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>

<Grid item lg={4} >
{FieldUtils.getPhoneField({
label: FieldUtils.notNullFieldLabel("Contact Tel:"),
valueName: {
@@ -240,7 +240,9 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>

<Grid item lg={4} >
{FieldUtils.getPhoneField({
label: "Fax No:",
valueName: {
@@ -250,7 +252,9 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>

<Grid item lg={4} >
{FieldUtils.getComboField({
label: FieldUtils.notNullFieldLabel("Country:"),
valueName: "country",
@@ -258,7 +262,9 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
dataList: ComboData.country,
form: formik
})}
</Grid>

<Grid item lg={4} >
{FieldUtils.getComboField({
label: FieldUtils.notNullFieldLabel("District:"),
valueName: "district",
@@ -266,14 +272,17 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
dataList: ComboData.district,
form: formik
})}
</Grid>


<Grid item lg={4} >
{FieldUtils.getAddressField({
label: FieldUtils.notNullFieldLabel("Address:"),
valueName: ["addressLine1", "addressLine2", "addressLine3"],
disabled: (!editMode && !createMode),
form: formik
})}
</Grid>

<Grid item lg={12} ></Grid>



+ 1
- 1
src/pages/OrganizationDetailPage/index.js 查看文件

@@ -63,7 +63,7 @@ const OrganizationDetailPage = () => {
:
<Grid container rowSpacing={4.5} columnSpacing={2.75}>
<Grid item xs={12} sx={{mb: -2.25}}>
<Typography variant="h5">Organization</Typography>
<Typography variant="h5" >Organization Details</Typography>
</Grid>
{/*col 1*/}
<Grid item xs={12} >


+ 352
- 329
src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js 查看文件

@@ -1,10 +1,10 @@
// material-ui
import {
Grid, Typography, Button
Grid, Button
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useEffect, useState} from "react";
import { useEffect, useState } from "react";
import * as yup from 'yup';

import { useFormik } from 'formik';
@@ -16,34 +16,34 @@ import * as ComboData from "../../utils/ComboData";
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const UserInformationCard_Individual = ({formData, loadDataFun}) => {
const UserInformationCard_Individual = ({ formData, loadDataFun }) => {

const [currentUserData, setCurrentUserData] = useState(formData);
const [editMode, setEditMode] = useState(false);
const [locked, setLocked] = useState(false);

const formik = useFormik({
enableReinitialize:true,
initialValues:currentUserData,
validationSchema:yup.object().shape({
enableReinitialize: true,
initialValues: currentUserData,
validationSchema: yup.object().shape({
enName: yup.string().max(255).required('請輸入英文姓名'),
chName: yup.string().max(255).required('請輸入中文姓名'),
addressLine1: yup.string().max(255).required('請輸入第一行地址'),
addressLine2: yup.string().max(255).nullable(),
addressLine3: yup.string().max(255).nullable(),
emailAddress: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵'),
identification: yup.string().min(7,"請輸入證件號碼").required('請輸入證件號碼'),
checkDigit:yup.string().max(1).required('請輸入括號內的數字或字母').nullable(),
identification: yup.string().min(7, "請輸入證件號碼").required('請輸入證件號碼'),
checkDigit: yup.string().max(1).required('請輸入括號內的數字或字母').nullable(),
idDocType: yup.string().max(255).required('請輸入證件類別'),
tel_countryCode: yup.string().min(3,'請輸入3位數字').required('請輸入國際區號'),
fax_countryCode: yup.string().min(3,'請輸入3位數字'),
phoneNumber: yup.string().min(8,'請輸入8位數字').required('請輸入聯絡電話'),
faxNumber: yup.string().min(8,'請輸入8位數字').nullable(),
tel_countryCode: yup.string().min(3, '請輸入3位數字').required('請輸入國際區號'),
fax_countryCode: yup.string().min(3, '請輸入3位數字'),
phoneNumber: yup.string().min(8, '請輸入8位數字').required('請輸入聯絡電話'),
faxNumber: yup.string().min(8, '請輸入8位數字').nullable(),
}),
onSubmit:values=>{
onSubmit: values => {
console.log(values);
HttpUtils.post({
url: UrlUtils.POST_IND_USER+"/"+formData.id,
url: UrlUtils.POST_IND_USER + "/" + formData.id,
params: {
prefix: values.prefix,
enName: values.enName,
@@ -55,21 +55,21 @@ const UserInformationCard_Individual = ({formData, loadDataFun}) => {
},
identification: values.identification,
checkDigit: values.checkDigit,
faxNo:{
faxNo: {
countryCode: values.fax_countryCode,
faxNumber: values.faxNumber
},
emailAddress:values.emailAddress,
address:{
country:values.country,
district:values.district,
emailAddress: values.emailAddress,
address: {
country: values.country,
district: values.district,
addressLine1: values.addressLine1,
addressLine2: values.addressLine2,
addressLine3: values.addressLine3,
},
},
onSuccess: function(){
loadDataFun();
onSuccess: function () {
loadDataFun();
}
});
}
@@ -91,202 +91,213 @@ const UserInformationCard_Individual = ({formData, loadDataFun}) => {

const onVerifiedClick = () => {
HttpUtils.get({
url: UrlUtils.GET_IND_USER_VERIFY+"/"+formData.id,
onSuccess: function(){
url: UrlUtils.GET_IND_USER_VERIFY + "/" + formData.id,
onSuccess: function () {
loadDataFun();
}
});
};
const doLock = () => {
HttpUtils.get({
url: UrlUtils.GET_USER_LOCK+"/"+formData.id,
onSuccess: function(){
loadDataFun();
url: UrlUtils.GET_USER_LOCK + "/" + formData.id,
onSuccess: function () {
loadDataFun();
}
});
});
};

const doUnlock = () => {
HttpUtils.get({
url: UrlUtils.GET_USER_UNLOCK+"/"+formData.id,
onSuccess: function(){
loadDataFun();
url: UrlUtils.GET_USER_UNLOCK + "/" + formData.id,
onSuccess: function () {
loadDataFun();
}
});
});
};

return (
<MainCard elevation={0}
border={false}
content={false}
>
<Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
Individual User Information
</Typography>
<MainCard elevation={0}
border={false}
content={false}
>

<form onSubmit={formik.handleSubmit}>
<form onSubmit={formik.handleSubmit} style={{ padding: 24 }}>

{/*top button*/}
<Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"start"} justifyContent="center">
<Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">
<Grid container maxWidth justifyContent="flex-start">
{editMode?
<>
<Grid item sx={{ml: 3, mr: 3}}>
<Button
size="large"
variant="contained"
onClick={loadDataFun}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Reset & Back
</Button>
</Grid>
<Grid item sx={{ml: 3, mr: 3}}>
<Button
size="large"
variant="contained"
type="submit"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Save
</Button>
</Grid>
</>
:
<>
<Grid item sx={{ml: 3, mr: 3}}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={onEditClick}
>
Edit
</Button>
</Grid>
</>
}
{editMode ?
<>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
onClick={loadDataFun}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Reset & Back
</Button>
</Grid>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Save
</Button>
</Grid>
</>
:
<>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={onEditClick}
>
Edit
</Button>
</Grid>
</>
}
</Grid>
</Grid>
{/*end top button*/}
<Grid container spacing={1}>

{FieldUtils.getTextField({
label:"Username:",
valueName:"username",
disabled:true,
form: formik
})}

{FieldUtils.getTextField({
label:"English Name:",
valueName:"enName",
disabled:(!editMode),
form: formik
})}

{FieldUtils.getTextField({
label:"Created Date:",
valueName:"createDate",
disabled:true,
form: formik
})}

{FieldUtils.getTextField({
label:"Prefix:",
valueName:"prefix",
disabled:(!editMode),
form: formik
})}

{FieldUtils.getTextField({
label:"Chinese Name:",
valueName:"chName",
disabled:(!editMode),
form: formik
})}

{FieldUtils.getTextField({
label:"Last Updated:",
valueName:"modifieDate",
disabled:true,
form: formik
})}

{FieldUtils.getComboField({
label:"ID Type:",
valueName:"idDocType",
disabled:(!editMode),
dataList: ComboData.idDocType,
filterOptions:(options) => options,
getOptionLabel:(item) => item?typeof item==='string'?item:(item["type"]?item["type"]+"-"+item["label"]:""):"",
onInputChange:(event, newValue, setInputValue)=>{
if(newValue == null){
setInputValue("");
}
let _val = newValue.split("-");
if(_val[0]){
setInputValue(_val[0]);
}
},
onChange:(event, newValue)=>{
if(newValue == null){
formik.setFieldValue("idDocType","");
return;
}
formik.setFieldValue("idDocType",newValue.type);
},
form: formik
})}

{FieldUtils.getPhoneField({
label:"Contact Tel:",
valueName:{
code: "tel_countryCode",
num:"phoneNumber"
},
disabled:(!editMode),
form: formik
})}

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Verified:
</Grid>

{
currentUserData.verifiedBy || editMode?
<Grid item xs={6}>
<Grid container spacing={1}>

<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Username:",
valueName: "username",
disabled: true,
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getTextField({
label: "English Name:",
valueName: "enName",
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Created Date:",
valueName: "createDate",
disabled: true,
form: formik
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Prefix:",
valueName: "prefix",
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Chinese Name:",
valueName: "chName",
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Last Updated:",
valueName: "modifieDate",
disabled: true,
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getComboField({
label: "ID Type:",
valueName: "idDocType",
disabled: (!editMode),
dataList: ComboData.idDocType,
filterOptions: (options) => options,
getOptionLabel: (item) => item ? typeof item === 'string' ? item : (item["type"] ? item["type"] + "-" + item["label"] : "") : "",
onInputChange: (event, newValue, setInputValue) => {
if (newValue == null) {
setInputValue("");
}
let _val = newValue.split("-");
if (_val[0]) {
setInputValue(_val[0]);
}
},
onChange: (event, newValue) => {
if (newValue == null) {
formik.setFieldValue("idDocType", "");
return;
}
formik.setFieldValue("idDocType", newValue.type);
},
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getPhoneField({
label: "Contact Tel:",
valueName: {
code: "tel_countryCode",
num: "phoneNumber"
},
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
Verified:
</Grid>


{
currentUserData.verifiedBy || editMode ?
<Grid item xs={12} md={6} lg={6}>
{FieldUtils.initField({
valueName:"verifiedStatus",
disabled:true,
form: formik,
})}
valueName: "verifiedStatus",
disabled: true,
form: formik,
})}
</Grid>
:
<>
<Grid item xs={4}>
{FieldUtils.initField({
valueName:"verifiedStatus",
disabled:true,
<Grid item xs={10} md={4} lg={4}>
{FieldUtils.initField({
valueName: "verifiedStatus",
disabled: true,
form: formik,
})}
</Grid>
@@ -304,174 +315,186 @@ const UserInformationCard_Individual = ({formData, loadDataFun}) => {
</Button>
</Grid>
</>
}
</Grid>
}

</Grid>
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
ID No.:
</Grid>
<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
ID No.:
</Grid>

<Grid item lg={6}>
<Grid container>
{formik.values.idDocType =="HKID"?
<Grid item xs={12} md={6} lg={6}>
<Grid container>
{formik.values.idDocType == "HKID" ?
<>
<Grid item lg={8}>
{FieldUtils.initField({
valueName:"identification",
disabled:(!editMode),
form: formik,
placeholder:"證件號碼",
inputProps:{
maxLength: 7,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.initField({
valueName:"checkDigit",
disabled:(!editMode),
form: formik
})}
</Grid>
</>:
<Grid item lg={8}>
{FieldUtils.initField({
valueName: "identification",
disabled: (!editMode),
form: formik,
placeholder: "證件號碼",
inputProps: {
maxLength: 7,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.initField({
valueName: "checkDigit",
disabled: (!editMode),
form: formik
})}
</Grid>
</> :
<Grid item lg={12}>
{FieldUtils.initField({
valueName:"identification",
disabled:(!editMode),
valueName: "identification",
disabled: (!editMode),
form: formik
})}
</Grid>
}
</Grid>
}
</Grid>
</Grid>
</Grid>
</Grid>

{FieldUtils.getPhoneField({
label:"Fax No.:",
valueName:{
code: "fax_countryCode",
num:"faxNumber"
},
disabled:(!editMode),
form: formik
})}

{FieldUtils.getTextField({
label:"Last Login:",
valueName:"lastLoginDate",
disabled:true,
form: formik
})}

{FieldUtils.getComboField({
label:"Country:",
valueName:"country",
dataList: ComboData.country,
disabled:(!editMode),
form: formik
})}

{FieldUtils.getTextField({
label:"Email:",
valueName:"emailAddress",
disabled:(!editMode),
form: formik
})}


<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Status:
</Grid>
<Grid item lg={4}>
{FieldUtils.getPhoneField({
label: "Fax No.:",
valueName: {
code: "fax_countryCode",
num: "faxNumber"
},
disabled: (!editMode),
form: formik
})}
</Grid>

{
editMode?
<Grid item lg={7}>
{FieldUtils.initField({
valueName:"status",
disabled:true,
form: formik,
})}
</Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Last Login:",
valueName: "lastLoginDate",
disabled: true,
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getComboField({
label: "Country:",
valueName: "country",
dataList: ComboData.country,
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Email:",
valueName: "emailAddress",
disabled: (!editMode),
form: formik
})}
</Grid>


<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
Status:
</Grid>

{
editMode ?
<Grid item xs={12} md={6} lg={6}>
{FieldUtils.initField({
valueName: "status",
disabled: true,
form: formik,
})}
</Grid>
:
<>
<Grid item lg={4}>
{FieldUtils.initField({
valueName:"status",
disabled:true,
<Grid item lg={4}>
{FieldUtils.initField({
valueName: "status",
disabled: true,
form: formik,
})}
</Grid>
{locked?
<Grid item lg={1}>
<Button
size="large"
variant="contained"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doUnlock}
>
Active
</Button>
</Grid>
:
<Grid item lg={1}>
<Button
size="large"
variant="contained"
color="error"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doLock}
>
Lock
</Button>
</Grid>
{locked ?
<Grid item lg={1}>
<Button
size="large"
variant="contained"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doUnlock}
>
Active
</Button>
</Grid>
:
<Grid item lg={1}>
<Button
size="large"
variant="contained"
color="error"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doLock}
>
Lock
</Button>
</Grid>
}
</>
}
</Grid>
</>
}
</Grid>
</Grid>

<Grid item lg={4}>
{FieldUtils.getAddressField({
label:"Address:",
valueName:["addressLine1","addressLine2","addressLine3"],
disabled:(!editMode),
form: formik})}
label: "Address:",
valueName: ["addressLine1", "addressLine2", "addressLine3"],
disabled: (!editMode),
form: formik
})}
</Grid>

{FieldUtils.getComboField({
label:"District:",
valueName:"district",
dataList: ComboData.district,
disabled:(!editMode),
form: formik})}
<Grid item lg={4}>
{FieldUtils.getComboField({
label: "District:",
valueName: "district",
dataList: ComboData.district,
disabled: (!editMode),
form: formik
})}
</Grid>


</Grid>
</Grid>



</form>
</MainCard>
</form>
</MainCard>
);
};



+ 1
- 4
src/pages/pnspsUserDetailPage_Individual/index.js 查看文件

@@ -13,9 +13,6 @@ import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('../extra-pages/LoadingComponent')));
const UserInformationCard = Loadable(React.lazy(() => import('./UserInformationCard_Individual')));

// import UserInformationCard from "./UserInformationCard_Individual";
// import LoadingComponent from "../extra-pages/LoadingComponent";


// ==============================|| DASHBOARD - DEFAULT ||============================== //

@@ -75,7 +72,7 @@ const UserMaintainPage_Individual = () => {
:
<Grid container rowSpacing={4.5} columnSpacing={2.75}>
<Grid item xs={12} sx={{mb: -2.25}}>
<Typography variant="h5">Individual User</Typography>
<Typography variant="h5">Individual User Details</Typography>
</Grid>
{/*col 1*/}
<Grid item xs={12} >


+ 287
- 264
src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js 查看文件

@@ -43,7 +43,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
phoneNumber: yup.string().min(8, '請輸入8位數字').required('請輸入聯絡電話'),
faxNumber: yup.string().min(8, '請輸入8位數字').nullable(),
brExpiryDate: yup.string().min(8, '請輸入商業登記證有效日期'),
brNo: yup.string().min(8, '請輸入有效商業登記證號碼').max(8,'請輸入有效商業登記證號碼').required('請輸入商業登記證號碼'),
brNo: yup.string().min(8, '請輸入有效商業登記證號碼').max(8, '請輸入有效商業登記證號碼').required('請輸入商業登記證號碼'),
}),
onSubmit: (values) => {
HttpUtils.post({
@@ -119,7 +119,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
const doLock = () => {
setConfirmText("Confirm to Lock this Account?");
setConfirmAction({
function: function(){
function: function () {
HttpUtils.get({
url: UrlUtils.GET_USER_LOCK + "/" + userData.id,
onSuccess: function () {
@@ -133,9 +133,9 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>

const doUnlock = () => {
setConfirmText("Confirm to Un-Lock this Account?");
setConfirmAction({
function:function(){
function: function () {
HttpUtils.get({
url: UrlUtils.GET_USER_UNLOCK + "/" + userData.id,
onSuccess: function () {
@@ -153,9 +153,6 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
border={false}
content={false}
>
<Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 1 }}>
Information
</Typography>


<form onSubmit={formik.handleSubmit}>
@@ -218,301 +215,327 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
</Grid>
</Grid>
{/*end top button*/}
<Grid container spacing={1}>
{FieldUtils.getTextField({
label: "Username:",
valueName: "username",
disabled: true,
form: formik
})}

{FieldUtils.getTextField({
label: "Name:",
valueName: "contactPerson",
disabled: (!editMode),
form: formik
})}

{FieldUtils.getTextField({
label: "Created Date:",
valueName: "createDate",
disabled: true,
form: formik
})}


{FieldUtils.getTextField({
label: "Email:",
valueName: "emailBus",
disabled: (!editMode),
form: formik
})}

{FieldUtils.getPhoneField({
label: "Contact Tel:",
valueName: {
code: "tel_countryCode",
num: "phoneNumber"
},
disabled: (!editMode),
form: formik
})}

{FieldUtils.getTextField({
label: "Last Updated:",
valueName: "modifieDate",
disabled: true,
form: formik
})}

{FieldUtils.getComboField({
label: "Organization:",
valueName: "orgId",
disabled: (!editMode),
dataList: orgData,
filterOptions: (options, state) => {
if (!state || !state.inputValue) return options;
let searchStr = state.inputValue.toLowerCase().toLowerCase().trim();
const displayOptions = options.filter((option) => {
let brNo = option.brNo.toLowerCase().trim();
let enCompanyName = option.enCompanyName ? option.enCompanyName.toLowerCase().trim() : "";
let chCompanyName = option.chCompanyName ? option.chCompanyName.toLowerCase().trim() : "";
return brNo.includes(searchStr) || enCompanyName.includes(searchStr) || chCompanyName.includes(searchStr);
},
);
return displayOptions;
},
getOptionLabel: (item) => item ? typeof item === 'number' ? item + "" : (item["brNo"] ? item["brNo"] + "-" + item["enCompanyName"] : "") : "",
isOptionEqualToValue: (option, newValue, setValue, setInputValue) => {
if (option.id == newValue) {
setValue(option);
setInputValue(option["brNo"] + "-" + option["enCompanyName"]);
return true;
}
return option == newValue;
},
onInputChange: (event, newValue, setInputValue) => {
if (newValue != null) {
setInputValue(newValue);
}
},
onChange: (event, newValue) => {
if (newValue == null) {
formik.setFieldValue("orgId", "");
return;
}
formik.setFieldValue("orgId", newValue.id);
},
form: formik
})}




<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
Verified:
</Grid>
<div style={{ paddingLeft: 24, paddingRight: 24 }}>
<Grid container spacing={1}>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Username:",
valueName: "username",
disabled: true,
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Name:",
valueName: "contactPerson",
disabled: (!editMode),
form: formik
})}
</Grid>

{
currentUserData.verifiedBy || editMode ?
<Grid item xs={6}>
{FieldUtils.initField({
valueName: "verifiedStatus",
disabled: true,
form: formik,
})}
</Grid>
:
<>
<Grid item xs={4}>
{FieldUtils.initField({
valueName: "verifiedStatus",
disabled: true,
form: formik,
})}
</Grid>
<Grid item xs={1}>
<Button
size="large"
variant="contained"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={()=>{onVerifiedClick()}}
>
Verify
</Button>
</Grid>
</>
}
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Created Date:",
valueName: "createDate",
disabled: true,
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Email:",
valueName: "emailBus",
disabled: (!editMode),
form: formik
})}
</Grid>
</Grid>

{FieldUtils.getTextField({
label: "Last Login:",
valueName: "lastLoginDate",
disabled: true,
form: formik
})}
<Grid item lg={4}>
{FieldUtils.getPhoneField({
label: "Contact Tel:",
valueName: {
code: "tel_countryCode",
num: "phoneNumber"
},
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={8}></Grid>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Last Updated:",
valueName: "modifieDate",
disabled: true,
form: formik
})}
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
Status:
</Grid>
{
editMode ?
<Grid item xs={7} s={7} md={7} lg={6}>
{FieldUtils.initField({
valueName: "status",
disabled: true,
form: formik,
})}
</Grid>
:
<>

<Grid item lg={4}>
<Grid item lg={4}>
{FieldUtils.getComboField({
label: "Organization:",
valueName: "orgId",
disabled: (!editMode),
dataList: orgData,
filterOptions: (options, state) => {
if (!state || !state.inputValue) return options;
let searchStr = state.inputValue.toLowerCase().toLowerCase().trim();
const displayOptions = options.filter((option) => {
let brNo = option.brNo.toLowerCase().trim();
let enCompanyName = option.enCompanyName ? option.enCompanyName.toLowerCase().trim() : "";
let chCompanyName = option.chCompanyName ? option.chCompanyName.toLowerCase().trim() : "";
return brNo.includes(searchStr) || enCompanyName.includes(searchStr) || chCompanyName.includes(searchStr);
},
);
return displayOptions;
},
getOptionLabel: (item) => item ? typeof item === 'number' ? item + "" : (item["brNo"] ? item["brNo"] + "-" + item["enCompanyName"] : "") : "",
isOptionEqualToValue: (option, newValue, setValue, setInputValue) => {
if (option.id == newValue) {
setValue(option);
setInputValue(option["brNo"] + "-" + option["enCompanyName"]);
return true;
}
return option == newValue;
},
onInputChange: (event, newValue, setInputValue) => {
if (newValue != null) {
setInputValue(newValue);
}
},
onChange: (event, newValue) => {
if (newValue == null) {
formik.setFieldValue("orgId", "");
return;
}
formik.setFieldValue("orgId", newValue.id);
},
form: formik
})}
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
Verified:
</Grid>

{
currentUserData.verifiedBy || editMode ?
<Grid item xs={12} md={6} lg={6}>
{FieldUtils.initField({
valueName: "status",
valueName: "verifiedStatus",
disabled: true,
form: formik,
})}
</Grid>

{formik.values.locked ?
<Grid lg={1}>
<Button
size="large"
variant="contained"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doUnlock}
>
Active
</Button>
:
<>
<Grid item xs={10} md={4} lg={4}>
{FieldUtils.initField({
valueName: "verifiedStatus",
disabled: true,
form: formik,
})}
</Grid>
:
<Grid item lg={1}>
<Grid item xs={1} md={1} lg={1}>
<Button
size="large"
variant="contained"
color="error"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doLock}
onClick={() => { onVerifiedClick() }}
>
Lock
Verify
</Button>
</Grid>
}
</>
}

</>
}
</Grid>
</Grid>

<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Last Login:",
valueName: "lastLoginDate",
disabled: true,
form: formik
})}
</Grid>

<Grid item lg={8}></Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
Status:
</Grid>
{
editMode ?
<Grid item xs={12} md={6} lg={6}>
{FieldUtils.initField({
valueName: "status",
disabled: true,
form: formik,
})}
</Grid>
:
<>

<Grid item xs={10} md={4} lg={4}>
{FieldUtils.initField({
valueName: "status",
disabled: true,
form: formik,
})}
</Grid>

{formik.values.locked ?
<Grid item xs={1} md={1} lg={1}>
<Button
size="large"
variant="contained"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doUnlock}
>
Active
</Button>
</Grid>
:
<Grid item xs={1} md={1} lg={1}>
<Button
size="large"
variant="contained"
color="error"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doLock}
>
Lock
</Button>
</Grid>
}

</>
}



</Grid>
</Grid>
</Grid>

</div>
<div style={{ paddingLeft: 24, paddingRight: 24 }}>
<Grid container spacing={1} >

<Grid item lg={12} >
<Grid container alignItems={"center"}>
<Grid item lg={1} >
<Typography variant="h5" sx={{ display: 'flex', alignItems: 'center' }}>
Organization
</Typography>
</Grid>
<Grid item lg={2} >
<Button variant="contained"
onClick={createOrgClick}
>
Create Organization
</Button>
</Grid>
</Grid>
</Grid>

<Grid container spacing={1}>
<Grid item lg={1} >
<Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 1 }}>
Organization
</Typography>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Org.Name (English):",
valueName: "enCompanyName",
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={2}>
<Button variant="contained"
onClick={createOrgClick}
>
Create Organization
</Button>
<Grid item lg={4}>
{FieldUtils.getTextField({
label: "Org.Name (Chinese):",
valueName: "chCompanyName",
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getTextField({
label: "BR No.:",
valueName: "brNo",
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getComboField({
label: "Country:",
valueName: "country",
dataList: ComboData.country,
disabled: (!editMode),
form: formik
})}
</Grid>
</Grid>
<Grid container spacing={1}>

{FieldUtils.getTextField({
label: "Org.Name (English):",
valueName: "enCompanyName",
disabled: (!editMode),
form: formik
})}

{FieldUtils.getTextField({
label: "Org.Name (Chinese):",
valueName: "chCompanyName",
disabled: (!editMode),
form: formik
})}

{FieldUtils.getTextField({
label: "BR No.:",
valueName: "brNo",
disabled: (!editMode),
form: formik
})}

{FieldUtils.getComboField({
label: "Country:",
valueName: "country",
dataList: ComboData.country,
disabled: (!editMode),
form: formik
})}

{FieldUtils.getPhoneField({
label: "Fax No.:",
valueName: {
code: "fax_countryCode",
num: "faxNumber"
},
disabled: (!editMode),
form: formik
})}

{FieldUtils.getDateField({
label: "BR Expiry Date.:",
valueName: "brExpiryDate",
disabled: (!editMode),
form: formik
})}

{FieldUtils.getAddressField({
label: "Address:",
valueName: ["addressLine1", "addressLine2", "addressLine3"],
disabled: (!editMode),
form: formik
})}

{FieldUtils.getComboField({
label: "District:",
valueName: "district",
dataList: ComboData.district,
disabled: (!editMode),
form: formik
})}
<Grid item lg={4}>
{FieldUtils.getPhoneField({
label: "Fax No.:",
valueName: {
code: "fax_countryCode",
num: "faxNumber"
},
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getDateField({
label: "BR Expiry Date.:",
valueName: "brExpiryDate",
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getAddressField({
label: "Address:",
valueName: ["addressLine1", "addressLine2", "addressLine3"],
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item lg={4}>
{FieldUtils.getComboField({
label: "District:",
valueName: "district",
dataList: ComboData.district,
disabled: (!editMode),
form: formik
})}
</Grid>
</Grid>
</Grid>
</div>
</form>

<div>
@@ -533,8 +556,8 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
<Typography variant="h3" style={{ padding: '16px' }}>{confirmText}</Typography>
</DialogContent>
<DialogActions>
<Button onClick={() => {setIsConfirmPopUp(false)}}>Close</Button>
<Button onClick={() => {confirmAction?.function();}}>Confirm</Button>
<Button onClick={() => { setIsConfirmPopUp(false) }}>Close</Button>
<Button onClick={() => { confirmAction?.function(); }}>Confirm</Button>
</DialogActions>
</Dialog>
</div>


+ 1
- 1
src/pages/pnspsUserDetailPage_Organization/index.js 查看文件

@@ -85,7 +85,7 @@ const UserMaintainPage_Organization = () => {
:
<Grid container rowSpacing={4.5} columnSpacing={2.75}>
<Grid item xs={12} sx={{mb: -2.25}}>
<Typography variant="h5">Organization User</Typography>
<Typography variant="h5">Organization User Details</Typography>
</Grid>
{/*col 1*/}
<Grid item xs={12} >


+ 77
- 108
src/utils/FieldUtils.js 查看文件

@@ -5,103 +5,98 @@ import {

import Combo from "./Combo";

export const notNullFieldLabel=(label)=>{
return (<>{label}<span style={{"color": "red"}}>*</span></>)
export const notNullFieldLabel = (label) => {
return (<>{label}<span style={{ "color": "red" }}>*</span></>)
}

export const getDateField = ({ label, valueName, form, disabled }) => {
return <Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item lg={4}
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
{label}
</Grid>
<Grid item lg={6}>
{initField({
type: "date",
valueName: valueName,
form: form,
disabled: disabled
})}
</Grid>
return <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
{label}
</Grid>
<Grid item xs={12} md={6} lg={6}>
{initField({
type: "date",
valueName: valueName,
form: form,
disabled: disabled
})}
</Grid>
</Grid>;
}

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

export const getTextArea = ({ label, valueName, form, disabled, ...props }) => {
return <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center' }}>
{label}
</Grid>
<Grid item xs={12} md={6} lg={6}>
{initField({
type: "text",
valueName: valueName,
form: form,
disabled: disabled,
multiline: true,
row: 10,
minRows: 4,
maxRows: 4,
props
})}
</Grid>
</Grid>;
<Grid item xs={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}>
{label}
</Grid>
<Grid item xs={12} md={6} lg={6}>
{initField({
type: "text",
valueName: valueName,
form: form,
disabled: disabled,
multiline: true,
row: 10,
minRows: 4,
maxRows: 4,
props
})}
</Grid>
</Grid>;
}

export const getPhoneField = ({ label, valueName, form, disabled }) => {
return <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3}
sx={{display: 'flex', alignItems: 'center' }}>
{label}
</Grid>
<Grid item xs={12} md={9} lg={9}>
<Stack direction="row">
{initField({
type: "tel",
valueName: valueName.code,
form: form,
disabled: disabled,
width:'25%'
})}
{initField({
type: "tel",
valueName: valueName.num,
form: form,
disabled: disabled
})}
</Stack>
</Grid>
</Grid>;
<Grid item xs={12} md={3} lg={3}
sx={{ display: 'flex', alignItems: 'center' }}>
{label}
</Grid>
<Grid item xs={12} md={6} lg={6}>
<Stack direction="row">
{initField({
type: "tel",
valueName: valueName.code,
form: form,
disabled: disabled,
width: '25%'
})}
{initField({
type: "tel",
valueName: valueName.num,
form: form,
disabled: disabled
})}
</Stack>
</Grid>
</Grid>;
}


export const getAddressField = ({ label, valueName, form, disabled }) => {
return <Grid item lg={4} >
<Grid container alignItems={"top"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'top' }}>
return <Grid container alignItems={"top"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'top' }}>
<Grid item lg={12} sx={{ alignItems: 'center' }}>{label}</Grid>
</Grid>
<Grid item lg={6}>
<Grid item xs={12} md={6} lg={6}>
<Grid item lg={12}>
{initField({
type: "text",
@@ -127,18 +122,15 @@ export const getAddressField = ({ label, valueName, form, disabled }) => {
})}
</Grid>
</Grid>
</Grid>
</Grid>;
</Grid>;
}

export const getComboField = ({ label, dataList, valueName, form, disabled, getOptionLabel, onInputChange, onChange, filterOptions, ...props }) => {
return <Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item lg={4}
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
return <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
{label}
</Grid>
<Grid item lg={6}>
<Grid item xs={12} md={6} lg={6}>
<Combo
valueName={valueName}
disabled={disabled}
@@ -150,35 +142,12 @@ export const getComboField = ({ label, dataList, valueName, form, disabled, getO
onChange={onChange}
{...props}
/>
{/* <Autocomplete
id={key}
name={key}
disabled={disabled}
options={dataList}
value={form.values[key]|| null}
getOptionLabel={option => option?(displayField?option[displayField]:option):""}
onChange={(e, val) => {
console.log(val);
let v = val;
if(valueKey){
v = val[valueKey];
}
form.setFieldValue(key, v);
}}
renderInput={params => (
<TextField
fullWidth
name={key}
{...params}
/>
)}
/> */}
</Grid>
</Grid>
</Grid>;
</Grid>;
}

export const initField = ({ type, valueName, form, disabled, multiline, placeholder, inputProps,width, ...props }) => {
export const initField = ({ type, valueName, form, disabled, multiline, placeholder, inputProps, width, ...props }) => {
let err = Boolean(form.errors[valueName]);

return <TextField
@@ -199,7 +168,7 @@ export const initField = ({ type, valueName, form, disabled, multiline, placehol
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
width:width?width:'100%'
width: width ? width : '100%'
}}
{...props}
/>


Write Preview
Loading…
取消
儲存