diff options
Diffstat (limited to 'sdnr/wt/odlux/framework/src/components')
4 files changed, 45 insertions, 30 deletions
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts b/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts index 6acea01d5..42a0bb4d8 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts +++ b/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts @@ -4,17 +4,23 @@ import * as React from 'react'; export enum ColumnType {
text,
numeric,
+ boolean,
custom
}
type CustomControl<TData> = {
- rowData: TData
+ className?: string;
+ style?: React.CSSProperties;
+ rowData: TData;
}
export type ColumnModel<TData> = {
title?: string;
disablePadding?: boolean;
width?: string | number;
+ className?: string;
+ style?: React.CSSProperties;
+ align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
disableSorting?: boolean;
disableFilter?: boolean;
} & ({
@@ -23,5 +29,9 @@ export type ColumnModel<TData> = { customControl: React.ComponentType<CustomControl<TData>>;
} | {
property: keyof TData;
- type?: ColumnType.numeric | ColumnType.text;
+ type: ColumnType.boolean;
+ labels?: { "true": string, "false": string };
+} | {
+ property: keyof TData;
+ type?: ColumnType.numeric | ColumnType.text;
});
\ No newline at end of file diff --git a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx index 3b906cfbb..61a990d81 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx @@ -84,7 +84,7 @@ type MaterialTableComponentBaseProps<TData> = WithStyles<typeof styles> & { disableSorting?: boolean;
disableFilter?: boolean;
customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, onClick: () => void }[];
- onHandleClick?(event: React.MouseEvent<HTMLTableRowElement>, rowData: TData): void;
+ onHandleClick?(event: React.MouseEvent<HTMLTableRowElement>, rowData: TData): void;
};
type MaterialTableComponentPropsWithRows<TData={}> = MaterialTableComponentBaseProps<TData> & { rows: TData[]; asynchronus?: boolean; };
@@ -142,7 +142,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate if (isMaterialTableComponentPropsWithRequestData(this.props)) {
this.update();
-
+
if (this.props.tableApi) {
this.props.tableApi.forceRefresh = () => this.update();
}
@@ -168,11 +168,11 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate onSelectAllClick={ this.handleSelectAllClick }
onRequestSort={ this.onHandleRequestSort }
rowCount={ rows.length }
- enableSelection={ this.props.enableSelection }
+ enableSelection={ this.props.enableSelection }
/>
<TableBody>
{ showFilter && <EnhancedTableFilter columns={ columns } filter={ filter } onFilterChanged={ this.onFilterChanged } enableSelection={this.props.enableSelection} /> || null }
- { rows // may need ordering here
+ { rows // may need ordering here
.map((entry: TData & { [key: string]: any }) => {
const entryId = getId(entry);
const isSelected = this.isSelected(entryId);
@@ -186,21 +186,23 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate key={ entryId }
selected={ isSelected }
>
- { this.props.enableSelection
+ { this.props.enableSelection
? <TableCell padding="checkbox" style={ { width: "50px" } }>
<Checkbox checked={ isSelected } />
</TableCell>
: null
- }
+ }
{
this.props.columns.map(
col => {
- const style = col.width ? { width: col.width } : {};
+ const style = col.width ? { width: col.width } : { };
return (
- <TableCell key={ col.property } align={ col.type === ColumnType.numeric ? 'right' : 'left' } style={ style }>
+ <TableCell key={ col.property } align={ col.type === ColumnType.numeric && !col.align ? "right": col.align } style={ style }>
{ col.type === ColumnType.custom && col.customControl
- ? <col.customControl rowData={ entry } />
- : entry[col.property]
+ ? <col.customControl className={col.className} style={col.style} rowData={ entry } />
+ : col.type === ColumnType.boolean
+ ? <span className={col.className} style={col.style}>{col.labels ? col.labels[entry[col.property] ? "true": "false"] : String(entry[col.property]) }</span>
+ : <span className={col.className} style={col.style}>{String(entry[col.property])}</span>
}
</TableCell>
);
@@ -270,10 +272,10 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate if (state.showFilter) {
Object.keys(filter).forEach(prop => {
const exp = filter[prop];
- filtered = filtered || !!exp;
- data = exp ? data.filter((val) => {
+ filtered = filtered || exp !== undefined;
+ data = exp !== undefined ? data.filter((val) => {
const value = val[prop];
- return value && value.toString().indexOf(exp) > -1;
+ return (value == exp) || (value && value.toString().indexOf(String(exp)) > -1);
}) : data;
});
}
@@ -341,7 +343,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate };
handleSelectAllClick: () => {};
-
+
private onHandleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => {
if (isMaterialTableComponentPropsWithRowsAndRequestData(this.props)) {
this.props.onHandleChangePage(page);
@@ -378,7 +380,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate }
if (!this.props.enableSelection){
return;
- }
+ }
let selected = this.state.selected || [];
const selectedIndex = selected.indexOf(id);
if (selectedIndex > -1) {
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx index 68e47d7ee..e21855abb 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx @@ -7,6 +7,7 @@ import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/s import TableCell from '@material-ui/core/TableCell'; import TableRow from '@material-ui/core/TableRow'; import Input from '@material-ui/core/Input'; +import { Select, FormControl, InputLabel, MenuItem } from '@material-ui/core'; const styles = (theme: Theme) => createStyles({ @@ -27,7 +28,7 @@ interface IEnhancedTableFilterComponentProps extends WithStyles<typeof styles> { } class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterComponentProps> { - createFilterHandler = (property: string) => (event: React.ChangeEvent<HTMLInputElement>) => { + createFilterHandler = (property: string) => (event: React.ChangeEvent<HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement>) => { this.props.onFilterChanged && this.props.onFilterChanged(property, event.target.value); }; @@ -35,11 +36,11 @@ class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterC const { columns, filter, classes } = this.props; return ( <TableRow> - { this.props.enableSelection + { this.props.enableSelection ? <TableCell padding="checkbox" style={ { width: "50px" } }> </TableCell> : null - } + } { columns.map(col => { const style = col.width ? { width: col.width } : {}; return ( @@ -48,14 +49,17 @@ class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterC padding={ col.disablePadding ? 'none' : 'default' } style={ style } > - { col.disableFilter || (col.type === ColumnType.custom) ? null : <Input - className={ classes.input } - inputProps={ { - 'aria-label': 'Filter', - } } - value={ filter[col.property] || '' } - onChange={ this.createFilterHandler(col.property) } - /> } + { col.disableFilter || (col.type === ColumnType.custom) + ? null + : (col.type === ColumnType.boolean) + ? <Select className={classes.input} value={filter[col.property] !== undefined ? filter[col.property] : ''} onChange={this.createFilterHandler(col.property)} inputProps={{ name: `${col.property}-bool`, id: `${col.property}-bool` }} > + <MenuItem value={undefined}> + <em>None</em> + </MenuItem> + <MenuItem value={true as any as string}>{ col.labels ? col.labels["true"]:"true"}</MenuItem> + <MenuItem value={false as any as string}>{ col.labels ? col.labels["false"] : "false"}</MenuItem> + </Select> + : <Input className={classes.input} inputProps={{ 'aria-label': 'Filter' }} value={filter[col.property] || ''} onChange={this.createFilterHandler(col.property)} />} </TableCell> ); }, this) } diff --git a/sdnr/wt/odlux/framework/src/components/titleBar.tsx b/sdnr/wt/odlux/framework/src/components/titleBar.tsx index d4d17d22e..ed6eb2ccc 100644 --- a/sdnr/wt/odlux/framework/src/components/titleBar.tsx +++ b/sdnr/wt/odlux/framework/src/components/titleBar.tsx @@ -31,8 +31,7 @@ const styles = (theme: Theme) => createStyles({ marginRight: 20,
},
icon: {
- marginRight: 8,
- marginLeft: 24,
+ marginRight: 12
}
});
|