PNSPS-frontend-MaterialUI/src/pages/OrganizationDetailPage/index.js

// material-ui
import { Grid, Typography, Stack, Box, Button } from '@mui/material';
import { useEffect, useState } from "react";
import * as React from "react";
import * as HttpUtils from "../../utils/HttpUtils";
import { useParams } from "react-router-dom";
import * as UrlUtils from "../../utils/ApiPathConst";
import * as DateUtils from "../../utils/DateUtils";

import Loadable from 'components/Loadable';
import { lazy } from 'react';
const InfoCard = Loadable(lazy(() => import('./OrganizationCard')));
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
import ForwardIcon from '@mui/icons-material/Forward';
import { useNavigate } from 'react-router-dom';
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
}

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


const OrganizationDetailPage = () => {
    const params = useParams();
    const [formData, setFormData] = useState({})
    const [isLoading, setLoding] = useState(true);
    const navigate = useNavigate();

    useEffect(() => {
        console.log(formData);
        loadData();
    }, []);

    const loadData = () => {
        setLoding(true);
        if (params.id > 0) {
            HttpUtils.get({
                url: UrlUtils.GET_ORG_PATH + "/" + params.id,
                onSuccess: function (response) {
                    response.data["country"] = response.data.addressTemp?.country;
                    response.data["district"] = response.data.addressTemp?.district;
                    response.data["addressLine1"] = response.data.addressTemp?.addressLine1;
                    response.data["addressLine2"] = response.data.addressTemp?.addressLine2;
                    response.data["addressLine3"] = response.data.addressTemp?.addressLine3;

                    response.data["phoneNumber"] = response.data.contactTel?.phoneNumber;
                    response.data["tel_countryCode"] = response.data.contactTel?.countryCode;

                    response.data["faxNumber"] = response.data.faxNo?.faxNumber;
                    response.data["fax_countryCode"] = response.data.faxNo?.countryCode;

                    response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateStr(response.data.brExpiryDate) : "";
                    setFormData(response.data)
                }
            });
        }
    };


    useEffect(() => {
        setLoding(false);
    }, [formData]);

    return (
        isLoading ?
            <LoadingComponent />
            :
            <Grid container sx={{ backgroundColor: "backgroundColor.default" }}>
                <Grid item xs={12}>
                    <div style={BackgroundHead}>
                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                            <Typography ml={15} color='#FFF' variant="h4">Maintain Organization</Typography>
                        </Stack>
                    </div>
                </Grid>
                <Grid item xs={12}>
                    <Button title="Back" sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/org") }}>
                        <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
                    </Button>
                </Grid>
                {/*col 1*/}
                <Grid item xs={12} >
                    <Grid container>
                        <Grid item xs={12} md={12} lg={12}>
                            <Box xs={12} ml={0} mt={-1} mr={0} sx={{ p: 1, borderRadius: '10px' }}>
                                <InfoCard
                                    userData={formData}
                                    loadDataFun={loadData}
                                    id={params.id}
                                />
                            </Box>
                            <br />
                        </Grid>
                    </Grid>
                </Grid>
                {/*col 2*/}
            </Grid>
    );
};


export default OrganizationDetailPage;