From 2b43eadf940f396f13014499a027fc0a2c806a18 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 21 Sep 2020 15:49:13 -0400 Subject: [PATCH] Create ItemBodyView component w/ docs --- src/components/ItemBodyView/ItemBodyView.js | 105 ++++++++++++++++++++ src/components/ItemBodyView/ItemBodyView.md | 23 +++++ src/components/ItemBodyView/index.js | 3 + 3 files changed, 131 insertions(+) create mode 100644 src/components/ItemBodyView/ItemBodyView.js create mode 100644 src/components/ItemBodyView/ItemBodyView.md create mode 100644 src/components/ItemBodyView/index.js diff --git a/src/components/ItemBodyView/ItemBodyView.js b/src/components/ItemBodyView/ItemBodyView.js new file mode 100644 index 0000000..3d6266e --- /dev/null +++ b/src/components/ItemBodyView/ItemBodyView.js @@ -0,0 +1,105 @@ +import React, { useState } from "react"; +import PropTypes from "prop-types"; +import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot } from '@material-ui/lab'; +import { Card, CardHeader, CardContent, Typography, makeStyles } from "@material-ui/core"; +import webqueue2Theme from "../../theme"; +import EmailHeader from "../EmailHeader/"; +import { objectIsEmpty } from "../../utilities"; + +export default function ItemBodyView({ item }) { + + const theme = webqueue2Theme(false); + const useStyles = makeStyles((theme) => ({ + missingOppositeContent: { + '&:before': { + content: '""', + flex: 0, + padding: '0', + }, + }, + })); + const classes = useStyles(theme); + + const generateTimelineItem = (section) => { + switch(section.type) { + case "directoryInformation": + if (section.content.length === 0){ + return "No Directory Information"; + } else { + return "Directory Information Present" + } + case "initialMessage": + return( + <> + + {section.content.map((line, index) => {line})} + + ); + case "edit": + return( + <> + + {`${section.by} assigned thisat ${Date(section.datetime)}`} + + {section.content.map((line) => {line})} + + ); + case "status": + return( + <> + + {`${section.by} update the status to at ${Date(section.datetime)}`} + + {section.content.map((line) => {line})} + + ); + case "assign": + return ( + + {`${section.by} assigned this to ${section.to} at ${Date(section.datetime)}`} + + ); + case "replyToUser": + return( + <> + + {`${section.by} replied ${Date(section.datetime)}`} + + {section.content.map((line) => {line})} + + ); + case "replyFromUser": + return( + <> + + {section.content.map((line, index) => {line})} + + ); + default: + return "No Match Found"; + }; + }; + + return ( + + {objectIsEmpty(item) ? "" : item.content.map((section, index) => { + return ( + + + + + + + {generateTimelineItem(section)} + + + ); + })} + + ); +}; + +ItemBodyView.propTypes = { + /** The item to diplay. */ + "item": PropTypes.object.isRequired +}; \ No newline at end of file diff --git a/src/components/ItemBodyView/ItemBodyView.md b/src/components/ItemBodyView/ItemBodyView.md new file mode 100644 index 0000000..2c224d1 --- /dev/null +++ b/src/components/ItemBodyView/ItemBodyView.md @@ -0,0 +1,23 @@ +The ItemBodyView displays the seven actions possible in an item: + +- **Directory information**: present when a user submits a ticket from the Contact Us page +- **Initial Message**: the first message a user sends. +- **Edit:** an internal note to and from ECN staff. +- **Status:** an internal summary of the current/next task for the item. +- **Assignment:** the career account alias for the ECN employee the item is assigned to. +- **Reply To User:** a message sent from an ECN employee to a user. +- **Reply To ECN:** a message sent from the user to ECN that has been merged into an existing 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"}; + +
+ +
+``` + +```jsx static + +``` \ No newline at end of file diff --git a/src/components/ItemBodyView/index.js b/src/components/ItemBodyView/index.js new file mode 100644 index 0000000..076a727 --- /dev/null +++ b/src/components/ItemBodyView/index.js @@ -0,0 +1,3 @@ +import ItemBodyView from "./ItemBodyView"; + +export default ItemBodyView; \ No newline at end of file