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

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

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


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

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


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

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

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

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

        userData["faxNumber"] = userData.faxNo?.faxNumber;
        userData["fax_countryCode"] = userData.faxNo?.countryCode;
        
        setCurrentUserData(userData);
    }, [userData]);

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


    function onSubmitForm(_formData) {
        HttpUtils.post({
            url: UrlUtils.POST_IND_USER+"/"+userData.id,
            params: {
                name: _formData.name,
                prefix: _formData.prefix,
                contactTel: {
                    countryCode: _formData.tel_countryCode,
                    phoneNumber: _formData.phoneNumber
                },
                identification: _formData.identification,
                emailAddress:_formData.emailAddress,
            },
            onSuccess: function(){
                loadDataFun();
            }
        });
    }

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

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

    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>

                <form onSubmit={handleSubmit(onSubmitForm)}>
                               
                    <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'}}>
                                    Name:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("name")}
                                        id='name'
                                        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'}}>
                                    Prefix:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("prefix")}
                                        id='prefix'
                                        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",
                                        {
                                            value: currentUserData?.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("emailAddress")}
                                        id='emailAddress'
                                        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.verified || 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'
                                                }}
                                            >
                                                Verified
                                            </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("lastLogin",
                                                 {
                                                     value: currentUserData?.lastLogin,
                                                 })}
                                             id='lastLogin'
                                             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>

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

                    </Grid>

                     {/*bottom button*/}
                <Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"end"} justifyContent="center">
                    <Grid container maxWidth justifyContent="flex-end">
                         
                    {editMode?
                    <>
                        <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"
                                onClick={loadDataFun}
                                sx={{
                                    textTransform: 'capitalize',
                                    alignItems: 'end'
                                }}
                            >
                                Cancel & Back
                            </Button>
                        </Grid>
                        </>
                        :
                        <>
                        {locked?
                        <Grid item sx={{ml: 3, mr: 3}}>
                            <Button
                                size="large"
                                variant="contained"
                                color="primary"
                                sx={{
                                    textTransform: 'capitalize',
                                    alignItems: 'end'
                                }}
                                onClick={doUnlock}
                            >
                                Unlock
                            </Button>
                        </Grid>
                        :
                        <Grid item sx={{ml: 3, mr: 3}}>
                            <Button
                                size="large"
                                variant="contained"
                                color="primary"
                                sx={{
                                    textTransform: 'capitalize',
                                    alignItems: 'end'
                                }}
                                onClick={doLock}
                            >
                                Lock
                            </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>

                <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
                                    />
                                </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'}}>
                                    Fax No.:
                                </Grid>
                                <Grid item xs={2}>
                                    <TextField
                                        fullWidth
                                        {...register("fax_countryCode")}
                                        id='tel_countryCode'
                                        disabled={!editMode}
                                    />
                                </Grid>
                                <Grid item xs={4}>
                                    <TextField
                                        fullWidth
                                        {...register("number")}
                                        id='number'
                                        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'}}>
                                    Email:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("emailAddress")}
                                        id='emailAddress'
                                        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}>
                                    <TextField
                                        fullWidth
                                        {...register("brExpiryDateTemp")}
                                        id='brExpiryDateTemp'
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>


                       </Grid>

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

export default UserInformationCard_Organization;