SDN-R add updated odlux

Updates all odlux framework and app components.

Issue-ID: SDNC-1032
Signed-off-by: herbert <herbert.eiselt@highstreet-technologies.com>
Change-Id: I13c520489fd40d05b7fd5215f5941af6238e9cae

3 files changed, 31 insertions, 6 deletions

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 3e31c5e03..520674441 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
@@ -179,7 +179,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
         <TableToolbar tableId={this.props.tableId} numSelected={selected && selected.length} title={this.props.title} customActionButtons={this.props.customActionButtons} onExportToCsv={this.exportToCsv}
           onToggleFilter={toggleFilter} />
         <div className={classes.tableWrapper}>
-          <Table className={classes.table} aria-labelledby="tableTitle">
+          <Table className={classes.table} aria-label={this.props.tableId ? this.props.tableId : 'tableTitle'}>
             <EnhancedTableHead
               columns={columns}
               numSelected={selected && selected.length}
@@ -193,7 +193,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
             <TableBody>
               {showFilter && <EnhancedTableFilter columns={columns} filter={filter} onFilterChanged={this.onFilterChanged} enableSelection={this.props.enableSelection} /> || null}
               {rows // may need ordering here
-                .map((entry: TData & { [key: string]: any }) => {
+                .map((entry: TData & { [key: string]: any }, index) => {
                   const entryId = getId(entry);
                   const isSelected = this.isSelected(entryId);
                   return (
@@ -202,6 +202,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
                       onClick={event => this.handleClick(event, entry, entryId)}
                       role="checkbox"
                       aria-checked={isSelected}
+                      aria-label={`${(this.props.tableId ? this.props.tableId : 'table')}-row-${(index + 1)}`}
                       tabIndex={-1}
                       key={entryId}
                       selected={isSelected}
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 737ea85f9..2075e052c 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
@@ -69,14 +69,14 @@ class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterC
               {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}>
+                  ? <Select className={classes.input} aria-label={(col.title as string).toLowerCase() + ' filter'} 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)} />}
+                  : <Input className={classes.input} inputProps={{ 'aria-label': (col.title as string).toLowerCase() + ' filter' }} value={filter[col.property] || ''} onChange={this.createFilterHandler(col.property)} />}
             </TableCell>
           );
         }, this)}
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/utilities.ts b/sdnr/wt/odlux/framework/src/components/material-table/utilities.ts
index 6e8902c07..74682cd95 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/utilities.ts
+++ b/sdnr/wt/odlux/framework/src/components/material-table/utilities.ts
@@ -196,6 +196,29 @@ export function createExternal<TData>(callback: DataCallback<TData>, selectState
     }).catch(error => new AddErrorInfoAction(error));
   };
 
+  const reloadActionAsync = async (dispatch: Dispatch, getAppState: () => IApplicationStoreState) => {
+    dispatch(new RefreshAction());
+    const ownState = selectState(getAppState());
+    const filter = { ...ownState.preFilter, ...(ownState.showFilter && ownState.filter || {}) };
+
+    try {
+      const result = await Promise.resolve(callback(ownState.page, ownState.rowsPerPage, ownState.orderBy, ownState.order, filter));
+
+
+      if (ownState.page > 0 && ownState.rowsPerPage * ownState.page > result.total) { //if result is smaller than the currently shown page, new search and repaginate
+
+        let newPage = Math.floor(result.total / ownState.rowsPerPage);
+
+        const repaginationResult = await Promise.resolve(callback(newPage, ownState.rowsPerPage, ownState.orderBy, ownState.order, filter));
+        dispatch(new SetResultAction(repaginationResult));
+      } else {
+        dispatch(new SetResultAction(result));
+      }
+    } catch (error) {
+      new AddErrorInfoAction(error);
+    }
+  };
+
   const createPreActions = (dispatch: Dispatch, skipRefresh: boolean = false) => {
     return {
       onPreFilterChanged: (preFilter: { [key: string]: string }) => {
@@ -258,6 +281,7 @@ export function createExternal<TData>(callback: DataCallback<TData>, selectState
     createActions: createActions,
     createProperties: createProperties,
     createPreActions: createPreActions,
-    actionHandler: externalTableStateActionHandler
+    actionHandler: externalTableStateActionHandler,
+    reloadActionAsync: reloadActionAsync,
   }
 }
\ No newline at end of file