PNSPS-frontend-MaterialUI/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js

// material-ui
import {
    Grid, TextField, Typography, Button,
    OutlinedInput, FormHelperText, Autocomplete
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useForm} from "react-hook-form";
import {useEffect, useState} from "react";
import * as DateUtils from '../../utils/DateUtils';
import * as HttpUtils from '../../utils/HttpUtils';
import * as UrlUtils from "../../utils/ApiPathConst";
import * as ComboData from "../../utils/ComboData";

import { useFormik,FormikProvider } from 'formik';
import * as yup from 'yup';

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


const UserInformationCard_Organization = ({userData, loadDataFun}) => {

    const [currentUserData, setCurrentUserData] = useState(userData);
    const [editMode, setEditMode] = useState(false);
    const [locked, setLocked] = useState(false);

    const [district, setDistrict] = useState(null);
    const [country, setCountry] = useState(ComboData.country[0]);

    const from = useForm({defaultValues: userData});
    const {register,reset, handleSubmit} = from;

    
    const formik = useFormik({
        initialValues:(currentUserData),
        validationSchema:yup.object().shape({
           
            enName: yup.string().max(255).required('請輸入英文姓名'),
            enCompanyName: yup.string().max(255).required('請輸入英文名稱'),
            chName: yup.string().max(255).required('請輸入中文姓名'),
            address1: yup.string().max(255).required('請輸入第一行地址'),
            address2: yup.string().max(255).required('請輸入第二行地址'),
            address3: yup.string().max(255).required('請輸入第三行地址'),
            email: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵'),
            emailConfirm: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵').oneOf([yup.ref('email'), null], '請輸入相同電郵'),
            phoneCountryCode: yup.string().min(3,'請輸入3位數字').required('請輸入國際區號'),
            faxCountryCode: yup.string().min(3,'請輸入3位數字'),
            phone: yup.string().min(8,'請輸入8位數字').required('請輸入聯絡電話'),
            fax: yup.string().min(8,'請輸入8位數字'),
            brExpiryDate: yup.string().min(8,'請輸入商業登記證有效日期'),
            brNo: yup.string().min(8,'請輸入商業登記證號碼'),
        })
    
    });


    useEffect(() => {
        let createDate = DateUtils.datetimeStr(userData.created);
        let modifiedBy = DateUtils.datetimeStr(userData.modified)+", "+userData.modifiedBy;
        userData["createDate"] = createDate;
        userData["modifieDate"] = modifiedBy;
        userData["verifiedStatus"] = userData.verifiedBy? DateUtils.datetimeStr(userData.verifiedDate)+", "+userData.verifiedByName: "Not verify yet";

        userData["lastLoginDate"] = userData.lastLogin?DateUtils.datetimeStr(lastLoginDate):"";

        userData["country"] = userData.addressBus?.country;
        userData["district"] = userData.addressBus?.district;
        userData["addressLine1"] = userData.addressBus?.addressLine1;
        userData["addressLine2"] = userData.addressBus?.addressLine2;
        userData["addressLine3"] = userData.addressBus?.addressLine3;

        userData["phoneNumber"] = userData.contactTel?.phoneNumber;
        userData["tel_countryCode"] = userData.contactTel?.countryCode;

        userData["faxNumber"] = userData.faxNo?.faxNumber;
        userData["fax_countryCode"] = userData.faxNo?.countryCode;

        userData["brExpiryDate"] = userData.brExpiryDate?DateUtils.convertToDate(brExpiryDate):"";


        setDistrict(userData.district);
        setCountry(userData.country);
        
        setCurrentUserData(userData);
    }, [userData]);

    useEffect(() => {
        reset(currentUserData);
        setLocked(currentUserData.locked);
    }, [currentUserData]);



    function onSubmitForm(_data) {
        HttpUtils.post({
            url: UrlUtils.POST_IND_USER+"/"+userData.id,
            params: {
                chName: _data.chName,
                enName: _data.enName,
                contactTel: {
                    countryCode: _data.tel_countryCode,
                    phoneNumber: _data.phoneNumber
                },
                faxNo: {
                    countryCode: _data.fax_countryCode,
                    faxNumber: _data.faxNumber
                },
                addressBus: {
                    country: country,
                    district: district,
                    addressLine1: _data.addressLine1,
                    addressLine2: _data.addressLine2,
                    addressLine3: _data.addressLine3,
                },
                identification: _data.identification,
                emailBus:_data.emailBus,
                contactPerson: _data.contactPerson,
                enCompanyName: _data.enCompanyName,
                chCompanyName: _data.chCompanyName,
                brNo: _data.brNo,
                brExpiryDate: formik.values.brExpiryDate,

            },
            onSuccess: function(){
                loadDataFun();
            }
        });
    }

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

    const createOrgClick = () => {
        window.open("/org/fromUser/"+userData.id, "_blank", "noreferrer");
    };

    const onVerifiedClick = () => {
        HttpUtils.get({
            url: UrlUtils.GET_IND_USER_VERIFY+"/"+userData.id,
            onSuccess: function(){
                loadDataFun();
            }
        });
    };

    const doLock = () => {
        HttpUtils.get({
            url: UrlUtils.GET_USER_LOCK+"/"+userData.id,
            onSuccess: function(){
                loadDataFun();
            }
        }); 
    };

    const doUnlock = () => {
        HttpUtils.get({
            url: UrlUtils.GET_USER_UNLOCK+"/"+userData.id,
            onSuccess: function(){
                loadDataFun();
            }
        }); 
    };

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

                <FormikProvider value={formik}>
                <form onSubmit={handleSubmit(onSubmitForm)}>

                {/*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'
                                }}
                            >
                                Cancel Edit
                            </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*/}
                               
                    <Grid container spacing={1}>
                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Username:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        id='username'
                                        disabled
                                        {...register("username")}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    English Name:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("enName")}
                                        id='enName'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Created Date:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("createDate")}
                                        id='createDate'
                                        disabled
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Chinese Name:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("chName")}
                                        id='chName'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Contact Tel:
                                </Grid>
                                <Grid item xs={2}>
                                    <TextField
                                        fullWidth
                                        {...register("tel_countryCode")}
                                        id='tel_countryCode'
                                        disabled={!editMode}
                                    />
                                </Grid>
                                <Grid item xs={4}>
                                    <TextField
                                        fullWidth
                                        {...register("phoneNumber")}
                                        id='phoneNumber'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Last Updated:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("modifieDate")}
                                        id='modifieDate'
                                        disabled
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Organization:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6} >
                                    <TextField     
                                        {...register("identification")}
                                        id='identification'
                                        disabled={!editMode}
                                    />
                                     {/* <Button lg={2} variant="contained" onClick={downloadFile} >View File</Button> */}
                                </Grid>
                            </Grid>
                        </Grid>

                        
                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Email:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("emailBus")}
                                        id='emailBus'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>


                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Verified:
                                </Grid>

                                
                                {
                                    currentUserData.verifiedBy || editMode?
                                    <Grid item xs={6}>
                                        <TextField
                                            fullWidth
                                            {...register("verifiedStatus")}
                                            id='verifiedStatus'
                                            disabled
                                        />
                                    </Grid>
                                    :
                                    <>
                                        <Grid item xs={4}>
                                            <TextField
                                                fullWidth
                                                {...register("verifiedStatus")}
                                                id='verifiedStatus'
                                                disabled
                                            />
                                        </Grid>
                                        <Grid item xs={1}>
                                            <Button
                                                size="large"
                                                variant="contained"
                                                sx={{
                                                    textTransform: 'capitalize',
                                                    alignItems: 'end'
                                                }}
                                                onClick={onVerifiedClick}
                                            >
                                                Verify
                                            </Button>
                                        </Grid>
                                    </>
                                }
                                
                            </Grid>
                        </Grid>




                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Last Login:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>

                                      <TextField
                                             fullWidth
                                             {...register("lastLoginDate")}
                                             id='lastLoginDate'
                                             disabled
                                        >
                                        </TextField>
                                </Grid>
                            </Grid>
                        </Grid>

                        

                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Status:
                                </Grid>
                                {
                                    editMode?
                                        <Grid item xs={7} s={7} md={7} lg={6}>
                                            <TextField
                                                fullWidth
                                                {...register("status")}
                                                id='status'
                                                disabled
                                            />
                                        </Grid>
                                    :
                                        <>

                                        <Grid item  lg={4}>
                                            <TextField
                                                fullWidth
                                                {...register("status")}
                                                id='status'
                                                disabled
                                            />
                                        </Grid>
                                        {locked?
                                        <Grid lg={1}>
                                        <Button
                                        size="large"
                                        variant="contained"
                                        color="success"
                                        sx={{
                                            textTransform: 'capitalize',
                                            alignItems: 'end'
                                        }}
                                        onClick={doUnlock}
                                        >
                                        Active
                                        </Button>
                                        </Grid>
                                        :
                                        <Grid item lg={1}>
                                        <Button
                                        size="large"
                                        variant="contained"
                                        color="error"
                                        sx={{
                                            textTransform: 'capitalize',
                                            alignItems: 'end'
                                        }}
                                        onClick={doLock}
                                        >
                                        Lock
                                        </Button>
                                        </Grid>
                                        }

                                        </>
                                }
                                


                            </Grid>
                        </Grid>

                    </Grid>


                <Grid container spacing={1}>
                    <Grid item lg={1} >
                        <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
                            Organization
                        </Typography>
                    </Grid>

                    <Grid item lg={2}>
                            <Button variant="contained"
                                onClick={createOrgClick}
                            >
                                Create Organization
                            </Button>
                        </Grid>
                </Grid>
                    <Grid container spacing={1}>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Org.Name (English):
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("enCompanyName")}
                                        id='enCompanyName'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Org.Name (Chinese):
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("chCompanyName")}
                                        id='chCompanyName'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    BR No.:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("brNo")}
                                        id='brNo'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Contact Person:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("contactPerson")}
                                        id='contactPerson'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>
                        
                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Fax No.:
                                </Grid>
                                <Grid item xs={2}>
                                    <TextField
                                        fullWidth
                                        {...register("fax_countryCode")}
                                        id='fax_countryCode'
                                        disabled={!editMode}
                                    />
                                </Grid>
                                <Grid item xs={4}>
                                    <TextField
                                        fullWidth
                                        {...register("faxNumber")}
                                        id='faxNumber'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    BR Expiry Date.:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <OutlinedInput
                                            fullWidth
                                            disabled={!editMode}
                                            {...register("brExpiryDate")}
                                            error={Boolean(formik.touched.brExpiryDate && formik.errors.brExpiryDate)}
                                            id="brExpiryDate"
                                            type="date"
                                            value={formik.values.brExpiryDate}
                                            format="dd/MM/yyyy"
                                            name="brExpiryDate"
                                            onChange={formik.handleChange}
                                            placeholder="與與商業登記證相同如有"
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.brExpiryDate && formik.errors.brExpiryDate && (
                                            <FormHelperText error id="brExpiryDate">
                                            {formik.errors.brExpiryDate}
                                            </FormHelperText>
                                        )}
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4}>
                            <Grid container alignItems={"top"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'top'}}>
                                        <Grid item lg={12}  sx={{alignItems: 'center'}}>Address :</Grid>
                                </Grid> 

                                <Grid item xs={7} s={7} md={12} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("addressLine1")}
                                        id='addressLine1'
                                        disabled={!editMode}
                                    />
                                    <TextField
                                        fullWidth
                                        {...register("addressLine2")}
                                        id='addressLine2'
                                        disabled={!editMode}
                                    />
                                    <TextField
                                        fullWidth
                                        {...register("addressLine3")}
                                        id='addressLine3'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    District:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                      <Autocomplete
                                                    fullWidth
                                                    disablePortal
                                                    id="district"
                                                    {...register("district")}
                                                    value={district}
                                                    options={ComboData.district}
                                                    onChange={(event, newValue) => {
                                                        setDistrict(newValue);
                                                    }}
                                                    disabled={!editMode}
                                                    sx={{"& .MuiInputBase-root": { height: "41px" },"#district":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
                                                    renderInput={(params) => <TextField {...params} placeholder="區域 (只適用於香港)"/>}
                                        />
                                       
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item lg={4}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Country:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <Autocomplete
                                    fullWidth
                                        disablePortal
                                        disabled={!editMode}
                                        id="country"
                                        value={country}
                                        options={ComboData.country}
                                        {...register("country")}
                                        onChange={(event, newValue) => {
                                            setCountry(newValue);
                                        }}
                                        
                                        sx={{"& .MuiInputBase-root": { height: "41px" },"#country":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
                                        renderInput={(params) => <TextField {...params} placeholder="國家/地區"/>}
                                    />
                                </Grid>

                                
                            </Grid>
                        </Grid>
                       </Grid>

                </form>

                </FormikProvider>
            </MainCard>
    );
};

export default UserInformationCard_Organization;