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

[WIP] added multi select to grant access to users

This commit is contained in:
Sina Blattmann 2023-03-23 15:46:15 +01:00
parent bf63da1ffd
commit 7a0012c626
10 changed files with 208 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
typescript/Frontend/src/components/Context/InstallationContextProvider.tsx
View File

@ -20,7 +20,7 @@ export const InstallationContext =
fetchData: () => Promise.resolve(),
loading: false,
setLoading: () => {},
setError: (value) => {},
setError: () => {},
});
const InstallationContextProvider = ({ children }: { children: ReactNode }) => {
@ -36,7 +36,10 @@ const InstallationContextProvider = ({ children }: { children: ReactNode }) => {
setData(res.data);
setLoading(false);
})
.catch((err: AxiosError) => setError(err));
.catch((err: AxiosError) => {
setLoading(false);
setError(err);
});
}, []);
return (

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

@ -5,6 +5,7 @@ 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();
@ -31,6 +32,7 @@ const Folder = () => {
<>
<Box sx={{ py: 3 }}>
<FolderForm values={values} id={id} />
<LocationForm parentId={values.parentId} />
</Box>
</>
);

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

@ -1,4 +1,4 @@
import { Button, CircularProgress, Grid, InputLabel } from "@mui/material";
import { Button, CircularProgress, Grid } from "@mui/material";
import { useFormik } from "formik";
import { useContext, useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -7,7 +7,6 @@ import { I_Folder } from "../../util/types";
import { GroupContext } from "../Context/GroupContextProvider";
import InnovenergySnackbar from "../InnovenergySnackbar";
import InnovenergyTextfield from "../Layout/InnovenergyTextfield";
import MoveTree from "./Tree/MoveTree";
interface I_CustomerFormProps {
values: I_Folder;
@ -26,9 +25,6 @@ const FolderForm = (props: I_CustomerFormProps) => {
const [snackbarOpen, setSnackbarOpen] = useState(false);
const [error, setError] = useState();
const [loading, setLoading] = useState(false);
const [selectedParentId, setSelectedParentId] = useState<number>(
values.parentId
);
const formik = useFormik({
initialValues: {
@ -41,7 +37,6 @@ const FolderForm = (props: I_CustomerFormProps) => {
updateFolder({
...values,
...formikValues,
parentId: selectedParentId ?? values.parentId,
id: idAsNumber,
})
.then((res) => {
@ -59,52 +54,44 @@ const FolderForm = (props: I_CustomerFormProps) => {
});
return (
<form onSubmit={formik.handleSubmit}>
<InnovenergyTextfield
id="name-textfield"
label={intl.formatMessage({
id: "name",
defaultMessage: "Name",
})}
name="name"
value={formik.values.name}
handleChange={formik.handleChange}
/>
<InnovenergyTextfield
id="information-textfield"
label={intl.formatMessage({
id: "information",
defaultMessage: "Information",
})}
name="information"
value={formik.values.information}
handleChange={formik.handleChange}
/>
<Grid container direction="row" alignItems="center" spacing={2}>
<Grid item xs={3} alignItems="start">
<InputLabel style={{ marginBottom: "180px" }}>
<FormattedMessage id="location" defaultMessage="Location" />
</InputLabel>
<>
<form onSubmit={formik.handleSubmit}>
<InnovenergyTextfield
id="name-textfield"
label={intl.formatMessage({
id: "name",
defaultMessage: "Name",
})}
name="name"
value={formik.values.name}
handleChange={formik.handleChange}
/>
<InnovenergyTextfield
id="information-textfield"
label={intl.formatMessage({
id: "information",
defaultMessage: "Information",
})}
name="information"
value={formik.values.information}
handleChange={formik.handleChange}
/>
<Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
{loading && <CircularProgress />}
<Button variant="outlined" type="submit" sx={{ height: 40, ml: 2 }}>
<FormattedMessage
id="applyChanges"
defaultMessage="Apply changes"
/>
</Button>
</Grid>
<Grid item xs={9} display="inline">
<MoveTree
setSelectedParentId={setSelectedParentId}
parentId={selectedParentId}
/>
</Grid>
</Grid>
<Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
{loading && <CircularProgress />}
<Button variant="outlined" type="submit" sx={{ height: 40, ml: 2 }}>
<FormattedMessage id="applyChanges" defaultMessage="Apply changes" />
</Button>
</Grid>
<InnovenergySnackbar
error={error}
setOpen={setSnackbarOpen}
open={snackbarOpen}
/>
</form>
<InnovenergySnackbar
error={error}
setOpen={setSnackbarOpen}
open={snackbarOpen}
/>
</form>
</>
);
};

59
typescript/Frontend/src/components/Groups/LocationForm.tsx Normal file
View File

@ -0,0 +1,59 @@
import { Button, Grid, InputLabel } from "@mui/material";
import { useContext, useState } from "react";
import { FormattedMessage } from "react-intl";
import { useParams } from "react-router-dom";
import axiosConfig from "../../config/axiosConfig";
import { GroupContext } from "../Context/GroupContextProvider";
import MoveTree from "./Tree/MoveTree";
interface LocationFormProps {
parentId: number;
}
const LocationForm = (props: LocationFormProps) => {
const [selectedParentId, setSelectedParentId] = useState<number>(
props.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) => {
fetchData();
});
};
return (
<Grid container direction="row" alignItems="center" spacing={2}>
<Grid item xs={3} alignItems="start">
<InputLabel style={{ marginBottom: "180px" }}>
<FormattedMessage id="location" defaultMessage="Location" />
</InputLabel>
</Grid>
<Grid item xs={9} display="inline">
<MoveTree
setSelectedParentId={setSelectedParentId}
parentId={selectedParentId}
/>
</Grid>
<Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
<Button
variant="outlined"
sx={{ height: 40, ml: 2 }}
onClick={handleMove}
>
<FormattedMessage id="move" defaultMessage="Move" />
</Button>
</Grid>
</Grid>
);
};
export default LocationForm;

82
typescript/Frontend/src/components/Groups/Users/AvailableUserList.tsx Normal file
View File

@ -0,0 +1,82 @@
import {
Autocomplete,
Button,
CircularProgress,
Grid,
TextField,
} from "@mui/material";
import { useContext, useEffect, useState } from "react";
import { FormattedMessage } from "react-intl";
import { useParams } from "react-router-dom";
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[]>([]);
const { currentType } = useContext(GroupContext);
const { id } = useParams();
useEffect(() => {
axiosConfig.get("/GetAllChildUsers").then((res) => {
setUsers(res.data);
});
}, []);
const handleGrant = () => {
selectedUsers.forEach((user) => {
const bodyProp = currentType === "Folder" ? "folderId" : "installationId";
const elementId = id ? parseInt(id) : "";
axiosConfig
.post(
currentType === "Folder"
? "/GrantUserAccessToFolder"
: "/GrantUserAccessToInstallation",
{ userId: user.id, [bodyProp]: elementId }
)
.then((res) => {
console.log(res);
});
});
};
if (users) {
return (
<>
<Grid container sx={{ pt: 1 }}>
<Autocomplete
sx={{ width: "500px" }}
multiple
id="tags-standard"
options={users}
getOptionLabel={(option) => option.name}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
label="Grant access to user"
placeholder="User"
/>
)}
onChange={(event, values) => setSelectedUsers(values)}
/>
<Button
variant="outlined"
type="submit"
sx={{ height: 40, ml: 2 }}
onClick={handleGrant}
>
<FormattedMessage id="grantAccess" defaultMessage="Grant access" />
</Button>
</Grid>
</>
);
}
return null;
};
export default AvailableUserList;

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

@ -1,13 +1,17 @@
import { Grid } from "@mui/material";
import AvailableUserList from "./AvailableUserList";
import UsersWithDirectAccess from "./UsersWithDirectAccess";
import UsersWithInheritedAccess from "./UsersWithInheritedAccess";
const Users = () => {
return (
<Grid container sx={{ mt: 1 }}>
<UsersWithInheritedAccess />
<UsersWithDirectAccess />
</Grid>
<>
<AvailableUserList />
<Grid container sx={{ mt: 1 }}>
<UsersWithInheritedAccess />
<UsersWithDirectAccess />
</Grid>
</>
);
};

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

@ -65,7 +65,7 @@ const UsersWithInheritedAccess = () => {
</Typography>
<InnovenergyList>
{filterDuplicateUsers(users).map(
({ user }: UserWithInheritedAccess) => {
({ user, folderName }: UserWithInheritedAccess) => {
return (
<Fragment key={user.id}>
<ListItem>
@ -82,7 +82,7 @@ const UsersWithInheritedAccess = () => {
<Link
to={routes.groups + routes.users + user.parentId}
>
this folder
{folderName}
</Link>
</>
}

2
typescript/Frontend/src/components/Installations/Installation.tsx
View File

@ -5,6 +5,7 @@ import { useParams } from "react-router-dom";
import CustomerForm from "./CustomerForm";
import axiosConfig from "../../config/axiosConfig";
import { I_Installation } from "../../util/types";
import LocationForm from "../Groups/LocationForm";
const Installation = () => {
const { id } = useParams();
@ -30,6 +31,7 @@ const Installation = () => {
return (
<Box sx={{ py: 3 }}>
<CustomerForm values={values} id={id} />
<LocationForm parentId={values.parentId} />
</Box>
);
} else if (loading) {

12
typescript/Frontend/src/components/Installations/InstallationList.tsx
View File

@ -1,7 +1,7 @@
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import { CircularProgress, Divider, Grid } from "@mui/material";
import { Alert, CircularProgress, Divider, Grid } from "@mui/material";
import { Link } from "react-router-dom";
import useRouteMatch from "../../hooks/useRouteMatch";
import routes from "../../routes.json";
@ -57,8 +57,7 @@ const InstallationList = (props: InstallationListProps) => {
<CircularProgress sx={{ m: 6 }} />
</Grid>
);
}
if (data) {
} else if (data && data.length) {
return (
<List
sx={{
@ -96,6 +95,13 @@ const InstallationList = (props: InstallationListProps) => {
})}
</List>
);
} else if (error) {
console.log(error);
return (
<Alert severity="error" sx={{ mt: 1 }}>
{error.message}
</Alert>
);
}
return null;
};

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

@ -13,5 +13,6 @@ export interface User {
export interface UserWithInheritedAccess {
folderId: number;
folderName: string;
user: User;
}