diff --git a/typescript/Frontend/src/components/Context/InstallationContextProvider.tsx b/typescript/Frontend/src/components/Context/InstallationContextProvider.tsx index a366b8051..c6a231326 100644 --- a/typescript/Frontend/src/components/Context/InstallationContextProvider.tsx +++ b/typescript/Frontend/src/components/Context/InstallationContextProvider.tsx @@ -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 ( diff --git a/typescript/Frontend/src/components/Groups/Folder.tsx b/typescript/Frontend/src/components/Groups/Folder.tsx index 3215d7564..629b596e0 100644 --- a/typescript/Frontend/src/components/Groups/Folder.tsx +++ b/typescript/Frontend/src/components/Groups/Folder.tsx @@ -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 = () => { <> + ); diff --git a/typescript/Frontend/src/components/Groups/FolderForm.tsx b/typescript/Frontend/src/components/Groups/FolderForm.tsx index 4c2dc231c..a10e270e9 100644 --- a/typescript/Frontend/src/components/Groups/FolderForm.tsx +++ b/typescript/Frontend/src/components/Groups/FolderForm.tsx @@ -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( - 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 ( -
- - - - - - - + <> + + + + + {loading && } + - - - - - - {loading && } - - - - + + + ); }; diff --git a/typescript/Frontend/src/components/Groups/LocationForm.tsx b/typescript/Frontend/src/components/Groups/LocationForm.tsx new file mode 100644 index 000000000..2c268912f --- /dev/null +++ b/typescript/Frontend/src/components/Groups/LocationForm.tsx @@ -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( + 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 ( + + + + + + + + + + + + + + ); +}; + +export default LocationForm; diff --git a/typescript/Frontend/src/components/Groups/Users/AvailableUserList.tsx b/typescript/Frontend/src/components/Groups/Users/AvailableUserList.tsx new file mode 100644 index 000000000..f98bfa306 --- /dev/null +++ b/typescript/Frontend/src/components/Groups/Users/AvailableUserList.tsx @@ -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([]); + const [selectedUsers, setSelectedUsers] = useState([]); + + 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 ( + <> + + option.name} + renderInput={(params) => ( + + )} + onChange={(event, values) => setSelectedUsers(values)} + /> + + + + ); + } + return null; +}; + +export default AvailableUserList; diff --git a/typescript/Frontend/src/components/Groups/Users/Users.tsx b/typescript/Frontend/src/components/Groups/Users/Users.tsx index c6e55aa12..5c859bb06 100644 --- a/typescript/Frontend/src/components/Groups/Users/Users.tsx +++ b/typescript/Frontend/src/components/Groups/Users/Users.tsx @@ -1,13 +1,17 @@ import { Grid } from "@mui/material"; +import AvailableUserList from "./AvailableUserList"; import UsersWithDirectAccess from "./UsersWithDirectAccess"; import UsersWithInheritedAccess from "./UsersWithInheritedAccess"; const Users = () => { return ( - - - - + <> + + + + + + ); }; diff --git a/typescript/Frontend/src/components/Groups/Users/UsersWithInheritedAccess.tsx b/typescript/Frontend/src/components/Groups/Users/UsersWithInheritedAccess.tsx index 9eb764780..82d1c8060 100644 --- a/typescript/Frontend/src/components/Groups/Users/UsersWithInheritedAccess.tsx +++ b/typescript/Frontend/src/components/Groups/Users/UsersWithInheritedAccess.tsx @@ -65,7 +65,7 @@ const UsersWithInheritedAccess = () => { {filterDuplicateUsers(users).map( - ({ user }: UserWithInheritedAccess) => { + ({ user, folderName }: UserWithInheritedAccess) => { return ( @@ -82,7 +82,7 @@ const UsersWithInheritedAccess = () => { - this folder + {folderName} } diff --git a/typescript/Frontend/src/components/Installations/Installation.tsx b/typescript/Frontend/src/components/Installations/Installation.tsx index 9abedf62a..85432d2e3 100644 --- a/typescript/Frontend/src/components/Installations/Installation.tsx +++ b/typescript/Frontend/src/components/Installations/Installation.tsx @@ -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 ( + ); } else if (loading) { diff --git a/typescript/Frontend/src/components/Installations/InstallationList.tsx b/typescript/Frontend/src/components/Installations/InstallationList.tsx index b015e1ca4..602f94fb6 100644 --- a/typescript/Frontend/src/components/Installations/InstallationList.tsx +++ b/typescript/Frontend/src/components/Installations/InstallationList.tsx @@ -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) => { ); - } - if (data) { + } else if (data && data.length) { return ( { })} ); + } else if (error) { + console.log(error); + return ( + + {error.message} + + ); } return null; }; diff --git a/typescript/Frontend/src/util/user.util.tsx b/typescript/Frontend/src/util/user.util.tsx index 8e52021d9..68c7cfcad 100644 --- a/typescript/Frontend/src/util/user.util.tsx +++ b/typescript/Frontend/src/util/user.util.tsx @@ -13,5 +13,6 @@ export interface User { export interface UserWithInheritedAccess { folderId: number; + folderName: string; user: User; }