Stage for Presentation

docs/Summary of State 07.26.20.md

@@ -107,6 +107,7 @@ would become a list of dictionaries with meta data about each section:
 	1. **Using the Apache control script** that is interacted with via the captive shell for a web server user on Templeton. This would allow for a seamless start/stop/restart workflow because it is tied into the same actions for Apache. However, this would also require that Apache be restarted for any API change which could disrupt active connections unnecessarily.
 	2. **Using user level cron jobs** @reboot to start the service. This doesn't not allow for easy stopping and restarting.
 	3. **Using a system wide init system hook** (Templeton using SysV aka init.d.) This could allow for easy start/stop/restart functions and the user could be allowed to interact with webqueue-api init script but no other init script. This option provides the most flexibility.
+- Integrate with Purdue Directory service.
 
 ## The Frontend
 
@@ -120,7 +121,6 @@ would become a list of dictionaries with meta data about each section:
 - Implement jump to ticket
 - Implement [`react-router`](https://reactrouter.com/) for URL based navigation
 - Implement stored user preferences
-- Integrate with Purdue Directory for contact details lookup
 
 ## The Project Overall
 

src/App.js

@@ -1,10 +1,13 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";
+import { Grid } from "@material-ui/core"
 import CustomAppBar from "./CustomAppBar";
 import ItemTable from "./ItemTable";
+import ItemView from "./ItemView"
 
 function App(){
 	const [darkMode, setDarkMode] = useState(false);
+	const [activeItem, setActiveItem] = useState({})
 
 	const theme = createMuiTheme({
 		"palette": {
@@ -15,7 +18,14 @@ function App(){
 	return (
 		<ThemeProvider theme={theme}>
 			<CustomAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme}/>
-			<ItemTable />
+			<Grid container>
+				<Grid item xs={6} md={8}>
+					<ItemTable activeItem={activeItem} setActiveItem={setActiveItem}/>
+				</Grid>
+				<Grid item xs={6} md={4}>
+					<ItemView activeItem={activeItem}/>
+				</Grid>
+			</Grid>
 		</ThemeProvider>
 	);
 }

src/ItemTable.js

@@ -1,66 +1,47 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import MaterialTable from "material-table";
 
-function ItemTable() {
-
-  const columns = [
-    { title: 'Queue', field: 'queue', filterPlaceholder: "Ex: \"ME\""},
-    { title: 'Item #', field: 'itemNumber', filterPlaceholder: "Ex: \"42\""},
-    { title: 'From', field: 'from', filterPlaceholder: "Ex: \"campb303\""},
-    { title: 'For', field: 'for', filterPlaceholder: "Ex: \"sundeep\""},
-    { title: 'Subject', field: 'subject', filterPlaceholder: "Ex: \"Install Libraries\""},
-    { title: 'Status', field: 'status', filterPlaceholder: "Ex: \"Wating for Reply\""},
-    { title: 'Priority', field: 'priority', filterPlaceholder: "Ex: \"covid\""},
-  ]
-
-  const data = [
-    {"queue": "ME", "itemNumber": 42, "from": "campb303", "for": "sundeep", "subject": "Installing Libraries", "status": "Waitinf for Reply", "priority": "covid"},
-    {"queue": "TECH", "itemNumber": 42, "from": "campb303", "for": "sundeep", "subject": "Installing Libraries", "status": "Waitinf for Reply", "priority": "covid"},
-    {"queue": "CE", "itemNumber": 42, "from": "campb303", "for": "sundeep", "subject": "Installing Libraries", "status": "Waitinf for Reply", "priority": "covid"},
-    {"queue": "LINUX", "itemNumber": 42, "from": "campb303", "for": "sundeep", "subject": "Installing Libraries", "status": "Waitinf for Reply", "priority": "covid"},
-
-    {"queue": "ME", "itemNumber": 1, "from": "campb303", "for": "sundeep", "subject": "Installing Libraries", "status": "Waitinf for Reply", "priority": "covid"},
-    {"queue": "TECH", "itemNumber": 2, "from": "campb303", "for": "sundeep", "subject": "Installing Libraries", "status": "Waitinf for Reply", "priority": "covid"},
-    {"queue": "CE", "itemNumber": 3, "from": "campb303", "for": "sundeep", "subject": "Installing Libraries", "status": "Waitinf for Reply", "priority": "covid"},
-    {"queue": "LINUX", "itemNumber": 4, "from": "campb303", "for": "sundeep", "subject": "Installing Libraries", "status": "Waitinf for Reply", "priority": "covid"},
-
-    {"queue": "ME", "itemNumber": 5, "from": "harley", "for": "sundeep", "subject": "Installing Libraries", "status": "Waitinf for Reply", "priority": "covid"},
-    {"queue": "TECH", "itemNumber": 6, "from": "bekuma", "for": "sundeep", "subject": "Installing Libraries", "status": "Waitinf for Reply", "priority": "covid"},
-    {"queue": "CE", "itemNumber": 7, "from": "twetzle11", "for": "sundeep", "subject": "Installing Libraries", "status": "Waitinf for Reply", "priority": "covid"},
-    {"queue": "LINUX", "itemNumber": 8, "from": "apigman", "for": "sundeep", "subject": "Installing Libraries", "status": "Waitinf for Reply", "priority": "covid"},
-
-    {"queue": "ME", "itemNumber": 9, "from": "harley", "for": "marthur", "subject": "Installing Libraries", "status": "Waitinf for Reply", "priority": "covid"},
-    {"queue": "TECH", "itemNumber": 10, "from": "bekuma", "for": "emuffley", "subject": "Installing Libraries", "status": "Waitinf for Reply", "priority": "covid"},
-    {"queue": "CE", "itemNumber": 11, "from": "twetzle11", "for": "seth", "subject": "Installing Libraries", "status": "Waitinf for Reply", "priority": "covid"},
-    {"queue": "LINUX", "itemNumber": 12, "from": "apigman", "for": "cs", "subject": "Installing Libraries", "status": "Waitinf for Reply", "priority": "covid"},
-
-    {"queue": "ME", "itemNumber": 9, "from": "harley", "for": "marthur", "subject": "Installing Libraries", "status": "Waitinf for Reply", "priority": "covid"},
-    {"queue": "TECH", "itemNumber": 10, "from": "bekuma", "for": "emuffley", "subject": "Installing Abaquc", "status": "Waitinf for Reply", "priority": "covid"},
-    {"queue": "CE", "itemNumber": 11, "from": "twetzle11", "for": "seth", "subject": "Restart Printer", "status": "Waitinf for Reply", "priority": "covid"},
-    {"queue": "LINUX", "itemNumber": 12, "from": "apigman", "for": "cs", "subject": "Same Problem but a 5th time", "status": "Waitinf for Reply", "priority": "covid"},
-
-    {"queue": "ME", "itemNumber": 9, "from": "harley", "for": "marthur", "subject": "Installing Libraries", "status": "qc ready", "priority": "covid"},
-    {"queue": "TECH", "itemNumber": 10, "from": "bekuma", "for": "emuffley", "subject": "Installing Abaquc", "status": "qc ok", "priority": "covid"},
-    {"queue": "CE", "itemNumber": 11, "from": "twetzle11", "for": "seth", "subject": "Restart Printer", "status": "Meet tomorrow at 3p", "priority": "covid"},
-    {"queue": "LINUX", "itemNumber": 12, "from": "apigman", "for": "cs", "subject": "Same Problem but a 5th time", "status": "qc ok", "priority": "covid"},
-  ];
-
-  const options = {
-    "filtering": true,
-    "paging": false,
-    "search": false,
-    "draggable": false,
-    "padding": "dense",
-  }
-
-  return (
-    <MaterialTable
-      columns={columns}
-      data={data}
-      title={"Example Item Table"}
-      options={options}
-    />
-  );
+function ItemTable(props) {
+
+	const columns = [
+		{ title: 'Queue', field: 'queue', filterPlaceholder: "Ex: \"ME\"" },
+		{ title: 'Item #', field: 'number', filterPlaceholder: "Ex: \"42\"" },
+		{ title: 'From', field: 'userAlias', filterPlaceholder: "Ex: \"campb303\"" },
+		{ title: 'Assigned To', field: 'assignedTo', filterPlaceholder: "Ex: \"sundeep\"" },
+		{ title: 'Subject', field: 'subject', filterPlaceholder: "Ex: \"Install Libraries\"" },
+		{ title: 'Status', field: 'status', filterPlaceholder: "Ex: \"Wating for Reply\"" },
+		{ title: 'Priority', field: 'priority', filterPlaceholder: "Ex: \"covid\"" },
+		{ title: 'Last Updated', field: 'lastUpdated', filterPlaceholder: "Ex: \"07-27-20 12:54 PM\"" },
+		// { title: 'Department', field: 'department', filterPlaceholder: "Ex: \"Business Office\"" },
+		// { title: 'Building', field: 'building', filterPlaceholder: "Ex: \"KNOY\"" },
+		// { title: 'Date Received', field: 'dateReceived', filterPlaceholder: "Ex: \"07-20-20 03:32 AM\"" },
+	]
+
+	const [data, setData] = useState([])
+
+	useEffect(() => {
+		fetch("/api/ce").then(res => res.json()).then(queue => {
+			setData(queue.items)
+		})
+	}, [])
+
+	const options = {
+		"filtering": true,
+		"paging": false,
+		"search": false,
+		"draggable": false,
+		"padding": "dense",
+	}
+
+	return (
+		<MaterialTable
+			columns={columns}
+			data={data}
+			title={"Demo Table"}
+			options={options}
+			onRowClick={(event, rowData) => props.setActiveItem(rowData)}
+		/>
+	);
 }
 
 export default ItemTable;

src/ItemView.js

@@ -1,43 +1,73 @@
-import React, { useState } from 'react';
-import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Paper, Typography, makeStyles } from '@material-ui/core';
-
-const useStyles = makeStyles({
-    "td:first-child": {
-        "font-weight": "bold",
-    }
-})
-
-function ItemView({item}){
-
-    const classes = useStyles();
-
-    return(
-        <>
-            <Typography variant="h3">
-                {item.queue + " " + item.itemNumber}
-            </Typography>
-            <TableContainer component={Paper} >
-                <Table>
-                    <TableBody>
-                        {Object.keys(item).map((key) => {
-                            return (
-                                <TableRow>
-                                    <TableCell 
-                                        classes={{body: classes["td:first-child"]}}
-                                    >
-                                        <Typography variant="body1">Some stuff</Typography>
-                                    </TableCell>
-                                    <TableCell>
-                                        <Typography variant="body1"> about the item.</Typography>
-                                    </TableCell>
-                                </TableRow>
-                            );
-                        })}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-        </>
-    );
+import React, { useState, useEffect } from 'react';
+import { ListItem, ListItemIcon, ListItemText, Paper, Typography, Divider } from '@material-ui/core';
+import FolderIcon from '@material-ui/icons/Folder';
+import PersonIcon from '@material-ui/icons/Person';
+import CalendarIcon from '@material-ui/icons/CalendarToday';
+import AssignmentdIcon from '@material-ui/icons/AssignmentInd';
+import InfoIcon from '@material-ui/icons/Info';
+import ClockIcon from '@material-ui/icons/QueryBuilder';
+
+function ItemView(props){
+	return(
+		<Paper>
+			<ListItem>
+				<Typography variant="h4">
+					{props.activeItem["queue"] + " " + props.activeItem["number"]}
+				</Typography>
+			</ListItem>
+
+			<ListItem>
+				<Typography variant="h5">
+					{props.activeItem["subject"]}
+				</Typography>
+			</ListItem>
+
+			<ListItem alignItems="flex-start">
+				<ListItemIcon>
+					<PersonIcon />
+				</ListItemIcon>
+				<ListItemText primary={"From: " + props.activeItem["userName"]} secondary={props.activeItem["userEmail"]} />
+			</ListItem>
+
+			<ListItem>
+				<ListItemIcon>
+					<CalendarIcon />
+				</ListItemIcon>
+				<ListItemText secondary={props.activeItem["dateReceived"]} />
+			</ListItem>
+
+			<ListItem alignItems="flex-start">
+				<ListItemIcon>
+					<AssignmentdIcon />
+				</ListItemIcon>
+				<ListItemText primary={"Assigned To:"} secondary={props.activeItem["assignedTo"]}  />
+			</ListItem>
+
+			<ListItem alignItems="flex-start">
+				<ListItemIcon>
+					<InfoIcon />
+				</ListItemIcon>
+				<ListItemText primary={"Status:"} secondary={props.activeItem["status"]}  />
+			</ListItem>
+
+			<ListItem alignItems="flex-start">
+				<ListItemIcon>
+					<ClockIcon />
+				</ListItemIcon>
+				<ListItemText primary={"Last Updated:"} secondary={props.activeItem["lastUpdated"]}  />
+			</ListItem>
+
+			<Divider style={{marginBottom: "1em"}}/>
+
+			{/* <ListItem> */}
+			{props.activeItem["content"] ? props.activeItem["content"].map(line => (
+				<Typography variant="body1" style={{paddingLeft: "1.5em"}} paragraph>
+					{line}
+				</Typography>
+			)): "" }
+			{/* </ListItem> */}
+		</Paper>
+	);
 }
 
 export default ItemView;