PNSPS-frontend-MaterialUI/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js

// material-ui
import {
    Grid, Typography, Button,
} 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';
import * as UrlUtils from "../../utils/ApiPathConst";
import * as ComboData from "../../utils/ComboData";

import { useFormik } from 'formik';
import * as yup from 'yup';

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


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

    const [currentUserData, setCurrentUserData] = useState(userData);
    const [editMode, setEditMode] = useState(false);
    
    const formik = useFormik({
        enableReinitialize:true,
        initialValues:currentUserData,
        validationSchema:yup.object().shape({
            enName: yup.string().max(255).required('請輸入英文姓名'),
            chName: yup.string().max(255),
            enCompanyName: yup.string().max(255),
            chCompanyName: yup.string().max(255),
            addressLine1: yup.string().max(255).required('請輸入第一行地址'),
            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,'請輸入商業登記證號碼'),
        }),
        onSubmit:(values)=>{
            HttpUtils.post({
                url: UrlUtils.POST_IND_USER+"/"+userData.id,
                params: {
                    chName: values.chName,
                    enName: values.enName,
                    contactTel: {
                        countryCode: values.tel_countryCode,
                        phoneNumber: values.phoneNumber
                    },
                    faxNo: {
                        countryCode: values.fax_countryCode,
                        faxNumber: values.faxNumber
                    },
                    addressBus: {
                        country: values.country,
                        district: values.district,
                        addressLine1: values.addressLine1,
                        addressLine2: values.addressLine2,
                        addressLine3: values.addressLine3,
                    },
                    identification: values.identification,
                    emailBus:values.emailBus,
                    contactPerson: values.contactPerson,
                    enCompanyName: values.enCompanyName,
                    chCompanyName: values.chCompanyName,
                    orgId: values.orgId,
                    brNo: values.brNo,
                    brExpiryDate: values.brExpiryDate,
    
                },
                onSuccess: function(){
                    loadDataFun();
                }
            });
        }
    
    });


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

    const onEditClick = () => {
        setEditMode(true);
    };

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

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

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

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

    
    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 button*/}
                <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>
                        </>
                    }
                    
                        
                    </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:"Chinese Name:",
                    valueName:"chName",
                    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
                    })}


                    {FieldUtils.getTextField({
                        label:"Email:",
                        valueName:"emailBus",
                        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}>
                                        {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>
                        </Grid>

                         {FieldUtils.getTextField({
                        label:"Last Login:",
                        valueName:"lastLoginDate",
                        disabled:true,
                        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>
                                {
                                    editMode?
                                        <Grid item xs={7} s={7} md={7} lg={6}>
                                             {FieldUtils.initField({
                                                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>
                                        }

                                        </>
                                }
                                


                            </Grid>
                        </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}>
                            <Button variant="contained"
                                onClick={createOrgClick}
                            >
                                Create Organization
                            </Button>
                        </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.getTextField({
                        label:"Contact Person:",
                        valueName:"contactPerson",
                        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.getComboField({
                        label:"Country:",
                        valueName:"country",
                        dataList: ComboData.country,
                        disabled:(!editMode),
                        form: formik
                    })}

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

export default UserInformationCard_Organization;