diff --git a/typescript/Frontend/src/components/Groups/Folder.tsx b/typescript/Frontend/src/components/Groups/Folder.tsx index 629b596e0..3215d7564 100644 --- a/typescript/Frontend/src/components/Groups/Folder.tsx +++ b/typescript/Frontend/src/components/Groups/Folder.tsx @@ -5,7 +5,6 @@ import { useParams } from "react-router-dom"; import axiosConfig from "../../config/axiosConfig"; import { I_Installation } from "../../util/types"; import FolderForm from "./FolderForm"; -import LocationForm from "./LocationForm"; const Folder = () => { const { id } = useParams(); @@ -32,7 +31,6 @@ const Folder = () => { <> - ); diff --git a/typescript/Frontend/src/components/Groups/FolderForm.tsx b/typescript/Frontend/src/components/Groups/FolderForm.tsx index a10e270e9..26852bce8 100644 --- a/typescript/Frontend/src/components/Groups/FolderForm.tsx +++ b/typescript/Frontend/src/components/Groups/FolderForm.tsx @@ -7,6 +7,7 @@ import { I_Folder } from "../../util/types"; import { GroupContext } from "../Context/GroupContextProvider"; import InnovenergySnackbar from "../InnovenergySnackbar"; import InnovenergyTextfield from "../Layout/InnovenergyTextfield"; +import MoveDialog from "./Tree/MoveDialog"; interface I_CustomerFormProps { values: I_Folder; @@ -78,7 +79,8 @@ const FolderForm = (props: I_CustomerFormProps) => { /> {loading && } - + setOpen(false)} + aria-labelledby="customized-dialog-title" + open={open} + sx={{ + ".MuiDialogContent-root": { overflowX: "hidden" }, + maxHeight: 500, + }} + scroll="paper" + > + Move to + + + + + + + + + ); +}; + +export default MoveDialog; diff --git a/typescript/Frontend/src/components/Groups/Tree/MoveTree.tsx b/typescript/Frontend/src/components/Groups/Tree/MoveTree.tsx index 5bf71feb4..04e6b4a34 100644 --- a/typescript/Frontend/src/components/Groups/Tree/MoveTree.tsx +++ b/typescript/Frontend/src/components/Groups/Tree/MoveTree.tsx @@ -45,7 +45,6 @@ const MoveTree = (props: MoveTreeProps) => { defaultCollapseIcon={} defaultExpandIcon={} sx={{ - height: 200, flexGrow: 1, width: 400, overflow: "auto", diff --git a/typescript/Frontend/src/components/Groups/Users/AvailableUserList.tsx b/typescript/Frontend/src/components/Groups/Users/AvailableUserList.tsx index f98bfa306..d63b0db51 100644 --- a/typescript/Frontend/src/components/Groups/Users/AvailableUserList.tsx +++ b/typescript/Frontend/src/components/Groups/Users/AvailableUserList.tsx @@ -1,10 +1,4 @@ -import { - Autocomplete, - Button, - CircularProgress, - Grid, - TextField, -} from "@mui/material"; +import { Autocomplete, Button, Grid, TextField } from "@mui/material"; import { useContext, useEffect, useState } from "react"; import { FormattedMessage } from "react-intl"; import { useParams } from "react-router-dom"; @@ -12,10 +6,6 @@ import axiosConfig from "../../../config/axiosConfig"; import { User } from "../../../util/user.util"; import { GroupContext } from "../../Context/GroupContextProvider"; -interface AutoCompleteOption { - label: string; - id: number; -} const AvailableUserList = () => { const [users, setUsers] = useState([]); const [selectedUsers, setSelectedUsers] = useState([]); diff --git a/typescript/Frontend/src/components/Groups/Users/Users.tsx b/typescript/Frontend/src/components/Groups/Users/Users.tsx index 5c859bb06..b1b3134be 100644 --- a/typescript/Frontend/src/components/Groups/Users/Users.tsx +++ b/typescript/Frontend/src/components/Groups/Users/Users.tsx @@ -1,5 +1,6 @@ import { Grid } from "@mui/material"; import AvailableUserList from "./AvailableUserList"; +import InnovenergyList from "./UserList"; import UsersWithDirectAccess from "./UsersWithDirectAccess"; import UsersWithInheritedAccess from "./UsersWithInheritedAccess"; @@ -8,8 +9,12 @@ const Users = () => { <> - - + + + + + + ); diff --git a/typescript/Frontend/src/components/Groups/Users/UsersWithDirectAccess.tsx b/typescript/Frontend/src/components/Groups/Users/UsersWithDirectAccess.tsx index c8e0220b3..18587a27b 100644 --- a/typescript/Frontend/src/components/Groups/Users/UsersWithDirectAccess.tsx +++ b/typescript/Frontend/src/components/Groups/Users/UsersWithDirectAccess.tsx @@ -1,12 +1,10 @@ import { - Grid, ListItem, ListItemText, Divider, IconButton, Avatar, ListItemAvatar, - Typography, } from "@mui/material"; import { Fragment, useCallback, useContext, useEffect, useState } from "react"; import axiosConfig from "../../../config/axiosConfig"; @@ -14,9 +12,7 @@ import { User } from "../../../util/user.util"; import PersonRemoveIcon from "@mui/icons-material/PersonRemove"; import { GroupContext } from "../../Context/GroupContextProvider"; import { useParams } from "react-router-dom"; -import InnovenergyList from "./UserList"; import PersonIcon from "@mui/icons-material/Person"; -import { FormattedMessage } from "react-intl"; const UsersWithDirectAccess = () => { const [users, setUsers] = useState(); @@ -26,12 +22,7 @@ const UsersWithDirectAccess = () => { const fetchUsers = useCallback(async () => { axiosConfig - .get( - currentType === "Folder" - ? "/GetUsersWithDirectAccessToFolder" - : "/GetUsersWithDirectAccessToInstallation", - { params: { id } } - ) + .get("/GetUsersWithDirectAccessTo" + currentType, { params: { id } }) .then((res) => { setUsers(res.data); }); @@ -39,17 +30,15 @@ const UsersWithDirectAccess = () => { useEffect(() => { fetchUsers(); - }, [currentType, fetchUsers, id]); + }, [fetchUsers]); const handleIconClick = (userId: number) => { const folderId = id ? parseInt(id) : ""; axiosConfig - .post( - currentType === "Folder" - ? "/RevokeUserAccessToFolder" - : "/RevokeUserAccessToInstallation", - { userId: userId, folderId: folderId } - ) + .post("/RevokeUserAccessTo" + currentType, { + userId: userId, + folderId: folderId, + }) .then((res) => { fetchUsers(); }); @@ -57,40 +46,32 @@ const UsersWithDirectAccess = () => { if (users && users.length) { return ( - - - - - - {users.map((user) => { - return ( - - handleIconClick(user.id)} - edge="end" - > - - - } - > - - - - - - - - - - ); - })} - - + <> + {users.map((user) => { + return ( + + handleIconClick(user.id)} + edge="end" + > + + + } + > + + + + + + + + + + ); + })} + ); } return null; diff --git a/typescript/Frontend/src/components/Groups/Users/UsersWithInheritedAccess.tsx b/typescript/Frontend/src/components/Groups/Users/UsersWithInheritedAccess.tsx index 82d1c8060..44e4a6e71 100644 --- a/typescript/Frontend/src/components/Groups/Users/UsersWithInheritedAccess.tsx +++ b/typescript/Frontend/src/components/Groups/Users/UsersWithInheritedAccess.tsx @@ -1,21 +1,20 @@ import { - Grid, ListItem, ListItemText, Divider, ListItemAvatar, Avatar, - Typography, } from "@mui/material"; -import { Fragment, useContext, useEffect, useState } from "react"; +import { Fragment, useCallback, useContext, useEffect, useState } from "react"; import { Link, useParams } from "react-router-dom"; import axiosConfig from "../../../config/axiosConfig"; -import { UserWithInheritedAccess } from "../../../util/user.util"; +import { + filterDuplicateUsers, + UserWithInheritedAccess, +} from "../../../util/user.util"; import { GroupContext } from "../../Context/GroupContextProvider"; import routes from "../../../routes.json"; -import InnovenergyList from "./UserList"; import PersonIcon from "@mui/icons-material/Person"; -import { FormattedMessage } from "react-intl"; const UsersWithInheritedAccess = () => { const [users, setUsers] = useState(); @@ -23,78 +22,49 @@ const UsersWithInheritedAccess = () => { const { currentType } = useContext(GroupContext); const { id } = useParams(); - useEffect(() => { + const fetchUsers = useCallback(async () => { axiosConfig - .get( - currentType === "Folder" - ? "/GetUsersWithInheritedAccessToFolder" - : "/GetUsersWithInheritedAccessToInstallation", - { params: { id } } - ) + .get("/GetUsersWithInheritedAccessTo" + currentType, { params: { id } }) .then((res) => { setUsers(res.data); }); }, [currentType, id]); - const filterDuplicateUsers = (data: any[]) => { - return data.reduce( - (prev: UserWithInheritedAccess[], curr: UserWithInheritedAccess) => { - const foundUser = prev.find(({ user }) => user.id === curr.user.id); - if (foundUser) { - const prevIds = foundUser.user.folderIds - ? foundUser.user.folderIds - : []; - foundUser.user.folderIds = [...prevIds, curr.user.parentId]; - return prev; - } - curr.user.folderIds = [curr.user.parentId]; - prev.push(curr); - return prev; - }, - [] - ); - }; + useEffect(() => { + fetchUsers(); + }, [fetchUsers]); + if (users && users.length) { return ( - - - - - - {filterDuplicateUsers(users).map( - ({ user, folderName }: UserWithInheritedAccess) => { - return ( - - - - - - - - - Inherited access from{" "} - - {folderName} - - - } - /> - - - - ); - } - )} - - + <> + {filterDuplicateUsers(users).map( + ({ user, folderName }: UserWithInheritedAccess) => { + return ( + + + + + + + + + Inherited access from{" "} + + {folderName} + + + } + /> + + + + ); + } + )} + ); } return null; diff --git a/typescript/Frontend/src/util/user.util.tsx b/typescript/Frontend/src/util/user.util.tsx index 68c7cfcad..7f1e2bed8 100644 --- a/typescript/Frontend/src/util/user.util.tsx +++ b/typescript/Frontend/src/util/user.util.tsx @@ -16,3 +16,22 @@ export interface UserWithInheritedAccess { folderName: string; user: User; } + +export const filterDuplicateUsers = (data: any[]) => { + return data.reduce( + (prev: UserWithInheritedAccess[], curr: UserWithInheritedAccess) => { + const foundUser = prev.find(({ user }) => user.id === curr.user.id); + if (foundUser) { + const prevIds = foundUser.user.folderIds + ? foundUser.user.folderIds + : []; + foundUser.user.folderIds = [...prevIds, curr.user.parentId]; + return prev; + } + curr.user.folderIds = [curr.user.parentId]; + prev.push(curr); + return prev; + }, + [] + ); +};