From 450a9e9a4892cd6ebc0639d27b8eaa3b43b0d86b Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Tue, 20 Sep 2022 09:11:34 -0400 Subject: [PATCH 1/9] wip updating table data and reimplementing row mgmt functionality --- packages/react-table/src/docs/demos/Table.md | 643 +----------------- .../demos/table-demos/ColumnManagement.jsx | 505 ++++++++++++++ 2 files changed, 506 insertions(+), 642 deletions(-) create mode 100644 packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md index aa3afbf8413..59893dcf8b3 100644 --- a/packages/react-table/src/docs/demos/Table.md +++ b/packages/react-table/src/docs/demos/Table.md @@ -317,648 +317,7 @@ class BulkSelectTableDemo extends React.Component { ### Column management -```js -import React from 'react'; -import { - Button, - DataList, - DataListCheck, - DataListItem, - DataListItemRow, - DataListCell, - DataListItemCells, - Toolbar, - ToolbarContent, - ToolbarItem, - Modal, - OverflowMenu, - OverflowMenuGroup, - OverflowMenuItem, - OptionsMenu, - OptionsMenuToggle, - Pagination, - PaginationVariant, - Text, - TextContent, - Select, - SelectVariant -} from '@patternfly/react-core'; -import { Table, TableHeader, TableBody } from '@patternfly/react-table'; -import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; -import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; -import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; -import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon'; - -class ColumnManagementAction extends React.Component { - constructor(props) { - super(props); - this.actions = [ - { - title: Link - }, - { - title: 'Action' - }, - { - isSeparator: true - }, - { - title: Separated link - } - ]; - this.defaultColumns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit', '']; - this.defaultRows = [ - { - cells: [ - { - title: ( - -
Node 1
- siemur/test-space - - ), - props: { column: 'Repositories' } - }, - { - title: ( - - 10 - - ), - props: { column: 'Branches' } - }, - { - title: ( - - 25 - - ), - props: { column: 'Pull requests' } - }, - { - title: ( - - 5 - - ), - props: { column: 'Workspaces' } - }, - { - title: '2 days ago', - props: { column: 'Last commit' } - }, - { - title: ( - - Action link - - ), - props: { column: '' } - } - ] - }, - { - cells: [ - { - title: ( - -
Node 2
- siemur/test-space - - ), - props: { column: 'Repositories' } - }, - { - title: ( - - 8 - - ), - props: { column: 'Branches' } - }, - { - title: ( - - 30 - - ), - props: { column: 'Pull requests' } - }, - { - title: ( - - 2 - - ), - props: { column: 'Workspaces' } - }, - { - title: '2 days ago', - props: { column: 'Last commit' } - }, - { - title: ( - - Action link - - ), - props: { column: '' } - } - ] - }, - { - cells: [ - { - title: ( - -
Node 3
- siemur/test-space - - ), - props: { column: 'Repositories' } - }, - { - title: ( - - 12 - - ), - props: { column: 'Branches' } - }, - { - title: ( - - 48 - - ), - props: { column: 'Pull requests' } - }, - { - title: ( - - 13 - - ), - props: { column: 'Workspaces' } - }, - { - title: '30 days ago', - props: { column: 'Last commit' } - }, - { - title: ( - - Action link - - ), - props: { column: '' } - } - ] - }, - { - cells: [ - { - title: ( - -
Node 4
- siemur/test-space - - ), - props: { column: 'Repositories' } - }, - { - title: ( - - 3 - - ), - props: { column: 'Branches' } - }, - { - title: ( - - 8 - - ), - props: { column: 'Pull requests' } - }, - { - title: ( - - 20 - - ), - props: { column: 'Workspaces' } - }, - { - title: '8 days ago', - props: { column: 'Last commit' } - }, - { - title: ( - - Action link - - ), - props: { column: '' } - } - ] - }, - { - cells: [ - { - title: ( - -
Node 5
- siemur/test-space - - ), - props: { column: 'Repositories' } - }, - { - title: ( - - 34 - - ), - props: { column: 'Branches' } - }, - { - title: ( - - 21 - - ), - props: { column: 'Pull requests' } - }, - { - title: ( - - 26 - - ), - props: { column: 'Workspaces' } - }, - { - title: '2 days ago', - props: { column: 'Last commit' } - }, - { - title: ( - - Action link - - ), - props: { column: '' } - } - ] - } - ]; - this.state = { - filters: [], - filteredColumns: [], - filteredRows: [], - columns: this.defaultColumns, - rows: this.defaultRows, - canSelectAll: true, - isModalOpen: false, - check1: true, - check2: true, - check3: true, - check4: true, - check5: true - }; - this.onSelect = this.onSelect.bind(this); - this.toggleSelect = this.toggleSelect.bind(this); - this.renderModal = this.renderModal.bind(this); - this.matchCheckboxNameToColumn = name => { - switch (name) { - case 'check1': - return 'Repositories'; - case 'check2': - return 'Branches'; - case 'check3': - return 'Pull requests'; - case 'check4': - return 'Workspaces'; - case 'check5': - return 'Last commit'; - } - }; - this.filterData = (checked, name) => { - const { rows, columns, filters } = this.state; - if (checked) { - const updatedFilters = filters.filter(item => item !== name); - const filteredColumns = this.defaultColumns.filter(column => !updatedFilters.includes(column)); - const filteredRows = this.defaultRows.map(({ ...row }) => { - row.cells = row.cells.filter(cell => !updatedFilters.includes(cell.props.column)); - return row; - }); - this.setState({ - filters: updatedFilters, - filteredColumns: filteredColumns, - filteredRows: filteredRows - }); - } else { - let updatedFilters = filters; - updatedFilters.push(name); - const filteredColumns = columns.filter(column => !filters.includes(column)); - const filteredRows = rows.map(({ ...row }) => { - row.cells = row.cells.filter(cell => !filters.includes(cell.props.column)); - return row; - }); - this.setState({ - filters: updatedFilters, - filteredColumns: filteredColumns, - filteredRows: filteredRows - }); - } - }; - this.unfilterAllData = () => { - this.setState({ - filters: [], - filteredColumns: this.defaultColumns, - filteredRows: this.defaultRows - }); - }; - this.handleChange = (checked, event) => { - const target = event.target; - const value = target.type === 'checkbox' ? target.checked : target.value; - this.filterData(checked, this.matchCheckboxNameToColumn(target.name)); - this.setState({ - [target.name]: value - }); - }; - this.handleModalToggle = () => { - this.setState(({ isModalOpen }) => ({ - isModalOpen: !isModalOpen - })); - }; - this.onSave = () => { - this.setState(({ filteredColumns, filteredRows, isModalOpen }) => ({ - columns: filteredColumns, - rows: filteredRows, - isModalOpen: !isModalOpen - })); - }; - this.selectAllColumns = () => { - this.unfilterAllData(); - this.setState({ - check1: true, - check2: true, - check3: true, - check4: true, - check5: true - }); - }; - } - - onSelect(event, isSelected, rowId) { - let rows; - if (rowId === -1) { - rows = this.state.rows.map(oneRow => { - oneRow.selected = isSelected; - return oneRow; - }); - } else { - rows = [...this.state.rows]; - rows[rowId] = { ...rows[rowId], selected: isSelected }; - } - this.setState({ - rows - }); - } - - toggleSelect(checked) { - this.setState({ - canSelectAll: checked - }); - } - - renderModal() { - const { isModalOpen } = this.state; - return ( - - Selected categories will be displayed in the table. - - - } - onClose={this.handleModalToggle} - actions={[ - , - - ]} - > - - - - - - - - ]} - /> - - - - - - - - - ]} - /> - - - - - - - - - ]} - /> - - - - - - - - - ]} - /> - - - - - - - - - ]} - /> - - - - - ); - } - - render() { - const { canSelectAll, columns, rows } = this.state; - - const toolbarItems = ( - - - - - - - + Name + + } + /> + + + + + + + + + + + + + + + + + + + ); + + return ( + + + + + + {toolbarItems} + + } + // aria-label="This is a table with checkboxes" + id="page-layout-table-column-management-action-table" + // onSelect={this.onSelect} + cells={managedColumns} + rows={managedRows.map(row => [ + row.name, + row.threads, + row.applications, + row.workspaces, + { title: renderLabel(row.status) }, + row.location, + row.lastModified, + { + title: ( + + {row.url} + + ) + } + ])} + actions={this.actions} + // canSelectAll={canSelectAll} + > + + +
+ + {this.renderModal()} + + + + + ); + } +} From e350f36ee92d1ea45e687ae78b289609d5967056 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Tue, 20 Sep 2022 17:17:48 -0400 Subject: [PATCH 2/9] filtering mostly working, WIP --- .../demos/table-demos/ColumnManagement.jsx | 227 +++++++++++------- 1 file changed, 134 insertions(+), 93 deletions(-) diff --git a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx index 809d235187b..8ad31a61c8c 100644 --- a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx +++ b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx @@ -32,7 +32,8 @@ import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon'; import { rows, columns } from '../../examples/Data.jsx'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper.js'; -import { toCamel } from '@patternfly/react-table/src/components/Table/utils/utils.js' +import { toCamel } from '@patternfly/react-table/src/components/Table/utils/utils.js'; +import { update } from 'lodash'; class ColumnManagementAction extends React.Component { constructor(props) { @@ -95,21 +96,22 @@ class ColumnManagementAction extends React.Component { }; function removePropFromObject(obj, prop) { - // console.log(prop) - const { [prop.toLowerCase()]: _, ...rest } = obj - return { ...rest } - } + // console.log(prop) + const { [prop.toLowerCase()]: _, ...rest } = obj; + return { ...rest }; + } this.filterData = (checked, name) => { + console.log('name', name); + console.log(this.defaultColumns); const { managedRows, managedColumns, filters } = this.state; if (checked) { const updatedFilters = filters.filter(item => item !== name); const filteredColumns = this.defaultColumns.filter(column => !updatedFilters.includes(column)); - const filteredRows = this.defaultRows.map((row) => { - let t = Object.keys(row).filter(r => !updatedFilters.includes(toCamel(name))); - console.log("is this it", rows); - return t; - }); + const filteredRows = this.defaultRows.map(({ [name]: _, ...keep }) => keep); + + console.log('filteredRows', filteredRows); + this.setState({ filters: updatedFilters, filteredColumns: filteredColumns, @@ -117,12 +119,9 @@ class ColumnManagementAction extends React.Component { }); } else { let updatedFilters = filters; - updatedFilters.push(name); + updatedFilters.push(toCamel(name)); const filteredColumns = managedColumns.filter(column => !filters.includes(column)); - const filteredRows = managedRows.map((row) => { - let t = Object.keys(row).filter(cell => !filters.includes(toCamel(name))); - return t; - }); + const filteredRows = managedRows.map(({ [name]: _, ...keep }) => keep); this.setState({ filters: updatedFilters, @@ -141,6 +140,7 @@ class ColumnManagementAction extends React.Component { this.handleChange = (checked, event) => { const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; + console.log('target', target); this.filterData(checked, this.matchCheckboxNameToColumn(target.name)); this.setState({ [target.name]: value @@ -295,14 +295,14 @@ class ColumnManagementAction extends React.Component { - + ]} /> @@ -312,15 +312,15 @@ class ColumnManagementAction extends React.Component { - + ]} /> @@ -330,15 +330,15 @@ class ColumnManagementAction extends React.Component { - + ]} /> @@ -348,15 +348,15 @@ class ColumnManagementAction extends React.Component { - + ]} /> @@ -385,73 +385,77 @@ class ColumnManagementAction extends React.Component { const toolbarItems = ( - - - - - - + Name + + } + /> - + - - - - - - - + + + + + + + + + + + + + + + ); + // console.log("???", managedRows); + return ( - @@ -462,7 +466,7 @@ class ColumnManagementAction extends React.Component { id="page-layout-table-column-management-action-table" // onSelect={this.onSelect} cells={managedColumns} - rows={managedRows.map(row => [ + rows={rows.map(row => [ row.name, row.threads, row.applications, @@ -471,19 +475,56 @@ class ColumnManagementAction extends React.Component { row.location, row.lastModified, { - title: ( + title: ( - {row.url} + {row.url} - ) + ) } - ])} - actions={this.actions} + ])} + actions={this.actions} // canSelectAll={canSelectAll} > -
+ */} + {toolbarItems} + + + + {managedColumns[0]} + {managedColumns[1]} + {managedColumns[2]} + {managedColumns[3]} + {managedColumns[4]} + {managedColumns[5]} + {managedColumns[6]} + + {managedColumns[7]} + + + + + {managedRows.map((row, rowIndex) => ( + + <> + {row.name} + {row.threads} + {row.applications} + {row.workspaces} + {renderLabel(row.status)} + {row.location} + {row.lastModified} + + + {row.url} + + + + + ))} + + Date: Wed, 21 Sep 2022 17:30:41 -0400 Subject: [PATCH 3/9] managed column logic done --- .../demos/table-demos/ColumnManagement.jsx | 260 +++++++++--------- 1 file changed, 131 insertions(+), 129 deletions(-) diff --git a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx index 8ad31a61c8c..dab03d46662 100644 --- a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx +++ b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx @@ -69,7 +69,10 @@ class ColumnManagementAction extends React.Component { check5: true, check6: true, check7: true, - check8: true + check8: true, + page: 1, + perPage: 10, + paginatedRows: this.defaultRows.slice(1, 10) }; // this.onSelect = this.onSelect.bind(this); this.toggleSelect = this.toggleSelect.bind(this); @@ -94,42 +97,80 @@ class ColumnManagementAction extends React.Component { return 'URL'; } }; + this.matchSelectedColumnNameToAttr = name => { + switch (name) { + case 'Servers': + return 'name'; + case 'Threads': + return 'threads'; + case 'Applications': + return 'applications'; + case 'Workspaces': + return 'workspaces'; + case 'Status': + return 'status'; + case 'Location': + return 'location'; + case 'Last Modified': + return 'lastModified'; + case 'URL': + return 'url'; + } + }; - function removePropFromObject(obj, prop) { - // console.log(prop) - const { [prop.toLowerCase()]: _, ...rest } = obj; - return { ...rest }; - } + // function removePropFromObject(obj, prop) { + // return obj.map(({ [prop]: _, ...keep }) => keep) + // } - this.filterData = (checked, name) => { - console.log('name', name); - console.log(this.defaultColumns); - const { managedRows, managedColumns, filters } = this.state; - if (checked) { - const updatedFilters = filters.filter(item => item !== name); - const filteredColumns = this.defaultColumns.filter(column => !updatedFilters.includes(column)); - const filteredRows = this.defaultRows.map(({ [name]: _, ...keep }) => keep); + (this.removePropFromObject = (object, keys) => + keys.reduce((obj, prop) => { + const { [prop]: _, ...keep } = obj; + return keep; + }, object)), + (this.filterData = (checked, name) => { + const selectedColumn = this.matchSelectedColumnNameToAttr(name); + console.log(this.defaultColumns); + const { managedRows, managedColumns, filters } = this.state; + const filteredRows = []; + if (checked) { + const updatedFilters = filters.filter(item => item !== selectedColumn); + const filteredColumns = this.defaultColumns.filter( + column => !updatedFilters.includes(this.matchSelectedColumnNameToAttr(column)) + ); - console.log('filteredRows', filteredRows); + this.defaultRows.forEach(item => filteredRows.push(this.removePropFromObject(item, updatedFilters))); - this.setState({ - filters: updatedFilters, - filteredColumns: filteredColumns, - filteredRows: filteredRows - }); - } else { - let updatedFilters = filters; - updatedFilters.push(toCamel(name)); - const filteredColumns = managedColumns.filter(column => !filters.includes(column)); - const filteredRows = managedRows.map(({ [name]: _, ...keep }) => keep); + console.log('filteredRows', filteredRows); + console.log('uf', updatedFilters); - this.setState({ - filters: updatedFilters, - filteredColumns: filteredColumns, - filteredRows: filteredRows - }); - } - }; + this.setState({ + filters: updatedFilters, + filteredColumns: filteredColumns, + filteredRows: filteredRows + }); + } else { + let updatedFilters = filters; + updatedFilters.push(selectedColumn); + console.log(' uf', updatedFilters); + + const filteredColumns = managedColumns.filter( + column => !filters.includes(this.matchSelectedColumnNameToAttr(column)) + ); + + // const filteredRows = this.removePropFromObject(managedRows, selectedColumn); + managedRows.forEach(item => filteredRows.push(this.removePropFromObject(item, updatedFilters))); + + console.log('FC', filteredColumns); + console.log('FR', filteredRows); + // console.log("remove prop from obj", removePropFromObject(managedRows, selectedColumn)) + + this.setState({ + filters: updatedFilters, + filteredColumns: filteredColumns, + filteredRows: filteredRows + }); + } + }); this.unfilterAllData = () => { this.setState({ filters: [], @@ -155,9 +196,25 @@ class ColumnManagementAction extends React.Component { this.setState(({ filteredColumns, filteredRows, isModalOpen }) => ({ managedColumns: filteredColumns, managedRows: filteredRows, + paginatedRows: filteredRows, isModalOpen: !isModalOpen })); }; + + this.handleSetPage = (_evt, newPage, perPage, startIdx, endIdx) => { + this.setState({ + paginatedRows: rows.slice(startIdx, endIdx), + page: newPage + }); + }; + this.handlePerPageSelect = (_evt, newPerPage, newPage, startIdx, endIdx) => { + this.setState({ + paginatedRows: rows.slice(startIdx, endIdx), + page: newPage, + perPage: newPerPage + }); + }; + this.selectAllColumns = () => { this.unfilterAllData(); this.setState({ @@ -165,35 +222,37 @@ class ColumnManagementAction extends React.Component { check2: true, check3: true, check4: true, - check5: true + check5: true, + check6: true, + check7: true, + check8: true }); }; } - // onSelect(event, isSelected, rowId) { - // let rows; - // if (rowId === -1) { - // rows = this.state.rows.map(oneRow => { - // oneRow.selected = isSelected; - // return oneRow; - // }); - // } else { - // rows = [...this.state.rows]; - // rows[rowId] = { ...rows[rowId], selected: isSelected }; - // } - // this.setState({ - // rows - // }); - // } - toggleSelect(checked) { this.setState({ canSelectAll: checked }); } + renderPagination = (variant, isCompact) => ( + + ); + renderModal() { - const { isModalOpen } = this.state; + const { isModalOpen, managedColumns } = this.state; return ( Object.entries(row).map(([k, v]) => console.log('k', k, 'v', v))) + ); const renderLabel = labelText => { switch (labelText) { @@ -432,110 +496,48 @@ class ColumnManagementAction extends React.Component { - ); - // console.log("???", managedRows); - return ( - {/* - {toolbarItems} - - } - // aria-label="This is a table with checkboxes" - id="page-layout-table-column-management-action-table" - // onSelect={this.onSelect} - cells={managedColumns} - rows={rows.map(row => [ - row.name, - row.threads, - row.applications, - row.workspaces, - { title: renderLabel(row.status) }, - row.location, - row.lastModified, - { - title: ( - - {row.url} - - ) - } - ])} - actions={this.actions} - // canSelectAll={canSelectAll} - > - - -
*/} {toolbarItems} - {managedColumns[0]} - {managedColumns[1]} - {managedColumns[2]} - {managedColumns[3]} - {managedColumns[4]} - {managedColumns[5]} - {managedColumns[6]} - - {managedColumns[7]} - + {managedColumns.map((col, idx) => ( + {col} + ))} {managedRows.map((row, rowIndex) => ( <> - {row.name} - {row.threads} - {row.applications} - {row.workspaces} - {renderLabel(row.status)} - {row.location} - {row.lastModified} - - - {row.url} - - + {Object.entries(row).map(([key, value]) => + key === 'status' ? ( + {renderLabel(value)} + ) : key === 'url' ? ( + + + {row.url} + + + ) : ( + {value} + ) + )} ))} - {this.renderModal()} From af6ffbd18c1e21e0ea7845e8e629ac72d2e31bbe Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Thu, 22 Sep 2022 15:47:04 -0400 Subject: [PATCH 4/9] added updated data to col mgmt demo, wired up col mgmt logic + pagination logic --- .../demos/table-demos/ColumnManagement.jsx | 591 ++++++++---------- 1 file changed, 254 insertions(+), 337 deletions(-) diff --git a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx index dab03d46662..34b69506e4e 100644 --- a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx +++ b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import * as React from 'react'; import { Button, DataList, @@ -24,226 +24,153 @@ import { Select, SelectVariant } from '@patternfly/react-core'; -import { Table, TableHeader, TableBody } from '@patternfly/react-table'; -import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; -import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; -import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon'; import { rows, columns } from '../../examples/Data.jsx'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper.js'; -import { toCamel } from '@patternfly/react-table/src/components/Table/utils/utils.js'; -import { update } from 'lodash'; -class ColumnManagementAction extends React.Component { - constructor(props) { - super(props); - this.actions = [ - { - title: Link - }, - { - title: 'Action' - }, - { - isSeparator: true - }, - { - title: Separated link - } - ]; - this.defaultColumns = columns; - this.defaultRows = rows; - this.state = { - filters: [], - filteredColumns: [], - filteredRows: [], - managedColumns: this.defaultColumns, - managedRows: this.defaultRows, - canSelectAll: true, - isModalOpen: false, - check1: true, - check2: true, - check3: true, - check4: true, - check5: true, - check6: true, - check7: true, - check8: true, - page: 1, - perPage: 10, - paginatedRows: this.defaultRows.slice(1, 10) - }; - // this.onSelect = this.onSelect.bind(this); - this.toggleSelect = this.toggleSelect.bind(this); - this.renderModal = this.renderModal.bind(this); - this.matchCheckboxNameToColumn = name => { - switch (name) { - case 'check1': - return 'Servers'; - case 'check2': - return 'Threads'; - case 'check3': - return 'Applications'; - case 'check4': - return 'Workspaces'; - case 'check5': - return 'Status'; - case 'check6': - return 'Location'; - case 'check7': - return 'Last Modified'; - case 'check8': - return 'URL'; - } - }; - this.matchSelectedColumnNameToAttr = name => { - switch (name) { - case 'Servers': - return 'name'; - case 'Threads': - return 'threads'; - case 'Applications': - return 'applications'; - case 'Workspaces': - return 'workspaces'; - case 'Status': - return 'status'; - case 'Location': - return 'location'; - case 'Last Modified': - return 'lastModified'; - case 'URL': - return 'url'; - } - }; +export const ColumnManagementAction = () => { + const [filters, setFilters] = React.useState([]); + const [filteredColumns, setFilteredColumns] = React.useState([]); + const [filteredRows, setFilteredRows] = React.useState([]); + const [managedColumns, setManagedColumns] = React.useState(defaultColumns); + const [managedRows, setManagedRows] = React.useState(defaultRows); + const [isModalOpen, setIsModalOpen] = React.useState(false); + const [checkedState, setCheckedState] = React.useState(Array(columns.length).fill(true)); + const [page, setPage] = React.useState(1); + const [perPage, setPerPage] = React.useState(10); + const [paginatedRows, setPaginatedRows] = React.useState(rows); - // function removePropFromObject(obj, prop) { - // return obj.map(({ [prop]: _, ...keep }) => keep) - // } + const defaultColumns = columns; + const defaultRows = rows; - (this.removePropFromObject = (object, keys) => - keys.reduce((obj, prop) => { - const { [prop]: _, ...keep } = obj; - return keep; - }, object)), - (this.filterData = (checked, name) => { - const selectedColumn = this.matchSelectedColumnNameToAttr(name); - console.log(this.defaultColumns); - const { managedRows, managedColumns, filters } = this.state; - const filteredRows = []; - if (checked) { - const updatedFilters = filters.filter(item => item !== selectedColumn); - const filteredColumns = this.defaultColumns.filter( - column => !updatedFilters.includes(this.matchSelectedColumnNameToAttr(column)) - ); + const matchCheckboxNameToColumn = name => { + switch (name) { + case 'check1': + return 'Servers'; + case 'check2': + return 'Threads'; + case 'check3': + return 'Applications'; + case 'check4': + return 'Workspaces'; + case 'check5': + return 'Status'; + case 'check6': + return 'Location'; + case 'check7': + return 'Last Modified'; + case 'check8': + return 'URL'; + } + }; + matchSelectedColumnNameToAttr = name => { + switch (name) { + case 'Servers': + return 'name'; + case 'Threads': + return 'threads'; + case 'Applications': + return 'applications'; + case 'Workspaces': + return 'workspaces'; + case 'Status': + return 'status'; + case 'Location': + return 'location'; + case 'Last Modified': + return 'lastModified'; + case 'URL': + return 'url'; + } + }; - this.defaultRows.forEach(item => filteredRows.push(this.removePropFromObject(item, updatedFilters))); + const removePropFromObject = (object, keys) => + keys.reduce((obj, prop) => { + const { [prop]: _, ...keep } = obj; + return keep; + }, object); - console.log('filteredRows', filteredRows); - console.log('uf', updatedFilters); + const filterData = (checked, name) => { + const selectedColumn = matchSelectedColumnNameToAttr(name); - this.setState({ - filters: updatedFilters, - filteredColumns: filteredColumns, - filteredRows: filteredRows - }); - } else { - let updatedFilters = filters; - updatedFilters.push(selectedColumn); - console.log(' uf', updatedFilters); + const filteredRows = []; + if (checked) { + const updatedFilters = filters.filter(item => item !== selectedColumn); + const filteredColumns = defaultColumns.filter( + column => !updatedFilters.includes(matchSelectedColumnNameToAttr(column)) + ); - const filteredColumns = managedColumns.filter( - column => !filters.includes(this.matchSelectedColumnNameToAttr(column)) - ); + defaultRows.forEach(item => filteredRows.push(removePropFromObject(item, updatedFilters))); - // const filteredRows = this.removePropFromObject(managedRows, selectedColumn); - managedRows.forEach(item => filteredRows.push(this.removePropFromObject(item, updatedFilters))); + setFilters(updatedFilters); + setFilteredColumns(filteredColumns); + setFilteredRows(filteredRows); + } else { + let updatedFilters = filters; + updatedFilters.push(selectedColumn); - console.log('FC', filteredColumns); - console.log('FR', filteredRows); - // console.log("remove prop from obj", removePropFromObject(managedRows, selectedColumn)) + const filteredColumns = managedColumns.filter(column => !filters.includes(matchSelectedColumnNameToAttr(column))); - this.setState({ - filters: updatedFilters, - filteredColumns: filteredColumns, - filteredRows: filteredRows - }); - } - }); - this.unfilterAllData = () => { - this.setState({ - filters: [], - filteredColumns: this.defaultColumns, - filteredRows: this.defaultRows - }); - }; - this.handleChange = (checked, event) => { - const target = event.target; - const value = target.type === 'checkbox' ? target.checked : target.value; - console.log('target', target); - this.filterData(checked, this.matchCheckboxNameToColumn(target.name)); - this.setState({ - [target.name]: value - }); - }; - this.handleModalToggle = () => { - this.setState(({ isModalOpen }) => ({ - isModalOpen: !isModalOpen - })); - }; - this.onSave = () => { - this.setState(({ filteredColumns, filteredRows, isModalOpen }) => ({ - managedColumns: filteredColumns, - managedRows: filteredRows, - paginatedRows: filteredRows, - isModalOpen: !isModalOpen - })); - }; + managedRows.forEach(item => filteredRows.push(removePropFromObject(item, updatedFilters))); + + setFilters(updatedFilters); + setFilteredColumns(filteredColumns); + setFilteredRows(filteredRows); + } + }; + unfilterAllData = () => { + setFilters([]); + setFilteredColumns(defaultColumns); + setFilteredRows(defaultRows); + }; + handleChange = (checked, event) => { + const target = event.target; + const value = target.type === 'checkbox' ? target.checked : target.value; + + filterData(checked, matchCheckboxNameToColumn(target.name)); + const checkedIndex = columns.findIndex(element => element === matchCheckboxNameToColumn(target.name)); + + const updatedCheckedState = [...checkedState]; + updatedCheckedState[checkedIndex] = value; + setCheckedState(updatedCheckedState); + }; + const handleModalToggle = () => { + setIsModalOpen(!isModalOpen); + }; + + React.useEffect(() => { + setPaginatedRows(managedRows.slice((page - 1) * perPage, page * perPage - 1)); + }, [managedRows, page, perPage]); - this.handleSetPage = (_evt, newPage, perPage, startIdx, endIdx) => { - this.setState({ - paginatedRows: rows.slice(startIdx, endIdx), - page: newPage - }); - }; - this.handlePerPageSelect = (_evt, newPerPage, newPage, startIdx, endIdx) => { - this.setState({ - paginatedRows: rows.slice(startIdx, endIdx), - page: newPage, - perPage: newPerPage - }); - }; + const onSave = () => { + setManagedColumns(filteredColumns); + setManagedRows(filteredRows); + setPaginatedRows(filteredRows); + setIsModalOpen(!isModalOpen); + }; - this.selectAllColumns = () => { - this.unfilterAllData(); - this.setState({ - check1: true, - check2: true, - check3: true, - check4: true, - check5: true, - check6: true, - check7: true, - check8: true - }); - }; - } + const handleSetPage = (_evt, newPage) => { + setPage(newPage); + }; - toggleSelect(checked) { - this.setState({ - canSelectAll: checked - }); - } + const handlePerPageSelect = (_evt, newPerPage) => { + setPerPage(newPerPage); + }; - renderPagination = (variant, isCompact) => ( + const selectAllColumns = () => { + unfilterAllData(); + setCheckedState(Array(columns.length).fill(true)); + }; + + const renderPagination = (variant, isCompact) => ( ); - renderModal() { - const { isModalOpen, managedColumns } = this.state; + renderModal = () => { return ( Selected categories will be displayed in the table. - } - onClose={this.handleModalToggle} + onClose={handleModalToggle} actions={[ - , - ]} @@ -281,10 +207,10 @@ class ColumnManagementAction extends React.Component { ); - } - - render() { - const { canSelectAll, managedColumns, managedRows, paginatedRows } = this.state; - - console.log( - 'test', - managedRows.map((row, rowIndex) => Object.entries(row).map(([k, v]) => console.log('k', k, 'v', v))) - ); + }; - const renderLabel = labelText => { - switch (labelText) { - case 'Running': - return ; - case 'Stopped': - return ; - case 'Needs Maintenance': - return ; - case 'Down': - return ; - } - }; + const renderLabel = labelText => { + switch (labelText) { + case 'Running': + return ; + case 'Stopped': + return ; + case 'Needs Maintenance': + return ; + case 'Down': + return ; + } + }; - const toolbarItems = ( - - - - - - - - + Name + + } + /> + + + + + + - - - - - - - - - - - - - - - - - ); + + + + {renderPagination()} + + + + ); - return ( - - - - - {toolbarItems} - - - - {managedColumns.map((col, idx) => ( - {col} - ))} - - - - {managedRows.map((row, rowIndex) => ( - - <> - {Object.entries(row).map(([key, value]) => - key === 'status' ? ( - {renderLabel(value)} - ) : key === 'url' ? ( - - - {row.url} - - - ) : ( - {value} - ) - )} - - + return ( + + + + + {toolbarItems} + + + + {managedColumns.map((col, idx) => ( + {col} ))} - - - {this.renderModal()} - - - - - ); - } -} + + + + {paginatedRows.map((row, rowIndex) => ( + + <> + {Object.entries(row).map(([key, value]) => + key === 'status' ? ( + {renderLabel(value)} + ) : key === 'url' ? ( + + + {row.url} + + + ) : ( + {value} + ) + )} + + + ))} + + + {renderPagination()} + {renderModal()} + + + + + ); +}; From b0a9ce186e175ea322207f506843f0b38ca22172 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Thu, 22 Sep 2022 15:48:06 -0400 Subject: [PATCH 5/9] fix order --- .../src/docs/demos/table-demos/ColumnManagement.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx index 34b69506e4e..10c379b77c6 100644 --- a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx +++ b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx @@ -30,6 +30,10 @@ import { rows, columns } from '../../examples/Data.jsx'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper.js'; export const ColumnManagementAction = () => { + + const defaultColumns = columns; + const defaultRows = rows; + const [filters, setFilters] = React.useState([]); const [filteredColumns, setFilteredColumns] = React.useState([]); const [filteredRows, setFilteredRows] = React.useState([]); @@ -41,9 +45,6 @@ export const ColumnManagementAction = () => { const [perPage, setPerPage] = React.useState(10); const [paginatedRows, setPaginatedRows] = React.useState(rows); - const defaultColumns = columns; - const defaultRows = rows; - const matchCheckboxNameToColumn = name => { switch (name) { case 'check1': From 4c1e11b694a99681ae7f57b24a0e440e714969a2 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Fri, 23 Sep 2022 16:21:50 -0400 Subject: [PATCH 6/9] add page header/main section --- .../react-table/src/docs/demos/table-demos/ColumnManagement.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx index 10c379b77c6..36b99502b18 100644 --- a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx +++ b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx @@ -422,7 +422,7 @@ export const ColumnManagementAction = () => { return ( - + {toolbarItems} From da56ee1f75603e84266bdd3fd339efbe8037d241 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Mon, 26 Sep 2022 16:40:26 -0400 Subject: [PATCH 7/9] PR feedback from Nicole --- .../demos/table-demos/ColumnManagement.jsx | 94 +++++++++++-------- 1 file changed, 57 insertions(+), 37 deletions(-) diff --git a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx index 36b99502b18..eb35a48234e 100644 --- a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx +++ b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx @@ -28,12 +28,12 @@ import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon'; import { rows, columns } from '../../examples/Data.jsx'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper.js'; +import { capitalize } from '@patternfly/react-table/src/components/Table/utils/utils'; export const ColumnManagementAction = () => { - const defaultColumns = columns; const defaultRows = rows; - + const [filters, setFilters] = React.useState([]); const [filteredColumns, setFilteredColumns] = React.useState([]); const [filteredRows, setFilteredRows] = React.useState([]); @@ -86,22 +86,55 @@ export const ColumnManagementAction = () => { } }; + // Pagination logic + const handleSetPage = (_evt, newPage) => { + setPage(newPage); + }; + + const handlePerPageSelect = (_evt, newPerPage) => { + setPerPage(newPerPage); + }; + + const renderPagination = (variant, isCompact) => ( + + ); + + React.useEffect(() => { + setPaginatedRows(managedRows.slice((page - 1) * perPage, page * perPage - 1)); + }, [managedRows, page, perPage]); + + // Removes attribute from each node object in Data.jsx const removePropFromObject = (object, keys) => keys.reduce((obj, prop) => { const { [prop]: _, ...keep } = obj; return keep; }, object); + // Filters columns out of table that are not selected in the column management modal const filterData = (checked, name) => { const selectedColumn = matchSelectedColumnNameToAttr(name); const filteredRows = []; if (checked) { const updatedFilters = filters.filter(item => item !== selectedColumn); + + // Only show the names of columns that were selected in the modal const filteredColumns = defaultColumns.filter( column => !updatedFilters.includes(matchSelectedColumnNameToAttr(column)) ); + // Remove the attributes (i.e. "columns") that were not selected defaultRows.forEach(item => filteredRows.push(removePropFromObject(item, updatedFilters))); setFilters(updatedFilters); @@ -111,8 +144,10 @@ export const ColumnManagementAction = () => { let updatedFilters = filters; updatedFilters.push(selectedColumn); + // Only show the names of columns that were selected in the modal const filteredColumns = managedColumns.filter(column => !filters.includes(matchSelectedColumnNameToAttr(column))); + // Remove the attributes (i.e. "columns") that were not selected managedRows.forEach(item => filteredRows.push(removePropFromObject(item, updatedFilters))); setFilters(updatedFilters); @@ -125,10 +160,12 @@ export const ColumnManagementAction = () => { setFilteredColumns(defaultColumns); setFilteredRows(defaultRows); }; + handleChange = (checked, event) => { const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; + // Remove any columns from the table that aren't checked filterData(checked, matchCheckboxNameToColumn(target.name)); const checkedIndex = columns.findIndex(element => element === matchCheckboxNameToColumn(target.name)); @@ -136,14 +173,11 @@ export const ColumnManagementAction = () => { updatedCheckedState[checkedIndex] = value; setCheckedState(updatedCheckedState); }; + const handleModalToggle = () => { setIsModalOpen(!isModalOpen); }; - React.useEffect(() => { - setPaginatedRows(managedRows.slice((page - 1) * perPage, page * perPage - 1)); - }, [managedRows, page, perPage]); - const onSave = () => { setManagedColumns(filteredColumns); setManagedRows(filteredRows); @@ -151,34 +185,11 @@ export const ColumnManagementAction = () => { setIsModalOpen(!isModalOpen); }; - const handleSetPage = (_evt, newPage) => { - setPage(newPage); - }; - - const handlePerPageSelect = (_evt, newPerPage) => { - setPerPage(newPerPage); - }; - const selectAllColumns = () => { unfilterAllData(); setCheckedState(Array(columns.length).fill(true)); }; - const renderPagination = (variant, isCompact) => ( - - ); - renderModal = () => { return ( { - +