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

// material-ui
import {
    Button,
    Grid, Typography
} from '@mui/material';
import {useEffect, useState} from "react";
import * as React from "react";
import axios from "axios";
import {apiPath} from "../../auth/utils";
import {useParams} from "react-router-dom";
import {
    GeneralConfirmWindow,
    getDeletedRecordWithRefList,
    getIdList,
    // notifyDeleteSuccess,
    // notifySaveSuccess
} from "../../utils/CommonFunction";
import {POST_AND_UPDATE_USER_GROUP,GET_GROUP_LIST_PATH } from "../../utils/ApiPathConst";

import Loadable from 'components/Loadable';
import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
const GroupAuthCard = Loadable(lazy(() => import('./GroupAuthCard')));
const UserGroupInfoCard = Loadable(lazy(() => import('./UserGroupInfoCard')));
const UserAddCard = Loadable(lazy(() => import('./UserAddCard')));
import {useNavigate} from "react-router";



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


const UserMaintainPage = () => {
    const params = useParams();
    const navigate = useNavigate();
    const [onReady, setOnReady] = useState(false);
    const [isCollectData, setIsCollectData] = useState(false);
    const [editedGroupData, setEditedGroupData] = useState({});
    const [userGroupData,setUserGroupData] = useState([]);
    const [userAuthData,setUserAuthData] = useState([]);
    const [userConfirm, setUserConfirm] = useState(false);
    const [groupMember, setGroupMember] = useState([]);
    const [isNewRecord, setIsNewRecord] = useState(false);
    const [deletedUserList, setDeletedUserList] = React.useState([]);
    const [deletedAuthList, setDeletedAuthList] = React.useState([]);

    const [isWindowOpen, setIsWindowOpen] = React.useState(false);
    const handleClose = () => {
        setIsWindowOpen(false);
    };

    const handleDeleteClick = () => {
        setIsWindowOpen(true);
    };

    function deleteData(){
        axios.delete(`${apiPath}${GET_GROUP_LIST_PATH}/${params.id}`,
        )
            .then((response) => {
                if (response.status === 204) {
                    // notifyDeleteSuccess();
                    setIsWindowOpen(false);
                    navigate('/usergroupSearchview');
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }

    function updateGroupObject(groupData) {
        setEditedGroupData(groupData);
    }

    function updateGroupMember(groupMember){
        setGroupMember(groupMember.currentList);
        setDeletedUserList(groupMember.deletedList);
    }

    function updateUserAuthList(userAuthData){
        setUserAuthData(userAuthData.currentList);
        setDeletedAuthList(userAuthData.deletedList);
    }

    const submitData = () => {
        setUserConfirm(true);
        setIsCollectData(!isCollectData);
    }

    useEffect(() => {
        if(params.id > 0 ){
            axios.get(`${apiPath}${GET_GROUP_LIST_PATH}/${params.id}`)
                .then((response) => {
                    if (response.status === 200) {
                        setUserGroupData(response.data);
                    }
                })
                .catch(error => {
                    console.log(error);
                    return false;
                });
        }
        else{
            //new record case
            setUserGroupData(
                {
                    "authIds": [],
                    "data": {},
                    "userIds": []
                }
            );
            setIsNewRecord(true);
        }

    }, []);

    useEffect(() => {
        if (Object.keys(userGroupData).length > 0 && userGroupData !== undefined) {
            setOnReady(true);
        }
        else if(isNewRecord){
            setOnReady(true);
        }
    }, [userGroupData]);

    useEffect(() => {
        if(userConfirm && onReady){
            //avoid delete and add user at the same time
            let finalDeletedUserList = getDeletedRecordWithRefList(deletedUserList, getIdList(groupMember));
            console.log(finalDeletedUserList)
            axios.post(POST_AND_UPDATE_USER_GROUP,
                {
                    "id": parseInt(params.id) !== -1? parseInt(params.id) : null,
                    "name": editedGroupData.userGroupName,
                    "description": editedGroupData.description,
                    "addUserIds": getIdList(groupMember),
                    "removeUserIds": finalDeletedUserList,
                    "addAuthIds": userAuthData,
                    "removeAuthIds": deletedAuthList,
                },
            )
                .then((response) => {
                    if (response.status === 200) {
                        // notifySaveSuccess();
                        navigate('/usergroupSearchview');
                    }
                })
                .catch(error => {
                    console.log(error);
                    return false;
                });
        }
        setUserConfirm(false);
    }, [editedGroupData,userGroupData,userAuthData]);

    return (
        !onReady ?
            <LoadingComponent/>
            :
            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
                <Grid item xs={12} sx={{mb: -2.25}}>
                    <Typography variant="h5">{isNewRecord? "Create User Group" : "Maintain User Group"}</Typography>
                </Grid>
                {/*col 1*/}
                <Grid item xs={12} md={5} lg={5}>
                    <Grid container>
                        <Grid item xs={12} md={12} lg={12}>
                            <UserGroupInfoCard
                                updateGroupObject={updateGroupObject}
                                userGroupData={userGroupData}
                                isCollectData={isCollectData}
                                isNewRecord={isNewRecord}
                            />
                        </Grid>

                        <Grid item xs={12} md={12} lg={12} sx={{mt:3}}>
                            <UserAddCard
                                updateGroupMember={updateGroupMember}
                                userGroupData={userGroupData}
                                isCollectData={isCollectData}
                                isNewRecord={isNewRecord}
                            />
                        </Grid>
                    </Grid>
                </Grid>
                {/*col 2*/}
                <Grid item xs={12} md={7} lg={7}>
                    <GroupAuthCard
                        updateUserAuthList={updateUserAuthList}
                        userGroupData={userGroupData}
                        isCollectData={isCollectData}
                        isNewRecord={isNewRecord}
                    />
                </Grid>

                {/*bottom button*/}
                <Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"end"} justifyContent="center">
                    <Grid container maxWidth justifyContent="flex-end">
                        <Grid item sx={{ml:3, mr:3, mb:3}}>
                            <Button
                                size="large"
                                variant="contained"
                                sx={{
                                    textTransform: 'capitalize',
                                    alignItems: 'end'
                                }}
                                disabled={isNewRecord}
                                onClick={handleDeleteClick}
                            >
                                Delete User Group
                            </Button>
                            <GeneralConfirmWindow
                                isWindowOpen={isWindowOpen}
                                title={"Attention"}
                                content={`Confirm to delete User Group "${userGroupData.data.name}" ?`}
                                onNormalClose={handleClose}
                                onConfirmClose={deleteData}
                            />
                        </Grid>

                        <Grid item sx={{ml: 3, mr: 3}}>
                            <Button
                                size="large"
                                variant="contained"
                                type="submit"
                                sx={{
                                    textTransform: 'capitalize',
                                    alignItems: 'end'
                                }}
                                onClick={submitData}
                            >
                                Save
                            </Button>
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
    );
};

export default UserMaintainPage;