PNSPS-frontend-MaterialUI/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js

// material-ui
import {
    Grid, Button, Typography,
    Dialog, DialogTitle, DialogContent, DialogActions,
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import * as yup from 'yup';
import { useEffect, useState } from "react";
import * as HttpUtils from '../../utils/HttpUtils';
import * as UrlUtils from "../../utils/ApiPathConst";
import * as FieldUtils from "../../utils/FieldUtils";
import * as ComboData from "../../utils/ComboData";
import { useNavigate } from "react-router-dom";
import { useFormik } from 'formik';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
import Loadable from 'components/Loadable';
import { lazy } from 'react';
import { notifyCreateSuccess } from 'utils/CommonFunction';

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


const OrganizationCard_loadFromUser = ({ userData, userId }) => {

    const [currentUserData, setCurrentUserData] = useState(userData);
    const navigate = useNavigate();
    const [onReady, setOnReady] = useState(false);
    const [isFailPopUp, setIsFailPopUp] = useState(false);
    const [failText, setFailText] = useState("");

    useEffect(() => {
        //if state data are ready and assign to different field
        // console.log(currentApplicationDetailData)
        if (Object.keys(currentUserData).length > 0) {
            setOnReady(true);
        }
    }, [currentUserData]);

    function displayErrorMsg(errorMsg) {
        return <Typography variant="errorMessage1">{errorMsg}</Typography>
    }

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: currentUserData,
        validationSchema: yup.object().shape({
            enCompanyName: yup.string().max(255, displayErrorMsg("請輸入英文名稱")).required(displayErrorMsg('請輸入英文名稱')),
            chCompanyName: yup.string().max(255, displayErrorMsg('請輸入中文名稱')).nullable(),
            addressLine1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')),
            addressLine2: yup.string().max(255).nullable(),
            addressLine3: yup.string().max(255).nullable(),
            fax_countryCode: yup.string().min(3, displayErrorMsg("請輸入國際區號")).nullable(),
            tel_countryCode: yup.string().min(3, displayErrorMsg("請輸入國際區號")),
            phoneNumber: yup.string().min(8, displayErrorMsg('請輸入有效聯絡電話')).required(displayErrorMsg('請輸入聯絡電話')),
            faxNumber: yup.string().min(8).nullable(),
            brExpiryDate: yup.string().min(8).required(displayErrorMsg('請輸入商業登記證有效日期')),
            brNo: yup.string().required(displayErrorMsg('請輸入商業登記證號碼')).test('checkBrNoFormat', displayErrorMsg(displayErrorMsg(`請輸入有效商業登記證號碼 (e.g. 12341234-123-12-12-1)`)), function (value) {
                var brNo_pattern = /[0-9]{8}-[0-9]{3}-(0[1-9]|1[012])-[0-9]{2}-[0-9A-Z]{1}/
                if (value !== undefined) {
                    if (value.match(brNo_pattern)) {
                        return true
                    } else {
                        return false
                    }
                }
            }),
        }),
        onSubmit: values => {
            HttpUtils.post({
                url: UrlUtils.POST_ORG_SAVE_PATH,
                params: {
                    id: null,
                    primaryUserId: userId,
                    enCompanyName: values.enCompanyName,
                    chCompanyName: values.chCompanyName,
                    brNo: values.brNo,
                    brExpiryDate: values.brExpiryDate,
                    enCompanyNameTemp: values.enCompanyNameTemp,
                    chCompanyNameTemp: values.chCompanyNameTemp,
                    brExpiryDateTemp: values.brExpiryDateTemp,
                    contactPerson: values.contactPerson,
                    contactTel: {
                        countryCode: values.tel_countryCode,
                        phoneNumber: values.phoneNumber
                    },
                    faxNo: {
                        countryCode: values.fax_countryCode,
                        faxNumber: values.faxNumber
                    },
                    addressTemp: {
                        country: values.country,
                        district: values.district,
                        addressLine1: values.addressLine1,
                        addressLine2: values.addressLine2,
                        addressLine3: values.addressLine3,
                    }
                },
                onSuccess: function (responseData) {
                    if(responseData.msg){
                        setFailText(responseData.msg);
                        setIsFailPopUp(true);
                        return;
                    }
                    navigate('/org/' + responseData.id);
                    notifyCreateSuccess()
                }
            });
        }
    });

    useEffect(() => {
        if (Object.keys(userData).length > 0) {
            setCurrentUserData(userData);
        }
    }, [userData]);

    return (
        <MainCard elevation={0}
            border={false}
            content={false}
        >

            {/* <div style={{ border: "solid 1px;", color: "red" }}>
                    TODO: Error Summary
                    {Object.values(formik.errors).map(error => (
                        <div>{error}</div>
                    ))}
                </div> */}



            <div style={{ padding: 24 }}>
            <form onSubmit={formik.handleSubmit}>
            {!onReady?
                <LoadingComponent />
                :
                <Grid container spacing={1}>
                    {/*top*/}
                    <Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">


                        <Grid item sx={{ ml: 3, mr: 3 }}>
                            <Button
                                size="large"
                                variant="contained"
                                type="submit"
                                sx={{
                                    textTransform: 'capitalize',
                                    alignItems: 'end'
                                }}
                            >
                                Create
                            </Button>
                        </Grid>

                    </Grid>
                    {/*top*/}

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

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

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

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

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

                    <Grid item lg={4}>
                        {FieldUtils.getTextField({
                            label: FieldUtils.notNullFieldLabel("Contact Person:"),
                            valueName: "contactPerson",
                            form: formik
                        })}
                    </Grid>

                    <Grid item lg={4}>
                        {FieldUtils.getPhoneField({
                            label: FieldUtils.notNullFieldLabel("Contact Tel:"),
                            valueName: {
                                code: "tel_countryCode",
                                num: "phoneNumber"
                            },
                            form: formik
                        })}
                    </Grid>

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

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

                    <Grid item lg={4}>
                        {FieldUtils.getComboField({
                            label: FieldUtils.notNullFieldLabel("District:"),
                            valueName: "district",
                            dataList: ComboData.district,
                            form: formik
                        })}
                    </Grid>

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

            <div>
                <Dialog open={isFailPopUp} onClose={() => setIsFailPopUp(false)}  >
                    <DialogTitle><Typography variant="h3">Action Fail</Typography></DialogTitle>
                    <DialogContent style={{ display: 'flex', }}>
                        <Typography variant="h4" style={{ padding: '16px' }}>{failText}</Typography>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={() => setIsFailPopUp(false)}><Typography variant="h5">OK</Typography></Button>
                    </DialogActions>
                </Dialog>
            </div>
        </MainCard>
    );
};

export default OrganizationCard_loadFromUser;