diff options
author | Michael Dürre <michael.duerre@highstreet-technologies.com> | 2022-09-08 09:45:06 +0200 |
---|---|---|
committer | Michael Dürre <michael.duerre@highstreet-technologies.com> | 2022-09-08 09:46:47 +0200 |
commit | a2b6dd34d73bf432846dc59c6f57dd59a03aff9b (patch) | |
tree | 35658e382769bc7575f87d0e9580d6ee98230eb2 /sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx | |
parent | 6f9c3d2cea04a2af7a73d8df1de87d584b277552 (diff) |
update odlux sources
update basic odlux functionality for kohn
Issue-ID: CCSDK-3765
Signed-off-by: Michael Dürre <michael.duerre@highstreet-technologies.com>
Change-Id: I3723c9c2f35b9012ba537920b294a54bb556cbc6
Signed-off-by: Michael Dürre <michael.duerre@highstreet-technologies.com>
Diffstat (limited to 'sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx')
-rw-r--r-- | sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx | 36 |
1 files changed, 32 insertions, 4 deletions
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx index 426436d44..143b802a4 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx @@ -33,6 +33,8 @@ import MenuItem from '@mui/material/MenuItem'; import Menu from '@mui/material/Menu'; import { SvgIconProps } from '@mui/material/SvgIcon'; import { Button } from '@mui/material'; +import { ColumnModel } from './columnModel'; +import ShowColumnsDialog from './showColumnDialog' const styles = (theme: Theme) => createStyles({ root: { @@ -69,18 +71,24 @@ const styles = (theme: Theme) => createStyles({ interface ITableToolbarComponentProps extends WithStyles<typeof styles> { numSelected: number | null; title?: string; - tableId?: string; + tableId: string | null; customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, ariaLabel: string, onClick: () => void, disabled?: boolean }[]; + columns: ColumnModel<{}>[]; + onHideColumns: (columnNames: string[]) => void + onShowColumns: (columnNames: string[]) => void onToggleFilter: () => void; onExportToCsv: () => void; } -class TableToolbarComponent extends React.Component<ITableToolbarComponentProps, { anchorEl: EventTarget & HTMLElement | null }> { +class TableToolbarComponent extends React.Component<ITableToolbarComponentProps, { anchorEl: EventTarget & HTMLElement | null, anchorElDialog: HTMLElement | null }> { + + constructor(props: ITableToolbarComponentProps) { super(props); this.state = { - anchorEl: null + anchorEl: null, + anchorElDialog: null }; } @@ -91,11 +99,22 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps, private handleClose = () => { this.setState({ anchorEl: null }); }; + + private showColumnsDialog = (event: React.MouseEvent<HTMLElement>) =>{ + this.setState({ anchorElDialog: this.state.anchorEl }); + } + + private onCloseDialog = () =>{ + this.setState({ anchorElDialog: null }); + + } + render() { const { numSelected, classes } = this.props; const open = !!this.state.anchorEl; - const buttonPrefix = this.props.tableId !== undefined ? this.props.tableId : 'table'; + const buttonPrefix = this.props.tableId !== null ? this.props.tableId : 'table'; return ( + <> <Toolbar className={`${classes.root} ${numSelected && numSelected > 0 ? classes.highlight : ''} `} > <div className={classes.title}> {numSelected && numSelected > 0 ? ( @@ -153,9 +172,18 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps, <Menu id="menu-appbar" anchorEl={this.state.anchorEl} anchorOrigin={{ vertical: 'top', horizontal: 'right' }} transformOrigin={{ vertical: 'top', horizontal: 'right' }} open={open} onClose={this.handleClose} > <MenuItem aria-label="export-table-as-csv" onClick={(e) =>{ this.props.onExportToCsv(); this.handleClose()}}>Export as CSV</MenuItem> + <MenuItem aria-label="hide-show-table-columns" onClick={(e) =>{ this.showColumnsDialog(e); this.handleClose()}}>Hide/show columns</MenuItem> </Menu> </div> </Toolbar> + <ShowColumnsDialog + anchorEl={this.state.anchorElDialog} + onClose={this.onCloseDialog} + settingsName={this.props.tableId} + columns={this.props.columns} + hideColumns={this.props.onHideColumns} + showColumns={this.props.onShowColumns} /> + </> ); } } |