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

fix bug

master
Anna Ho 1 year ago
parent
5a8674a210
commit
bc0713dd08
3 changed files with 515 additions and 441 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +145
    -122
      src/pages/OrganizationDetailPage/OrganizationCard.js
  2. +1
    -1
      src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js
  3. +369
    -318
      src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js

+ 145
- 122
src/pages/OrganizationDetailPage/OrganizationCard.js View File

@@ -6,7 +6,7 @@ import MainCard from "../../components/MainCard";
import * as React from "react";
import { useFormik } from 'formik';
import * as yup from 'yup';
import {useEffect, useState} from "react";
import { useEffect, useState } from "react";
import * as HttpUtils from '../../utils/HttpUtils';
import * as UrlUtils from "../../utils/ApiPathConst";
import * as FieldUtils from "../../utils/FieldUtils";
@@ -15,34 +15,34 @@ import * as ComboData from "../../utils/ComboData";
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const OrganizationCard = ({userData, loadDataFun, id}) => {
const OrganizationCard = ({ userData, loadDataFun, id }) => {

const [currentUserData, setCurrentUserData] = useState(userData);
const [editMode, setEditMode] = useState(false);
const [createMode, setCreateMode] = useState(false);

const formik = useFormik({
enableReinitialize:true,
initialValues:currentUserData,
validationSchema:yup.object().shape({
enCompanyName: yup.string().max(255).required('請輸入英文名稱'),
chCompanyName: yup.string().max(255).required('請輸入中文姓名'),
addressLine1: yup.string().max(255).required('請輸入第一行地址'),
addressLine2: yup.string().max(255, "length must <= 255"),
addressLine3: yup.string().max(255, "length must <= 255"),
fax_countryCode: yup.string().min(3).required('請輸入國際區號'),
tel_countryCode: yup.string().min(3).required('請輸入國際區號'),
phoneNumber: yup.string().min(8).required('請輸入聯絡電話'),
faxNumber: yup.string().min(8).required('請輸入8位數字'),
brExpiryDate: yup.string().min(8).required('請輸入商業登記證有效日期'),
brNo: yup.string().min(8).required('請輸入商業登記證號碼'),
}),
onSubmit: vaule =>{
enableReinitialize: true,
initialValues: currentUserData,
validationSchema: yup.object().shape({
enCompanyName: yup.string().max(255).required('請輸入英文名稱'),
chCompanyName: yup.string().max(255).required('請輸入中文姓名'),
addressLine1: yup.string().max(255).required('請輸入第一行地址'),
addressLine2: yup.string().max(255, "length must <= 255"),
addressLine3: yup.string().max(255, "length must <= 255"),
fax_countryCode: yup.string().min(3).required('請輸入國際區號'),
tel_countryCode: yup.string().min(3).required('請輸入國際區號'),
phoneNumber: yup.string().min(8).required('請輸入聯絡電話'),
faxNumber: yup.string().min(8).required('請輸入8位數字'),
brExpiryDate: yup.string().min(8).required('請輸入商業登記證有效日期'),
brNo: yup.string().min(8).required('請輸入商業登記證號碼'),
}),
onSubmit: vaule => {
console.log(vaule)
HttpUtils.post({
url: UrlUtils.POST_ORG_SAVE_PATH,
params: {
id:id>0?id:null,
id: id > 0 ? id : null,
enCompanyName: vaule.enCompanyName,
chCompanyName: vaule.chCompanyName,
brNo: vaule.brNo,
@@ -64,10 +64,10 @@ const OrganizationCard = ({userData, loadDataFun, id}) => {
district: vaule.district,
addressLine1: vaule.addressLine1,
addressLine2: vaule.addressLine2,
addressLine3: vaule.addressLine3,
addressLine3: vaule.addressLine3,
}
},
onSuccess: function(){
onSuccess: function () {
loadDataFun();
setEditMode(false);
}
@@ -76,8 +76,8 @@ const OrganizationCard = ({userData, loadDataFun, id}) => {
});

useEffect(() => {
setCreateMode(id<=0);
setEditMode(id<=0);
setCreateMode(id <= 0);
setEditMode(id <= 0);
setCurrentUserData(userData);
}, [userData]);

@@ -87,59 +87,72 @@ const OrganizationCard = ({userData, loadDataFun, id}) => {
};

return (
<MainCard elevation={0}
border={false}
content={false}
>
<Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
Information
</Typography>
<form onSubmit={formik.handleSubmit}>
{/*top*/}
<Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"start"} justifyContent="center">
<MainCard elevation={0}
border={false}
content={false}
>
<Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 1 }}>
Information
</Typography>
<form onSubmit={formik.handleSubmit}>
{/*top*/}
<Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">
<Grid container maxWidth justifyContent="flex-start">

{editMode?
<>
{createMode?
<>
<Grid item sx={{ml: 3, mr: 3}}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Create
</Button>
</Grid>
</>:
{editMode ?
<>
<Grid item sx={{ml: 3, mr: 3}}>
<Button
size="large"
variant="contained"
type="submit"
color="success"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Save
</Button>
</Grid>
</>
}
{createMode ?
<>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Create
</Button>
</Grid>
</> :
<>
<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}}>
:
<>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
@@ -152,92 +165,102 @@ const OrganizationCard = ({userData, loadDataFun, id}) => {
Edit
</Button>
</Grid>
</>
}
</>
}
</Grid>
</Grid>
{/*top*/}

<Grid container spacing={1}>

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

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

{FieldUtils.getTextField({
label:"Name (Eng):",
valueName:"enCompanyName",
disabled:(!editMode&&!createMode),
form: formik})}
label: "Name (Eng):",
valueName: "enCompanyName",
disabled: (!editMode && !createMode),
form: formik
})}

{FieldUtils.getTextField({
label:"Name (Ch):",
valueName:"chCompanyName",
disabled:(!editMode&&!createMode),
form: formik})}
label: "Name (Ch):",
valueName: "chCompanyName",
disabled: (!editMode && !createMode),
form: formik
})}

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

{FieldUtils.getTextField({
label:"Contact Person:",
valueName:"contactPerson",
disabled:(!editMode&&!createMode),
form: formik})}
label: "Contact Person:",
valueName: "contactPerson",
disabled: (!editMode && !createMode),
form: formik
})}

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

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

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

{FieldUtils.getComboField({
label:"District:",
valueName:"district",
disabled:(!editMode&&!createMode),
label: "District:",
valueName: "district",
disabled: (!editMode && !createMode),
dataList: ComboData.district,
form: formik})}
form: formik
})}


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

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

</Grid>
</Grid>

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



+ 1
- 1
src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js View File

@@ -143,7 +143,7 @@ const UserInformationCard_Individual = ({formData, loadDataFun}) => {
alignItems: 'end'
}}
>
Cancel Edit
Reset & Back
</Button>
</Grid>


+ 369
- 318
src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js View File

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

import * as FieldUtils from "../../utils/FieldUtils";
import * as HttpUtils from '../../utils/HttpUtils';
@@ -17,15 +17,20 @@ import * as yup from 'yup';
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const UserInformationCard_Organization = ({userData, loadDataFun, orgData}) => {
const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) => {

const [currentUserData, setCurrentUserData] = React.useState(userData);
const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
const [warningText, setWarningText] = React.useState("");
const [isConfirmPopUp, setIsConfirmPopUp] = React.useState(false);
const [confirmText, setConfirmText] = React.useState("");
const [confirmAction, setConfirmAction] = React.useState();
const [editMode, setEditMode] = React.useState(false);

const [currentUserData, setCurrentUserData] = useState(userData);
const [editMode, setEditMode] = useState(false);
const formik = useFormik({
enableReinitialize:true,
initialValues:currentUserData,
validationSchema:yup.object().shape({
enableReinitialize: true,
initialValues: currentUserData,
validationSchema: yup.object().shape({
contactPerson: yup.string().max(255).required('請輸入姓名'),
enCompanyName: yup.string().max(255),
chCompanyName: yup.string().max(255),
@@ -33,16 +38,16 @@ const UserInformationCard_Organization = ({userData, loadDataFun, orgData}) => {
addressLine2: yup.string().max(255),
addressLine3: yup.string().max(255),
emailBus: 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位數字'),
brExpiryDate: yup.string().min(8,'請輸入商業登記證有效日期'),
brNo: yup.string().min(8,'請輸入商業登記證號碼'),
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位數字'),
brExpiryDate: yup.string().min(8, '請輸入商業登記證有效日期'),
brNo: yup.string().min(8, '請輸入商業登記證號碼'),
}),
onSubmit:(values)=>{
onSubmit: (values) => {
HttpUtils.post({
url: UrlUtils.POST_IND_USER+"/"+userData.id,
url: UrlUtils.POST_IND_USER + "/" + userData.id,
params: {
contactTel: {
countryCode: values.tel_countryCode,
@@ -60,25 +65,25 @@ const UserInformationCard_Organization = ({userData, loadDataFun, orgData}) => {
addressLine3: values.addressLine3,
},
identification: values.identification,
emailBus:values.emailBus,
emailBus: values.emailBus,
contactPerson: values.contactPerson,
enCompanyName: values.enCompanyName,
chCompanyName: values.chCompanyName,
orgId: values.orgId,
brNo: values.brNo,
brExpiryDate: values.brExpiryDate,
},
onSuccess: function(){
onSuccess: function () {
loadDataFun();
}
});
}
});


useEffect(() => {
React.useEffect(() => {
setCurrentUserData(userData);
}, [userData]);

@@ -87,197 +92,216 @@ const UserInformationCard_Organization = ({userData, loadDataFun, orgData}) => {
};

const createOrgClick = () => {
window.open("/org/fromUser/"+userData.id, "_blank", "noreferrer");
window.open("/org/fromUser/" + userData.id, "_blank", "noreferrer");
window.addEventListener("focus", onFocus)
};
const onFocus=()=>{
const onFocus = () => {
loadDataFun();
window.removeEventListener("focus", onFocus)
}

const onVerifiedClick = () => {
HttpUtils.get({
url: UrlUtils.GET_IND_USER_VERIFY+"/"+userData.id,
onSuccess: function(){
loadDataFun();
}
});
if (formik?.values?.orgId) {
HttpUtils.get({
url: UrlUtils.GET_IND_USER_VERIFY + "/" + userData.id,
onSuccess: function () {
loadDataFun();
}
});
} else {
setWarningText("Please select Organization before active this account.")
setIsWarningPopUp(true);
}

};

const doLock = () => {
HttpUtils.get({
url: UrlUtils.GET_USER_LOCK+"/"+userData.id,
onSuccess: function(){
loadDataFun();
setConfirmText("Confirm to Lock this Account?");
setConfirmAction({
function: function(){
HttpUtils.get({
url: UrlUtils.GET_USER_LOCK + "/" + userData.id,
onSuccess: function () {
loadDataFun();
}
});
}
});
});
setIsConfirmPopUp(true);
};

const doUnlock = () => {
HttpUtils.get({
url: UrlUtils.GET_USER_UNLOCK+"/"+userData.id,
onSuccess: function(){
loadDataFun();
setConfirmText("Confirm to Un-Lock this Account?");
setConfirmAction({
function:function(){
HttpUtils.get({
url: UrlUtils.GET_USER_UNLOCK + "/" + userData.id,
onSuccess: function () {
loadDataFun();
}
});
}
});
});
setIsConfirmPopUp(true);
};

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


<form onSubmit={formik.handleSubmit}>
<form onSubmit={formik.handleSubmit}>

{/*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'
}}
>
Cancel Edit
</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:"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),
{/*end top button*/}
<Grid container spacing={1}>
{FieldUtils.getTextField({
label: "Username:",
valueName: "username",
disabled: true,
form: formik
})}

{FieldUtils.getPhoneField({
label:"Contact Tel:",
valueName:{
code: "tel_countryCode",
num:"phoneNumber"
},
disabled:(!editMode),
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:"Last Updated:",
valueName:"modifieDate",
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),
label: "Organization:",
valueName: "orgId",
disabled: (!editMode),
dataList: orgData,
filterOptions:(options, state)=>{
if(!state || !state.inputValue) return options;
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);
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;
);
return displayOptions;
},
getOptionLabel:(item) => item?typeof item==='number'?item+"":(item["brNo"]?item["brNo"]+"-"+item["enCompanyName"]:""):"",
isOptionEqualToValue:(option, newValue, setValue, setInputValue) => {
if(option.id == newValue){
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"]);
setInputValue(option["brNo"] + "-" + option["enCompanyName"]);
return true;
}
return option == newValue;
},
onInputChange:(event, newValue, setInputValue)=>{
if(newValue != null){
onInputChange: (event, newValue, setInputValue) => {
if (newValue != null) {
setInputValue(newValue);
}
},
onChange:(event, newValue)=>{
if(newValue == null){
formik.setFieldValue("orgId","");
onChange: (event, newValue) => {
if (newValue == null) {
formik.setFieldValue("orgId", "");
return;
}
formik.setFieldValue("orgId",newValue.id);
formik.setFieldValue("orgId", newValue.id);
},
form: formik
})}
@@ -285,29 +309,29 @@ const UserInformationCard_Organization = ({userData, loadDataFun, orgData}) => {



<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>
<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?
{
currentUserData.verifiedBy || editMode ?
<Grid item xs={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,
valueName: "verifiedStatus",
disabled: true,
form: formik,
})}
</Grid>
@@ -319,176 +343,203 @@ const UserInformationCard_Organization = ({userData, loadDataFun, orgData}) => {
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={onVerifiedClick}
onClick={()=>{onVerifiedClick()}}
>
Verify
</Button>
</Grid>
</>
}
</Grid>
}

</Grid>
</Grid>

{FieldUtils.getTextField({
label:"Last Login:",
valueName:"lastLoginDate",
disabled:true,
{FieldUtils.getTextField({
label: "Last Login:",
valueName: "lastLoginDate",
disabled: true,
form: formik
})}
<Grid item lg={8}></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={8}></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,
valueName: "status",
disabled: true,
form: formik,
})}
</Grid>
:
<>

<Grid item lg={4}>
{FieldUtils.initField({
valueName: "status",
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>
:
<Grid item lg={1}>
<Button
size="large"
variant="contained"
color="error"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
onClick={doLock}
>
Lock
</Button>
</Grid>
{formik.values.locked ?
<Grid 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 container spacing={1}>
<Grid item lg={1} >
<Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
Organization
</Typography>
</Grid>
<Grid container spacing={1}>
<Grid item lg={1} >
<Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 1 }}>
Organization
</Typography>
</Grid>

<Grid item lg={2}>
<Grid item lg={2}>
<Button variant="contained"
onClick={createOrgClick}
>
Create Organization
</Button>
</Grid>
</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})}
{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>
</Grid>
</form>
</MainCard>
</Grid>
</form>

<div>
<Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)} >
<DialogTitle>Warning</DialogTitle>
<DialogContent style={{ display: 'flex', }}>
<Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
</DialogContent>
<DialogActions>
<Button onClick={() => setIsWarningPopUp(false)}>Close</Button>
</DialogActions>
</Dialog>
</div>
<div>
<Dialog open={isConfirmPopUp} onClose={() => setIsConfirmPopUp(false)} >
<DialogTitle>Confirm</DialogTitle>
<DialogContent style={{ display: 'flex', }}>
<Typography variant="h3" style={{ padding: '16px' }}>{confirmText}</Typography>
</DialogContent>
<DialogActions>
<Button onClick={() => {setIsConfirmPopUp(false)}}>Close</Button>
<Button onClick={() => {confirmAction?.function();}}>Confirm</Button>
</DialogActions>
</Dialog>
</div>
</MainCard>

);
};



Write Preview
Loading…
Cancel
Save