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

[WIP] add drag handle to drag and drop, add error handling and user feedback

This commit is contained in:
Sina Blattmann 2023-03-13 11:41:56 +01:00
parent 366e0af986
commit 3a6f4fc046
16 changed files with 249 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
typescript/Frontend/package-lock.json generated
View File

@ -26,6 +26,7 @@
"chart.js": "^4.2.1",
"css-loader": "^6.7.3",
"formik": "^2.2.9",
"mobx-react-lite": "^3.4.3",
"react": "^18.2.0",
"react-chartjs-2": "^5.2.0",
"react-dnd": "^16.0.1",
@ -13218,6 +13219,37 @@
"mkdirp": "bin/cmd.js"
}
},
"node_modules/mobx": {
"version": "6.8.0",
"resolved": "https://registry.npmjs.org/mobx/-/mobx-6.8.0.tgz",
"integrity": "sha512-+o/DrHa4zykFMSKfS8Z+CPSEg5LW9tSNGTuN8o6MF1GKxlfkSHSeJn5UtgxvPkGgaouplnrLXCF+duAsmm6FHQ==",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mobx"
}
},
"node_modules/mobx-react-lite": {
"version": "3.4.3",
"resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.4.3.tgz",
"integrity": "sha512-NkJREyFTSUXR772Qaai51BnE1voWx56LOL80xG7qkZr6vo8vEaLF3sz1JNUVh+rxmUzxYaqOhfuxTfqUh0FXUg==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mobx"
},
"peerDependencies": {
"mobx": "^6.1.0",
"react": "^16.8.0 || ^17 || ^18"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
},
"react-native": {
"optional": true
}
}
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -28150,6 +28182,18 @@
"minimist": "^1.2.6"
}
},
"mobx": {
"version": "6.8.0",
"resolved": "https://registry.npmjs.org/mobx/-/mobx-6.8.0.tgz",
"integrity": "sha512-+o/DrHa4zykFMSKfS8Z+CPSEg5LW9tSNGTuN8o6MF1GKxlfkSHSeJn5UtgxvPkGgaouplnrLXCF+duAsmm6FHQ==",
"peer": true
},
"mobx-react-lite": {
"version": "3.4.3",
"resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.4.3.tgz",
"integrity": "sha512-NkJREyFTSUXR772Qaai51BnE1voWx56LOL80xG7qkZr6vo8vEaLF3sz1JNUVh+rxmUzxYaqOhfuxTfqUh0FXUg==",
"requires": {}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

1
typescript/Frontend/package.json
View File

@ -21,6 +21,7 @@
"chart.js": "^4.2.1",
"css-loader": "^6.7.3",
"formik": "^2.2.9",
"mobx-react-lite": "^3.4.3",
"react": "^18.2.0",
"react-chartjs-2": "^5.2.0",
"react-dnd": "^16.0.1",

14
typescript/Frontend/src/Login.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from "react";
import { Alert, Button, CircularProgress, Grid } from "@mui/material";
import Container from "@mui/material/Container";
import axiosConfig, { axiosConfigWithoutToken } from "./config/axiosConfig";
import { axiosConfigWithoutToken } from "./config/axiosConfig";
import InnovenergyTextfield from "./components/Layout/InnovenergyTextfield";
const loginUser = async (username: string, password: string) => {
@ -17,18 +17,20 @@ const Login = ({ setToken }: { setToken: (value: string) => void }) => {
const [loading, setLoading] = useState(false);
const [error, setError] = useState();
const verifyToken = async () => {
axiosConfig.get("/GetAllInstallations");
const verifyToken = async (token: string) => {
axiosConfigWithoutToken.get("/GetAllInstallations", {
headers: { auth: token },
});
};
const handleSubmit = () => {
setLoading(true);
loginUser(username, password).then(({ data }) => {
// TODO change this if they return err codes from backend
if (typeof data === "string") {
verifyToken()
if (data && data.token) {
verifyToken(data.token)
.then(() => {
setToken(data);
setToken(data.token);
setLoading(false);
})
.catch((err) => {

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

@ -1,10 +1,11 @@
import { Box, CircularProgress, Alert } from "@mui/material";
import { AxiosError } from "axios";
import { useState, useEffect } from "react";
import { useState, useEffect, useContext } from "react";
import { useParams } from "react-router-dom";
import axiosConfig from "../../config/axiosConfig";
import { I_Installation } from "../../util/types";
import FolderForm from "./FolderForm";
import GroupDataContext from "./Tree/GroupDataContext";
const Folder = () => {
const { id } = useParams();

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

@ -1,9 +1,10 @@
import { Alert, Button, Grid, Snackbar } from "@mui/material";
import { Button, CircularProgress, Grid } from "@mui/material";
import { useFormik } from "formik";
import { useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import axiosConfig from "../../config/axiosConfig";
import { I_Folder } from "../../util/types";
import InnovenergySnackbar from "../InnovenergySnackbar";
import InnovenergyTextfield from "../Layout/InnovenergyTextfield";
interface I_CustomerFormProps {
@ -19,6 +20,8 @@ const FolderForm = (props: I_CustomerFormProps) => {
const intl = useIntl();
const [snackbarOpen, setSnackbarOpen] = useState(false);
const [error, setError] = useState();
const [loading, setLoading] = useState(false);
const formik = useFormik({
initialValues: {
@ -26,21 +29,25 @@ const FolderForm = (props: I_CustomerFormProps) => {
information: values.information,
},
onSubmit: (formikValues) => {
setLoading(true);
const idAsNumber = parseInt(id, 10);
updateFolder({
...values,
...formikValues,
id: idAsNumber,
}).then((res) => {
setSnackbarOpen(true);
});
})
.then((res) => {
setSnackbarOpen(true);
setLoading(false);
})
.catch((err) => {
setSnackbarOpen(true);
setError(err);
setLoading(false);
});
},
});
const handleClose = () => {
setSnackbarOpen(false);
};
return (
<form onSubmit={formik.handleSubmit}>
<InnovenergyTextfield
@ -64,26 +71,16 @@ const FolderForm = (props: I_CustomerFormProps) => {
handleChange={formik.handleChange}
/>
<Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
<Button variant="outlined" type="submit">
{loading && <CircularProgress />}
<Button variant="outlined" type="submit" sx={{ height: 40, ml: 2 }}>
<FormattedMessage id="applyChanges" defaultMessage="Apply changes" />
</Button>
</Grid>
<Snackbar
<InnovenergySnackbar
error={error}
setOpen={setSnackbarOpen}
open={snackbarOpen}
anchorOrigin={{
vertical: "top",
horizontal: "center",
}}
autoHideDuration={6000}
onClose={handleClose}
>
<Alert onClose={handleClose} severity="success" sx={{ width: "100%" }}>
<FormattedMessage
id="updatedSuccessfully"
defaultMessage="Updated successfully"
/>
</Alert>
</Snackbar>
/>
</form>
);
};

80
typescript/Frontend/src/components/Groups/GroupTabs.tsx
View File

@ -17,45 +17,51 @@ const GroupTabs = () => {
const id = routeMatch?.params?.id;
const intl = useIntl();
return (
<Box sx={{ width: "100%" }}>
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<Tabs value={routeMatch?.pattern?.path} aria-label="basic tabs example">
{routeMatch?.pathname.includes("folder") ? (
<Tab
label={intl.formatMessage({
id: "folder",
defaultMessage: "Folder",
})}
value={routes.groups + routes.folder + ":id"}
component={Link}
to={routes.folder + id}
/>
) : (
<Tab
label={intl.formatMessage({
id: "installation",
defaultMessage: "Installation",
})}
value={routes.groups + routes.installation + ":id"}
component={Link}
to={routes.installation + id}
/>
)}
if (id) {
return (
<Box sx={{ width: "100%" }}>
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<Tabs
value={routeMatch?.pattern?.path}
aria-label="basic tabs example"
>
{routeMatch?.pathname.includes("folder") ? (
<Tab
label={intl.formatMessage({
id: "folder",
defaultMessage: "Folder",
})}
value={routes.groups + routes.folder + ":id"}
component={Link}
to={routes.folder + id}
/>
) : (
<Tab
label={intl.formatMessage({
id: "installation",
defaultMessage: "Installation",
})}
value={routes.groups + routes.installation + ":id"}
component={Link}
to={routes.installation + id}
/>
)}
<Tab
label={intl.formatMessage({
id: "users",
defaultMessage: "Users",
})}
value={routes.groups + routes.users + ":id"}
component={Link}
to={routes.users + id}
/>
</Tabs>
<Tab
label={intl.formatMessage({
id: "users",
defaultMessage: "Users",
})}
value={routes.groups + routes.users + ":id"}
component={Link}
to={routes.users + id}
/>
</Tabs>
</Box>
</Box>
</Box>
);
);
}
return null;
};
export default GroupTabs;

6
typescript/Frontend/src/components/Groups/Groups.tsx
View File

@ -1,7 +1,9 @@
import { Grid } from "@mui/material";
import { Container } from "@mui/system";
import { useState } from "react";
import { Routes, Route } from "react-router";
import routes from "../../routes.json";
import { I_Folder, I_Installation } from "../../util/types";
import InstallationDetail from "../Installations/Installation";
import NavigationButtons from "../Layout/NavigationButtons";
import Folder from "./Folder";
@ -9,12 +11,14 @@ import GroupTabs from "./GroupTabs";
import GroupTree from "./Tree/GroupTree";
const Groups = () => {
const [data, setData] = useState<(I_Folder | I_Installation)[]>();
return (
<Container maxWidth="xl">
<Grid container spacing={2}>
<Grid item xs={3}>
<NavigationButtons />
<GroupTree />
<GroupTree data={data} setData={setData} />
</Grid>
<Grid item xs={9}>
<GroupTabs />

2
typescript/Frontend/src/components/Groups/Tree/DragPreview.tsx
View File

@ -1,7 +1,7 @@
import { DragLayerMonitorProps } from "@minoru/react-dnd-treeview";
import { I_Installation, I_Folder } from "../../../util/types";
import styles from "./DragPreview.module.scss";
import TypeIcon from "./TypeIcon";
import TypeIcon from "../TypeIcon";
interface DragPreviewProps {
monitorProps: DragLayerMonitorProps<I_Installation | I_Folder>;

13
typescript/Frontend/src/components/Groups/Tree/GroupDataContext.tsx Normal file
View File

@ -0,0 +1,13 @@
import { createContext } from "react";
import { I_Folder, I_Installation } from "../../../util/types";
interface GroupData {
data: (I_Folder | I_Installation)[] | undefined;
setData: (value: (I_Folder | I_Installation)[]) => void;
}
const GroupDataContext = createContext<GroupData>({
setData: (value) => {},
data: [],
});
export default GroupDataContext;

2
typescript/Frontend/src/components/Groups/Tree/GroupTree.module.scss
View File

@ -20,6 +20,6 @@
}
.treeContainer {
height: 500px;
max-height: 500px;
overflow: auto;
}

68
typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx
View File

@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import axiosConfig from "../../../config/axiosConfig";
import { I_Folder, I_Installation } from "../../../util/types";
import { CircularProgress, Grid } from "@mui/material";
import { Alert, CircularProgress, Grid } from "@mui/material";
import { DndProvider } from "react-dnd";
import {
MultiBackend,
@ -14,6 +14,7 @@ import TreeNode from "./TreeNode";
import styles from "./GroupTree.module.scss";
import withScrolling from "react-dnd-scrolling";
import DragPreview from "./DragPreview";
import InnovenergySnackbar from "../../InnovenergySnackbar";
const getTreeData = (
data: (I_Folder | I_Installation)[]
@ -30,21 +31,49 @@ const getTreeData = (
});
};
const GroupTree = () => {
const [data, setData] = useState<(I_Folder | I_Installation)[]>();
interface GroupTreeProps {
data: (I_Folder | I_Installation)[] | undefined;
setData: (value: (I_Folder | I_Installation)[]) => void;
}
const GroupTree = (props: GroupTreeProps) => {
const { data, setData } = props;
const [loading, setLoading] = useState(false);
const [getError, setGetError] = useState(false);
const [putError, setPutError] = useState(false);
const [snackbarOpen, setSnackbarOpen] = useState(false);
const ScrollingComponent = withScrolling("div");
const getData = useCallback(async () => {
setLoading(true);
return axiosConfig
.get("/GetAllFoldersAndInstallations")
.then((res) => {
setData(res.data);
setLoading(false);
})
.catch((err) => {
setGetError(err);
setLoading(false);
});
}, [setData]);
useEffect(() => {
getData();
}, []);
}, [getData]);
const getData = async () => {
setLoading(true);
return axiosConfig.get("/GetAllFoldersAndInstallations").then((res) => {
setData(res.data);
setLoading(false);
});
const findParent = (element: I_Folder | I_Installation): any => {
if (data) {
const parent = data.find(
(el) => el.type === "Folder" && el.id === element.parentId
);
if (parent) {
return findParent(parent);
}
return element.parentId;
}
};
const handleDrop = (
@ -62,7 +91,13 @@ const GroupTree = () => {
}
)
.then(() => {
setSnackbarOpen(true);
getData();
})
.catch((err) => {
setPutError(err);
setLoading(false);
setSnackbarOpen(true);
});
};
@ -107,8 +142,19 @@ const GroupTree = () => {
) => handleDrop(tree, options)}
/>
</ScrollingComponent>
<InnovenergySnackbar
error={putError}
open={snackbarOpen}
setOpen={setSnackbarOpen}
/>
</DndProvider>
);
} else if (getError) {
return (
<Alert severity="error" sx={{ mt: 1 }}>
Couldn't load data
</Alert>
);
}
return null;
};

3
typescript/Frontend/src/components/Groups/Tree/TreeNode.tsx
View File

@ -6,7 +6,7 @@ import styles from "./TreeNode.module.scss";
import { Link } from "react-router-dom";
import routes from "../../../routes.json";
import { I_Folder, I_Installation } from "../../../util/types";
import TypeIcon from "./TypeIcon";
import TypeIcon from "../TypeIcon";
import DragHandleIcon from "@mui/icons-material/DragHandle";
type Props = {
@ -52,6 +52,7 @@ const TreeNode: React.FC<Props> = (props) => {
textDecoration: "none",
color: "black",
}}
draggable={false}
>
<div className={styles.labelGridItem}>
<Typography variant="body2">{node.text}</Typography>

0
typescript/Frontend/src/components/Groups/Tree/TypeIcon.tsx → typescript/Frontend/src/components/Groups/TypeIcon.tsx
View File

46
typescript/Frontend/src/components/InnovenergySnackbar.tsx Normal file
View File

@ -0,0 +1,46 @@
import { Alert, Snackbar } from "@mui/material";
import { FormattedMessage } from "react-intl";
interface InnovenergySnackbarProps {
open: boolean;
setOpen: (value: boolean) => void;
error?: any;
}
const InnovenergySnackbar = (props: InnovenergySnackbarProps) => {
const { open, setOpen, error } = props;
const handleClose = () => {
setOpen(false);
};
return (
<Snackbar
open={open}
anchorOrigin={{
vertical: "top",
horizontal: "center",
}}
autoHideDuration={6000}
onClose={handleClose}
>
<Alert
onClose={handleClose}
severity={error ? "error" : "success"}
sx={{ width: "100%" }}
>
{error ? (
<FormattedMessage
id="updateFolderErrorMessage"
defaultMessage="Couldn't update folder, an error occured"
/>
) : (
<FormattedMessage
id="updatedSuccessfully"
defaultMessage="Updated successfully"
/>
)}
</Alert>
</Snackbar>
);
};
export default InnovenergySnackbar;

5
typescript/Frontend/src/lang/de.json
View File

@ -16,6 +16,7 @@
"logout": "Logout",
"updatedSuccessfully": "Erfolgreich aktualisiert",
"groups": "Gruppen",
"group": "Gruppe",
"folder": "Ordner"
"group": "Gruppe",
"folder": "Ordner",
"updateFolderErrorMessage": "Der Ordner konnte nicht aktualisiert werden, ein Fehler ist aufgetreten"
}

4
typescript/Frontend/src/lang/en.json
View File

@ -17,6 +17,6 @@
"updatedSuccessfully": "Updated successfully",
"groups": "Groups",
"group": "Group",
"folder": "folder"
"folder": "folder",
"updateFolderErrorMessage": "Couldn't update folder, an error occured"
}