Add All Systems List

admin/src/AllSystems/AllSystems.js

@@ -1,19 +1,17 @@
 import {
   Container,
-  Divider,
   Header,
-  Table
+  Table,
+  Icon
 } from "semantic-ui-react";
 import { useGetAllSystemsQuery, } from '../features/api/apiSlice'
+import SystemRow from "./SystemRow";
 
 
 // ----------------------------------------------------
-const ListSystems = () => {
-  const { data, isSuccess } = useGetAllSystemsQuery();
-  let systems = false;
-  if (isSuccess) {
-    systems = data.systems;
-  }
+const AllSystems = () => {
+  const { data: users, isSuccess } = useGetAllSystemsQuery();
+
 
 //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
@@ -24,29 +22,36 @@ const ListSystems = () => {
           <Header as="h1">Radio Systems</Header>
 
 
-          {systems &&
-            systems.map((system) =>
-            <Table celled selectable>
+          {users &&
+            users.map((user) =>
+
+            <Container key={user.email}>
+                <Header as='h2'>
+                  <Icon name='user' />
+                  <Header.Content>
+                      {user.firstName} {user.lastName}
+                    <Header.Subheader><a href={`mailto:${user.email}`}>{user.email}</a></Header.Subheader>
+                  </Header.Content>
+                </Header>
+              <Table celled selectable>
             <Table.Header>
               <Table.Row>
                 <Table.HeaderCell>ShortName</Table.HeaderCell>
                 <Table.HeaderCell>Name</Table.HeaderCell>
+                <Table.HeaderCell>Description</Table.HeaderCell>
+                <Table.HeaderCell>Location</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>
+              {user.systems &&
+                user.systems.map((system) =>
+                <SystemRow key={system.shortName} system={system}/>
+            )}
+              </Table.Body>
+              </Table>
+             </Container>
           )}
 
         </Container>
@@ -55,4 +60,4 @@ const ListSystems = () => {
 
 }
 
-export default ListSystems;
+export default AllSystems;

admin/src/AllSystems/SystemRow.js

@@ -0,0 +1,49 @@
+import {
+    Container,
+    Header,
+    Table,
+    Icon
+  } from "semantic-ui-react";
+
+
+  const SystemRow = (props) => {
+    const { system } = props;
+    var location = "";
+    let lastActive = "";
+    if (system.lastActive) {
+        lastActive = new Date(system.lastActive).toLocaleDateString();
+    }
+
+    if (system) {
+  
+  
+      switch (system.systemType) {
+        case "state":
+          location = system.state;
+          break;
+        case "city":
+          location = system.city + ", " + system.state;
+          break;
+        case "county":
+          location = system.county + ", " + system.state;
+          break;
+        case "international":
+          location = system.country;
+          break;
+        default:
+          location = "unknown";
+      }
+    }
+
+    return (
+        <Table.Row key={system.shortName}>
+        <Table.Cell>{system.shortName}</Table.Cell>
+        <Table.Cell>{system.name}</Table.Cell>
+        <Table.Cell>{system.description}</Table.Cell>
+        <Table.Cell>{location}</Table.Cell>
+        <Table.Cell>{lastActive}</Table.Cell>
+     </Table.Row>
+    )
+  }
+
+  export default SystemRow;

admin/src/App/App.js

@@ -5,6 +5,7 @@ import {AdminRestricted, Restricted} from "./Restricted"
 
 import About from "../Components/About"
 import System from "../System/System"
+import AllSystems from "../AllSystems/AllSystems"
 import ListSystems from "../System/ListSystems"
 import UpdateSystem from "../System/UpdateSystem"
 import CreateSystem from "../System/CreateSystem"
@@ -20,7 +21,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="/all-systems" element={ <AdminRestricted><AllSystems/></AdminRestricted>}  />
 					<Route path="/" element={ <Restricted><ListSystems/></Restricted>} />
 					<Route render={() => (<div>Miss</div>)} />
 				</Routes>

admin/src/features/api/apiSlice.js

@@ -138,7 +138,7 @@ export const apiSlice = createApi({
     }),
     getAllSystems: builder.query({
       // The URL for the request is '/fakeApi/posts'
-      query: () => ({ url: `/admin/systems`, credentials: "include" })
+      query: () => ({ url: `/admin/users`, credentials: "include" })
     }),
     createSystem: builder.mutation({
       query: (system) => ({