Innovenergy
/
Innovenergy_trunk
2
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

[WIP] add dialog for choosing where to move folder or installation, work on access rights page

This commit is contained in:
Sina Blattmann 2023-03-24 13:06:33 +01:00
parent 05dc389eaf
commit 78b9d22fbd
10 changed files with 173 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
typescript/Frontend/src/components/Groups/Folder.tsx
View File

@ -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 = () => {
<>
<Box sx={{ py: 3 }}>
<FolderForm values={values} id={id} />
<LocationForm parentId={values.parentId} />
</Box>
</>
);

4
typescript/Frontend/src/components/Groups/FolderForm.tsx
View File

@ -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) => {
/>
<Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
{loading && <CircularProgress />}
<Button variant="outlined" type="submit" sx={{ height: 40, ml: 2 }}>
<MoveDialog values={values} />
<Button variant="outlined" type="submit" sx={{ ml: 2 }}>
<FormattedMessage
id="applyChanges"
defaultMessage="Apply changes"

7
typescript/Frontend/src/components/Groups/LocationForm.tsx
View File

@ -37,12 +37,7 @@ const LocationForm = (props: LocationFormProps) => {
<FormattedMessage id="location" defaultMessage="Location" />
</InputLabel>
</Grid>
<Grid item xs={9} display="inline">
<MoveTree
setSelectedParentId={setSelectedParentId}
parentId={selectedParentId}
/>
</Grid>
<Grid item xs={9} display="inline"></Grid>
<Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
<Button
variant="outlined"

70
typescript/Frontend/src/components/Groups/Tree/MoveDialog.tsx Normal file
View File

@ -0,0 +1,70 @@
import { Button, DialogActions, Dialog, DialogTitle } from "@mui/material";
import DialogContent from "@mui/material/DialogContent";
import { useContext, useState } from "react";
import { FormattedMessage } from "react-intl";
import { useParams } from "react-router-dom";
import axiosConfig from "../../../config/axiosConfig";
import { I_Folder } from "../../../util/types";
import { GroupContext } from "../../Context/GroupContextProvider";
import MoveTree from "./MoveTree";
interface MoveDialogProps {
values: I_Folder;
}
const MoveDialog = (props: MoveDialogProps) => {
const { values } = props;
const [open, setOpen] = useState(false);
const [selectedParentId, setSelectedParentId] = useState<number>(
values.parentId
);
const { fetchData, currentType } = useContext(GroupContext);
const { id } = useParams();
const handleMove = () => {
const route =
currentType === "Folder" ? "/MoveFolder" : "/MoveInstallation";
const paramsProp = currentType === "Folder" ? "folderId" : "installationId";
axiosConfig
.put(route, null, {
params: { [paramsProp]: id, parentId: selectedParentId },
})
.then((res) => {
setOpen(false);
fetchData();
});
};
return (
<div>
<Button variant="outlined" onClick={() => setOpen(true)}>
<FormattedMessage id="move" defaultMessage="Move" />
</Button>
<Dialog
onClose={() => setOpen(false)}
aria-labelledby="customized-dialog-title"
open={open}
sx={{
".MuiDialogContent-root": { overflowX: "hidden" },
maxHeight: 500,
}}
scroll="paper"
>
<DialogTitle>Move to</DialogTitle>
<DialogContent>
<MoveTree
parentId={selectedParentId}
setSelectedParentId={setSelectedParentId}
/>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleMove}>
Move
</Button>
</DialogActions>
</Dialog>
</div>
);
};
export default MoveDialog;

1
typescript/Frontend/src/components/Groups/Tree/MoveTree.tsx
View File

@ -45,7 +45,6 @@ const MoveTree = (props: MoveTreeProps) => {
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}
sx={{
height: 200,
flexGrow: 1,
width: 400,
overflow: "auto",

12
typescript/Frontend/src/components/Groups/Users/AvailableUserList.tsx
View File

@ -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<User[]>([]);
const [selectedUsers, setSelectedUsers] = useState<User[]>([]);

7
typescript/Frontend/src/components/Groups/Users/Users.tsx
View File

@ -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 = () => {
<>
<AvailableUserList />
<Grid container sx={{ mt: 1 }}>
<UsersWithInheritedAccess />
<Grid item xs={6}>
<InnovenergyList>
<UsersWithDirectAccess />
<UsersWithInheritedAccess />
</InnovenergyList>
</Grid>
</Grid>
</>
);

35
typescript/Frontend/src/components/Groups/Users/UsersWithDirectAccess.tsx
View File

@ -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<User[]>();
@ -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,14 +46,7 @@ const UsersWithDirectAccess = () => {
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}>
@ -89,8 +71,7 @@ const UsersWithDirectAccess = () => {
</Fragment>
);
})}
</InnovenergyList>
</Grid>
</>
);
}
return null;

58
typescript/Frontend/src/components/Groups/Users/UsersWithInheritedAccess.tsx
View File

@ -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<UserWithInheritedAccess[]>();
@ -23,47 +22,21 @@ 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 (
<Grid item xs={6}>
<Typography variant="overline" gutterBottom>
<FormattedMessage
id="usersWithInheritedAccess"
defaultMessage="Users with inherited access"
/>
</Typography>
<InnovenergyList>
<>
{filterDuplicateUsers(users).map(
({ user, folderName }: UserWithInheritedAccess) => {
return (
@ -79,9 +52,7 @@ const UsersWithInheritedAccess = () => {
secondary={
<>
Inherited access from{" "}
<Link
to={routes.groups + routes.users + user.parentId}
>
<Link to={routes.groups + routes.users + user.parentId}>
{folderName}
</Link>
</>
@ -93,8 +64,7 @@ const UsersWithInheritedAccess = () => {
);
}
)}
</InnovenergyList>
</Grid>
</>
);
}
return null;

19
typescript/Frontend/src/util/user.util.tsx
View File

@ -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;
},
[]
);
};