From aed50268853fcde16b52354d6da2bb66ebb87dd7 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 7 Oct 2020 15:29:39 -0400 Subject: [PATCH 1/3] Update ItemTableFilter docs --- .../ItemTableFilter/ItemTableFilter.md | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/components/ItemTableFilter/ItemTableFilter.md diff --git a/src/components/ItemTableFilter/ItemTableFilter.md b/src/components/ItemTableFilter/ItemTableFilter.md new file mode 100644 index 0000000..4768529 --- /dev/null +++ b/src/components/ItemTableFilter/ItemTableFilter.md @@ -0,0 +1,22 @@ +This ItemTableFilter double as a column header and entry box for filtering in a column. At its core, it is a input element of type search. + +```jsx +import { Paper, makeStyles } from "@material-ui/core"; +import ItemTableFilter from "./ItemTableFilter"; + +const useStyles = makeStyles({ + "paper": { + width: "200px", + } +}); + +const classes = useStyles(); + + + null} /> + +``` + +```jsx static + null} /> +``` \ No newline at end of file From 2b6450ad40006121ab0184bd020617a0017233db Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 7 Oct 2020 16:11:52 -0400 Subject: [PATCH 2/3] Migrate to react-table based ItemTable --- .../ItemTable/ItemTable-ReactTable.js | 85 ------- src/components/ItemTable/ItemTable.js | 208 +++++++----------- 2 files changed, 85 insertions(+), 208 deletions(-) delete mode 100644 src/components/ItemTable/ItemTable-ReactTable.js diff --git a/src/components/ItemTable/ItemTable-ReactTable.js b/src/components/ItemTable/ItemTable-ReactTable.js deleted file mode 100644 index da29830..0000000 --- a/src/components/ItemTable/ItemTable-ReactTable.js +++ /dev/null @@ -1,85 +0,0 @@ -import React, { useState, useEffect, useMemo } from "react"; -import { useTable, useFilters, useBlockLayout,useFlexLayout } from "react-table"; -import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper } from "@material-ui/core"; -import ItemTableFilter from "../ItemTableFilter/" - -export default function ItemTable_ReactTable() { - - const [data, setData] = useState([]); - useEffect(() => { - fetch("/api/ce").then(apiResponse => apiResponse.json()).then(queue => { - setData(queue.items) - }) - }, []) - - const columns = React.useMemo( - () => [ - { Header: 'Queue', accessor: 'queue', }, - { Header: 'Item #', accessor: 'number'}, - { Header: 'Assigned To', accessor: 'assignedTo' }, - { Header: 'Subject', accessor: 'subject' }, - { Header: 'Status', accessor: 'status', }, - { Header: 'Priority', accessor: 'priority' }, - { Header: 'Last Updated', accessor: 'lastUpdated' }, - { Header: 'Department', accessor: 'department' }, - { Header: 'Building', accessor: 'building' }, - { Header: 'Date Received', accessor: 'dateReceived' }, - ], []); - - const { getTableProps, - getTableBodyProps, - headerGroups, - rows, - prepareRow - } = useTable( - { - columns, - data, - defaultColumn: { - Filter: ({ column: { Header, setFilter }}) => { - return( - setFilter(event.target.value)} - /> - ); - } - } - }, - useFilters, - useFlexLayout - ); - - return ( - - - - {headerGroups.map(headerGroup => ( - - {headerGroup.headers.map(column => ( - - {column.render("Filter")} - - ))} - - ))} - - - {rows.map((row, i) => { - prepareRow(row); - return ( - - {row.cells.map(cell => ( - - {cell.render("Cell")} - - ))} - - ); - })} - -
- - ); - -} \ No newline at end of file diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index 66782da..da29830 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -1,123 +1,85 @@ -import React, { useState, useEffect } from 'react'; -import PropTypes from 'prop-types' -import MUIDataTable from 'mui-datatables'; - - -export default function ItemTable({ setActiveItem, setSidebarOpen }) { - - const columns = [ - { - name: "queue", - label: "Queue", - }, - { - name: "number", - label: "Item #", - }, { - name: "userAlias", - label: "From", - }, { - name: "assignedTo", - label: "Assigned To", - }, { - name: "subject", - label: "Subject", - }, { - name: "status", - label: "Stauts", - }, { - name: "priority", - label: "Priority", - }, { - name: "lastUpdated", - label: "Last Updated", - }, { - name: "department", - label: "Department", - }, { - name: "building", - label: "Building", - }, { - name: "dateReceived", - label: "Date Received", - }, - // "queue", - // "Item #", - // "From", - // "Assigned to", - // "Subject", - // "Status", - // "Priority", - // "Last Updated", - // "Department", - // "Building", - // "Date Received", - ] - - const [data, setData] = useState([]) - - useEffect(() => { - fetch("/api/ce").then(res => res.json()).then(queue => { - setData(queue.items) - }) - }, []) - - - - - - const options = { - "filtering": true, - "pagination": false, - "filterType": "textField", - "search": false, - "download": false, - "print": false, - "draggable": false, - "padding": "dense", - "responsive": "vertical", - "selectableRowsHeader": false, - "selectableRowsHideCheckboxes": true, - "selectableRows":"single", - "selectableRowsOnClick":true, - "onRowSelection": (event, rowData) => { - setActiveItem(rowData); - setSidebarOpen(true); - console.log(event); - console.log(rowData); - }, - - - } - - - - return ( - <> - - - - - ); -} - - - - - - -ItemTable.propTypes = { - /** Function to set active item on row click. */ - "setActiveItem": PropTypes.func.isRequired, - /** Function to toggle sidebar on row click. */ - "setSidebarOpen": PropTypes.func.isRequired -} - +import React, { useState, useEffect, useMemo } from "react"; +import { useTable, useFilters, useBlockLayout,useFlexLayout } from "react-table"; +import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper } from "@material-ui/core"; +import ItemTableFilter from "../ItemTableFilter/" + +export default function ItemTable_ReactTable() { + + const [data, setData] = useState([]); + useEffect(() => { + fetch("/api/ce").then(apiResponse => apiResponse.json()).then(queue => { + setData(queue.items) + }) + }, []) + + const columns = React.useMemo( + () => [ + { Header: 'Queue', accessor: 'queue', }, + { Header: 'Item #', accessor: 'number'}, + { Header: 'Assigned To', accessor: 'assignedTo' }, + { Header: 'Subject', accessor: 'subject' }, + { Header: 'Status', accessor: 'status', }, + { Header: 'Priority', accessor: 'priority' }, + { Header: 'Last Updated', accessor: 'lastUpdated' }, + { Header: 'Department', accessor: 'department' }, + { Header: 'Building', accessor: 'building' }, + { Header: 'Date Received', accessor: 'dateReceived' }, + ], []); + + const { getTableProps, + getTableBodyProps, + headerGroups, + rows, + prepareRow + } = useTable( + { + columns, + data, + defaultColumn: { + Filter: ({ column: { Header, setFilter }}) => { + return( + setFilter(event.target.value)} + /> + ); + } + } + }, + useFilters, + useFlexLayout + ); + + return ( + + + + {headerGroups.map(headerGroup => ( + + {headerGroup.headers.map(column => ( + + {column.render("Filter")} + + ))} + + ))} + + + {rows.map((row, i) => { + prepareRow(row); + return ( + + {row.cells.map(cell => ( + + {cell.render("Cell")} + + ))} + + ); + })} + +
+ + ); + +} \ No newline at end of file From fc22c73a3d8a908be97c8dab3bbd8ba7124249be Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 7 Oct 2020 16:15:49 -0400 Subject: [PATCH 3/3] Migrate to react-table based ItemTable --- src/App.js | 6 ++---- src/components/ItemTable/ItemTable.js | 16 ++++++++-------- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/App.js b/src/App.js index 4046c32..e4968de 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState } from "react"; import { ThemeProvider } from "@material-ui/core/styles"; import clsx from "clsx"; import { Box, makeStyles, Paper } from "@material-ui/core"; @@ -7,7 +7,6 @@ import ItemTableAppBar from "./components/ItemTableAppBar/"; import ItemTable from "./components/ItemTable/"; import ItemViewAppBar from "./components/ItemViewAppBar/"; import ItemView from "./components/ItemView/"; -import ItemTable_ReactTable from "./components/ItemTable/ItemTable-ReactTable"; function App(){ const [darkMode, setDarkMode] = useState(false); @@ -56,8 +55,7 @@ function App(){ - {/* */} - + diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index da29830..05a054d 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -1,9 +1,9 @@ -import React, { useState, useEffect, useMemo } from "react"; -import { useTable, useFilters, useBlockLayout,useFlexLayout } from "react-table"; +import React, { useState, useEffect } from "react"; +import { useTable, useFilters, useFlexLayout } from "react-table"; import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper } from "@material-ui/core"; import ItemTableFilter from "../ItemTableFilter/" -export default function ItemTable_ReactTable() { +export default function ItemTable() { const [data, setData] = useState([]); useEffect(() => { @@ -14,8 +14,8 @@ export default function ItemTable_ReactTable() { const columns = React.useMemo( () => [ - { Header: 'Queue', accessor: 'queue', }, - { Header: 'Item #', accessor: 'number'}, + { Header: 'Queue', accessor: 'queue', }, + { Header: 'Item #', accessor: 'number' }, { Header: 'Assigned To', accessor: 'assignedTo' }, { Header: 'Subject', accessor: 'subject' }, { Header: 'Status', accessor: 'status', }, @@ -36,10 +36,10 @@ export default function ItemTable_ReactTable() { columns, data, defaultColumn: { - Filter: ({ column: { Header, setFilter }}) => { - return( + Filter: ({ column: { Header, setFilter } }) => { + return ( setFilter(event.target.value)} /> );