Update ItemMetadataView to show subject, avatar, name, alias, email a…

…nd date

src/components/ItemMetadataView/ItemMetadataView.js

@@ -1,44 +1,82 @@
 import React from 'react';
-import PropTypes from 'prop-types'
-import { makeStyles, Grid, Paper } from '@material-ui/core';
-import { Alert } from '@material-ui/lab'
+import PropTypes from 'prop-types';
+import { makeStyles, Card, CardHeader, Avatar, Typography } from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
+import webqueue2Theme from "../../theme";
+import UserAvatar from "../UserAvatar/";
 
 
 export default function ItemMetadataView({item}){
+
+	const theme = webqueue2Theme(false);
+	const useStyles = makeStyles({
+		"verticalPadding": {
+			paddingTop: theme.spacing(1),
+			paddingBottom: theme.spacing(1),
+		},
+		"removeCardHeaderPadding": {
+			padding: "0"
+		}
+	});
+	const classes = useStyles();
+
 	const LockedAlert = () => {
 		return (
 			<Alert severity="warning">
 				{item.isLocked}
 			</Alert>
 		);
-	}
-	const useStyles = makeStyles({
-		"gridContainer": {
-			paddingTop: ".75em",
-		}
-	});
+	};
 
-	const classes = useStyles();
+
+	/**
+	 * Returns the title for the user.
+	 * @example
+	 * // Has alias and name
+	 * return "campb303 (Justin Campbell)"
+	 * // Has alias but no name
+	 * return "campb303"
+	 * // Has no alias and no name
+	 * return ""
+	 * @returns {string}
+	 */
+	function buildTitle(){
+		let title = "";		
+		const isNotEmpty = (value) => {
+			return value === "" || value === null ? false : true;
+		};
+		if (isNotEmpty(item.userName)){
+			title += `${item.userName}`;
+		};
+		if (isNotEmpty(item.userEmail)){
+			title += ` <${item.userEmail}>`
+		}
+		return title;
+	};
 
 	const metadataFields = ["userEmail", "userAlias", "subject", "dateReceived",
 							"assignedTo", "status", "priority", "department", "building"];
 
 	return(
 		<>
 			{item.isLocked ? LockedAlert() : ""}
-			<Grid container spacing={2} classes={{root: classes.gridContainer}}>
-				{metadataFields.map((field) => {
-					const title = field.toUpperCase();
-					const subtitle = item[field] === undefined ? "Unknown" : item[field];
-					return (
-						<Grid item xs={12} md={4} xl={6}>
-							<Paper>
-								<b>{title}</b>: {subtitle}
-							</Paper>
-						</Grid>
-					);
-				})}
-			</Grid>
+
+			<Typography variant="h4" classes={{root: classes.verticalPadding}}>
+				{item.subject}
+			</Typography>
+
+			<Card elevation={0} classes={{root: classes.verticalPadding}}>
+				<CardHeader
+					avatar={<UserAvatar userName={item.userName} />}
+					title={buildTitle()}
+					subheader={Date(item.dateReceived)}
+					classes={{root: classes.removeCardHeaderPadding}}
+				/>
+			</Card>
+
+			<Typography variant="subtitle2" classes={{root: classes.verticalPadding}}>
+				Status, assignments, priority, refile, archive and delete controls coming soon to a theater near you.
+			</Typography>
 		</>
 	);
 }