PNSPS-frontend-MaterialUI/src/pages/Organization/DetailPage/OrganizationCard.js

// material-ui
import {
    Grid, Button, Checkbox, FormControlLabel, Typography,
    Dialog, DialogTitle, DialogContent, DialogActions,
} from '@mui/material';
// import { FormControlLabel } from '@material-ui/core';
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";
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
import Loadable from 'components/Loadable';
import { lazy } from 'react';
import { notifySaveSuccess } from 'utils/CommonFunction';

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


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

    const [creditorConfirmPopUp, setCreditorConfirmPopUp] = React.useState(false);
    const [nonCreditorConfirmPopUp, setNonCreditorConfirmPopUp] = React.useState(false);

    const [currentUserData, setCurrentUserData] = useState({});
    const [editMode, setEditMode] = useState(false);
    const [createMode, setCreateMode] = 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]);

    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).required(displayErrorMsg('請輸入英文名稱')),
            chCompanyName: yup.string().max(255, displayErrorMsg('請輸入中文名稱')).nullable(),
            addressLine1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')),
            addressLine2: yup.string().max(255, displayErrorMsg("length must <= 255")),
            addressLine3: yup.string().max(255, displayErrorMsg("length must <= 255")),
            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, displayErrorMsg('請輸入8位數字')).nullable(),
            brExpiryDate: yup.string().min(8).required(displayErrorMsg('請輸入商業登記證有效日期')),
            brNo: yup.string().required(displayErrorMsg('請輸入商業登記證號碼')).test('checkBrNoFormat', displayErrorMsg(displayErrorMsg(`請輸入有效商業登記證號碼`)), function (value) {
                var brNo_pattern = /[0-9]{8}/
                if (value !== undefined) {
                    if (value.match(brNo_pattern)) {
                        return true
                    } else {
                        return false
                    }
                }
            }),
        }),
        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,
                    },
                    //creditor: vaule.creditor,
                },
                onSuccess: function () {
                    notifySaveSuccess()
                    loadDataFun();
                    setEditMode(false);
                }
            });
        }
    });

    useEffect(()=>{
        setEditModeFun(editMode);
    },[editMode]);

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

    // useEffect(() => {
    //     if (Object.keys(userData).length > 0) {
    //         if(userData.creditor === undefined||userData.creditor === null){
    //             userData.creditor = false
    //         }
    //         setCurrentUserData(userData);
    //     }
    // }, []);

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

    const markAsCreditor = () => {
        setCreditorConfirmPopUp(false);
        HttpUtils.get({
            url: UrlUtils.GET_ORG_MARK_AS_CREDITOR + "/" + id,
            onSuccess: () => {
                loadDataFun();
            }
        });
    }

    const markAsNonCreditor = () => {
        setNonCreditorConfirmPopUp(false);
        HttpUtils.get({
            url: UrlUtils.GET_ORG_MARK_AS_NON_CREDITOR + "/" + id,
            onSuccess: () => {
                loadDataFun();
            }
        });
    }

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

            <form onSubmit={formik.handleSubmit} style={{ padding: 24 }}>

                {/*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: 0, mr: 3 }}>
                                            <Button
                                                size="large"
                                                variant="contained"
                                                type="submit"
                                                sx={{
                                                    textTransform: 'capitalize',
                                                    alignItems: 'end'
                                                }}
                                            >
                                                <Typography variant="h5">Create</Typography>
                                            </Button>
                                        </Grid>
                                    </> :
                                    <>
                                        <Grid item sx={{ ml: 0, mr: 3 }}>
                                            <Button
                                                size="large"
                                                variant="contained"
                                                onClick={loadDataFun}
                                                sx={{
                                                    textTransform: 'capitalize',
                                                    alignItems: 'end'
                                                }}
                                            >
                                                <Typography variant="h5">Reset & Back</Typography>
                                            </Button>
                                        </Grid>
                                        <Grid item sx={{ ml: 3, mr: 3 }}>
                                            <Button
                                                size="large"
                                                variant="contained"
                                                type="submit"
                                                color="success"
                                                sx={{
                                                    textTransform: 'capitalize',
                                                    alignItems: 'end'
                                                }}
                                            >
                                                <Typography variant="h5">Save</Typography>
                                            </Button>
                                        </Grid>
                                    </>
                                }
                            </>
                            :
                            <>
                                <Grid item sx={{ ml: 0, mr: 3 }}>
                                    <Button
                                        size="large"
                                        variant="contained"
                                        sx={{
                                            textTransform: 'capitalize',
                                            alignItems: 'end'
                                        }}
                                        onClick={onEditClick}
                                    >
                                        <Typography variant="h5">Edit</Typography>
                                    </Button>
                                </Grid>
                                <Grid item sx={{ ml: 3, mr: 3 }}>
                                    <Button
                                        size="large"
                                        variant="contained"
                                        color="orange"
                                        onClick={()=>setCreditorConfirmPopUp(true)}
                                        sx={{
                                            textTransform: 'capitalize',
                                            alignItems: 'end'
                                        }}
                                    >
                                        <Typography variant="h5">Mark as Creditor</Typography>
                                    </Button>
                                </Grid>
                                <Grid item sx={{ ml: 3, mr: 3 }}>
                                    <Button
                                        size="large"
                                        variant="contained"
                                        color="error"
                                        onClick={()=>setNonCreditorConfirmPopUp(true)}
                                        sx={{
                                            textTransform: 'capitalize',
                                            alignItems: 'end'
                                        }}
                                    >
                                        <Typography variant="h5">Mark as Non-Creditor</Typography>
                                    </Button>
                                </Grid>
                            </>
                        }
                    </Grid>
                </Grid>
                {/*top*/}

                {!onReady ?
                    <LoadingComponent />
                    :
                    <Grid container spacing={1}>
                        <Grid item xs={12}>
                            <Typography variant="h4" sx={{ mb: 2, mr: 3, borderBottom: "1px solid black" }}>
                                Organisation Details
                            </Typography>
                        </Grid>
                        <Grid item lg={4} >
                            {FieldUtils.getTextField({
                                label: FieldUtils.notNullFieldLabel("BR No.:"),
                                valueName: "brNo",
                                disabled: (!editMode && !createMode),
                                form: formik
                            })}
                        </Grid>

                        <Grid item lg={4} >
                            <FormControlLabel
                                control={<Checkbox checked={formik.values.creditor} />}
                                label="is Creditor"
                                name="creditor"
                                onChange={() => {
                                    formik.setFieldValue("creditor", !formik.values.creditor);
                                }}
                                disabled={true}
                            //disabled={!editMode && !createMode}
                            />
                        </Grid>

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

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

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

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

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

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

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

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

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


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

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

                    </Grid>
                }
            </form>
            <div>
                <Dialog open={creditorConfirmPopUp} onClose={() => setCreditorConfirmPopUp(false)}  >
                    <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                    <DialogContent style={{ display: 'flex', }}>
                        <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Creditor?</Typography>
                    </DialogContent>
                    <DialogActions>
                    <Button onClick={() => setCreditorConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
                        <Button onClick={() => markAsCreditor()}><Typography variant="h5">Confirm</Typography></Button>
                    </DialogActions>
                </Dialog>
            </div>
            <div>
                <Dialog open={nonCreditorConfirmPopUp} onClose={() => setNonCreditorConfirmPopUp(false)}  >
                    <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                    <DialogContent style={{ display: 'flex', }}>
                        <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Non-Creditor?</Typography>
                    </DialogContent>
                    <DialogActions>
                    <Button onClick={() => setNonCreditorConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
                        <Button onClick={() => markAsNonCreditor()}><Typography variant="h5">Confirm</Typography></Button>
                    </DialogActions>
                </Dialog>
            </div>
        </MainCard>
    );
};

export default OrganizationCard;