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

fix some bugs

This commit is contained in:
Sina Blattmann 2023-04-20 11:13:29 +02:00
parent dcab3ab4d1
commit ee289d27b2
23 changed files with 129 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
typescript/Frontend/src/App.tsx
View File

@ -14,12 +14,13 @@ import NavigationButtons from "./components/Layout/NavigationButtons";
import InstallationPage from "./components/Installations/InstallationPage";
import { UserContext } from "./components/Context/UserContextProvider";
import ResetPassword from "./ResetPassword";
import innovenergyLogo from "./resources/innovenergy_Logo_onOrange.png";
const App = () => {
const { token, setToken, removeToken } = useToken();
const [language, setLanguage] = useState("EN");
const { currentUser } = useContext(UserContext);
const { getCurrentUser } = useContext(UserContext);
const getTranslations = () => {
if (language === "DE") {
@ -31,7 +32,7 @@ const App = () => {
if (!token) {
return <Login setToken={setToken} setLanguage={setLanguage} />;
}
if (token && currentUser?.mustResetPassword) {
if (token && getCurrentUser()?.mustResetPassword) {
return <ResetPassword />;
}
return (
@ -42,15 +43,20 @@ const App = () => {
defaultLocale="EN"
>
<Container maxWidth="xl" sx={{ marginTop: 2, height: "100vh" }}>
<Grid container spacing={2}>
<Grid item xs={3}>
<NavigationButtons />
<Grid container spacing={2} maxHeight="20vh">
<Grid item xs={3} container justifyContent="flex-start">
<img src={innovenergyLogo} alt="innovenergy logo" height="50" />
</Grid>
<Grid item xs={9} container justifyContent="flex-end">
<LanguageSelect language={language} setLanguage={setLanguage} />
<LogoutButton removeToken={removeToken} />
</Grid>
</Grid>
<Grid container spacing={2} mt={2}>
<Grid item xs={3} container justifyContent="flex-start">
<NavigationButtons />
</Grid>
</Grid>
<Routes>
<Route
path="*"

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

@ -22,7 +22,7 @@ const Login = ({ setToken, setLanguage }: I_LoginProps) => {
const [password, setPassword] = useState("");
const [loading, setLoading] = useState(false);
const [error, setError] = useState();
const { setCurrentUser } = useContext(UserContext);
const { saveCurrentUser } = useContext(UserContext);
const verifyToken = async (token: string) => {
axiosConfigWithoutToken.get("/GetAllInstallations", {
@ -39,7 +39,8 @@ const Login = ({ setToken, setLanguage }: I_LoginProps) => {
verifyToken(data.token)
.then(() => {
setToken(data.token);
setCurrentUser(data.user);
saveCurrentUser(data.user);
console.log(data.user);
setLoading(false);
setLanguage(data.user.language);
})

5
typescript/Frontend/src/ResetPassword.tsx
View File

@ -12,7 +12,7 @@ import * as Yup from "yup";
const ResetPassword = () => {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<AxiosError>();
const { setCurrentUser } = useContext(UserContext);
const { saveCurrentUser } = useContext(UserContext);
const validationSchema = Yup.object().shape({
password: Yup.string().required("*Password is required"),
@ -33,7 +33,8 @@ const ResetPassword = () => {
params: { newPassword: formikValues.verifyPassword },
})
.then((res) => {
setCurrentUser(res.data);
saveCurrentUser(res.data);
console.log(res.data);
setLoading(false);
})
.catch((err) => setError(err));

20
typescript/Frontend/src/components/Context/UserContextProvider.tsx
View File

@ -4,18 +4,36 @@ import { I_User } from "../../util/user.util";
interface InstallationContextProviderProps {
currentUser?: I_User;
setCurrentUser: (value: I_User) => void;
saveCurrentUser: (user: I_User) => void;
getCurrentUser: () => I_User;
}
export const UserContext = createContext<InstallationContextProviderProps>({
currentUser: {} as I_User,
setCurrentUser: () => {},
saveCurrentUser: () => {},
getCurrentUser: () => {
return {} as I_User;
},
});
const UserContextProvider = ({ children }: { children: ReactNode }) => {
const [currentUser, setCurrentUser] = useState<I_User>();
const saveCurrentUser = (user: I_User) => {
localStorage.setItem("currentUser", JSON.stringify(user));
setCurrentUser(user);
};
const getCurrentUser = (): I_User => {
const tokenString = localStorage.getItem("currentUser");
return tokenString !== null ? JSON.parse(tokenString) : "";
};
return (
<UserContext.Provider value={{ currentUser, setCurrentUser }}>
<UserContext.Provider
value={{ currentUser, setCurrentUser, saveCurrentUser, getCurrentUser }}
>
{children}
</UserContext.Provider>
);

27
typescript/Frontend/src/components/Context/UsersContextProvider.tsx
View File

@ -21,6 +21,7 @@ interface UsersContextProviderProps {
getAvailableUsersForResource: () => I_User[];
fetchUsersWithInheritedAccessForResource: () => Promise<void>;
fetchUsersWithDirectAccessForResource: () => Promise<void>;
fetchAvailableUsers: () => Promise<void>;
}
export const UsersContext = createContext<UsersContextProviderProps>({
@ -39,6 +40,9 @@ export const UsersContext = createContext<UsersContextProviderProps>({
fetchUsersWithDirectAccessForResource: () => {
return Promise.resolve();
},
fetchAvailableUsers: () => {
return Promise.resolve();
},
});
const UsersContextProvider = ({ children }: { children: ReactNode }) => {
@ -51,7 +55,7 @@ const UsersContextProvider = ({ children }: { children: ReactNode }) => {
const { currentType } = useContext(GroupContext);
const { id } = useParams();
const fetchUsers = useCallback(
const fetchUsersWithAccess = useCallback(
async (route: string, setState: (value: any) => void) => {
axiosConfig.get(route + currentType, { params: { id } }).then((res) => {
setState(res.data);
@ -61,12 +65,15 @@ const UsersContextProvider = ({ children }: { children: ReactNode }) => {
);
const fetchUsersWithInheritedAccessForResource = useCallback(async () => {
fetchUsers("/GetUsersWithInheritedAccessTo", setInheritedAccessUsers);
}, [fetchUsers]);
fetchUsersWithAccess(
"/GetUsersWithInheritedAccessTo",
setInheritedAccessUsers
);
}, [fetchUsersWithAccess]);
const fetchUsersWithDirectAccessForResource = useCallback(async () => {
fetchUsers("/GetUsersWithDirectAccessTo", setDirectAccessUsers);
}, [fetchUsers]);
fetchUsersWithAccess("/GetUsersWithDirectAccessTo", setDirectAccessUsers);
}, [fetchUsersWithAccess]);
const getAvailableUsersForResource = () => {
const inheritedUsers = inheritedAccessUsers.map(
@ -81,10 +88,15 @@ const UsersContextProvider = ({ children }: { children: ReactNode }) => {
);
};
useEffect(() => {
axiosConfig.get("/GetAllChildUsers").then((res) => {
const fetchAvailableUsers = async (): Promise<void> => {
return axiosConfig.get("/GetAllChildUsers").then((res) => {
console.log(res);
setAvailableUsers(res.data);
});
};
useEffect(() => {
fetchAvailableUsers();
}, []);
return (
@ -99,6 +111,7 @@ const UsersContextProvider = ({ children }: { children: ReactNode }) => {
getAvailableUsersForResource,
fetchUsersWithInheritedAccessForResource,
fetchUsersWithDirectAccessForResource,
fetchAvailableUsers,
}}
>
{children}

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

@ -8,13 +8,13 @@ import { useContext } from "react";
import { UserContext } from "../../Context/UserContextProvider";
const AccessManagement = () => {
const { currentUser } = useContext(UserContext);
const { getCurrentUser } = useContext(UserContext);
return (
<UsersContextProvider>
<Grid container sx={{ mt: 1 }}>
<Grid item xs={6}>
{currentUser?.hasWriteAccess && <AvailableUserDialog />}
{getCurrentUser().hasWriteAccess && <AvailableUserDialog />}
<InnovenergyList id="access-management-list">
<UsersWithDirectAccess />
<UsersWithInheritedAccess />

12
typescript/Frontend/src/components/Groups/AccessManagement/AvailableUserDialog.tsx
View File

@ -59,15 +59,16 @@ const AvailableUserDialog = () => {
scroll="paper"
>
<DialogTitle id="available-user-dialog-title">
Grant access
<FormattedMessage id="manageAccess" defaultMessage="Manage access" />
</DialogTitle>
<DialogContent id="available-user-dialog-content">
<Autocomplete
sx={{ width: "500px" }}
sx={{ width: "500px", pt: 1 }}
multiple
id="available-user-dialog-autocomplete"
options={getAvailableUsersForResource()}
getOptionLabel={(option) => option.name}
value={selectedUsers}
renderInput={(params) => (
<TextField
{...params}
@ -86,7 +87,10 @@ const AvailableUserDialog = () => {
sx={{ height: 40, ml: 2 }}
onClick={handleGrant}
>
<FormattedMessage id="grantAccess" defaultMessage="Grant access" />
<FormattedMessage
id="manageAccess"
defaultMessage="Manage access"
/>
</InnovenergyButton>
</DialogActions>
</Dialog>
@ -95,7 +99,7 @@ const AvailableUserDialog = () => {
type="submit"
onClick={() => setOpen(true)}
>
<FormattedMessage id="grantAccess" defaultMessage="Grant access" />
<FormattedMessage id="manageAccess" defaultMessage="Manage access" />
</InnovenergyButton>
</>
);

4
typescript/Frontend/src/components/Groups/AccessManagement/UsersWithDirectAccess.tsx
View File

@ -20,7 +20,7 @@ const UsersWithDirectAccess = () => {
useContext(UsersContext);
const { currentType } = useContext(GroupContext);
const { id } = useParams();
const { currentUser } = useContext(UserContext);
const { getCurrentUser } = useContext(UserContext);
useEffect(() => {
fetchUsersWithDirectAccessForResource();
@ -47,7 +47,7 @@ const UsersWithDirectAccess = () => {
<ListItem
id={"direct-access-user-" + user.id}
secondaryAction={
currentUser?.hasWriteAccess && (
getCurrentUser().hasWriteAccess && (
<IconButton
id={"direct-access-user-icon-button" + user.id}
onClick={() => handleIconClick(user.id)}

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

@ -23,13 +23,13 @@ const FolderForm = (props: I_CustomerFormProps) => {
const { values, additionalButtons, handleSubmit } = props;
const intl = useIntl();
const { fetchData } = useContext(GroupContext);
const { currentUser } = useContext(UserContext);
const { getCurrentUser } = useContext(UserContext);
const [snackbarOpen, setSnackbarOpen] = useState(false);
const [error, setError] = useState();
const [loading, setLoading] = useState(false);
const readOnly = !currentUser?.hasWriteAccess;
const readOnly = !getCurrentUser().hasWriteAccess;
const formik = useFormik({
initialValues: {

4
typescript/Frontend/src/components/Installations/InstallationForm.tsx
View File

@ -21,9 +21,9 @@ const InstallationForm = (props: I_InstallationFormProps) => {
const intl = useIntl();
const { fetchData } = useContext(InstallationContext);
const { currentUser } = useContext(UserContext);
const { getCurrentUser } = useContext(UserContext);
const readOnly = !currentUser?.hasWriteAccess;
const readOnly = !getCurrentUser().hasWriteAccess;
const formik = useFormik({
initialValues: {

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

@ -64,9 +64,10 @@ const InstallationList = (props: InstallationListProps) => {
bgcolor: "background.paper",
position: "relative",
overflow: "auto",
maxHeight: 400,
py: 0,
mt: 1,
height: "80vh",
maxHeight: "70vh",
}}
component="nav"
aria-labelledby="nested-list-subheader"

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

@ -8,7 +8,7 @@ import { Grid } from "@mui/material";
const InstallationPage = () => {
return (
<>
<Grid container spacing={2}>
<Grid container spacing={2} marginTop={1}>
<Grid item xs={3}>
<ModeButtons />
</Grid>

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

@ -12,7 +12,7 @@ import Installation from "./Installation";
const Installations = () => {
return (
<InstallationContextProvider>
<Grid container spacing={2}>
<Grid container spacing={2} height="100%">
<Grid item xs={3}>
<SearchSidebar
id="installations-search-sidebar"

4
typescript/Frontend/src/components/Layout/Search.tsx
View File

@ -12,7 +12,7 @@ const SearchSidebar = (props: SearchSidebarProps) => {
const intl = useIntl();
return (
<>
<div style={{ height: "100%" }}>
<TextField
id={id}
label={intl.formatMessage({
@ -25,7 +25,7 @@ const SearchSidebar = (props: SearchSidebarProps) => {
onChange={(e) => setSearchQuery(e.target.value)}
/>
<ListComponent searchQuery={searchQuery} />
</>
</div>
);
};

4
typescript/Frontend/src/components/Users/User.tsx
View File

@ -7,10 +7,10 @@ import { I_User } from "../../util/user.util";
import UserForm from "./UserForm";
import { useIntl } from "react-intl";
interface I_DetailProps<T> {
interface I_DetailProps {
hasMoveButton?: boolean;
}
const Detail = <T extends { id: number }>(props: I_DetailProps<T>) => {
const Detail = (props: I_DetailProps) => {
const { id } = useParams();
const { locale } = useIntl();
const [values, setValues] = useState<I_User>();

10
typescript/Frontend/src/components/Users/UserForm.tsx
View File

@ -7,6 +7,7 @@ import { I_User } from "../../util/user.util";
import InnovenergyButton from "../Layout/InnovenergyButton";
import InnovenergyTextfield from "../Layout/InnovenergyTextfield";
import { UserContext } from "../Context/UserContextProvider";
import { UsersContext } from "../Context/UsersContextProvider";
interface I_UserFormProps {
handleSubmit: (formikValues: Partial<I_User>) => Promise<AxiosResponse>;
@ -19,9 +20,11 @@ const UserForm = (props: I_UserFormProps) => {
const [error, setError] = useState<AxiosError>();
const intl = useIntl();
const { currentUser } = useContext(UserContext);
const { getCurrentUser } = useContext(UserContext);
const { fetchAvailableUsers } = useContext(UsersContext);
const readOnly = !currentUser?.hasWriteAccess;
const currentUser = getCurrentUser();
const readOnly = !currentUser.hasWriteAccess;
const formik = useFormik({
initialValues: {
@ -34,6 +37,7 @@ const UserForm = (props: I_UserFormProps) => {
handleSubmit(formikValues)
.then(() => {
setOpen(true);
fetchAvailableUsers();
setLoading(false);
})
.catch((err: AxiosError) => {
@ -85,7 +89,7 @@ const UserForm = (props: I_UserFormProps) => {
/>
<Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
{loading && <CircularProgress />}
{currentUser?.hasWriteAccess && (
{currentUser.hasWriteAccess && (
<InnovenergyButton type="submit">
<FormattedMessage id="submit" defaultMessage="Submit" />
</InnovenergyButton>

36
typescript/Frontend/src/components/Users/UserTabs.tsx
View File

@ -14,26 +14,22 @@ const UserTabs = () => {
if (id) {
return (
<Box sx={{ width: "100%" }}>
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<AntTabs
id="users-tabs"
value={routeMatch?.pattern?.path ?? routes.user + ":id"}
aria-label="user tabs"
>
<StyledTab
id="users-tab-user"
label={intl.formatMessage({
id: "user",
defaultMessage: "User",
})}
value={routes.users + routes.user + ":id"}
component={Link}
to={routes.user + id}
/>
</AntTabs>
</Box>
</Box>
<AntTabs
id="users-tabs"
value={routeMatch?.pattern?.path ?? routes.user + ":id"}
aria-label="user tabs"
>
<StyledTab
id="users-tab-user"
label={intl.formatMessage({
id: "user",
defaultMessage: "User",
})}
value={routes.users + routes.user + ":id"}
component={Link}
to={routes.user + id}
/>
</AntTabs>
);
}
return null;

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

@ -11,13 +11,13 @@ import { useContext } from "react";
import { UserContext } from "../Context/UserContextProvider";
const Users = () => {
const { currentUser } = useContext(UserContext);
const { getCurrentUser } = useContext(UserContext);
return (
<UsersContextProvider>
<Grid container spacing={2}>
<Grid container spacing={2} marginTop={1}>
<Grid item xs={3}>
{currentUser?.hasWriteAccess && <AddUser />}
{getCurrentUser().hasWriteAccess && <AddUser />}
<SearchSidebar id="users-search-sidebar" listComponent={UserList} />
</Grid>
<Grid item xs={9}>

2
typescript/Frontend/src/config/axiosConfig.tsx
View File

@ -10,7 +10,7 @@ const axiosConfig = axios.create({
axiosConfig.defaults.params = {};
axiosConfig.interceptors.request.use(
(config) => {
const tokenString = sessionStorage.getItem("token");
const tokenString = localStorage.getItem("token");
const token = tokenString !== null ? JSON.parse(tokenString) : "";
if (token) {
config.params["authToken"] = token;

6
typescript/Frontend/src/hooks/useToken.tsx
View File

@ -2,18 +2,18 @@ import { useState } from "react";
const useToken = () => {
const getToken = () => {
const tokenString = sessionStorage.getItem("token");
const tokenString = localStorage.getItem("token");
return tokenString !== null ? JSON.parse(tokenString) : "";
};
const [token, setToken] = useState(getToken());
const saveToken = (userToken: any) => {
sessionStorage.setItem("token", JSON.stringify(userToken));
localStorage.setItem("token", JSON.stringify(userToken));
setToken(userToken);
};
const removeToken = () => {
sessionStorage.removeItem("token");
localStorage.removeItem("token");
setToken(null);
};

9
typescript/Frontend/src/index.tsx
View File

@ -15,6 +15,15 @@ const theme = createTheme({
primary: {
main: "#F59100",
},
text: {
primary: "#000000",
secondary: "#000000",
disabled: "#000000",
},
},
typography: {
fontFamily: `"Ubuntu", sans-serif`,
fontWeightRegular: 300,
},
});

BIN
typescript/Frontend/src/resources/innovenergy_Logo_onOrange.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

17
typescript/Frontend/src/util/installation.util.tsx
View File

@ -3,9 +3,9 @@ import { styled, Tab, Tabs } from "@mui/material";
export const StyledTab = styled((props: any) => (
<Tab disableRipple {...props} />
))(({ theme }) => ({
textTransform: "none",
textTransform: "uppercase",
fontWeight: theme.typography.fontWeightRegular,
fontSize: theme.typography.pxToRem(15),
fontSize: theme.typography.pxToRem(14),
marginRight: theme.spacing(1),
background: "0 0",
border: "1px solid transparent",
@ -15,9 +15,9 @@ export const StyledTab = styled((props: any) => (
textDecoration: "none",
transition: `color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out`,
"&.Mui-selected": {
color: "#495057",
color: "#000000",
backgroundColor: "#fff",
borderColor: "#dee2e6 #dee2e6 #fff",
borderColor: "#bdbdbd #bdbdbd #fff",
marginBottom: "-3px",
},
"&.Mui-focusVisible": {
@ -26,19 +26,22 @@ export const StyledTab = styled((props: any) => (
}));
export const AntTabs = styled(Tabs)({
borderBottom: "1px solid #dee2e6",
borderBottom: "1px solid #bdbdbd",
overflow: "visible!important",
"& div.MuiTabs-scroller": {
overflow: "visible!important",
},
"&.Mui-selected": {
color: "#495057",
color: "#000000",
backgroundColor: "red",
borderColor: `#dee2e6 #dee2e6 #fff`,
borderColor: `#bdbdbd #bdbdbd #fff`,
},
"& .MuiTabs-indicator": {
display: "flex",
justifyContent: "center",
backgroundColor: "transparent",
},
"&.MuiTabs-root": {
width: "100%",
},
});