Close optimizations drawer if filtering, pagination, or sort is applied

project-koku · May 4, 2023 · 7a79824 · 7a79824
1 parent 5ac3d08
commit 7a79824
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 20 deletions.
diff --git a/src/routes/views/components/optimizations/optimizationsTable.tsx b/src/routes/views/components/optimizations/optimizationsTable.tsx
@@ -25,6 +25,7 @@ interface OptimizationsTableOwnProps extends RouterComponentProps {
 }
 
 interface OptimizationsTableState {
+  currentRow?: number;
   columns?: any[];
   rows?: any[];
 }
@@ -147,22 +148,37 @@ class OptimizationsTableBase extends React.Component<OptimizationsTableProps, Op
   };
 
   private handleOnRowClick = (event: React.KeyboardEvent | React.MouseEvent, rowIndex: number) => {
-    const { openOptimizationsDrawer } = this.props;
-    const { rows } = this.state;
+    const { closeOptimizationsDrawer, isOpen, openOptimizationsDrawer } = this.props;
+    const { currentRow, rows } = this.state;
+
+    this.setState({ currentRow: rowIndex }, () => {
+      if (currentRow === rowIndex && isOpen) {
+        closeOptimizationsDrawer();
+      } else {
+        openOptimizationsDrawer(rows[rowIndex].optimization);
+      }
+    });
+  };
 
-    openOptimizationsDrawer(rows[rowIndex].optimization);
+  private handleOnSort = (value: string, isSortAscending: boolean) => {
+    const { closeOptimizationsDrawer, onSort } = this.props;
+
+    closeOptimizationsDrawer();
+    if (onSort) {
+      onSort(value, isSortAscending);
+    }
   };
 
   public render() {
-    const { isLoading, onSort } = this.props;
+    const { isLoading } = this.props;
     const { columns, rows } = this.state;
 
     return (
       <DataTable
         columns={columns}
         isLoading={isLoading}
         isOptimizations
-        onSort={onSort}
+        onSort={this.handleOnSort}
         rows={rows}
         onRowClick={this.handleOnRowClick}
       />

diff --git a/src/routes/views/components/optimizations/optimizationsToolbar.tsx b/src/routes/views/components/optimizations/optimizationsToolbar.tsx
@@ -8,6 +8,7 @@ import { connect } from 'react-redux';
 import { DataToolbar } from 'routes/views/components/dataToolbar';
 import type { Filter } from 'routes/views/utils/filter';
 import { createMapStateToProps } from 'store/common';
+import { uiActions } from 'store/ui';
 
 interface OptimizationsToolbarOwnProps {
   isDisabled?: boolean;
@@ -25,7 +26,7 @@ interface OptimizationsToolbarStateProps {
 }
 
 interface OptimizationsToolbarDispatchProps {
-  // TBD...
+  closeOptimizationsDrawer: typeof uiActions.closeOptimizationsDrawer;
 }
 
 interface OptimizationsToolbarState {
@@ -60,8 +61,26 @@ export class OptimizationsToolbarBase extends React.Component<OptimizationsToolb
     return isProject ? options : options.filter(option => option.key !== 'project');
   };
 
+  private handleOnFilterAdded = (filter: Filter) => {
+    const { closeOptimizationsDrawer, onFilterAdded } = this.props;
+
+    closeOptimizationsDrawer();
+    if (onFilterAdded) {
+      onFilterAdded(filter);
+    }
+  };
+
+  private handleOnFilterRemoved = (filter: Filter) => {
+    const { closeOptimizationsDrawer, onFilterRemoved } = this.props;
+
+    closeOptimizationsDrawer();
+    if (onFilterRemoved) {
+      onFilterRemoved(filter);
+    }
+  };
+
   public render() {
-    const { isDisabled, itemsPerPage, itemsTotal, onFilterAdded, onFilterRemoved, pagination, query } = this.props;
+    const { isDisabled, itemsPerPage, itemsTotal, pagination, query } = this.props;
     const { categoryOptions } = this.state;
 
     return (
@@ -70,8 +89,8 @@ export class OptimizationsToolbarBase extends React.Component<OptimizationsToolb
         isDisabled={isDisabled}
         itemsPerPage={itemsPerPage}
         itemsTotal={itemsTotal}
-        onFilterAdded={onFilterAdded}
-        onFilterRemoved={onFilterRemoved}
+        onFilterAdded={this.handleOnFilterAdded}
+        onFilterRemoved={this.handleOnFilterRemoved}
         pagination={pagination}
         query={query}
         showFilter
@@ -88,7 +107,7 @@ const mapStateToProps = createMapStateToProps<OptimizationsToolbarOwnProps, Opti
 });
 
 const mapDispatchToProps: OptimizationsToolbarDispatchProps = {
-  // TBD...
+  closeOptimizationsDrawer: uiActions.closeOptimizationsDrawer,
 };
 
 const OptimizationsToolbarConnect = connect(mapStateToProps, mapDispatchToProps)(OptimizationsToolbarBase);

diff --git a/src/routes/views/optimizations/optimizations.tsx b/src/routes/views/optimizations/optimizations.tsx
@@ -13,11 +13,12 @@ import { Loading } from 'routes/state/loading';
 import { NoOptimizations } from 'routes/state/noOptimizations';
 import { NotAvailable } from 'routes/state/notAvailable';
 import { OptimizationsTable, OptimizationsToolbar } from 'routes/views/components/optimizations';
-import { handleFilterAdded, handleFilterRemoved, handleSort } from 'routes/views/utils/handles';
+import { handleOnFilterAdded, handleOnFilterRemoved, handleOnSort } from 'routes/views/utils/handles';
 import { getOrderById, getOrderByValue } from 'routes/views/utils/orderBy';
 import { getRouteForQuery } from 'routes/views/utils/query';
 import { createMapStateToProps, FetchStatus } from 'store/common';
 import { rosActions, rosSelectors } from 'store/ros';
+import { uiActions } from 'store/ui';
 import type { RouterComponentProps } from 'utils/router';
 import { withRouter } from 'utils/router';
 
@@ -37,6 +38,7 @@ interface OptimizationsStateProps {
 }
 
 interface OptimizationsDispatchProps {
+  closeOptimizationsDrawer: typeof uiActions.closeOptimizationsDrawer;
   fetchRosReport: typeof rosActions.fetchRosReport;
 }
 
@@ -94,8 +96,8 @@ class Optimizations extends React.Component<OptimizationsProps, OptimizationsSta
         isCompact={!isBottom}
         isDisabled={isDisabled}
         itemCount={count}
-        onPerPageSelect={(event, perPage) => this.handlePerPageSelect(perPage)}
-        onSetPage={(event, pageNumber) => this.handleSetPage(pageNumber)}
+        onPerPageSelect={(event, perPage) => this.handleOnPerPageSelect(perPage)}
+        onSetPage={(event, pageNumber) => this.handleOnSetPage(pageNumber)}
         page={page}
         perPage={limit}
         titles={{
@@ -116,7 +118,7 @@ class Optimizations extends React.Component<OptimizationsProps, OptimizationsSta
     return (
       <OptimizationsTable
         isLoading={reportFetchStatus === FetchStatus.inProgress}
-        onSort={(sortType, isSortAscending) => handleSort(query, router, sortType, isSortAscending)}
+        onSort={(sortType, isSortAscending) => handleOnSort(query, router, sortType, isSortAscending)}
         report={report}
         reportQueryString={reportQueryString}
       />
@@ -136,27 +138,28 @@ class Optimizations extends React.Component<OptimizationsProps, OptimizationsSta
         isProject
         itemsPerPage={itemsPerPage}
         itemsTotal={itemsTotal}
-        onFilterAdded={filter => handleFilterAdded(query, router, filter)}
-        onFilterRemoved={filter => handleFilterRemoved(query, router, filter)}
+        onFilterAdded={filter => handleOnFilterAdded(query, router, filter)}
+        onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)}
         pagination={this.getPagination(isDisabled)}
         query={query}
       />
     );
   };
 
-  private handlePerPageSelect = (perPage: number) => {
-    const { query, router } = this.props;
+  private handleOnPerPageSelect = (perPage: number) => {
+    const { closeOptimizationsDrawer, query, router } = this.props;
 
     const newQuery = {
       ...JSON.parse(JSON.stringify(query)),
       limit: perPage,
     };
     const filteredQuery = getRouteForQuery(newQuery, router.location, true);
     router.navigate(filteredQuery, { replace: true });
+    closeOptimizationsDrawer();
   };
 
-  private handleSetPage = (pageNumber: number) => {
-    const { query, report, router } = this.props;
+  private handleOnSetPage = (pageNumber: number) => {
+    const { closeOptimizationsDrawer, query, report, router } = this.props;
 
     const limit = report && report.meta && report.meta.limit ? report.meta.limit : baseQuery.limit;
     const offset = pageNumber * limit - limit;
@@ -168,6 +171,7 @@ class Optimizations extends React.Component<OptimizationsProps, OptimizationsSta
     };
     const filteredQuery = getRouteForQuery(newQuery, router.location);
     router.navigate(filteredQuery, { replace: true });
+    closeOptimizationsDrawer();
   };
 
   private updateReport = () => {
@@ -243,6 +247,7 @@ const mapStateToProps = createMapStateToProps<OptimizationsOwnProps, Optimizatio
 });
 
 const mapDispatchToProps: OptimizationsDispatchProps = {
+  closeOptimizationsDrawer: uiActions.closeOptimizationsDrawer,
   fetchRosReport: rosActions.fetchRosReport,
 };