diff --git a/src/components/ItemView/ItemView.stories.mdx b/src/components/ItemView/ItemView.stories.mdx index 851cfb7..ae5f7ab 100644 --- a/src/components/ItemView/ItemView.stories.mdx +++ b/src/components/ItemView/ItemView.stories.mdx @@ -1,28 +1,41 @@ -import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; -import ItemView from './ItemView'; +import { useState } from "react"; +import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'; +import ItemView from './ItemView'; import ItemProvider, { useItem, useItemSetter } from "../ItemProvider"; + { + let [isFirstRender, setIsFirstRender] = useState(true); + + let setItem = useItemSetter(); + let demoItem = {"queue": "ce", "number": 100, "lastUpdated": "2020-12-01T19:53:00-0500", "headers": [{"type": "Merged-Time", "content": "2020-06-23T13:31:53-0400"}, {"type": "Merged-By", "content": "campb303"}, {"type": "QTime", "content": "1"}, {"type": "QTime-Updated-Time", "content": "2020-06-23T13:28:50-0400"}, {"type": "QTime-Updated-By", "content": "campb303"}, {"type": "Time", "content": "1"}, {"type": "Time-Updated-Time", "content": "2020-06-23T13:28:50-0400"}, {"type": "Time-Updated-By", "content": "campb303"}, {"type": "Replied-Time", "content": "2020-06-23T13:28:48-0400"}, {"type": "Replied-By", "content": "campb303"}, {"type": "Edited-Time", "content": "2020-06-23T13:27:56-0400"}, {"type": "Edited-By", "content": "campb303"}, {"type": "QAssigned-To", "content": "campb303"}, {"type": "QAssigned-To-Updated-Time", "content": "2020-06-23T13:27:00-0400"}, {"type": "QAssigned-To-Updated-By", "content": "campb303"}, {"type": "Assigned-To", "content": "campb303"}, {"type": "Assigned-To-Updated-Time", "content": "2020-06-23T13:27:00-0400"}, {"type": "Assigned-To-Updated-By", "content": "campb303"}, {"type": "QStatus", "content": "Dont Delete"}, {"type": "QStatus-Updated-Time", "content": "2020-06-23T13:26:55-0400"}, {"type": "QStatus-Updated-By", "content": "campb303"}, {"type": "Status", "content": "Dont Delete"}, {"type": "Status-Updated-Time", "content": "2020-06-23T13:26:55-0400"}, {"type": "Status-Updated-By", "content": "campb303"}, {"type": "Date", "content": "2020-06-23T13: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": "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": [], "subject": "Beepboop", "content": ["Testtest\n"]}, {"type": "status", "by": "campb303", "datetime": "2020-06-23T13:26:55-0400", "content": ["Dont Delete\n"]}, {"type": "assignment", "datetime": "2020-06-23T13:27:00-0400", "by": "campb303", "to": "campb303"}, {"type": "edit", "by": "campb303", "datetime": "2020-06-23T13:27:56-0400", "content": ["This be an edit my boy\n"]}, {"type": "reply_to_user", "by": "campb303", "datetime": "2020-06-23T13:28:18-0400", "content": ["This be a reply my son\n", "\n", "Justin\n", "ECN\n"]}, {"type": "reply_from_user", "subject": "Re: Beepboop", "from_name": "Justin Campbell", "from_email": "campb303@purdue.edu", "datetime": "2020-06-23T13:30:45-0400", "content": ["Huzzah!\n"], "headers": [{"type": "Subject", "content": "Re: Beepboop\n"}, {"type": "From", "content": "Justin Campbell \n"}, {"type": "Date", "content": "Tue, 23 Jun 2020 13:30:45 -0400\n"}, {"type": "X-ECN-Queue-Original-Path", "content": "/home/pier/e/queue/Attachments/inbox/2020-06-23/212-original.txt\n"}, {"type": "X-ECN-Queue-Original-URL", "content": "https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/212-original.txt\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"}; + + if (isFirstRender) { + setItem(demoItem); + setIsFirstRender(false); + } + + let item = useItem(); + console.log("Item:", item); + return ; + } + ]} +/> -The ItemView is the primary view for an item. It displays the messages and actions in a timeline view. +Combined view of [ItemMetadataView](/?path=/docs/components-itemmetadataview), [ItemBodyView](/?path=/docs/components-itemmbodyview), [ItemHeaderView](/?path=/docs/components-itemmbodyview) split between [MUI Tabs](https://material-ui.com/components/tabs/). - - -export const Template = () => { - const item = {"queue": "ce", "number": 100, "lastUpdated": "07-23-20 10:11 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"}], "content": ["Testtest\n", "\n", "*** Status updated by: campb303 at: 6/23/2020 13:26:55 ***\n", "Dont Delete\n", "*** Edited by: campb303 at: 06/23/20 13:27:56 ***\n", "\n", "This be an edit my boy\n", "\n", "\n", "\n", "*** 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", "=== 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"], "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": "Tue, 23 Jun 2020 13:25:51 -0400"}; - const setItem = useItemSetter(); - setItem(item); - return( - - - - ); -} - -# ItemView with Valid Item +The component relies of context of the [ItemProvider](/?path=/docs/components-itemprovider) for data. - - {Template.bind({})} + + { args => } + \ No newline at end of file