[WIP] add user lists to user tab
This commit is contained in:
Sina Blattmann
parent
6462b24dfd
commit
5a2151c0fb
|
|
@ -0,0 +1,22 @@
|
||||||
|
import { List } from "@mui/material";
|
||||||
|
import { ReactNode } from "react";
|
||||||
|
|
||||||
|
const InnovenergyList = ({ children }: { children: ReactNode }) => {
|
||||||
|
return (
|
||||||
|
<List
|
||||||
|
sx={{
|
||||||
|
bgcolor: "background.paper",
|
||||||
|
position: "relative",
|
||||||
|
overflow: "auto",
|
||||||
|
maxHeight: 500,
|
||||||
|
pr: 2,
|
||||||
|
}}
|
||||||
|
component="nav"
|
||||||
|
aria-labelledby="nested-list-subheader"
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</List>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InnovenergyList;
|
||||||
|
|
@ -1,99 +1,14 @@
|
||||||
import List from "@mui/material/List";
|
import { Grid } from "@mui/material";
|
||||||
import ListItemText from "@mui/material/ListItemText";
|
import UsersWithDirectAccess from "./UsersWithDirectAccess";
|
||||||
import { CircularProgress, Divider, Grid, ListItemIcon } from "@mui/material";
|
import UsersWithInheritedAccess from "./UsersWithInheritedAccess";
|
||||||
import { Fragment, useContext, useEffect, useState } from "react";
|
|
||||||
import axiosConfig from "../../../config/axiosConfig";
|
|
||||||
import { useParams } from "react-router-dom";
|
|
||||||
import ListItem from "@mui/material/ListItem";
|
|
||||||
import GroupRemoveIcon from "@mui/icons-material/GroupRemove";
|
|
||||||
import { User } from "../../../util/user.util";
|
|
||||||
import { GroupContext } from "../../Context/GroupContextProvider";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import routes from "../../../routes.json";
|
|
||||||
|
|
||||||
const InstallationList = () => {
|
const Users = () => {
|
||||||
const [data, setData] = useState<any>();
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const { id } = useParams();
|
|
||||||
const { currentType } = useContext(GroupContext);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setLoading(true);
|
|
||||||
axiosConfig
|
|
||||||
.get(
|
|
||||||
currentType === "Folder"
|
|
||||||
? "/GetUsersWithAccessToFolder"
|
|
||||||
: "/GetUsersWithAccessToInstallation",
|
|
||||||
{ params: { id } }
|
|
||||||
)
|
|
||||||
.then((res) => {
|
|
||||||
// TODO temp solution
|
|
||||||
const mappedData = res.data
|
|
||||||
.filter((element: any) => element.user)
|
|
||||||
.map((element: any) => element.user);
|
|
||||||
console.log(mappedData);
|
|
||||||
setData(mappedData);
|
|
||||||
setLoading(false);
|
|
||||||
});
|
|
||||||
}, [currentType, id]);
|
|
||||||
|
|
||||||
const filterDuplicateUsers = (data: any[]) => {
|
|
||||||
return data.reduce((prev: User[], curr: User) => {
|
|
||||||
const foundUser = prev.find((el) => el.id === curr.id);
|
|
||||||
if (foundUser) {
|
|
||||||
const prevIds = foundUser.folderIds ? foundUser.folderIds : [];
|
|
||||||
foundUser.folderIds = [...prevIds, curr.parentId];
|
|
||||||
return prev;
|
|
||||||
}
|
|
||||||
curr.folderIds = [curr.parentId];
|
|
||||||
prev.push(curr);
|
|
||||||
return prev;
|
|
||||||
}, []);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
return (
|
||||||
<Grid container justifyContent="center" width="100%">
|
<Grid container sx={{ mt: 1 }}>
|
||||||
<CircularProgress sx={{ m: 6 }} />
|
<UsersWithInheritedAccess />
|
||||||
|
<UsersWithDirectAccess />
|
||||||
</Grid>
|
</Grid>
|
||||||
);
|
);
|
||||||
}
|
|
||||||
if (data) {
|
|
||||||
return (
|
|
||||||
<List
|
|
||||||
sx={{
|
|
||||||
bgcolor: "background.paper",
|
|
||||||
position: "relative",
|
|
||||||
width: 500,
|
|
||||||
}}
|
|
||||||
component="nav"
|
|
||||||
aria-labelledby="nested-list-subheader"
|
|
||||||
>
|
|
||||||
{filterDuplicateUsers(data).map((user: User) => {
|
|
||||||
return (
|
|
||||||
<Fragment key={user.id}>
|
|
||||||
<ListItem>
|
|
||||||
<ListItemText
|
|
||||||
primary={user.name}
|
|
||||||
secondary={
|
|
||||||
<>
|
|
||||||
Inherited access from{" "}
|
|
||||||
<Link to={routes.groups + routes.users + user.parentId}>
|
|
||||||
this folder
|
|
||||||
</Link>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</ListItem>
|
|
||||||
<Divider />
|
|
||||||
</Fragment>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</List>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default InstallationList;
|
export default Users;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
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";
|
||||||
|
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<User[]>();
|
||||||
|
|
||||||
|
const { currentType } = useContext(GroupContext);
|
||||||
|
const { id } = useParams();
|
||||||
|
|
||||||
|
const fetchUsers = useCallback(async () => {
|
||||||
|
axiosConfig
|
||||||
|
.get(
|
||||||
|
currentType === "Folder"
|
||||||
|
? "/GetUsersWithDirectAccessToFolder"
|
||||||
|
: "/GetUsersWithDirectAccessToInstallation",
|
||||||
|
{ params: { id } }
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
setUsers(res.data);
|
||||||
|
});
|
||||||
|
}, [currentType, id]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchUsers();
|
||||||
|
}, [currentType, fetchUsers, id]);
|
||||||
|
|
||||||
|
const handleIconClick = (userId: number) => {
|
||||||
|
const folderId = id ? parseInt(id) : "";
|
||||||
|
axiosConfig
|
||||||
|
.post(
|
||||||
|
currentType === "Folder"
|
||||||
|
? "/RevokeUserAccessToFolder"
|
||||||
|
: "/RevokeUserAccessToInstallation",
|
||||||
|
{ userId: userId, folderId: folderId }
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
fetchUsers();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
if (users && users.length) {
|
||||||
|
return (
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<Typography variant="overline" gutterBottom>
|
||||||
|
<FormattedMessage
|
||||||
|
id="usersWithDirectAccess"
|
||||||
|
defaultMessage="Users with direct access"
|
||||||
|
/>
|
||||||
|
</Typography>
|
||||||
|
<InnovenergyList>
|
||||||
|
{users.map((user) => {
|
||||||
|
return (
|
||||||
|
<Fragment key={user.id}>
|
||||||
|
<ListItem
|
||||||
|
secondaryAction={
|
||||||
|
<IconButton
|
||||||
|
onClick={() => handleIconClick(user.id)}
|
||||||
|
edge="end"
|
||||||
|
>
|
||||||
|
<PersonRemoveIcon id={user.id.toString()} />
|
||||||
|
</IconButton>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<ListItemAvatar>
|
||||||
|
<Avatar>
|
||||||
|
<PersonIcon />
|
||||||
|
</Avatar>
|
||||||
|
</ListItemAvatar>
|
||||||
|
<ListItemText primary={user.name} />
|
||||||
|
</ListItem>
|
||||||
|
<Divider />
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</InnovenergyList>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UsersWithDirectAccess;
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
import {
|
||||||
|
Grid,
|
||||||
|
ListItem,
|
||||||
|
ListItemText,
|
||||||
|
Divider,
|
||||||
|
ListItemAvatar,
|
||||||
|
Avatar,
|
||||||
|
Typography,
|
||||||
|
} from "@mui/material";
|
||||||
|
import { Fragment, useContext, useEffect, useState } from "react";
|
||||||
|
import { Link, useParams } from "react-router-dom";
|
||||||
|
import axiosConfig from "../../../config/axiosConfig";
|
||||||
|
import { 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<UserWithInheritedAccess[]>();
|
||||||
|
|
||||||
|
const { currentType } = useContext(GroupContext);
|
||||||
|
const { id } = useParams();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
axiosConfig
|
||||||
|
.get(
|
||||||
|
currentType === "Folder"
|
||||||
|
? "/GetUsersWithInheritedAccessToFolder"
|
||||||
|
: "/GetUsersWithInheritedAccessToInstallation",
|
||||||
|
{ 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;
|
||||||
|
},
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
if (users && users.length) {
|
||||||
|
return (
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<Typography variant="overline" gutterBottom>
|
||||||
|
<FormattedMessage
|
||||||
|
id="usersWithInheritedAccess"
|
||||||
|
defaultMessage="Users with inherited access"
|
||||||
|
/>
|
||||||
|
</Typography>
|
||||||
|
<InnovenergyList>
|
||||||
|
{filterDuplicateUsers(users).map(
|
||||||
|
({ user }: UserWithInheritedAccess) => {
|
||||||
|
return (
|
||||||
|
<Fragment key={user.id}>
|
||||||
|
<ListItem>
|
||||||
|
<ListItemAvatar>
|
||||||
|
<Avatar>
|
||||||
|
<PersonIcon />
|
||||||
|
</Avatar>
|
||||||
|
</ListItemAvatar>
|
||||||
|
<ListItemText
|
||||||
|
primary={user.name}
|
||||||
|
secondary={
|
||||||
|
<>
|
||||||
|
Inherited access from{" "}
|
||||||
|
<Link
|
||||||
|
to={routes.groups + routes.users + user.parentId}
|
||||||
|
>
|
||||||
|
this folder
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</ListItem>
|
||||||
|
<Divider />
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
</InnovenergyList>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UsersWithInheritedAccess;
|
||||||
|
|
@ -10,3 +10,8 @@ export interface User {
|
||||||
type: string;
|
type: string;
|
||||||
folderIds?: number[];
|
folderIds?: number[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface UserWithInheritedAccess {
|
||||||
|
folderId: number;
|
||||||
|
user: User;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue