PNSPS-frontend-MaterialUI/src/pages/pnspsUserDetailPage_Individual/UserInformationCard_Individual.js

// material-ui
import {
    Grid, 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";
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
import Loadable from 'components/Loadable';
import { lazy } from 'react';
// ==============================|| DASHBOARD - DEFAULT ||============================== //


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

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

    useEffect(() => {
        //if state data are ready and assign to different field
        // console.log(currentApplicationDetailData)
        if (Object.keys(currentUserData).length > 0) {
            setOnReady(true);
        }
    }, [currentUserData]);
    
    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位數字').nullable(),
        }),
        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(() => {
        if (Object.keys(formData).length > 0) {
            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}
        >
            {!onReady?
            <LoadingComponent />
            :
                <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 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}>

                        <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,
                                            })}
                                        </Grid>
                                        :
                                        <>
                                            <Grid item xs={10} md={4} lg={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={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
                                    ID No.:
                                </Grid>

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

                        <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.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,
                                                    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>

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



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

export default UserInformationCard_Individual;