PNSPS-frontend-MaterialUI/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js

// material-ui
import {
    Grid, Typography, Button,
    Dialog, DialogTitle, DialogContent, DialogActions
} from '@mui/material';
import MainCard from "../../../components/MainCard";
import * as React 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';
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
import Loadable from 'components/Loadable';
import { lazy } from 'react';
// ==============================|| DASHBOARD - DEFAULT ||============================== //


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 [onReady, setOnReady] = React.useState(false);

    React.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({
            contactPerson: yup.string().max(255).required('請輸入姓名'),
            enCompanyName: yup.string().max(255).required('請輸入英文名稱'),
            chCompanyName: yup.string().max(255).nullable(),
            addressLine1: yup.string().max(255).required('請輸入第一行地址'),
            addressLine2: yup.string().max(255).nullable(),
            addressLine3: yup.string().max(255).nullable(),
            emailBus: yup.string().max(255).required('請輸入電郵'),
            tel_countryCode: yup.string().min(3, '請輸入3位數字').required('請輸入國際區號'),
            fax_countryCode: yup.string().min(3, '請輸入3位數字').nullable(),
            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('請輸入商業登記證號碼'),
        }),
        onSubmit: (values) => {
            HttpUtils.post({
                url: UrlUtils.POST_ORG_USER + "/" + userData.id,
                params: {
                    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();
                }
            });
        }

    });


    React.useEffect(() => {
        if (Object.keys(userData).length > 0) {
            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 = () => {
        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 = () => {
        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 = () => {
        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}
        >

            {!onReady?
            <LoadingComponent />
            :
                <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*/}
                    <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>

                            <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 item lg={4}>
                                {FieldUtils.getPhoneField({
                                    label: "Contact Tel:",
                                    valueName: {
                                        code: "tel_countryCode",
                                        num: "phoneNumber"
                                    },
                                    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: "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"] ? 
                                        <div>BR No.: {item["brNo"]}<div>Org. Name(Eng): {item["enCompanyName"] === null ? "N/A" : item["enCompanyName"]}</div><div>Org. Name(CH): {item["chCompanyName"] === null ? "N/A" : item["chCompanyName"]}</div></div>: "") 
                                        : "",
                                    isOptionEqualToValue: (option, newValue, setValue, setInputValue) => {
                                        if (option.id == newValue || option.id == newValue.id) {
                                            setValue(option);
                                            setInputValue(option["brNo"]);
                                            return true;
                                        }
                                        return option == newValue || option.id == newValue.id;
                                    },
                                    onInputChange: (event, newValue, setInputValue) => {
                                        if (newValue !== "[object Object]" ) {
                                            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: "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} md={1} lg={1}>
                                                    <Button
                                                        size="large"
                                                        variant="contained"
                                                        sx={{
                                                            textTransform: 'capitalize',
                                                            alignItems: 'end'
                                                        }}
                                                        onClick={() => { onVerifiedClick() }}
                                                    >
                                                        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>
                                    {currentUserData.orgId==null?
                                        <Grid item lg={2} >
                                            <Button variant="contained"
                                                onClick={createOrgClick}
                                            >
                                                Create Organization
                                            </Button>
                                        </Grid>
                                        :null
                                    }
                                </Grid>
                            </Grid>

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

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

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

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

                            <Grid item lg={4}>
                                {FieldUtils.getPhoneField({
                                    label: "Fax No.:",
                                    valueName: {
                                        code: "fax_countryCode",
                                        num: "faxNumber"
                                    },
                                    disabled: true,
                                    form: formik
                                })}
                            </Grid>

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

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

                            <Grid item lg={4}>
                                {FieldUtils.getComboField({
                                    label: "District:",
                                    valueName: "district",
                                    dataList: ComboData.district,
                                    disabled: true,
                                    form: formik
                                })}
                            </Grid>
                        </Grid>
                    </div>
                </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>

    );
};

export default UserInformationCard_Organization;