Fix odlux bugs

Fix help and about app not scrollable

Fix filter hiding and showing without user interaction and default sort  in all tables

Issue-ID: SDNC-1117
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: I5c6ff86c73a3b222a8d9022125454788496f6399

2 files changed, 28 insertions, 5 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 a80a5a58d..3dfbe0b91 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
@@ -111,6 +111,8 @@ type MaterialTableComponentBaseProps<TData> = WithStyles<typeof styles> & {
   tableId?: string;
   title?: string;
   stickyHeader?: boolean;
+  defaultSortOrder?: 'asc' | 'desc';
+  defaultSortColumn?: keyof TData;
   enableSelection?: boolean;
   disableSorting?: boolean;
   disableFilter?: boolean;
@@ -164,8 +166,8 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
       filter: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.filter || {} : {},
       showFilter: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.showFilter : false,
       loading: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.loading : false,
-      order: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.order : 'asc',
-      orderBy: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.orderBy : null,
+      order: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.order : this.props.defaultSortOrder || 'asc',
+      orderBy: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.orderBy : this.props.defaultSortColumn || null,
       selected: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.selected : null,
       rows: isMaterialTableComponentPropsWithRows(this.props) && this.props.rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) || [],
       total: isMaterialTableComponentPropsWithRows(this.props) && this.props.rows.length || 0,
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 74682cd95..07ffe2ff5 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/utilities.ts
+++ b/sdnr/wt/odlux/framework/src/components/material-table/utilities.ts
@@ -49,6 +49,12 @@ export function createExternal<TData>(callback: DataCallback<TData>, selectState
     }
   }
 
+  class RequestExplicitSortAction extends TableAction {
+    constructor(public propertyName: string, public sortOrder: "asc" | "desc") {
+      super();
+    }
+  }
+
   class SetSelectedAction extends TableAction {
     constructor(public selected: TData[] | null) {
       super();
@@ -136,7 +142,15 @@ export function createExternal<TData>(callback: DataCallback<TData>, selectState
         orderBy: state.orderBy === action.orderBy && state.order === 'desc' ? null : action.orderBy,
         order: state.orderBy === action.orderBy && state.order === 'asc' ? 'desc' : 'asc',
       }
-    } else if (action instanceof SetShowFilterAction) {
+    } else if (action instanceof RequestExplicitSortAction) {
+      state = {
+        ...state,
+        loading: true,
+        orderBy: action.propertyName,
+        order: action.sortOrder
+      }
+    }
+    else if (action instanceof SetShowFilterAction) {
       state = {
         ...state,
         loading: true,
@@ -239,11 +253,18 @@ export function createExternal<TData>(callback: DataCallback<TData>, selectState
           (!skipRefresh) && dispatch(reloadAction);
         });
       },
-      onToggleFilter: () => {
+      onHandleExplicitRequestSort: (property: string, sortOrder: "asc" | "desc") => {
+        dispatch((dispatch: Dispatch) => {
+          dispatch(new RequestExplicitSortAction(property, sortOrder));
+          (!skipRefresh) && dispatch(reloadAction);
+        });
+      },
+      onToggleFilter: (refresh?: boolean) => {
         dispatch((dispatch: Dispatch, getAppState: () => IApplicationStoreState) => {
           const { showFilter } = selectState(getAppState());
           dispatch(new SetShowFilterAction(!showFilter));
-          (!skipRefresh) && dispatch(reloadAction);
+          if (!skipRefresh && (refresh === undefined || refresh))
+            dispatch(reloadAction);
         });
       },
       onFilterChanged: (property: string, filterTerm: string) => {