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

// material-ui
import {
    Grid, Typography, Button
} 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';

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


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

    const [currentUserData, setCurrentUserData] = useState(userData);

    const navigate = useNavigate();

    const formik = useFormik({
        enableReinitialize:true,
        initialValues:currentUserData,
        validationSchema:yup.object().shape({
            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(),
            fax_countryCode: yup.string().min(3,"請輸入國際區號").nullable(),
            tel_countryCode: yup.string().min(3,"請輸入國際區號"),
            phoneNumber: yup.string().min(8, '請輸入有效聯絡電話').required('請輸入聯絡電話'),
            faxNumber: yup.string().min(8).nullable(),
            brExpiryDate: yup.string().min(8).required('請輸入商業登記證有效日期'),
            brNo: yup.string().min(8, '請輸入有效商業登記證號碼').max(8,'請輸入有效商業登記證號碼').required('請輸入商業登記證號碼'),
        }),
        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){
                    navigate('/org/'+responseData.id);
                }
            });
        }
    });

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

    return (
            <MainCard elevation={0}
                      border={false}
                      content={false}
            >
                <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
                    Information
                </Typography>

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



                <form onSubmit={formik.handleSubmit}>

                <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*/}

                    {FieldUtils.getTextField({
                        label:"BR No.:",
                        valueName:"brNo",
                        form: formik})}

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

                    {FieldUtils.getTextField({
                        label:FieldUtils.notNullFieldLabel("Name (Eng):"),
                        valueName:"enCompanyName",
                        form: formik})}

                    {FieldUtils.getTextField({
                        label:"Name (Ch):",
                        valueName:"chCompanyName",
                        form: formik})}

                    {FieldUtils.getDateField({
                        label:FieldUtils.notNullFieldLabel("Expiry Date:"),
                        valueName:"brExpiryDate",
                        form: formik})}

                    {FieldUtils.getTextField({
                        label:FieldUtils.notNullFieldLabel("Contact Person:"),
                        valueName:"contactPerson",
                        form: formik})}

                    {FieldUtils.getPhoneField({
                        label:FieldUtils.notNullFieldLabel("Contact Tel:"),
                        valueName:{
                            code:"tel_countryCode",
                            num:"phoneNumber"
                        },
                        form: formik})}

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

                     {FieldUtils.getComboField({
                        label:FieldUtils.notNullFieldLabel("Country:"),
                        valueName:"country",
                        dataList: ComboData.country,
                        form: formik})}

                    {FieldUtils.getComboField({
                        label:FieldUtils.notNullFieldLabel("District:"),
                        valueName:"district",
                        dataList: ComboData.district,
                        form: formik})}

                    {FieldUtils.getAddressField({
                        label:FieldUtils.notNullFieldLabel("Address:"),
                        valueName:["addressLine1","addressLine2","addressLine3"],
                        form: formik})}
                    </Grid>
                </form>
            </MainCard>
    );
};

export default OrganizationCard_loadFromUser;