-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
56 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,63 @@ | ||
| import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; | ||
| import ItemTable from './ItemTable'; | ||
| import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'; | ||
| import ItemTable from './ItemTable'; | ||
|
|
||
| The ItemTable is the primary view for webqueue2. It displays item metadata for items of selected queues and allows for filtering by field and opening an item by clicking. Items are passed in as a required parameter. It is to be used with the [ItemTableAppBar](?path=/docs/components-itemtableappbar--default-story). | ||
| It is based on [react-table](https://react-table.tanstack.com/). | ||
| <Meta | ||
| title="Components/ItemTable" | ||
| component={ItemTable} | ||
| argTypes={{ | ||
| items: { | ||
| control: { | ||
| type: "object" | ||
| } | ||
| }, | ||
| rowCanBeSelected: { | ||
| control: { | ||
| type: "boolean" | ||
| } | ||
| }, | ||
| loading: { | ||
| control: { | ||
| type: "boolean" | ||
| } | ||
| } | ||
| }} | ||
| /> | ||
|
|
||
| <Meta title="Components/ItemTable" component={ItemTable} /> | ||
| Renders a table of Item metadata and allows for per column filtering. It is based on [react-table](https://react-table.tanstack.com/). | ||
|
|
||
| # ItemTable Loading Content (Loading) | ||
| ### With Items | ||
| Pass an array of Item objects to the `data` prop. | ||
| <Canvas> | ||
| <Story | ||
| name="With Items" | ||
| args={{ | ||
| data: [ | ||
| {"queue": "ce", "number": 9, "lastUpdated": "09-11-20 12:14 PM", "isLocked": false, "userEmail": "lslusher@purdue.edu", "userName": "Slusher, Laura M", "userAlias": "lslusher", "assignedTo": "bekuma", "subject": "RE: New laptop", "status": "waiting on reply/time to call", "priority": "deploy", "department": "che", "building": "frny", "dateReceived": "2020-03-12T18:07:27+0000"}, | ||
| {"queue": "ce", "number": 42, "lastUpdated": "09-11-20 12:14 PM", "isLocked": false, "userEmail": "feng293@purdue.edu", "userName": "", "userAlias": "feng293", "assignedTo": "schmid22", "subject": "Upgrade system and Abaqus", "status": "", "priority": "", "department": "", "building": "", "dateReceived": "2020-05-14T10:21:32-0400"}, | ||
| {"queue": "ce", "number": 51, "lastUpdated": "09-11-20 12:14 PM", "isLocked": false, "userEmail": "jclauso@purdue.edu", "userName": "", "userAlias": "jclauso", "assignedTo": "schmid22", "subject": "ECN privileges for future grad student", "status": "Waiting for reply", "priority": "", "department": "", "building": "", "dateReceived": "2020-05-14T15:03:07-0400"} | ||
| ] | ||
| }} | ||
| > | ||
| { args => <ItemTable {...args} />} | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| ### Loading | ||
| Set the `loading` prop to true during asynchronous data fetches. | ||
| <Canvas> | ||
| <Story name="Loading" args={{ | ||
| data: [], | ||
| rowCanBeSelected:false, | ||
| loading:true, | ||
| }}> | ||
| {args => <ItemTable {...args} />} | ||
| </Story> | ||
| </Canvas> | ||
| <Story | ||
| name="Loading" | ||
| args={{ | ||
| data: [], | ||
| loading: true | ||
| }} | ||
| > | ||
| { args => <ItemTable {...args} />} | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| # ItemTable With Content(Loaded) | ||
| ### Selected Styling | ||
| Due to a bug in MUI Table, the `rowCanBeSelected` prop has been added to control whether rows can be selected. When this is true, rows ca be selected and styled. This this is false, row selection styling is removed. | ||
| See [this GitHub issue](https://github.itap.purdue.edu/ECN/webqueue2-frontend/issues/117) for more info. | ||
|
|
||
| <Canvas> | ||
| <Story name="Loaded" args={{ | ||
| data: [ | ||
| {"queue": "ce", "number": 9, "lastUpdated": "09-11-20 12:14 PM", "isLocked": false, "userEmail": "lslusher@purdue.edu", "userName": "Slusher, Laura M", "userAlias": "lslusher", "assignedTo": "bekuma", "subject": "RE: New laptop", "status": "waiting on reply/time to call", "priority": "deploy", "department": "che", "building": "frny", "dateReceived": "2020-03-12T18:07:27+0000"}, | ||
| {"queue": "ce", "number": 42, "lastUpdated": "09-11-20 12:14 PM", "isLocked": false, "userEmail": "feng293@purdue.edu", "userName": "", "userAlias": "feng293", "assignedTo": "schmid22", "subject": "Upgrade system and Abaqus", "status": "", "priority": "", "department": "", "building": "", "dateReceived": "2020-05-14T10:21:32-0400"}, | ||
| {"queue": "ce", "number": 51, "lastUpdated": "09-11-20 12:14 PM", "isLocked": false, "userEmail": "jclauso@purdue.edu", "userName": "", "userAlias": "jclauso", "assignedTo": "schmid22", "subject": "ECN privileges for future grad student", "status": "Waiting for reply", "priority": "", "department": "", "building": "", "dateReceived": "2020-05-14T15:03:07-0400"} | ||
| ], | ||
| rowCanBeSelected:false, | ||
| loading:false, | ||
| }}> | ||
| {args => <ItemTable {...args} />} | ||
| </Story> | ||
| </Canvas> | ||
| <ArgsTable of={ItemTable} /> |