PNSPS-frontend-MaterialUI/src/pages/OrganizationDetailPage/OrganizationCard.js

// material-ui
import {
    Grid, Typography, Button
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import { useFormik } from 'formik';
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";

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


const OrganizationCard = ({ userData, loadDataFun, id }) => {

    const [currentUserData, setCurrentUserData] = useState(userData);
    const [editMode, setEditMode] = useState(false);
    const [createMode, setCreateMode] = useState(false);

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: currentUserData,
        validationSchema: yup.object().shape({
            enCompanyName: yup.string().max(255).required('請輸入英文名稱'),
            chCompanyName: yup.string().max(255).required('請輸入中文姓名'),
            addressLine1: yup.string().max(255).required('請輸入第一行地址'),
            addressLine2: yup.string().max(255, "length must <= 255"),
            addressLine3: yup.string().max(255, "length must <= 255"),
            fax_countryCode: yup.string().min(3).required('請輸入國際區號'),
            tel_countryCode: yup.string().min(3).required('請輸入國際區號'),
            phoneNumber: yup.string().min(8).required('請輸入聯絡電話'),
            faxNumber: yup.string().min(8).required('請輸入8位數字'),
            brExpiryDate: yup.string().min(8).required('請輸入商業登記證有效日期'),
            brNo: yup.string().min(8).required('請輸入商業登記證號碼'),
        }),
        onSubmit: vaule => {
            console.log(vaule)
            HttpUtils.post({
                url: UrlUtils.POST_ORG_SAVE_PATH,
                params: {
                    id: id > 0 ? id : null,
                    enCompanyName: vaule.enCompanyName,
                    chCompanyName: vaule.chCompanyName,
                    brNo: vaule.brNo,
                    brExpiryDate: vaule.brExpiryDate,
                    enCompanyNameTemp: vaule.enCompanyNameTemp,
                    chCompanyNameTemp: vaule.chCompanyNameTemp,
                    brExpiryDateTemp: vaule.brExpiryDateTemp,
                    contactPerson: vaule.contactPerson,
                    contactTel: {
                        countryCode: vaule.tel_countryCode,
                        phoneNumber: vaule.phoneNumber
                    },
                    faxNo: {
                        countryCode: vaule.fax_countryCode,
                        faxNumber: vaule.faxNumber
                    },
                    addressTemp: {
                        country: vaule.country,
                        district: vaule.district,
                        addressLine1: vaule.addressLine1,
                        addressLine2: vaule.addressLine2,
                        addressLine3: vaule.addressLine3,
                    }
                },
                onSuccess: function () {
                    loadDataFun();
                    setEditMode(false);
                }
            });
        }
    });

    useEffect(() => {
        setCreateMode(id <= 0);
        setEditMode(id <= 0);
        setCurrentUserData(userData);
    }, [userData]);


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

    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*/}
                <Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">
                    <Grid container maxWidth justifyContent="flex-start">

                        {editMode ?
                            <>
                                {createMode ?
                                    <>
                                        <Grid item sx={{ ml: 3, mr: 3 }}>
                                            <Button
                                                size="large"
                                                variant="contained"
                                                type="submit"
                                                sx={{
                                                    textTransform: 'capitalize',
                                                    alignItems: 'end'
                                                }}
                                            >
                                                Create
                                            </Button>
                                        </Grid>
                                    </> :
                                    <>
                                        <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>
                {/*top*/}


                <Grid container spacing={1}>

                    {FieldUtils.getTextField({
                        label: "BR No.:",
                        valueName: "brNo",
                        disabled: (!editMode && !createMode),
                        form: formik
                    })}

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

                    {FieldUtils.getTextField({
                        label: "Name (Eng):",
                        valueName: "enCompanyName",
                        disabled: (!editMode && !createMode),
                        form: formik
                    })}

                    {FieldUtils.getTextField({
                        label: "Name (Ch):",
                        valueName: "chCompanyName",
                        disabled: (!editMode && !createMode),
                        form: formik
                    })}

                    {FieldUtils.getDateField({
                        label: "Expiry Date:",
                        valueName: "brExpiryDate",
                        disabled: (!editMode && !createMode),
                        form: formik
                    })}

                    {FieldUtils.getTextField({
                        label: "Contact Person:",
                        valueName: "contactPerson",
                        disabled: (!editMode && !createMode),
                        form: formik
                    })}

                    {FieldUtils.getPhoneField({
                        label: "Contact Tel:",
                        valueName: {
                            code: "tel_countryCode",
                            num: "phoneNumber"
                        },
                        disabled: (!editMode && !createMode),
                        form: formik
                    })}

                    {FieldUtils.getPhoneField({
                        label: "Fax No:",
                        valueName: {
                            code: "fax_countryCode",
                            num: "faxNumber"
                        },
                        disabled: (!editMode && !createMode),
                        form: formik
                    })}

                    {FieldUtils.getComboField({
                        label: "Country:",
                        valueName: "country",
                        disabled: (!editMode && !createMode),
                        dataList: ComboData.country,
                        form: formik
                    })}

                    {FieldUtils.getComboField({
                        label: "District:",
                        valueName: "district",
                        disabled: (!editMode && !createMode),
                        dataList: ComboData.district,
                        form: formik
                    })}


                    {FieldUtils.getAddressField({
                        label: "Address:",
                        valueName: ["addressLine1", "addressLine2", "addressLine3"],
                        disabled: (!editMode && !createMode),
                        form: formik
                    })}

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

                </Grid>

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

export default OrganizationCard;