better graphs - group modal fix - system list

This commit is contained in:
Luke Berndt
2023-04-24 20:37:07 -04:00
parent 7b56dc70a6
commit 8c9e74e008
16 changed files with 1005 additions and 13 deletions

View File

@@ -0,0 +1,58 @@
import {
Container,
Divider,
Header,
Table
} from "semantic-ui-react";
import { useGetAllSystemsQuery, } from '../features/api/apiSlice'
// ----------------------------------------------------
const ListSystems = () => {
const { data, isSuccess } = useGetAllSystemsQuery();
let systems = false;
if (isSuccess) {
systems = data.systems;
}
//https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux
//https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter
return (
<div>
<Container>
<Header as="h1">Radio Systems</Header>
{systems &&
systems.map((system) =>
<Table celled selectable>
<Table.Header>
<Table.Row>
<Table.HeaderCell>ShortName</Table.HeaderCell>
<Table.HeaderCell>Name</Table.HeaderCell>
<Table.HeaderCell>Last Active</Table.HeaderCell>
<Table.HeaderCell>Owner</Table.HeaderCell>
<Table.HeaderCell>Email</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>{system.shortName}</Table.Cell>
<Table.Cell>{system.name}</Table.Cell>
<Table.Cell>{system.lastActive}</Table.Cell>
<Table.Cell>{system.userId.firstName} {system.userId.lastName}</Table.Cell>
<Table.Cell>{system.userId.email}</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
)}
</Container>
</div>
);
}
export default ListSystems;

View File

@@ -1,7 +1,7 @@
import Navigation from "./Navigation"
import { Routes, Route } from 'react-router-dom';
import Restricted from "./Restricted"
import {AdminRestricted, Restricted} from "./Restricted"
import About from "../Components/About"
import System from "../System/System"
@@ -20,6 +20,7 @@ const App = (params) => {
<Route path="/update-system/:shortName" element={ <Restricted><UpdateSystem/></Restricted>} />
<Route path="/create-system" element={ <Restricted><CreateSystem/></Restricted>} />
<Route path="/list-systems" element={ <Restricted><ListSystems/></Restricted>} />
<Route path="/all-systems" element={ <AdminRestricted><ListSystems/></AdminRestricted>} />
<Route path="/" element={ <Restricted><ListSystems/></Restricted>} />
<Route render={() => (<div>Miss</div>)} />
</Routes>

View File

@@ -9,7 +9,7 @@ const navStyle = {
const Navigation = (props) => {
const dispatch = useDispatch();
const { email } = useSelector((state) => state.user);
const { email, admin } = useSelector((state) => state.user);
const logout = event => {
event.preventDefault();
@@ -24,6 +24,11 @@ const Navigation = (props) => {
{process.env.REACT_APP_SITE_NAME}
</Menu.Item>
<Menu.Menu position="right">
{admin &&
<Link to="/all-systems">
<Menu.Item name="all-systems">All Systems</Menu.Item>
</Link>
}
<Link to="/list-systems">
<Menu.Item name="systems"> Systems</Menu.Item>
</Link>

View File

@@ -7,7 +7,7 @@ import { authenticateUser } from "../features/user/userSlice";
* Higher-order component (HOC) to wrap restricted pages
*/
const Restricted = ({children }) => {
export const Restricted = ({children }) => {
const { authenticated, hasAuthenticated } = useSelector((state) => state.user);
const dispatch = useDispatch();
useEffect(() => {
@@ -26,4 +26,23 @@ const Restricted = ({children }) => {
};
export const AdminRestricted = ({children }) => {
const { authenticated, hasAuthenticated, admin } = useSelector((state) => state.user);
const dispatch = useDispatch();
useEffect(() => {
dispatch(authenticateUser({}));
},[]);
if (hasAuthenticated) {
if (authenticated && admin) {
return children;;
}
else {
window.location = process.env.REACT_APP_ACCOUNT_SERVER + "/login?nextLocation=admin";
}
}
return <div/>
};
export default Restricted

View File

@@ -77,7 +77,7 @@ const GroupModal = (props) => {
}
},[props.editGroupId, props.talkgroups]);
const removeTalkgroup = (index) => {
const removeTalkgroup = (event, index) => {
const item = {
num: group.items[index].num,
description: group.items[index].description

View File

@@ -136,6 +136,10 @@ export const apiSlice = createApi({
// The URL for the request is '/fakeApi/posts'
query: () => ({ url: `/systems`, credentials: "include" })
}),
getAllSystems: builder.query({
// The URL for the request is '/fakeApi/posts'
query: () => ({ url: `/admin/systems`, credentials: "include" })
}),
createSystem: builder.mutation({
query: (system) => ({
url: `/systems`,
@@ -198,4 +202,4 @@ export const apiSlice = createApi({
})
// Export the auto-generated hook for the `getPosts` query endpoint
export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetErrorsQuery, useDeleteGroupMutation, useCreateGroupMutation, useCreateSystemMutation, useUpdateSystemMutation, useDeleteSystemMutation, useSaveGroupOrderMutation, useUpdateGroupMutation, useImportTalkgroupsMutation } = apiSlice
export const { useGetGroupsQuery, useGetSystemsQuery, useGetAllSystemsQuery, useGetTalkgroupsQuery, useGetErrorsQuery, useDeleteGroupMutation, useCreateGroupMutation, useCreateSystemMutation, useUpdateSystemMutation, useDeleteSystemMutation, useSaveGroupOrderMutation, useUpdateGroupMutation, useImportTalkgroupsMutation } = apiSlice