PNSPS-frontend-MaterialUI/src/pages/pnspsUserDetailPage/UserInformationCard.js

// material-ui
import {
    Grid, TextField, Typography
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useForm} from "react-hook-form";
// import Autocomplete from "@mui/material/Autocomplete";
// import {
//     subDivision1,
//     subDivision2,
//     subDivision3,
//     subDivision4,
//     subDivision5,
//     subDivision6
// } from "../pnspsUserSearchPage/DummyComboRecord";
import {useEffect, useState} from "react";
import Checkbox from "@mui/material/Checkbox";
import LoadingComponent from "../extra-pages/LoadingComponent";
//import {useParams} from "react-router-dom";

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


// const subDivisionArray = [
//     ...subDivision1,
//     ...subDivision2,
//     ...subDivision3,
//     ...subDivision4,
//     ...subDivision5,
//     ...subDivision6
// ];


const UserInformationCard = ({isCollectData, updateUserObject,userData}) => {
    //const params = useParams();
    const [currentUserData, setCurrentUserData] = React.useState({});
    // const [subDivision, setSubDivision] = useState(null);
    const [locked, setLocked] = useState(false);
    // const [isLotusNoteUser, setIsLotusNoteUser] = useState(false);
    // const [lotusNoteUserList, setLotusNoteUserList] = useState([])
    // const [selectedLotusUser, setSelectedLotusUser] = useState(null);

    const [onReady, setOnReady] = useState(false);
    const {register, getValues} = useForm()

    // useEffect(() => {
    //     //TODO: Get lotus note user list
    //     setLotusNoteUserList([
    //         {
    //             key: 1,
    //             label: "user01",
    //             account: "user123456"
    //         },
    //         {
    //             key: 2,
    //             label: "user02",
    //             account: "userabcde1"
    //         },
    //         {
    //             key: 3,
    //             label: "user03",
    //             account: "user2001"
    //         },
    //         {
    //             key: 4,
    //             label: "user04",
    //             account: "user2000"
    //         },
    //         {
    //             key: 5,
    //             label: "user05",
    //             account: "user1999"
    //         },
    //     ])
    // }, []);

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

    useEffect(() => {
        //if state data are ready and assign to different field
        if (Object.keys(userData).length > 0 &&currentUserData !== undefined) {
            setLocked(currentUserData.locked);
            setOnReady(true);
        }
    }, [currentUserData]);

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


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


                <form>

                    <Grid container>
                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
                            <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
                                        {...register("userName",
                                            {
                                                value: currentUserData.username,
                                            })}
                                        id='username'
                                        disabled
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

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

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

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

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("fullName",
                                            {
                                                value: currentUserData.fullname,
                                            })}
                                        id='fullName'
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

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

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("post",
                                            {
                                                value: currentUserData.post,
                                            })}
                                        id='post'
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        {/* <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Sub-Division:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <Autocomplete
                                        disablePortal
                                        id="sub-division-combo"
                                        value={subDivision === null ? null : subDivision}
                                        options={subDivisionArray}
                                        onChange={(event, newValue) => {
                                            setSubDivision(newValue);
                                        }}
                                        renderInput={(params) => <TextField {...params} />}
                                    />
                                </Grid>
                            </Grid>
                        </Grid> */}

                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
                            <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("email",
                                            {
                                                value: currentUserData.email,
                                            })}
                                        id='email'
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

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

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("phone1",
                                            {
                                                value: currentUserData.phone1,
                                            })}
                                        id='phone1'
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

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

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <Checkbox
                                        checked={locked}
                                        onChange={(event) => setLocked(event.target.checked)}
                                        name="checked"
                                        color="primary"
                                        size="small"
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                    </Grid>

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

export default UserInformationCard;