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>

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

   }

 });