PNSPS-frontend-MaterialUI/src/pages/gldApplicationDetailPage/ClientDetailCard.js

// material-ui
import {
    FormControl, 
    Button,
    Grid, 
    // InputAdornment, 
    Typography, FormLabel,
    OutlinedInput,
    Stack
} 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 Checkbox from "@mui/material/Checkbox";
import Loadable from 'components/Loadable';
import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
//import {useParams} from "react-router-dom";
import ContentPasteSearchIcon from '@mui/icons-material/ContentPasteSearch';
import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
import HighlightOff from '@mui/icons-material/HighlightOff';
import {useNavigate} from "react-router-dom";

// ==============================|| DASHBOARD - DEFAULT ||============================== //
const ClientDetailCard = (
    {   applicationDetailData,
        // isCollectData,
        // updateUserObject,
        // isNewRecord
    }
    ) => {
    // const params = useParams();
    const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
    const [onReady,setOnReady] = useState(false);
    const [companyName, setCompanyName] = useState({});
    const {register, 
        // getValues
    } = useForm()
    const navigate = useNavigate()

    useEffect(() => {
        //if user data from parent are not null
        if (Object.keys(applicationDetailData).length > 0 && applicationDetailData !== undefined) {
            setCurrentApplicationDetailData(applicationDetailData.userData);
            setCompanyName(applicationDetailData.companyName);
        }
    }, [applicationDetailData]);

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

    const handleViewClick = () => () => {
        console.log(currentApplicationDetailData)
        currentApplicationDetailData.type == "ORG"?
        navigate('/orgUser/'+ currentApplicationDetailData.id):
        navigate('/indUser/'+ currentApplicationDetailData.id);
    };

    // useEffect(() => {
    //     //upload latest data to parent
    //     const values = getValues();
    //     const objectData ={
    //         ...values,
    //         locked: locked,
    //     }
    //     updateUserObject(objectData);
    // }, [isCollectData]);

    return (
        !onReady ?
            <LoadingComponent/>
            :
            <MainCard elevation={0}
                      border={false}
                      content={false}
                      sx={{xs:"12", md:"7"}}>
                <Grid container spacing={1} direction="row">
                    <Grid item xs={12} md={7} >
                        <Stack 
                            direction="row"
                            justifyContent="flex-start"
                            alignItems="center"
                            spacing={2}
                            mb={2}
                        >
                            <Button
                                // size="large"
                                variant="contained"
                                onClick={handleViewClick()}
                                sx={{
                                    textTransform: 'capitalize',
                                    alignItems: 'end',
                                }}>
                                <ContentPasteSearchIcon/>
                                <Typography ml={1} mr={1}> View</Typography>
                            </Button>
                        </Stack>
                    </Grid>
                </Grid>
                <Typography variant="h5" sx={{mb: 2, borderBottom: "1px solid black"}}>
                        Client Details
                </Typography>
                <form>
                    <Grid container direction="column" justifyContent="flex-start"
                                alignItems="flex-start">
                        <Grid item xs={12} md={12} lg={12} mb={1}  >
                                {currentApplicationDetailData.verifiedBy!==null?
                                    <Stack direction="row">
                                        <Typography>
                                            Verified
                                        </Typography>
                                        <CheckCircleOutline color="success"/>
                                    </Stack>:
                                    <Stack direction="row">
                                        <Typography>
                                            Not Verified
                                        </Typography>
                                        <HighlightOff color="error"/>
                                    </Stack>
                                }
                        </Grid>
                    </Grid>
                    <Grid container direction="column" justifyContent="flex-start"
                                alignItems="flex-start">
                        <Grid item xs={12} md={12} lg={12} mb={1}  >
                            <FormLabel>Client Type:</FormLabel>
                        </Grid>
                        <Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
                            <FormControl variant="outlined" sx={{width:'100%'}} >
                                <OutlinedInput
                                    size="small"
                                    {...register("type",
                                        {
                                            value: currentApplicationDetailData.type,
                                        })}
                                    id='type'
                                />
                            </FormControl>
                        </Grid>
                    </Grid>
                    {currentApplicationDetailData.type==="ORG"?
                    <>
                        <Grid container direction="column" justifyContent="flex-start"
                                    alignItems="flex-start">
                            <Grid item xs={12} md={12} lg={12} mb={1}   
                                sx={{display: 'flex', alignItems: 'center'}}>
                                <FormLabel>Company Name (English):</FormLabel>
                            </Grid>
                            <Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}}  >
                                <FormControl variant="outlined"  sx={{width:'100%'}}  >
                                    <OutlinedInput
                                        size="small"
                                        {...register("enCompanyName",
                                            {
                                                value: companyName.enCompanyName ,
                                            })}
                                        id='enCompanyName'
                                    />
                                </FormControl>
                            </Grid>
                        </Grid>
                        <Grid container direction="column" justifyContent="flex-start"
                                    alignItems="flex-start">
                            <Grid item xs={12} md={12} lg={12} mb={1}   
                                sx={{display: 'flex', alignItems: 'center'}}>
                                <FormLabel>Company Name (Chinese):</FormLabel>
                            </Grid>
                            <Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}}  >
                                <FormControl variant="outlined" sx={{width:'100%'}}   >
                                    <OutlinedInput
                                        size="small"
                                        {...register("chCompanyName",
                                            {
                                                value: companyName.chCompanyName,
                                            })}
                                        id='chCompanyName'
                                    />
                                </FormControl>
                            </Grid>
                        </Grid>
                        <Grid container direction="column" justifyContent="flex-start"
                                    alignItems="flex-start">
                            <Grid item xs={12} md={12} lg={12} mb={1}   
                                sx={{display: 'flex', alignItems: 'center'}}>
                                <FormLabel>English Name:</FormLabel>
                            </Grid>
                            <Grid item xs={12} md={12} lg={12} mb={1}  sx={{width:'100%'}} >
                                <FormControl variant="outlined"  sx={{width:'100%'}}  >
                                    <OutlinedInput
                                        size="small"
                                        {...register("contactPerson",
                                            {
                                                value: currentApplicationDetailData.contactPerson,
                                            })}
                                        id='contactPerson'
                                    />
                                </FormControl>
                            </Grid>
                        </Grid>
                        <Grid container direction="column" justifyContent="flex-start"
                                    alignItems="flex-start">
                            <Grid item xs={12} md={12} lg={12} mb={1}   
                                sx={{display: 'flex', alignItems: 'center'}}>
                                <FormLabel>Contact Phone:</FormLabel>
                            </Grid>
                            <Grid item xs={12} md={12} lg={12} mb={1}   >
                                <Stack direction="row">
                                    <FormControl variant="outlined" sx={{width:'40%'}}>
                                        <OutlinedInput
                                            size="small"
                                            {...register("countryCode",
                                                {
                                                    value: currentApplicationDetailData.contactTel.countryCode,
                                                })}
                                            id='countryCode'
                                        />
                                    </FormControl>
                                    <FormControl variant="outlined" sx={{width:'100%'}}>
                                        <OutlinedInput
                                            size="small"
                                            {...register("phoneNumber",
                                                {
                                                    value: currentApplicationDetailData.contactTel.phoneNumber,
                                                })}
                                            id='phoneNumber'
                                        />
                                    </FormControl>
                                </Stack>
                            </Grid>
                        </Grid>
                        <Grid container direction="column" justifyContent="flex-start"
                                    alignItems="flex-start">
                            <Grid item xs={12} md={12} lg={12} mb={1}   
                                sx={{display: 'flex', alignItems: 'center'}}>
                                <FormLabel>Email:</FormLabel>
                            </Grid>
                            <Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}}  >
                                <FormControl variant="outlined"  sx={{width:'100%'}}  >
                                    <OutlinedInput
                                        size="small"
                                        {...register("emailBus",
                                            {
                                                value: currentApplicationDetailData.emailBus,
                                            })}
                                        id='emailBus'
                                    />
                                </FormControl>
                            </Grid>
                        </Grid>
                    </>:
                    <>
                        <Grid container direction="column" justifyContent="flex-start"
                                    alignItems="flex-start">
                            <Grid item xs={12} md={12} lg={12} mb={1}   
                                sx={{display: 'flex', alignItems: 'center'}}>
                                <FormLabel>English Name:</FormLabel>
                            </Grid>
                            <Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}}  >
                                <FormControl variant="outlined"  sx={{width:'100%'}}  >
                                    <OutlinedInput
                                        size="small"
                                        {...register("enName",
                                            {
                                                value: currentApplicationDetailData.enName,
                                            })}
                                        id='enName'
                                    />
                                </FormControl>
                            </Grid>
                        </Grid>
                        <Grid container direction="column" justifyContent="flex-start"
                                    alignItems="flex-start">
                            <Grid item xs={12} md={12} lg={12} mb={1}   
                                sx={{display: 'flex', alignItems: 'center'}}>
                                <FormLabel>Chinese Name:</FormLabel>
                            </Grid>
                            <Grid item xs={12} md={12} lg={12} mb={1}  sx={{width:'100%'}} >
                                <FormControl variant="outlined" sx={{width:'100%'}}  >
                                    <OutlinedInput
                                        size="small"
                                        {...register("chName",
                                            {
                                                value: currentApplicationDetailData.chName,
                                            })}
                                        id='chName'
                                    />
                                </FormControl>
                            </Grid>
                        </Grid>
                        <Grid container direction="column" justifyContent="flex-start"
                                    alignItems="flex-start">
                            <Grid item xs={12} md={12} lg={12} mb={1}   
                                sx={{display: 'flex', alignItems: 'center'}}>
                                <FormLabel>Contact Phone:</FormLabel>
                            </Grid>
                            <Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}}  >
                                <Stack direction="row">
                                    <FormControl variant="outlined" sx={{width:'40%'}}>
                                        <OutlinedInput
                                            size="small"
                                            {...register("countryCode",
                                                {
                                                    value: currentApplicationDetailData.mobileNumber.countryCode,
                                                })}
                                            id='countryCode'
                                        />
                                    </FormControl>
                                    <FormControl variant="outlined" sx={{width:'100%'}}>
                                        <OutlinedInput
                                            size="small"
                                            {...register("phoneNumber",
                                                {
                                                    value: currentApplicationDetailData.mobileNumber.phoneNumber,
                                                })}
                                            id='phoneNumber'
                                        />
                                    </FormControl>
                                </Stack>
                            </Grid>
                        </Grid>
                        <Grid container direction="column" justifyContent="flex-start"
                                    alignItems="flex-start">
                            <Grid item xs={12} md={12} lg={12} mb={1}   
                                sx={{display: 'flex', alignItems: 'center'}}>
                                <FormLabel>Email:</FormLabel>
                            </Grid>
                            <Grid item xs={12} md={12} lg={12} mb={1} sx={{width:'100%'}} >
                                <FormControl variant="outlined" sx={{width:'100%'}} >
                                    <OutlinedInput
                                        size="small"
                                        {...register("emailAddress",
                                            {
                                                value: currentApplicationDetailData.emailAddress,
                                            })}
                                        id='emailAddress'
                                    />
                                </FormControl>
                            </Grid>
                        </Grid>
                    </>
                    }
                    
                </form>
            </MainCard>
    );
};

export default ClientDetailCard;