From 7446f23b3abc30d7c53f2eaa951742371c071171 Mon Sep 17 00:00:00 2001
From: Herbert Eiselt <herbert.eiselt@highstreet-technologies.com>
Date: Thu, 28 Feb 2019 15:23:42 +0100
Subject: 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>
---
 .../src/components/material-table/columnModel.ts   | 14 ++++++++--
 .../src/components/material-table/index.tsx        | 32 ++++++++++++----------
 .../src/components/material-table/tableFilter.tsx  | 26 ++++++++++--------
 .../wt/odlux/framework/src/components/titleBar.tsx |  3 +-
 4 files changed, 45 insertions(+), 30 deletions(-)

(limited to 'sdnr/wt/odlux/framework/src/components')

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
   }
 });
 
-- 
cgit 1.2.3-korg