summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/framework/src/components
diff options
context:
space:
mode:
authorHerbert Eiselt <herbert.eiselt@highstreet-technologies.com>2019-02-28 15:23:42 +0100
committerHerbert Eiselt <herbert.eiselt@highstreet-technologies.com>2019-02-28 15:24:28 +0100
commit7446f23b3abc30d7c53f2eaa951742371c071171 (patch)
treeb76a8d2e64c7aa850c09f8e69f01e7a262ab5cd5 /sdnr/wt/odlux/framework/src/components
parent49b155ec687cdf58fb51fe8245a2f5f4582b68f0 (diff)
UX extensions
UX Maintenance client and further changes Change-Id: I7643661d17db5fc3d3f94b58cb42ed0be558c64f Issue-ID: SDNC-583 Signed-off-by: Herbert Eiselt <herbert.eiselt@highstreet-technologies.com>
Diffstat (limited to 'sdnr/wt/odlux/framework/src/components')
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts14
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/index.tsx32
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx26
-rw-r--r--sdnr/wt/odlux/framework/src/components/titleBar.tsx3
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
}
});