From e503d26f1712069bcaa20d4ad28893fccbd561eb Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 12 Oct 2020 13:39:50 -0400 Subject: [PATCH 01/40] Create DirectoryInformation component with docs --- .../DirectoryInformation.js | 36 +++++++++++++++++++ .../DirectoryInformation.md | 31 ++++++++++++++++ src/components/DirectoryInformation/index.js | 1 + 3 files changed, 68 insertions(+) create mode 100644 src/components/DirectoryInformation/DirectoryInformation.js create mode 100644 src/components/DirectoryInformation/DirectoryInformation.md create mode 100644 src/components/DirectoryInformation/index.js diff --git a/src/components/DirectoryInformation/DirectoryInformation.js b/src/components/DirectoryInformation/DirectoryInformation.js new file mode 100644 index 0000000..64a7d93 --- /dev/null +++ b/src/components/DirectoryInformation/DirectoryInformation.js @@ -0,0 +1,36 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { TableContainer, Table, TableRow, TableCell, makeStyles } from "@material-ui/core"; + +export default function DirectoryInformation({ section }) { + + const useStyles = makeStyles(() => ({ + breakWord: { + wordBreak: "break-word", + } + })); + const classes = useStyles(); + + return ( + + + {Object.keys(section).map((key) => ( + key === "type" ? "" : + + {key} + {section[key]} + + ))} +
+ + ); +}; + +DirectoryInformation.propTypes = { + /** The object containing directory information. */ + "section": PropTypes.object +}; + +DirectoryInformation.defaultProps = { + "section": {} +}; \ No newline at end of file diff --git a/src/components/DirectoryInformation/DirectoryInformation.md b/src/components/DirectoryInformation/DirectoryInformation.md new file mode 100644 index 0000000..2a85da0 --- /dev/null +++ b/src/components/DirectoryInformation/DirectoryInformation.md @@ -0,0 +1,31 @@ +Displays the directory information as a table. + + +```jsx +import { Paper } from "@material-ui/core"; +import DirectoryInformation from "./DirectoryInformation"; + +const example_directory_data = { + "type": "directory_information", + "Name": "Heyi Feng", + "Login": "feng293", + "Computer": "civil4147pc2.ecn", + "Location": "HAMP 4147", + "Email": "feng293@purdue.edu", + "Phone": "5039154835", + "Office": "", + "UNIX Dir": "None", + "Zero Dir": "U=\\\\myhome.itap.purdue.edu\\myhome\\%username%", + "User ECNDB": "http://eng.purdue.edu/jump/2e29495", + "Host ECNDB": "http://eng.purdue.edu/jump/2eccc3f", + "Subject": "Upgrade system and Abaqus" +}; + + + + +``` + +```jsx static + +``` \ No newline at end of file diff --git a/src/components/DirectoryInformation/index.js b/src/components/DirectoryInformation/index.js new file mode 100644 index 0000000..d67daa5 --- /dev/null +++ b/src/components/DirectoryInformation/index.js @@ -0,0 +1 @@ +export { default } from "./DirectoryInformation"; \ No newline at end of file From 8f3dc6f6ac2678604f6e862ff6ca4db919b780e6 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 12 Oct 2020 13:50:35 -0400 Subject: [PATCH 02/40] Update section names to match new API --- src/components/ItemBodyView/ItemBodyView.js | 62 ++++++++++----------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/src/components/ItemBodyView/ItemBodyView.js b/src/components/ItemBodyView/ItemBodyView.js index bed15c1..83f76ad 100644 --- a/src/components/ItemBodyView/ItemBodyView.js +++ b/src/components/ItemBodyView/ItemBodyView.js @@ -8,35 +8,33 @@ import { objectIsEmpty } from "../../utilities"; export default function ItemBodyView({ item }) { - const theme = webqueue2Theme(false); - const useStyles = makeStyles((theme) => ({ + const useStyles = makeStyles(() => ({ missingOppositeContent: { '&:before': { content: '""', flex: 0, padding: '0', }, - }, - })); - const classes = useStyles(theme); + }})); + const classes = useStyles(); const generateTimelineItem = (section) => { - switch(section.type) { - case "directoryInformation": - if (section.content.length === 0){ + switch (section.type) { + case "directory_information": + if (Object.entries(section) === 0) { return "No Directory Information"; } else { return "Directory Information Present" } - case "initialMessage": - return( + case "initial_message": + return ( <> {section.content.map((line, index) => {line})} ); case "edit": - return( + return ( <> {`${section.by} assigned thisat ${Date(section.datetime)}`} @@ -45,7 +43,7 @@ export default function ItemBodyView({ item }) { ); case "status": - return( + return ( <> {`${section.by} update the status to at ${Date(section.datetime)}`} @@ -53,14 +51,14 @@ export default function ItemBodyView({ item }) { {section.content.map((line) => {line})} ); - case "assign": + case "assignment": return ( {`${section.by} assigned this to ${section.to} at ${Date(section.datetime)}`} ); - case "replyToUser": - return( + case "reply_to_user": + return ( <> {`${section.by} replied ${Date(section.datetime)}`} @@ -68,8 +66,8 @@ export default function ItemBodyView({ item }) { {section.content.map((line) => {line})} ); - case "replyFromUser": - return( + case "reply_from_user": + return ( <> {section.content.map((line, index) => {line})} @@ -81,20 +79,22 @@ export default function ItemBodyView({ item }) { }; return ( - - {objectIsEmpty(item) ? "" : item.content.map((section, index) => { - return ( - - - - - - - {generateTimelineItem(section)} - - - ); - })} + + {objectIsEmpty(item) ? "" : item.content.map((section) => ( + + + + + + + {generateTimelineItem(section)} + + + ))} ); }; From 0a86b7920c06bd80d01933d281e81e80bd397830 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 12 Oct 2020 13:53:10 -0400 Subject: [PATCH 03/40] Remove extraneous padding from timeline --- src/components/ItemBodyView/ItemBodyView.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/ItemBodyView/ItemBodyView.js b/src/components/ItemBodyView/ItemBodyView.js index 83f76ad..594a9a5 100644 --- a/src/components/ItemBodyView/ItemBodyView.js +++ b/src/components/ItemBodyView/ItemBodyView.js @@ -2,20 +2,23 @@ import React from "react"; import PropTypes from "prop-types"; import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot } from '@material-ui/lab'; import { Typography, makeStyles } from "@material-ui/core"; -import webqueue2Theme from "../../theme"; import EmailHeader from "../EmailHeader/"; import { objectIsEmpty } from "../../utilities"; export default function ItemBodyView({ item }) { const useStyles = makeStyles(() => ({ - missingOppositeContent: { + "Timeline-root": { + paddingLeft: "0" + }, + "TimelineItem-missingOppositeContent": { '&:before': { content: '""', flex: 0, padding: '0', }, - }})); + } + })); const classes = useStyles(); const generateTimelineItem = (section) => { @@ -83,7 +86,7 @@ export default function ItemBodyView({ item }) { {objectIsEmpty(item) ? "" : item.content.map((section) => ( From 218ff09f0b01ad63d13ea36c11d15ae35bd55960 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 12 Oct 2020 13:54:32 -0400 Subject: [PATCH 04/40] Inlcude DirectoryInformation componenets in ItemBodyView --- src/components/ItemBodyView/ItemBodyView.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/ItemBodyView/ItemBodyView.js b/src/components/ItemBodyView/ItemBodyView.js index 594a9a5..be6a6ff 100644 --- a/src/components/ItemBodyView/ItemBodyView.js +++ b/src/components/ItemBodyView/ItemBodyView.js @@ -3,6 +3,7 @@ import PropTypes from "prop-types"; import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot } from '@material-ui/lab'; import { Typography, makeStyles } from "@material-ui/core"; import EmailHeader from "../EmailHeader/"; +import DirectoryInformation from "../DirectoryInformation/"; import { objectIsEmpty } from "../../utilities"; export default function ItemBodyView({ item }) { @@ -24,11 +25,9 @@ export default function ItemBodyView({ item }) { const generateTimelineItem = (section) => { switch (section.type) { case "directory_information": - if (Object.entries(section) === 0) { - return "No Directory Information"; - } else { - return "Directory Information Present" - } + return ( + + ); case "initial_message": return ( <> From 1520fccd82028d7ebbc49fb7a68d69cec3940977 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 12 Oct 2020 13:55:30 -0400 Subject: [PATCH 05/40] Simplify display of assignments --- src/components/ItemBodyView/ItemBodyView.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ItemBodyView/ItemBodyView.js b/src/components/ItemBodyView/ItemBodyView.js index be6a6ff..f20e8f4 100644 --- a/src/components/ItemBodyView/ItemBodyView.js +++ b/src/components/ItemBodyView/ItemBodyView.js @@ -55,9 +55,9 @@ export default function ItemBodyView({ item }) { ); case "assignment": return ( - - {`${section.by} assigned this to ${section.to} at ${Date(section.datetime)}`} - + <> + {`${section.by} assigned to ${section.to}`} + ); case "reply_to_user": return ( From 8a99dbec783cfc18dc0d7eee3154ca96f5df3936 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 12 Oct 2020 14:01:05 -0400 Subject: [PATCH 06/40] Update ItemBodyView docs for new API --- src/components/ItemBodyView/ItemBodyView.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ItemBodyView/ItemBodyView.md b/src/components/ItemBodyView/ItemBodyView.md index 2c224d1..297f3dc 100644 --- a/src/components/ItemBodyView/ItemBodyView.md +++ b/src/components/ItemBodyView/ItemBodyView.md @@ -11,7 +11,7 @@ The ItemBodyView displays the seven actions possible in an item: ```jsx import ItemBodyView from "./ItemBodyView"; -const demoItem = {"queue": "ce", "number": 100, "lastUpdated": "08-27-20 09:49 PM", "headers": [{"type": "Merged-Time", "content": "Tue, 23 Jun 2020 13:31:53 -0400"}, {"type": "Merged-By", "content": "campb303"}, {"type": "QTime", "content": "1"}, {"type": "QTime-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "QTime-Updated-By", "content": "campb303"}, {"type": "Time", "content": "1"}, {"type": "Time-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "Time-Updated-By", "content": "campb303"}, {"type": "Replied-Time", "content": "Tue, 23 Jun 2020 13:28:48 -0400"}, {"type": "Replied-By", "content": "campb303"}, {"type": "Edited-Time", "content": "Tue, 23 Jun 2020 13:27:56 -0400"}, {"type": "Edited-By", "content": "campb303"}, {"type": "QAssigned-To", "content": "campb303"}, {"type": "QAssigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "QAssigned-To-Updated-By", "content": "campb303"}, {"type": "Assigned-To", "content": "campb303"}, {"type": "Assigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "Assigned-To-Updated-By", "content": "campb303"}, {"type": "QStatus", "content": "Dont Delete"}, {"type": "QStatus-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "QStatus-Updated-By", "content": "campb303"}, {"type": "Status", "content": "Dont Delete"}, {"type": "Status-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "Status-Updated-By", "content": "campb303"}, {"type": "Date", "content": "Tue, 23 Jun 2020 13:25:51 -0400"}, {"type": "From", "content": "Justin Campbell "}, {"type": "Message-ID", "content": "<911CE050-3240-4980-91DD-9C3EBB8DBCF8@purdue.edu>"}, {"type": "Subject", "content": "Beepboop"}, {"type": "To", "content": "cesite@ecn.purdue.edu"}, {"type": "Content-Type", "content": "text/plain; charset=\"utf-8\""}, {"type": "X-ECN-Queue-Original-Path", "content": "/home/pier/e/queue/Attachments/inbox/2020-06-23/208-original.txt"}, {"type": "X-ECN-Queue-Original-URL", "content": "https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/208-original.txt"}], "content": [{"type": "directoryInformation", "content": []}, {"type": "initialMessage", "datetime": "2020-06-23T13:25:51-0400", "userName": "Justin Campbell", "userEmail": "campb303@purdue.edu", "ccRecipients": [], "content": ["Testtest\n"]}, {"type": "assign", "by": "campb303", "datetime": "2020-06-23T13:27:00-0400", "to": "campb303"}, {"type": "status", "by": "campb303", "datetime": "2020-06-23T13:26:55", "content": ["*** Status updated by: campb303 at: 6/23/2020 13:26:55 ***\n", "Dont Delete\n"]}, {"type": "edit", "by": "campb303", "datetime": "2020-06-23T13:27:56", "content": ["*** Edited by: campb303 at: 06/23/20 13:27:56 ***\n", "\n", "This be an edit my boy\n", "\n", "\n", "\n"]}, {"type": "replyToUser", "by": "campb303", "datetime": "2020-06-23T13:28:18", "content": ["*** Replied by: campb303 at: 06/23/20 13:28:18 ***\n", "\n", "This be a reply my son\n", "\n", "Justin\n", "ECN\n", "\n"]}, {"type": "replyFromUser", "datetime": "2020-06-23T13:30:45-0400", "subject": "Re: Beepboop", "userName": "Justin Campbell", "userEmail": "campb303@purdue.edu", "content": ["=== Additional information supplied by user ===\n", "\n", "Subject: Re: Beepboop\n", "From: Justin Campbell \n", "Date: Tue, 23 Jun 2020 13:30:45 -0400\n", "X-ECN-Queue-Original-Path: /home/pier/e/queue/Attachments/inbox/2020-06-23/212-original.txt\n", "X-ECN-Queue-Original-URL: https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/212-original.txt\n", "\n", "Huzzah!\n", "\n", "===============================================\n", "\n"], "ccRecipients": []}], "isLocked": "ce 100 is locked by knewell using qvi", "userEmail": "campb303@purdue.edu", "userName": "Justin Campbell", "userAlias": "campb303", "assignedTo": "campb303", "subject": "Beepboop", "status": "Dont Delete", "priority": "", "department": "", "building": "", "dateReceived": "2020-06-23T13:25:51-0400"}; +const demoItem = {"queue": "ce", "number": 100, "lastUpdated": "09-28-20 01:26 PM", "headers": [{"type": "Merged-Time", "content": "Tue, 23 Jun 2020 13:31:53 -0400"}, {"type": "Merged-By", "content": "campb303"}, {"type": "QTime", "content": "1"}, {"type": "QTime-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "QTime-Updated-By", "content": "campb303"}, {"type": "Time", "content": "1"}, {"type": "Time-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "Time-Updated-By", "content": "campb303"}, {"type": "Replied-Time", "content": "Tue, 23 Jun 2020 13:28:48 -0400"}, {"type": "Replied-By", "content": "campb303"}, {"type": "Edited-Time", "content": "Tue, 23 Jun 2020 13:27:56 -0400"}, {"type": "Edited-By", "content": "campb303"}, {"type": "QAssigned-To", "content": "campb303"}, {"type": "QAssigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "QAssigned-To-Updated-By", "content": "campb303"}, {"type": "Assigned-To", "content": "campb303"}, {"type": "Assigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "Assigned-To-Updated-By", "content": "campb303"}, {"type": "QStatus", "content": "Dont Delete"}, {"type": "QStatus-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "QStatus-Updated-By", "content": "campb303"}, {"type": "Status", "content": "Dont Delete"}, {"type": "Status-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "Status-Updated-By", "content": "campb303"}, {"type": "Date", "content": "Tue, 23 Jun 2020 13:25:51 -0400"}, {"type": "From", "content": "Justin Campbell "}, {"type": "Message-ID", "content": "<911CE050-3240-4980-91DD-9C3EBB8DBCF8@purdue.edu>"}, {"type": "Subject", "content": "Beepboop"}, {"type": "To", "content": "cesite@ecn.purdue.edu"}, {"type": "Content-Type", "content": "text/plain; charset=\"utf-8\""}, {"type": "X-ECN-Queue-Original-Path", "content": "/home/pier/e/queue/Attachments/inbox/2020-06-23/208-original.txt"}, {"type": "X-ECN-Queue-Original-URL", "content": "https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/208-original.txt"}], "content": [{"type": "directory_information", "Name": "Heyi Feng", "Login": "feng293", "Computer": "civil4147pc2.ecn", "Location": "HAMP 4147", "Email": "feng293@purdue.edu", "Phone": "5039154835", "Office": "", "UNIX Dir": "None", "Zero Dir": "U=\\\\myhome.itap.purdue.edu\\myhome\\%username%", "User ECNDB": "http://eng.purdue.edu/jump/2e29495", "Host ECNDB": "http://eng.purdue.edu/jump/2eccc3f", "Subject": "Upgrade system and Abaqus"}, {"type": "assignment", "datetime": "2020-06-23T13:27:00-0400", "by": "campb303", "to": "campb303"}, {"type": "initial_message", "datetime": "2020-06-23T13:25:51-0400", "from_name": "Justin Campbell", "user_email": "campb303@purdue.edu", "to": [{"name": "", "email": "cesite@ecn.purdue.edu"}], "cc": [], "content": ["Testtest\n"]}, {"type": "status", "datetime": "2020-06-23T13:26:55", "by": "campb303", "content": ["Dont Delete\n"]}, {"type": "edit", "datetime": "2020-06-23T13:27:56", "by": "campb303", "content": ["This be an edit my boy\n"]}, {"type": "reply_to_user", "datetime": "2020-06-23T13:28:18", "by": "campb303", "content": ["This be a reply my son\n", "\n", "Justin\n", "ECN\n"]}, {"type": "reply_from_user", "datetime": "2020-06-23T13:30:45-0400", "from_name": "Justin Campbell", "from_email": "campb303@purdue.edu", "cc": [], "content": ["X-ECN-Queue-Original-Path: /home/pier/e/queue/Attachments/inbox/2020-06-23/212-original.txt\n", "X-ECN-Queue-Original-URL: https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/212-original.txt\n", "\n", "Huzzah!\n"]}], "isLocked": "ce 100 is locked by knewell using qvi", "userEmail": "campb303@purdue.edu", "userName": "Justin Campbell", "userAlias": "campb303", "assignedTo": "campb303", "subject": "Beepboop", "status": "Dont Delete", "priority": "", "department": "", "building": "", "dateReceived": "2020-06-23T13:25:51-0400"};
From 42e54dbf055d0253eb7a3ff75fd5e3e93d4756ac Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 12 Oct 2020 21:02:50 -0400 Subject: [PATCH 07/40] Remove uneccesary padding --- src/components/ItemBodyView/ItemBodyView.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/ItemBodyView/ItemBodyView.js b/src/components/ItemBodyView/ItemBodyView.js index f20e8f4..01503fc 100644 --- a/src/components/ItemBodyView/ItemBodyView.js +++ b/src/components/ItemBodyView/ItemBodyView.js @@ -10,7 +10,11 @@ export default function ItemBodyView({ item }) { const useStyles = makeStyles(() => ({ "Timeline-root": { - paddingLeft: "0" + paddingLeft: "0", + paddingRight: "0", + }, + "TimelineContent-root": { + paddingRight: "0", }, "TimelineItem-missingOppositeContent": { '&:before': { @@ -92,7 +96,9 @@ export default function ItemBodyView({ item }) { - + {generateTimelineItem(section)} From a66f36db8d378740a54c00195ab5fb19359fba08 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 12 Oct 2020 21:05:48 -0400 Subject: [PATCH 08/40] Make DirectoryInformation easier to ready --- .../DirectoryInformation.js | 33 ++++++++++++++----- 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/src/components/DirectoryInformation/DirectoryInformation.js b/src/components/DirectoryInformation/DirectoryInformation.js index 64a7d93..cb7c494 100644 --- a/src/components/DirectoryInformation/DirectoryInformation.js +++ b/src/components/DirectoryInformation/DirectoryInformation.js @@ -1,25 +1,40 @@ import React from "react"; import PropTypes from "prop-types"; import { TableContainer, Table, TableRow, TableCell, makeStyles } from "@material-ui/core"; +import webqueue2Theme from "../../theme"; export default function DirectoryInformation({ section }) { - const useStyles = makeStyles(() => ({ - breakWord: { + const theme = webqueue2Theme(false); + const useStyles = makeStyles((theme) => ({ + headerCell: { + borderBottom: "none", + paddingTop: "3px", + paddingBottom: "3px", + }, + bodyCell: { wordBreak: "break-word", - } - })); - const classes = useStyles(); + borderBottom: "none", + paddingTop: "3px", + paddingBottom: "3px", + }, + stripedRow: { + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.action.hover, + }, + }, + })); + const classes = useStyles(theme); return ( {Object.keys(section).map((key) => ( key === "type" ? "" : - - {key} - {section[key]} - + + {key} + {section[key]} + ))}
From 24925559293b6f1ea80f85c6aee91cb982014e07 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 12 Oct 2020 21:11:41 -0400 Subject: [PATCH 09/40] Simplify spacing calculations --- .../DirectoryInformation/DirectoryInformation.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/DirectoryInformation/DirectoryInformation.js b/src/components/DirectoryInformation/DirectoryInformation.js index cb7c494..1bb1497 100644 --- a/src/components/DirectoryInformation/DirectoryInformation.js +++ b/src/components/DirectoryInformation/DirectoryInformation.js @@ -1,6 +1,6 @@ import React from "react"; import PropTypes from "prop-types"; -import { TableContainer, Table, TableRow, TableCell, makeStyles } from "@material-ui/core"; +import { TableContainer, Table, TableRow, TableCell, Paper, makeStyles } from "@material-ui/core"; import webqueue2Theme from "../../theme"; export default function DirectoryInformation({ section }) { @@ -9,14 +9,14 @@ export default function DirectoryInformation({ section }) { const useStyles = makeStyles((theme) => ({ headerCell: { borderBottom: "none", - paddingTop: "3px", - paddingBottom: "3px", + paddingTop: theme.spacing(0.5), + paddingBottom: theme.spacing(0.5), }, bodyCell: { wordBreak: "break-word", borderBottom: "none", - paddingTop: "3px", - paddingBottom: "3px", + paddingTop: theme.spacing(0.5), + paddingBottom: theme.spacing(0.5), }, stripedRow: { '&:nth-of-type(odd)': { From 72bb1cab65f57ca22cc9f3a9758080ea46ff8502 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 12 Oct 2020 21:31:45 -0400 Subject: [PATCH 10/40] Render with Paper element by default --- src/components/DirectoryInformation/DirectoryInformation.js | 2 +- src/components/DirectoryInformation/DirectoryInformation.md | 5 +---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/DirectoryInformation/DirectoryInformation.js b/src/components/DirectoryInformation/DirectoryInformation.js index 1bb1497..3f0fefd 100644 --- a/src/components/DirectoryInformation/DirectoryInformation.js +++ b/src/components/DirectoryInformation/DirectoryInformation.js @@ -27,7 +27,7 @@ export default function DirectoryInformation({ section }) { const classes = useStyles(theme); return ( - + {Object.keys(section).map((key) => ( key === "type" ? "" : diff --git a/src/components/DirectoryInformation/DirectoryInformation.md b/src/components/DirectoryInformation/DirectoryInformation.md index 2a85da0..a71c076 100644 --- a/src/components/DirectoryInformation/DirectoryInformation.md +++ b/src/components/DirectoryInformation/DirectoryInformation.md @@ -2,7 +2,6 @@ Displays the directory information as a table. ```jsx -import { Paper } from "@material-ui/core"; import DirectoryInformation from "./DirectoryInformation"; const example_directory_data = { @@ -21,9 +20,7 @@ const example_directory_data = { "Subject": "Upgrade system and Abaqus" }; - - - + ``` ```jsx static From 08e2672ba1963dd9e4cff63f6e0a867d3d687933 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 12 Oct 2020 22:32:29 -0400 Subject: [PATCH 11/40] Add react-relative-time to dependencies --- package-lock.json | 5 +++++ package.json | 1 + 2 files changed, 6 insertions(+) diff --git a/package-lock.json b/package-lock.json index 55507c9..33458a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11956,6 +11956,11 @@ "react-is": "^16.9.0" } }, + "react-relative-time": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/react-relative-time/-/react-relative-time-0.0.7.tgz", + "integrity": "sha1-n39AdChuvmE1tTPu4a3qBV35cYM=" + }, "react-scripts": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz", diff --git a/package.json b/package.json index db88807..4c2ef13 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "material-table": "^1.63.1", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-relative-time": "0.0.7", "react-scripts": "3.4.1" }, "scripts": { From fe2ebf885ba5d1acb74b05acd42152a5ec9fa142 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 12 Oct 2020 22:55:54 -0400 Subject: [PATCH 12/40] Create Assignment component w/ docs --- src/components/Assignment/Assignment.js | 21 ++++++++++++++++++++ src/components/Assignment/Assignment.md | 26 +++++++++++++++++++++++++ src/components/Assignment/index.js | 1 + 3 files changed, 48 insertions(+) create mode 100644 src/components/Assignment/Assignment.js create mode 100644 src/components/Assignment/Assignment.md create mode 100644 src/components/Assignment/index.js diff --git a/src/components/Assignment/Assignment.js b/src/components/Assignment/Assignment.js new file mode 100644 index 0000000..492861f --- /dev/null +++ b/src/components/Assignment/Assignment.js @@ -0,0 +1,21 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { Typography } from "@material-ui/core"; +import RelativeTime from "react-relative-time"; + +export default function Assignment({ by, to, datetime }){ + return ( + + {by} assigned this to {to} + + ); +} + +Assignment.propTypes = { + /** The person who changed the assignment. */ + "by": PropTypes.string.isRequired, + /** The person the item was assigned to. */ + "to": PropTypes.string.isRequired, + /** The time the assignment was changed in ISO 8601 format. */ + "datetime": PropTypes.string.isRequired +} \ No newline at end of file diff --git a/src/components/Assignment/Assignment.md b/src/components/Assignment/Assignment.md new file mode 100644 index 0000000..eaaa150 --- /dev/null +++ b/src/components/Assignment/Assignment.md @@ -0,0 +1,26 @@ +Renders a string representation of an assignment with a relative time. + +```jsx +import Assignment from "./Assignment"; + +const example_assignment = { + "type": "assignment", + "datetime": "2020-06-23T13:27:00-0400", + "by": "campb303", + "to": "campb303" +}; + + + +``` + +```jsx static +const example_assignment = { + "type": "assignment", + "datetime": "2020-06-23T13:27:00-0400", + "by": "campb303", + "to": "campb303" +}; + + +``` \ No newline at end of file diff --git a/src/components/Assignment/index.js b/src/components/Assignment/index.js new file mode 100644 index 0000000..f3e1b8b --- /dev/null +++ b/src/components/Assignment/index.js @@ -0,0 +1 @@ +export { default } from "./Assignment"; \ No newline at end of file From e6da8233910fa01023701f98505a241fa24812f5 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 12 Oct 2020 22:57:41 -0400 Subject: [PATCH 13/40] Include Assignment component in ItemBodyView --- src/components/ItemBodyView/ItemBodyView.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/ItemBodyView/ItemBodyView.js b/src/components/ItemBodyView/ItemBodyView.js index 01503fc..00c6170 100644 --- a/src/components/ItemBodyView/ItemBodyView.js +++ b/src/components/ItemBodyView/ItemBodyView.js @@ -4,6 +4,7 @@ import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineC import { Typography, makeStyles } from "@material-ui/core"; import EmailHeader from "../EmailHeader/"; import DirectoryInformation from "../DirectoryInformation/"; +import Assignment from "../Assignment/"; import { objectIsEmpty } from "../../utilities"; export default function ItemBodyView({ item }) { @@ -59,9 +60,7 @@ export default function ItemBodyView({ item }) { ); case "assignment": return ( - <> - {`${section.by} assigned to ${section.to}`} - + ); case "reply_to_user": return ( From 62409e601c4cb340cb0ee9100c14effcfa2f18bd Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 12 Oct 2020 22:59:06 -0400 Subject: [PATCH 14/40] Add period to the end of an assignment --- src/components/Assignment/Assignment.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Assignment/Assignment.js b/src/components/Assignment/Assignment.js index 492861f..d17385f 100644 --- a/src/components/Assignment/Assignment.js +++ b/src/components/Assignment/Assignment.js @@ -6,7 +6,7 @@ import RelativeTime from "react-relative-time"; export default function Assignment({ by, to, datetime }){ return ( - {by} assigned this to {to} + {by} assigned this to {to} . ); } From 1e6c208f3615269c5be40b63e28f3069df3b72f6 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Tue, 13 Oct 2020 20:25:39 -0400 Subject: [PATCH 15/40] Replace direct theme imports with MUI useTheme hook --- src/components/DirectoryInformation/DirectoryInformation.js | 5 ++--- src/components/EmailHeader/EmailHeader.js | 5 ++--- src/components/ItemMetadataView/ItemMetadataView.js | 5 ++--- src/components/ItemTableAppBar/ItemTableAppBar.md | 4 ++-- src/components/ItemViewAppBar/ItemViewAppBar.md | 4 ++-- src/components/TeamMemberCard/TeamMemberCard.js | 6 +++--- 6 files changed, 13 insertions(+), 16 deletions(-) diff --git a/src/components/DirectoryInformation/DirectoryInformation.js b/src/components/DirectoryInformation/DirectoryInformation.js index 3f0fefd..6991e5e 100644 --- a/src/components/DirectoryInformation/DirectoryInformation.js +++ b/src/components/DirectoryInformation/DirectoryInformation.js @@ -1,11 +1,10 @@ import React from "react"; import PropTypes from "prop-types"; -import { TableContainer, Table, TableRow, TableCell, Paper, makeStyles } from "@material-ui/core"; -import webqueue2Theme from "../../theme"; +import { TableContainer, Table, TableRow, TableCell, Paper, makeStyles, useTheme } from "@material-ui/core"; export default function DirectoryInformation({ section }) { - const theme = webqueue2Theme(false); + const theme = useTheme(); const useStyles = makeStyles((theme) => ({ headerCell: { borderBottom: "none", diff --git a/src/components/EmailHeader/EmailHeader.js b/src/components/EmailHeader/EmailHeader.js index 3af9c0c..b48d59f 100644 --- a/src/components/EmailHeader/EmailHeader.js +++ b/src/components/EmailHeader/EmailHeader.js @@ -1,12 +1,11 @@ import React from "react"; import PropTypes from "prop-types"; -import { Card, CardHeader, makeStyles } from "@material-ui/core"; +import { Card, CardHeader, makeStyles, useTheme } from "@material-ui/core"; import UserAvatar from "../UserAvatar/"; -import webqueue2Theme from "../../theme"; export default function EmailHeader({name, date, email}){ - const theme = webqueue2Theme(false); + const theme = useTheme(); const useStyles = makeStyles({ "verticalPadding": { paddingTop: theme.spacing(1), diff --git a/src/components/ItemMetadataView/ItemMetadataView.js b/src/components/ItemMetadataView/ItemMetadataView.js index e0f27bc..62b7fe6 100644 --- a/src/components/ItemMetadataView/ItemMetadataView.js +++ b/src/components/ItemMetadataView/ItemMetadataView.js @@ -1,14 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { makeStyles, Typography } from '@material-ui/core'; +import { makeStyles, Typography, useTheme } from '@material-ui/core'; import { Alert } from '@material-ui/lab'; -import webqueue2Theme from "../../theme"; import EmailHeader from '../EmailHeader/EmailHeader'; export default function ItemMetadataView({item}){ - const theme = webqueue2Theme(false); + const theme = useTheme(); const useStyles = makeStyles({ "verticalSpacing": { marginTop: theme.spacing(1), diff --git a/src/components/ItemTableAppBar/ItemTableAppBar.md b/src/components/ItemTableAppBar/ItemTableAppBar.md index e870d28..4f43207 100644 --- a/src/components/ItemTableAppBar/ItemTableAppBar.md +++ b/src/components/ItemTableAppBar/ItemTableAppBar.md @@ -2,11 +2,11 @@ The ItemTableAppBar is the primary toolbar for the [ItemTable](/#/Components/Ite ```jsx import React, { useState } from "react"; -import webqueue2Theme from "../../theme.js"; +import { useTheme } from '@material-ui/core'; const [darkMode, setDarkMode] = useState(false); -const theme = webqueue2Theme(darkMode); +const theme = useTheme(); ``` diff --git a/src/components/ItemViewAppBar/ItemViewAppBar.md b/src/components/ItemViewAppBar/ItemViewAppBar.md index acf98df..0ffa96a 100644 --- a/src/components/ItemViewAppBar/ItemViewAppBar.md +++ b/src/components/ItemViewAppBar/ItemViewAppBar.md @@ -3,9 +3,9 @@ The ItemViewAppBar is the primary toolbar for the [ItemView](/#/Components/ItemV ```jsx import React, { useState } from "react"; import ItemViewAppBar from "./ItemViewAppBar"; -import webqueue2Theme from "../../theme.js"; +import { useTheme } from '@material-ui/core'; -const theme = webqueue2Theme(false); +const theme = useTheme(); const [sidebarOpen, setSidebarOpen] = useState(false); diff --git a/src/components/TeamMemberCard/TeamMemberCard.js b/src/components/TeamMemberCard/TeamMemberCard.js index febfa5e..7a7b4b5 100644 --- a/src/components/TeamMemberCard/TeamMemberCard.js +++ b/src/components/TeamMemberCard/TeamMemberCard.js @@ -1,13 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types' import { Card, CardHeader, Avatar, IconButton, CardContent, - CardActions, Link, makeStyles } from '@material-ui/core'; + CardActions, Link, makeStyles, useTheme } from '@material-ui/core'; import WebsiteIcon from '@material-ui/icons/Language'; -import webqueue2Theme from "../../theme"; + export default function TeamMemberCard({firstName, lastName, imageUrl, websiteUrl, children}){ - const theme = webqueue2Theme(); + const theme = useTheme(); const useStyles = () => makeStyles({ "avatarImageLarge": { From 6eece2ea132582caca2e1dda1c3b0e26012d7257 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Tue, 13 Oct 2020 22:33:08 -0400 Subject: [PATCH 16/40] Create Edit component w/ docs --- src/components/Edit/Edit.js | 46 ++++++++++++++++++++++++++++++++++++ src/components/Edit/Edit.md | 29 +++++++++++++++++++++++ src/components/Edit/index.js | 1 + 3 files changed, 76 insertions(+) create mode 100644 src/components/Edit/Edit.js create mode 100644 src/components/Edit/Edit.md create mode 100644 src/components/Edit/index.js diff --git a/src/components/Edit/Edit.js b/src/components/Edit/Edit.js new file mode 100644 index 0000000..690ca35 --- /dev/null +++ b/src/components/Edit/Edit.js @@ -0,0 +1,46 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { Typography, Paper, makeStyles, useTheme } from '@material-ui/core'; +import clsx from "clsx"; +import RelativeTime from "react-relative-time"; + +export default function Edit({ datetime, by, content }){ + + const theme = useTheme(); + + const useStyles = makeStyles({ + "Paper-root": { + overflow: "hidden" + }, + "headerColor": { + backgroundColor: theme.palette.edit.main + }, + "padding": { + padding: theme.spacing(1) + } + + }); + const classes = useStyles(); + + return( + +
+ {by} added an edit +
+
+ {content.map((line) => ( + line === "\n" ?
: {line} + ))} +
+ + ); +} + +Edit.propTypes = { + /** ISO 8601 formatted time string. */ + "datetime": PropTypes.string.isRequired, + /** The name of the person who added the edit. */ + "by": PropTypes.string.isRequired, + /** An array of strings containing the content of the edit. */ + "content": PropTypes.array.isRequired +} \ No newline at end of file diff --git a/src/components/Edit/Edit.md b/src/components/Edit/Edit.md new file mode 100644 index 0000000..c3643f4 --- /dev/null +++ b/src/components/Edit/Edit.md @@ -0,0 +1,29 @@ +Renders a message box style representation of an edit. + +```jsx +import { ThemeProvider } from "@material-ui/core/styles"; +import webqueue2Theme from "../../theme"; +import Edit from "./Edit"; + +const theme = webqueue2Theme(false); + + + + +``` + +```jsx static + +``` \ No newline at end of file diff --git a/src/components/Edit/index.js b/src/components/Edit/index.js new file mode 100644 index 0000000..912ccd5 --- /dev/null +++ b/src/components/Edit/index.js @@ -0,0 +1 @@ +export { default } from "./Edit"; \ No newline at end of file From 4e070b3113c63c3abc547ebde75ac751ff3cf6d4 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Tue, 13 Oct 2020 22:33:27 -0400 Subject: [PATCH 17/40] Start using Edit component in ItemBodyView --- src/components/ItemBodyView/ItemBodyView.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/ItemBodyView/ItemBodyView.js b/src/components/ItemBodyView/ItemBodyView.js index 00c6170..164f050 100644 --- a/src/components/ItemBodyView/ItemBodyView.js +++ b/src/components/ItemBodyView/ItemBodyView.js @@ -5,6 +5,7 @@ import { Typography, makeStyles } from "@material-ui/core"; import EmailHeader from "../EmailHeader/"; import DirectoryInformation from "../DirectoryInformation/"; import Assignment from "../Assignment/"; +import Edit from "../Edit/"; import { objectIsEmpty } from "../../utilities"; export default function ItemBodyView({ item }) { @@ -42,12 +43,7 @@ export default function ItemBodyView({ item }) { ); case "edit": return ( - <> - - {`${section.by} assigned thisat ${Date(section.datetime)}`} - - {section.content.map((line) => {line})} - + ); case "status": return ( From 5187732841ba88610ab53a0558b6eb674fe95b09 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Tue, 13 Oct 2020 22:33:56 -0400 Subject: [PATCH 18/40] Add custom colors to MUI theme --- src/theme.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/theme.js b/src/theme.js index 37236ff..0ee0b51 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,4 +1,4 @@ -import { createMuiTheme } from '@material-ui/core/styles' +import { createMuiTheme } from '@material-ui/core/styles'; /** * Returns custom MUI Theme. @@ -13,7 +13,10 @@ export default function theme(darkMode=false){ createMuiTheme({ "palette": { "type": darkMode ? "dark" : "light", - } + "edit": { + main: "#ffe56433", + } + }, }) ); } \ No newline at end of file From da95549a68c1782d2ac674f595122975e793a1c6 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 19 Oct 2020 18:02:40 -0400 Subject: [PATCH 19/40] Remove unused userAlias prop from UserAvatar --- src/components/UserAvatar/UserAvatar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UserAvatar/UserAvatar.js b/src/components/UserAvatar/UserAvatar.js index 9a56370..5bf3e57 100644 --- a/src/components/UserAvatar/UserAvatar.js +++ b/src/components/UserAvatar/UserAvatar.js @@ -2,7 +2,7 @@ import React from "react"; import PropTypes from "prop-types"; import { Avatar } from "@material-ui/core"; -export default function UserAvatar({userName, userAlias}){ +export default function UserAvatar({ userName }){ return( From 8144304969b8c1ebe8fbe5980510d5e9dfb5c65e Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 19 Oct 2020 18:04:12 -0400 Subject: [PATCH 20/40] Make API call more readable --- src/components/ItemTable/ItemTable.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index dbd01ea..66e8b5c 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -21,9 +21,9 @@ export default function ItemTable({ setActiveItem, setSidebarOpen }) { const [data, setData] = useState([]) useEffect(() => { - fetch("/api/ce").then(res => res.json()).then(queue => { - setData(queue.items) - }) + fetch("/api/ce") + .then(res => res.json()) + .then(queue => setData(queue)) }, []) const options = { From f3d742a7aa9fda82437e3d7d8c509c778f77db6e Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 19 Oct 2020 21:36:31 -0400 Subject: [PATCH 21/40] Update UserAvatar and docs to accept arbitrary props --- src/components/UserAvatar/UserAvatar.js | 10 ++++----- src/components/UserAvatar/UserAvatar.md | 29 ++++++++++++++++++------- 2 files changed, 26 insertions(+), 13 deletions(-) diff --git a/src/components/UserAvatar/UserAvatar.js b/src/components/UserAvatar/UserAvatar.js index 5bf3e57..2a0103d 100644 --- a/src/components/UserAvatar/UserAvatar.js +++ b/src/components/UserAvatar/UserAvatar.js @@ -2,20 +2,20 @@ import React from "react"; import PropTypes from "prop-types"; import { Avatar } from "@material-ui/core"; -export default function UserAvatar({ userName }){ +export default function UserAvatar({ name, ...avatarProps }){ return( - - {userName === "" ? null : userName.charAt(0)} + + {name === "" ? null : name.charAt(0)} ); }; UserAvatar.propTypes = { /** The name of the user. */ - "userName": PropTypes.string + "name": PropTypes.string }; UserAvatar.defaultProps = { - "userName": "" + "name": "" }; \ No newline at end of file diff --git a/src/components/UserAvatar/UserAvatar.md b/src/components/UserAvatar/UserAvatar.md index 40c9a48..36669b6 100644 --- a/src/components/UserAvatar/UserAvatar.md +++ b/src/components/UserAvatar/UserAvatar.md @@ -1,23 +1,36 @@ -The UserAvatar displays a graphical representation of a person and is meant to be used in conjunction with other identifiers like names or emails. +The UserAvatar displays a graphical representation of a person. --- -The UserAvatar will the first letter of the `userName` prop. +## Default Usage +Used without any props, the UserAvatar will display a generic person icon. ```jsx import UserAvatar from "./UserAvatar"; - -``` + +``` ```jsx static - + ``` -If no value, a null value, or an empty string is passed to the UserAvatar, it will fall back to a generic icon. +## With A Name +If the `name` prop is passed, the UserAvatar will display the first letter of the name. ```jsx import UserAvatar from "./UserAvatar"; - + + ``` +```jsx static + +``` + +## Other Props +All props other than `name` are passed to the underlying [MUI Avatar component](https://material-ui.com/api/avatar/). +```jsx +import UserAvatar from "./UserAvatar"; + +``` ```jsx static - + ``` \ No newline at end of file From fab0719effcf53877409e669d552a938d7d78a05 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Tue, 20 Oct 2020 10:55:44 -0400 Subject: [PATCH 22/40] Create CurrentBreakPoint component w/ docs --- .../CurrentBreakPoint/CurrentBreakPoint.js | 46 +++++++++++++++++++ .../CurrentBreakPoint/CurrentBreakPoint.md | 30 ++++++++++++ src/components/CurrentBreakPoint/index.js | 1 + 3 files changed, 77 insertions(+) create mode 100644 src/components/CurrentBreakPoint/CurrentBreakPoint.js create mode 100644 src/components/CurrentBreakPoint/CurrentBreakPoint.md create mode 100644 src/components/CurrentBreakPoint/index.js diff --git a/src/components/CurrentBreakPoint/CurrentBreakPoint.js b/src/components/CurrentBreakPoint/CurrentBreakPoint.js new file mode 100644 index 0000000..4541fd9 --- /dev/null +++ b/src/components/CurrentBreakPoint/CurrentBreakPoint.js @@ -0,0 +1,46 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { useTheme, useMediaQuery, makeStyles } from '@material-ui/core'; + +export default function CurrentBreakPoint(){ + const theme = useTheme(); + const useStyles = makeStyles({ + true: { + color: theme.palette.success.main + }, + false: { + color: theme.palette.error.main + } + }); + const classes = useStyles(); + + const mediaQueries = { + "xs": useMediaQuery(theme.breakpoints.up('xs')), + "sm": useMediaQuery(theme.breakpoints.up('sm')), + "md": useMediaQuery(theme.breakpoints.up('md')), + "lg": useMediaQuery(theme.breakpoints.up('lg')), + "xl": useMediaQuery(theme.breakpoints.up('xl')), + } + + return ( +

+ { Object.keys(mediaQueries).map( (key) => { + console.log("Key: ", key) + console.log("Value: ", mediaQueries.key) + return( + + {`${key.toUpperCase()}: ${ mediaQueries[key] ? "true" : "false"}\n\n\n\n`} + + ) + })} +

+ ); +} + +CurrentBreakPoint.propTypes = { + +}; + +CurrentBreakPoint.defaultProps = { + +}; \ No newline at end of file diff --git a/src/components/CurrentBreakPoint/CurrentBreakPoint.md b/src/components/CurrentBreakPoint/CurrentBreakPoint.md new file mode 100644 index 0000000..e171028 --- /dev/null +++ b/src/components/CurrentBreakPoint/CurrentBreakPoint.md @@ -0,0 +1,30 @@ +Displays the MUI theme breakpoints and whether or not they are active. This is a utility component meant to make UI development easier, not as a UI element for production code. + +It must be used under a [ThemeProvider](https://material-ui.com/styles/api/#themeprovider). + +--- + +```jsx +import { ThemeProvider } from '@material-ui/core/styles'; +import { Paper, makeStyles } from '@material-ui/core'; +import webqueue2Theme from "../../theme.js"; +import CurrentBreakPoint from "./CurrentBreakPoint"; + +const theme = webqueue2Theme(false); + +const useStyles = makeStyles({ + paperPadding: { + padding: theme.spacing(1) + } +}); +const classes = useStyles(); + + + + + + +``` +```jsx static + +``` \ No newline at end of file diff --git a/src/components/CurrentBreakPoint/index.js b/src/components/CurrentBreakPoint/index.js new file mode 100644 index 0000000..4720032 --- /dev/null +++ b/src/components/CurrentBreakPoint/index.js @@ -0,0 +1 @@ +export { default } from "./CurrentBreakPoint"; \ No newline at end of file From a92fedb3acbc97edc7fbcdde5932d7fb195acf8c Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Tue, 20 Oct 2020 11:12:41 -0400 Subject: [PATCH 23/40] Remove debug logs --- src/components/CurrentBreakPoint/CurrentBreakPoint.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/CurrentBreakPoint/CurrentBreakPoint.js b/src/components/CurrentBreakPoint/CurrentBreakPoint.js index 4541fd9..1074891 100644 --- a/src/components/CurrentBreakPoint/CurrentBreakPoint.js +++ b/src/components/CurrentBreakPoint/CurrentBreakPoint.js @@ -25,8 +25,6 @@ export default function CurrentBreakPoint(){ return (

{ Object.keys(mediaQueries).map( (key) => { - console.log("Key: ", key) - console.log("Value: ", mediaQueries.key) return( {`${key.toUpperCase()}: ${ mediaQueries[key] ? "true" : "false"}\n\n\n\n`} From 849d0800a5aeae49b089e2ee448510bf89df6fc2 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Tue, 20 Oct 2020 11:25:40 -0400 Subject: [PATCH 24/40] Fixed bug in API call that stopped ItemTable from loading items --- src/components/ItemTable/ItemTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index 66e8b5c..d6d8101 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -23,7 +23,7 @@ export default function ItemTable({ setActiveItem, setSidebarOpen }) { useEffect(() => { fetch("/api/ce") .then(res => res.json()) - .then(queue => setData(queue)) + .then(queue => setData(queue.items)) }, []) const options = { From 8393a88c9696d34b45dbcaca247bb48d467765da Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Tue, 20 Oct 2020 23:39:26 -0400 Subject: [PATCH 25/40] Update to use flexbox and display to/cc data --- src/components/EmailHeader/EmailHeader.js | 112 ++++++++++++++++------ 1 file changed, 83 insertions(+), 29 deletions(-) diff --git a/src/components/EmailHeader/EmailHeader.js b/src/components/EmailHeader/EmailHeader.js index b48d59f..8482d1c 100644 --- a/src/components/EmailHeader/EmailHeader.js +++ b/src/components/EmailHeader/EmailHeader.js @@ -1,18 +1,26 @@ import React from "react"; import PropTypes from "prop-types"; -import { Card, CardHeader, makeStyles, useTheme } from "@material-ui/core"; +import { Paper, Grid, makeStyles, useTheme, Typography } from "@material-ui/core"; +import RelativeTime from "react-relative-time"; import UserAvatar from "../UserAvatar/"; -export default function EmailHeader({name, date, email}){ +export default function EmailHeader({ datetime, from_name, from_email, to, cc }){ const theme = useTheme(); const useStyles = makeStyles({ - "verticalPadding": { - paddingTop: theme.spacing(1), - paddingBottom: theme.spacing(1), + "paperWrapper": { + padding: theme.spacing(1) }, - "removeCardHeaderPadding": { - padding: "0" + "removeNegativeMargin": { + margin: 0 + }, + "secondaryInformation": { + backgroundColor: theme.palette.grey[100], + marginTop: theme.spacing(1), + marginLeft: -theme.spacing(1), + marginRight: -theme.spacing(1), + marginBottom: -theme.spacing(1), + padding: theme.spacing(1) } }); const classes = useStyles(); @@ -30,43 +38,89 @@ export default function EmailHeader({name, date, email}){ * return "" * @returns {string} */ - function buildTitle(name, email){ - let title = ""; + function buildEmailNameString(name, email){ + let emailNameString = ""; const isNotEmpty = (value) => { return value === "" || value === null ? false : true; }; if (isNotEmpty(name)){ - title += `${name}`; + emailNameString += `${name}`; }; if (isNotEmpty(email)){ - title += ` <${email}>` + emailNameString += ` <${email}>` + } + return emailNameString; + }; + + /** + * Returns a string of emails with names. + * @param {array} Array of objects containing names and emails. + * @returns {string} String of email with names. + */ + function buildRecipientString(recipients){ + if (recipients.length === 0){ + return "Tits"; } - return title; + + let recipientString = ""; + recipients.map( (recipient, index) => { + recipientString += buildEmailNameString(recipient.name, recipient.email) + index < recipients.length - 1 ? recipientString += ", " : recipientString += "" + }) + return recipientString; }; + // const toString = build + return( - - } - title={buildTitle(name, email)} - subheader={Date(date)} - classes={{root: classes.removeCardHeaderPadding}} - /> - + + + + + + + + {buildEmailNameString(from_name, from_email)} + + + + + + + { (to.length === 0 && cc.length === 0) ? null : + + + {to.length === 0 ? null : <>To: {buildRecipientString(to)}} + + + {cc.length === 0 ? null : <>Cc: {buildRecipientString(cc)} } + + + } + ); }; EmailHeader.propTypes = { - /** Name of the user. */ - "name": PropTypes.string, - /** Date of the message. */ - "date": PropTypes.string, - /** Email address of the user. */ - "email": PropTypes.string + /** Name of message sender. */ + "from_name": PropTypes.string, + /** Date the message was sent in ISO 8601 format. */ + "datetime": PropTypes.string, + /** Email address of message sender. */ + "from_email": PropTypes.string, + /** Array of people the message was sent to */ + "to": PropTypes.array, + /** Array of people the message was cc'd to */ + "cc": PropTypes.array }; EmailHeader.defaultProps = { - "name": "", - "date": "", - "email": "" + "from_name": "Name Unavailable", + "datetime": new Date(1970, 1, 1, 0, 0, 0, 0), + "from_email": "Email Unavailable", + "to": [], + "cc": [] }; \ No newline at end of file From c613701441e37b9d92078c0db732662118027525 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Tue, 20 Oct 2020 23:39:38 -0400 Subject: [PATCH 26/40] Update EmailHeader docs --- src/components/EmailHeader/EmailHeader.md | 57 ++++++++++++++++++++++- 1 file changed, 56 insertions(+), 1 deletion(-) diff --git a/src/components/EmailHeader/EmailHeader.md b/src/components/EmailHeader/EmailHeader.md index e163f38..522c3dd 100644 --- a/src/components/EmailHeader/EmailHeader.md +++ b/src/components/EmailHeader/EmailHeader.md @@ -1,9 +1,64 @@ -Description of EmailHeader. +Displays an email header with name, email, time sent, and recipients if present. +--- + +Default usage, without props. ```jsx import EmailHeader from "./EmailHeader"; ``` ```jsx static +``` + +With `datetime`, `from_name` and `from_email` props. When `first_name` is passed, the [UserAvatar](/#/Components/UserAvatar) will display the first letter of the name. +```jsx +import EmailHeader from "./EmailHeader"; + +const demo_data = { + "datetime": "2020-05-11T13:44:12+0000", + "from_name": "Di Wang", + "from_email": "wang2039@purdue.edu", +}; + + + +``` +```jsx static + +``` + +You can add to/cc data by passing `to` and `cc` props. +```jsx +import EmailHeader from "./EmailHeader"; + +const demo_data = { + "datetime": "2020-05-11T13:44:12+0000", + "from_name": "Di Wang", + "from_email": "wang2039@purdue.edu", + "to": [ + { + "name": "'cesite@ecn.purdue.edu'", + "email": "cesite@ecn.purdue.edu" + } + ], + "cc": [ + { + "name": "Zavattieri, Pablo D", + "email": "zavattie@purdue.edu" + } + ] +}; + + + +``` +```jsx static + ``` \ No newline at end of file From d3eaf5737079e4206fea923034a9618c41cacbde Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Tue, 20 Oct 2020 23:39:56 -0400 Subject: [PATCH 27/40] Reset defaults for page load --- src/App.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/App.js b/src/App.js index d573c3f..41cf880 100644 --- a/src/App.js +++ b/src/App.js @@ -9,6 +9,9 @@ import ItemView from "./components/ItemView/"; import clsx from "clsx"; function App(){ + + const demoItem = {"queue": "ce", "number": 100, "lastUpdated": "09-28-20 01:26 PM", "headers": [{"type": "Merged-Time", "content": "Tue, 23 Jun 2020 13:31:53 -0400"}, {"type": "Merged-By", "content": "campb303"}, {"type": "QTime", "content": "1"}, {"type": "QTime-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "QTime-Updated-By", "content": "campb303"}, {"type": "Time", "content": "1"}, {"type": "Time-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "Time-Updated-By", "content": "campb303"}, {"type": "Replied-Time", "content": "Tue, 23 Jun 2020 13:28:48 -0400"}, {"type": "Replied-By", "content": "campb303"}, {"type": "Edited-Time", "content": "Tue, 23 Jun 2020 13:27:56 -0400"}, {"type": "Edited-By", "content": "campb303"}, {"type": "QAssigned-To", "content": "campb303"}, {"type": "QAssigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "QAssigned-To-Updated-By", "content": "campb303"}, {"type": "Assigned-To", "content": "campb303"}, {"type": "Assigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "Assigned-To-Updated-By", "content": "campb303"}, {"type": "QStatus", "content": "Dont Delete"}, {"type": "QStatus-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "QStatus-Updated-By", "content": "campb303"}, {"type": "Status", "content": "Dont Delete"}, {"type": "Status-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "Status-Updated-By", "content": "campb303"}, {"type": "Date", "content": "Tue, 23 Jun 2020 13:25:51 -0400"}, {"type": "From", "content": "Justin Campbell "}, {"type": "Message-ID", "content": "<911CE050-3240-4980-91DD-9C3EBB8DBCF8@purdue.edu>"}, {"type": "Subject", "content": "Beepboop"}, {"type": "To", "content": "cesite@ecn.purdue.edu"}, {"type": "Content-Type", "content": "text/plain; charset=\"utf-8\""}, {"type": "X-ECN-Queue-Original-Path", "content": "/home/pier/e/queue/Attachments/inbox/2020-06-23/208-original.txt"}, {"type": "X-ECN-Queue-Original-URL", "content": "https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/208-original.txt"}], "content": [{"type": "assignment", "datetime": "2020-06-23T13:27:00-0400", "by": "campb303", "to": "campb303"}, {"type": "initial_message", "datetime": "2020-06-23T13:25:51-0400", "from_name": "Justin Campbell", "from_email": "campb303@purdue.edu", "to": [{"name": "", "email": "cesite@ecn.purdue.edu"}], "cc": [], "content": ["Testtest\n"]}, {"type": "status", "datetime": "2020-06-23T13:26:55", "by": "campb303", "content": ["Dont Delete\n"]}, {"type": "edit", "datetime": "2020-06-23T13:27:56", "by": "campb303", "content": ["This be an edit my boy\n"]}, {"type": "reply_to_user", "datetime": "2020-06-23T13:28:18", "by": "campb303", "content": ["This be a reply my son\n", "\n", "Justin\n", "ECN\n"]}, {"type": "reply_from_user", "datetime": "", "from_name": "Justin Campbell", "from_email": "campb303@purdue.edu", "cc": [], "content": ["X-ECN-Queue-Original-Path: /home/pier/e/queue/Attachments/inbox/2020-06-23/212-original.txt\n", "X-ECN-Queue-Original-URL: https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/212-original.txt\n", "\n", "Huzzah!\n"]}], "isLocked": "ce 100 is locked by knewell using qvi", "userEmail": "campb303@purdue.edu", "userName": "Justin Campbell", "userAlias": "campb303", "assignedTo": "campb303", "subject": "Beepboop", "status": "Dont Delete", "priority": "", "department": "", "building": "", "dateReceived": "2020-06-23T13:25:51-0400"}; + const [darkMode, setDarkMode] = useState(false); const [activeItem, setActiveItem] = useState({}); const [sidebarOpen, setSidebarOpen] = useState(false); From 7b9f9cedbb9926b4890d961188ce96406ee74276 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Tue, 20 Oct 2020 23:40:40 -0400 Subject: [PATCH 28/40] Update EmailHeader usages --- src/components/ItemBodyView/ItemBodyView.js | 3 ++- src/components/ItemMetadataView/ItemMetadataView.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/ItemBodyView/ItemBodyView.js b/src/components/ItemBodyView/ItemBodyView.js index 164f050..943d052 100644 --- a/src/components/ItemBodyView/ItemBodyView.js +++ b/src/components/ItemBodyView/ItemBodyView.js @@ -37,7 +37,8 @@ export default function ItemBodyView({ item }) { case "initial_message": return ( <> - + {console.log("Initial Message: ", section)} + {section.content.map((line, index) => {line})} ); diff --git a/src/components/ItemMetadataView/ItemMetadataView.js b/src/components/ItemMetadataView/ItemMetadataView.js index 62b7fe6..0ed03c7 100644 --- a/src/components/ItemMetadataView/ItemMetadataView.js +++ b/src/components/ItemMetadataView/ItemMetadataView.js @@ -35,7 +35,7 @@ export default function ItemMetadataView({item}){ {item.subject} - + Status, assignments, priority, refile, archive and delete controls coming soon to a theater near you. From f1a0bc6127b9174c73afaf92e4e84986e275d2db Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 21 Oct 2020 09:20:20 -0400 Subject: [PATCH 29/40] Added dark mode coloring --- src/components/EmailHeader/EmailHeader.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/EmailHeader/EmailHeader.js b/src/components/EmailHeader/EmailHeader.js index 8482d1c..2e6f73e 100644 --- a/src/components/EmailHeader/EmailHeader.js +++ b/src/components/EmailHeader/EmailHeader.js @@ -9,13 +9,15 @@ export default function EmailHeader({ datetime, from_name, from_email, to, cc }) const theme = useTheme(); const useStyles = makeStyles({ "paperWrapper": { - padding: theme.spacing(1) + padding: theme.spacing(1), + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1) }, "removeNegativeMargin": { margin: 0 }, "secondaryInformation": { - backgroundColor: theme.palette.grey[100], + backgroundColor: theme.palette.type === "light" ? theme.palette.grey[100] : theme.palette.grey[700], marginTop: theme.spacing(1), marginLeft: -theme.spacing(1), marginRight: -theme.spacing(1), @@ -70,8 +72,6 @@ export default function EmailHeader({ datetime, from_name, from_email, to, cc }) return recipientString; }; - // const toString = build - return( From 3949352588218f8d3dbe8ca6f285fb258651ef9b Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 21 Oct 2020 09:23:56 -0400 Subject: [PATCH 30/40] Remove EmailHeader from ItemMetadata --- src/components/ItemMetadataView/ItemMetadataView.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/ItemMetadataView/ItemMetadataView.js b/src/components/ItemMetadataView/ItemMetadataView.js index 0ed03c7..05f6357 100644 --- a/src/components/ItemMetadataView/ItemMetadataView.js +++ b/src/components/ItemMetadataView/ItemMetadataView.js @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import { makeStyles, Typography, useTheme } from '@material-ui/core'; import { Alert } from '@material-ui/lab'; -import EmailHeader from '../EmailHeader/EmailHeader'; export default function ItemMetadataView({item}){ @@ -35,8 +34,6 @@ export default function ItemMetadataView({item}){ {item.subject} - - Status, assignments, priority, refile, archive and delete controls coming soon to a theater near you. From e0827c4ea2101c211050522e457c437e5dacfa41 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 21 Oct 2020 09:24:17 -0400 Subject: [PATCH 31/40] Add return statement to EmailHeader --- src/components/EmailHeader/EmailHeader.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/EmailHeader/EmailHeader.js b/src/components/EmailHeader/EmailHeader.js index 2e6f73e..c4b4485 100644 --- a/src/components/EmailHeader/EmailHeader.js +++ b/src/components/EmailHeader/EmailHeader.js @@ -66,8 +66,9 @@ export default function EmailHeader({ datetime, from_name, from_email, to, cc }) let recipientString = ""; recipients.map( (recipient, index) => { - recipientString += buildEmailNameString(recipient.name, recipient.email) - index < recipients.length - 1 ? recipientString += ", " : recipientString += "" + recipientString += buildEmailNameString(recipient.name, recipient.email); + index < recipients.length - 1 ? recipientString += ", " : recipientString += ""; + return true; }) return recipientString; }; From fc9f701ea7866e888778f3450a18f2a36fd5813c Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 21 Oct 2020 13:28:10 -0400 Subject: [PATCH 32/40] Create MessageView component w/ docs --- src/components/MessageView/MessageView.js | 51 ++++++++++++++++++++++ src/components/MessageView/MessageView.md | 53 +++++++++++++++++++++++ src/components/MessageView/index.js | 1 + 3 files changed, 105 insertions(+) create mode 100644 src/components/MessageView/MessageView.js create mode 100644 src/components/MessageView/MessageView.md create mode 100644 src/components/MessageView/index.js diff --git a/src/components/MessageView/MessageView.js b/src/components/MessageView/MessageView.js new file mode 100644 index 0000000..e902a79 --- /dev/null +++ b/src/components/MessageView/MessageView.js @@ -0,0 +1,51 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { Paper, Typography, makeStyles, useTheme } from "@material-ui/core"; +import EmailHeader from "../EmailHeader/"; + +export default function MessageView({ datetime, from_name, from_email, to, cc, content }){ + + const theme = useTheme(); + const useStyles = makeStyles({ + "content": { + border: "none", + padding: `${theme.spacing(1)}px ${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(2)}px` + } + }); + const classes = useStyles(); + + return ( + + + + {content.map((line) => ( + line === "\n" ?
: {line} + ))} + + + ); +}; + +MessageView.propTypes = { + /** Name of message sender. */ + "from_name": PropTypes.string, + /** Date the message was sent in ISO 8601 format. */ + "datetime": PropTypes.string, + /** Email address of message sender. */ + "from_email": PropTypes.string, + /** Array of people the message was sent to. */ + "to": PropTypes.array, + /** Array of people the message was cc'd to. */ + "cc": PropTypes.array, + /** The content of the message as an array of line with non-printable characters. */ + "content": PropTypes.array +}; + +MessageView.defaultProps = { + "from_name": "Name Unavailable", + "datetime": new Date(1970, 1, 1, 0, 0, 0, 0), + "from_email": "Email Unavailable", + "to": [], + "cc": [], + "content": [] +}; \ No newline at end of file diff --git a/src/components/MessageView/MessageView.md b/src/components/MessageView/MessageView.md new file mode 100644 index 0000000..ab2b2b4 --- /dev/null +++ b/src/components/MessageView/MessageView.md @@ -0,0 +1,53 @@ +The MessageView displays an [EmailHeader](/#/Components/EmailHeader) and the content of a message. + +--- + +```jsx +import MessageView from "./MessageView"; + +

+ +
+``` +```jsx static + +``` + +```jsx +import MessageView from "./MessageView"; + +demo_data = { + "datetime": "2020-04-15T15:45:45+0000", + "from_name": "Ricksy, Jennifer R", + "from_email": "jricksy@purdue.edu", + "to": [ + { + "name": "csite@ecn.purdue.edu", + "email": "csite@ecn.purdue.edu" + } + ], + "cc": [ + + ], + "content": [ + "I still can't get this to work. And now the \"trial\" version that I was\n", + "using has expired so I can't do anything with a pdf.\n", + "\n", + "Jenny\n", + "\n", + "Jenny Ricksy\n", + "Burke Graduate Program Administrator\n", + "Lyles School of Civil Engineering\n", + "Ph: 765-494-2436 Fax: 765-494-0395\n", + "HAMP 1141G\n" + ] +}; + + +
+ +
+``` +```jsx static + +``` \ No newline at end of file diff --git a/src/components/MessageView/index.js b/src/components/MessageView/index.js new file mode 100644 index 0000000..7c7e2e9 --- /dev/null +++ b/src/components/MessageView/index.js @@ -0,0 +1 @@ +export { default } from "./MessageView"; \ No newline at end of file From 84c3b8c1e82aefa67818ec1cf8fee01dbdbc418e Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 21 Oct 2020 13:28:39 -0400 Subject: [PATCH 33/40] Add extra whitespace for use with MessageView --- src/components/EmailHeader/EmailHeader.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/EmailHeader/EmailHeader.js b/src/components/EmailHeader/EmailHeader.js index c4b4485..d3c5ccf 100644 --- a/src/components/EmailHeader/EmailHeader.js +++ b/src/components/EmailHeader/EmailHeader.js @@ -9,20 +9,18 @@ export default function EmailHeader({ datetime, from_name, from_email, to, cc }) const theme = useTheme(); const useStyles = makeStyles({ "paperWrapper": { - padding: theme.spacing(1), - marginTop: theme.spacing(1), - marginBottom: theme.spacing(1) + padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, + margin: `${theme.spacing(1)}px 0`, + borderBottomLeftRadius: 0, + borderBottomRightRadius: 0 }, "removeNegativeMargin": { margin: 0 }, "secondaryInformation": { backgroundColor: theme.palette.type === "light" ? theme.palette.grey[100] : theme.palette.grey[700], - marginTop: theme.spacing(1), - marginLeft: -theme.spacing(1), - marginRight: -theme.spacing(1), - marginBottom: -theme.spacing(1), - padding: theme.spacing(1) + margin: `${theme.spacing(1)}px ${-theme.spacing(2)}px ${-theme.spacing(1)}px ${-theme.spacing(2)}px`, + padding: `${theme.spacing(1)}px ${theme.spacing(2)}px` } }); const classes = useStyles(); From fc9ecd71ea9b3ec01e64a57d69c79d83bd3b0055 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 21 Oct 2020 13:29:26 -0400 Subject: [PATCH 34/40] Start using MessageView in ItemBodyView --- src/components/ItemBodyView/ItemBodyView.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/ItemBodyView/ItemBodyView.js b/src/components/ItemBodyView/ItemBodyView.js index 943d052..f46caee 100644 --- a/src/components/ItemBodyView/ItemBodyView.js +++ b/src/components/ItemBodyView/ItemBodyView.js @@ -6,6 +6,7 @@ import EmailHeader from "../EmailHeader/"; import DirectoryInformation from "../DirectoryInformation/"; import Assignment from "../Assignment/"; import Edit from "../Edit/"; +import MessageView from "../MessageView/"; import { objectIsEmpty } from "../../utilities"; export default function ItemBodyView({ item }) { @@ -37,9 +38,7 @@ export default function ItemBodyView({ item }) { case "initial_message": return ( <> - {console.log("Initial Message: ", section)} - - {section.content.map((line, index) => {line})} + ); case "edit": From aa9c2551eb88e1e6c368f930c2b5a0c634e9f6d7 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Thu, 22 Oct 2020 10:54:41 -0400 Subject: [PATCH 35/40] Starting using MessageView for reply_from_user --- src/components/ItemBodyView/ItemBodyView.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/ItemBodyView/ItemBodyView.js b/src/components/ItemBodyView/ItemBodyView.js index f46caee..0d6410d 100644 --- a/src/components/ItemBodyView/ItemBodyView.js +++ b/src/components/ItemBodyView/ItemBodyView.js @@ -2,7 +2,6 @@ import React from "react"; import PropTypes from "prop-types"; import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot } from '@material-ui/lab'; import { Typography, makeStyles } from "@material-ui/core"; -import EmailHeader from "../EmailHeader/"; import DirectoryInformation from "../DirectoryInformation/"; import Assignment from "../Assignment/"; import Edit from "../Edit/"; @@ -69,10 +68,7 @@ export default function ItemBodyView({ item }) { ); case "reply_from_user": return ( - <> - - {section.content.map((line, index) => {line})} - + ); default: return "No Match Found"; From 32c096392a22784e0a89e601fd0ee8542b4e9fca Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Thu, 22 Oct 2020 11:11:40 -0400 Subject: [PATCH 36/40] Reduce whitespace in ItemView --- src/components/ItemView/ItemView.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/ItemView/ItemView.js b/src/components/ItemView/ItemView.js index e584207..1013cb0 100644 --- a/src/components/ItemView/ItemView.js +++ b/src/components/ItemView/ItemView.js @@ -1,21 +1,24 @@ import React from 'react'; import PropTypes from "prop-types"; -import { Paper, makeStyles } from '@material-ui/core'; +import { Paper, makeStyles, useTheme } from '@material-ui/core'; import ItemMetadataView from "../ItemMetadataView/" import ItemBodyView from "../ItemBodyView"; export default function ItemView(props){ - const useStyles = makeStyles((theme) => ({ + const theme = useTheme(); + const useStyles = makeStyles({ "paperPadding": { - padding: theme.spacing(2), + paddingTop: theme.spacing(1), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + border: "none" } - })); - + }); const classes = useStyles(); return( - + From db826833d9ff58aa0b3d2a21d6313131f482de6a Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Thu, 22 Oct 2020 13:15:29 -0400 Subject: [PATCH 37/40] Replace Edit component w/ TimelineActionCard --- src/components/Edit/Edit.md | 29 --------- src/components/Edit/index.js | 1 - .../TimelineActionCard.js} | 29 +++++++-- .../TimelineActionCard/TimelineActionCard.md | 60 +++++++++++++++++++ src/components/TimelineActionCard/index.js | 1 + 5 files changed, 85 insertions(+), 35 deletions(-) delete mode 100644 src/components/Edit/Edit.md delete mode 100644 src/components/Edit/index.js rename src/components/{Edit/Edit.js => TimelineActionCard/TimelineActionCard.js} (61%) create mode 100644 src/components/TimelineActionCard/TimelineActionCard.md create mode 100644 src/components/TimelineActionCard/index.js diff --git a/src/components/Edit/Edit.md b/src/components/Edit/Edit.md deleted file mode 100644 index c3643f4..0000000 --- a/src/components/Edit/Edit.md +++ /dev/null @@ -1,29 +0,0 @@ -Renders a message box style representation of an edit. - -```jsx -import { ThemeProvider } from "@material-ui/core/styles"; -import webqueue2Theme from "../../theme"; -import Edit from "./Edit"; - -const theme = webqueue2Theme(false); - - - - -``` - -```jsx static - -``` \ No newline at end of file diff --git a/src/components/Edit/index.js b/src/components/Edit/index.js deleted file mode 100644 index 912ccd5..0000000 --- a/src/components/Edit/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./Edit"; \ No newline at end of file diff --git a/src/components/Edit/Edit.js b/src/components/TimelineActionCard/TimelineActionCard.js similarity index 61% rename from src/components/Edit/Edit.js rename to src/components/TimelineActionCard/TimelineActionCard.js index 690ca35..431cd3e 100644 --- a/src/components/Edit/Edit.js +++ b/src/components/TimelineActionCard/TimelineActionCard.js @@ -4,16 +4,27 @@ import { Typography, Paper, makeStyles, useTheme } from '@material-ui/core'; import clsx from "clsx"; import RelativeTime from "react-relative-time"; -export default function Edit({ datetime, by, content }){ +export default function TimelineActionCard({ type, datetime, by, content }){ const theme = useTheme(); + const types = { + "edit": { + "verbage": "added an edit", + "coloring": theme.palette.edit.main + }, + "reply_to_user": { + "verbage": "replied", + "coloring": theme.palette.reply_to_user.main + } + } + const useStyles = makeStyles({ "Paper-root": { overflow: "hidden" }, "headerColor": { - backgroundColor: theme.palette.edit.main + backgroundColor: types[type].coloring }, "padding": { padding: theme.spacing(1) @@ -25,7 +36,7 @@ export default function Edit({ datetime, by, content }){ return(
- {by} added an edit + {by} {types[type].verbage}
{content.map((line) => ( @@ -36,11 +47,19 @@ export default function Edit({ datetime, by, content }){ ); } -Edit.propTypes = { +TimelineActionCard.propTypes = { + "type": PropTypes.oneOf([ + "edit", + "reply_to_user" + ]), /** ISO 8601 formatted time string. */ "datetime": PropTypes.string.isRequired, /** The name of the person who added the edit. */ "by": PropTypes.string.isRequired, /** An array of strings containing the content of the edit. */ "content": PropTypes.array.isRequired -} \ No newline at end of file +}; + +TimelineActionCard.defaultProps = { + "type": "edit", +}; \ No newline at end of file diff --git a/src/components/TimelineActionCard/TimelineActionCard.md b/src/components/TimelineActionCard/TimelineActionCard.md new file mode 100644 index 0000000..7c8a8ee --- /dev/null +++ b/src/components/TimelineActionCard/TimelineActionCard.md @@ -0,0 +1,60 @@ +Renders a card like view for an action with free form text content like an Edit or Reply. + +```jsx +import { ThemeProvider } from "@material-ui/core/styles"; +import webqueue2Theme from "../../theme"; +import TimelineActionCard from "./TimelineActionCard"; + +const theme = webqueue2Theme(false); + + +
+
+ +
+
+ +
+
+ +``` + +```jsx static + + + +``` \ No newline at end of file diff --git a/src/components/TimelineActionCard/index.js b/src/components/TimelineActionCard/index.js new file mode 100644 index 0000000..48454f2 --- /dev/null +++ b/src/components/TimelineActionCard/index.js @@ -0,0 +1 @@ +export { default } from "./TimelineActionCard"; \ No newline at end of file From 03129f075c0946e8b0e68e6f066af1a689c378a4 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Thu, 22 Oct 2020 13:15:53 -0400 Subject: [PATCH 38/40] Update theme for TimelineActionCard --- src/theme.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/theme.js b/src/theme.js index 0ee0b51..8f16c8a 100644 --- a/src/theme.js +++ b/src/theme.js @@ -14,7 +14,13 @@ export default function theme(darkMode=false){ "palette": { "type": darkMode ? "dark" : "light", "edit": { - main: "#ffe56433", + main: "rgba(255, 229, 100, 0.2)", + }, + "reply_to_user": { + main: "rgba(99, 125, 255, 0.2)", + }, + "reply_from_user": { + main: "rgba(99, 255, 151, 0.2)", } }, }) From 4396c9cfa3726c8f245e930e363df4bf0bd1a273 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Thu, 22 Oct 2020 13:16:30 -0400 Subject: [PATCH 39/40] Replace Edit w/ TimelineActionCard --- src/components/ItemBodyView/ItemBodyView.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/components/ItemBodyView/ItemBodyView.js b/src/components/ItemBodyView/ItemBodyView.js index 0d6410d..19e48fb 100644 --- a/src/components/ItemBodyView/ItemBodyView.js +++ b/src/components/ItemBodyView/ItemBodyView.js @@ -4,7 +4,7 @@ import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineC import { Typography, makeStyles } from "@material-ui/core"; import DirectoryInformation from "../DirectoryInformation/"; import Assignment from "../Assignment/"; -import Edit from "../Edit/"; +import TimelineActionCard from "../TimelineActionCard/"; import MessageView from "../MessageView/"; import { objectIsEmpty } from "../../utilities"; @@ -42,7 +42,7 @@ export default function ItemBodyView({ item }) { ); case "edit": return ( - + ); case "status": return ( @@ -59,12 +59,7 @@ export default function ItemBodyView({ item }) { ); case "reply_to_user": return ( - <> - - {`${section.by} replied ${Date(section.datetime)}`} - - {section.content.map((line) => {line})} - + ); case "reply_from_user": return ( From 4c7cbdc6fa3abd68939c9c26c97adc1f416ca5f1 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Thu, 22 Oct 2020 14:54:43 -0400 Subject: [PATCH 40/40] Remove demo item --- src/App.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/App.js b/src/App.js index 41cf880..386ee97 100644 --- a/src/App.js +++ b/src/App.js @@ -10,7 +10,6 @@ import clsx from "clsx"; function App(){ - const demoItem = {"queue": "ce", "number": 100, "lastUpdated": "09-28-20 01:26 PM", "headers": [{"type": "Merged-Time", "content": "Tue, 23 Jun 2020 13:31:53 -0400"}, {"type": "Merged-By", "content": "campb303"}, {"type": "QTime", "content": "1"}, {"type": "QTime-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "QTime-Updated-By", "content": "campb303"}, {"type": "Time", "content": "1"}, {"type": "Time-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "Time-Updated-By", "content": "campb303"}, {"type": "Replied-Time", "content": "Tue, 23 Jun 2020 13:28:48 -0400"}, {"type": "Replied-By", "content": "campb303"}, {"type": "Edited-Time", "content": "Tue, 23 Jun 2020 13:27:56 -0400"}, {"type": "Edited-By", "content": "campb303"}, {"type": "QAssigned-To", "content": "campb303"}, {"type": "QAssigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "QAssigned-To-Updated-By", "content": "campb303"}, {"type": "Assigned-To", "content": "campb303"}, {"type": "Assigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "Assigned-To-Updated-By", "content": "campb303"}, {"type": "QStatus", "content": "Dont Delete"}, {"type": "QStatus-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "QStatus-Updated-By", "content": "campb303"}, {"type": "Status", "content": "Dont Delete"}, {"type": "Status-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "Status-Updated-By", "content": "campb303"}, {"type": "Date", "content": "Tue, 23 Jun 2020 13:25:51 -0400"}, {"type": "From", "content": "Justin Campbell "}, {"type": "Message-ID", "content": "<911CE050-3240-4980-91DD-9C3EBB8DBCF8@purdue.edu>"}, {"type": "Subject", "content": "Beepboop"}, {"type": "To", "content": "cesite@ecn.purdue.edu"}, {"type": "Content-Type", "content": "text/plain; charset=\"utf-8\""}, {"type": "X-ECN-Queue-Original-Path", "content": "/home/pier/e/queue/Attachments/inbox/2020-06-23/208-original.txt"}, {"type": "X-ECN-Queue-Original-URL", "content": "https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/208-original.txt"}], "content": [{"type": "assignment", "datetime": "2020-06-23T13:27:00-0400", "by": "campb303", "to": "campb303"}, {"type": "initial_message", "datetime": "2020-06-23T13:25:51-0400", "from_name": "Justin Campbell", "from_email": "campb303@purdue.edu", "to": [{"name": "", "email": "cesite@ecn.purdue.edu"}], "cc": [], "content": ["Testtest\n"]}, {"type": "status", "datetime": "2020-06-23T13:26:55", "by": "campb303", "content": ["Dont Delete\n"]}, {"type": "edit", "datetime": "2020-06-23T13:27:56", "by": "campb303", "content": ["This be an edit my boy\n"]}, {"type": "reply_to_user", "datetime": "2020-06-23T13:28:18", "by": "campb303", "content": ["This be a reply my son\n", "\n", "Justin\n", "ECN\n"]}, {"type": "reply_from_user", "datetime": "", "from_name": "Justin Campbell", "from_email": "campb303@purdue.edu", "cc": [], "content": ["X-ECN-Queue-Original-Path: /home/pier/e/queue/Attachments/inbox/2020-06-23/212-original.txt\n", "X-ECN-Queue-Original-URL: https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/212-original.txt\n", "\n", "Huzzah!\n"]}], "isLocked": "ce 100 is locked by knewell using qvi", "userEmail": "campb303@purdue.edu", "userName": "Justin Campbell", "userAlias": "campb303", "assignedTo": "campb303", "subject": "Beepboop", "status": "Dont Delete", "priority": "", "department": "", "building": "", "dateReceived": "2020-06-23T13:25:51-0400"}; const [darkMode, setDarkMode] = useState(false); const [activeItem, setActiveItem] = useState({});