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

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

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) => {
         />
         <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"

typescript/Frontend/src/components/Groups/LocationForm.tsx

@@ -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"

typescript/Frontend/src/components/Groups/Tree/MoveDialog.tsx

@@ -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;

typescript/Frontend/src/components/Groups/Tree/MoveTree.tsx

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

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

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

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<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,40 +46,32 @@ 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}>
-                <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>
+      <>
+        {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>
+          );
+        })}
+      </>
     );
   }
   return null;

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<UserWithInheritedAccess[]>();
@@ -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 (
-      <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 (
-                <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}
-                          >
-                            {folderName}
-                          </Link>
-                        </>
-                      }
-                    />
-                  </ListItem>
-                  <Divider />
-                </Fragment>
-              );
-            }
-          )}
-        </InnovenergyList>
-      </Grid>
+      <>
+        {filterDuplicateUsers(users).map(
+          ({ user, folderName }: 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}>
+                          {folderName}
+                        </Link>
+                      </>
+                    }
+                  />
+                </ListItem>
+                <Divider />
+              </Fragment>
+            );
+          }
+        )}
+      </>
     );
   }
   return null;

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