PNSPS-frontend-MaterialUI/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.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 yup from 'yup';

import { useFormik } from 'formik';
import * as FieldUtils from "../../utils/FieldUtils";
import * as HttpUtils from '../../utils/HttpUtils';
import * as UrlUtils from "../../utils/ApiPathConst";
import * as ComboData from "../../utils/ComboData";

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


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({
            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(),
            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位數字').required('請輸入8位數字'),
        }),
        onSubmit:values=>{
            console.log(values);
            HttpUtils.post({
                url: UrlUtils.POST_IND_USER+"/"+formData.id,
                params: {
                    prefix: values.prefix,
                    enName: values.enName,
                    chName: values.chName,
                    idDocType: values.idDocType,
                    mobileNumber: {
                        countryCode: values.tel_countryCode,
                        phoneNumber: values.phoneNumber
                    },
                    identification: values.identification,
                    checkDigit: values.checkDigit,
                    faxNo:{
                        countryCode: values.fax_countryCode,
                        faxNumber: values.faxNumber
                    },
                    emailAddress:values.emailAddress,
                    address:{
                        country:values.country,
                        district:values.district,
                        addressLine1: values.addressLine1,
                        addressLine2: values.addressLine2,
                        addressLine3: values.addressLine3,
                    },
                },
                onSuccess: function(){
                        loadDataFun();
                }
            });
        }
    });



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

    useEffect(() => {
        setLocked(currentUserData.locked);
    }, [currentUserData]);

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

    const onVerifiedClick = () => {
        HttpUtils.get({
            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();
            }
        }); 
    };

    const doUnlock = () => {
        HttpUtils.get({
            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>

                <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'
                                }}
                            >
                                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}>
                                        {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>

                        <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={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={12}>
                                            {FieldUtils.initField({
                                                valueName:"identification",
                                                disabled:(!editMode),
                                                form: formik
                                            })}
                                        </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>

                                {
                                    editMode?
                                        <Grid item lg={7}>
                                            {FieldUtils.initField({
                                                valueName:"status",
                                                disabled:true,
                                                form: formik,
                                            })}
                                        </Grid>
                                    :
                                    <>
                                    <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>
                                        }
                                        </>
                                    }
                            </Grid>
                        </Grid>

                        {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>



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

export default UserInformationCard_Individual;