Introduce ordering on column for table widget #2691

geosolutions-it · Oct 28, 2020 · 36f01eb · 36f01eb
1 parent a663577
commit 36f01eb
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/web/client/components/data/featuregrid/__tests__/FeatureGrid-test.jsx b/web/client/components/data/featuregrid/__tests__/FeatureGrid-test.jsx
@@ -64,8 +64,13 @@ describe('Test for FeatureGrid component', () => {
         };
         spyOn(events, "onSort");
         ReactDOM.render(<FeatureGrid virtualScroll={false} gridEvents={{onGridSort: events.onSort}} describeFeatureType={describePois} features={museam.features}/>, document.getElementById("container"));
+        expect(document.getElementsByClassName('react-grid-HeaderCell-sortable react-grid-HeaderCell-sortable--ascending').length).toBe(0);
         document.getElementsByClassName('react-grid-HeaderCell-sortable')[0].click();
         expect(events.onSort).toHaveBeenCalled();
+        expect(document.getElementsByClassName('react-grid-HeaderCell-sortable react-grid-HeaderCell-sortable--ascending').length).toBe(1);
+        document.getElementsByClassName('react-grid-HeaderCell-sortable')[0].click();
+        expect(document.getElementsByClassName('react-grid-HeaderCell-sortable react-grid-HeaderCell-sortable--ascending').length).toBe(0);
+        expect(document.getElementsByClassName('react-grid-HeaderCell-sortable react-grid-HeaderCell-sortable--descending').length).toBe(1);
     });
     //
     // ROW SELECTION EVENTS

diff --git a/web/client/components/widgets/enhancers/tableWidget.js b/web/client/components/widgets/enhancers/tableWidget.js
@@ -9,6 +9,13 @@ const { compose, withPropsOnChange } = require('recompose');
 const { get } = require('lodash');
 const {editableWidget, withHeaderTools, defaultIcons} = require('./tools');
 
+const withSorting = () => withPropsOnChange(["gridEvents"], ({ gridEvents = {}, updateProperty = () => { } } = {}) => ({
+    gridEvents: {
+        ...gridEvents,
+        onGridSort: (sortBy, sortOrder) => updateProperty("sortOptions", { sortBy, sortOrder })
+    }
+}));
+
 /**
  * enhancer that updates widget column size on resize. and add base icons and menus
  * Moreover enhances it to allow delete.
@@ -26,5 +33,6 @@ module.exports = compose(
     require('./deleteWidget'),
     editableWidget(),
     defaultIcons(),
-    withHeaderTools()
+    withHeaderTools(),
+    withSorting()
 );
diff --git a/web/client/components/widgets/enhancers/wfsTable/virtualScrollFetch.js b/web/client/components/widgets/enhancers/wfsTable/virtualScrollFetch.js
@@ -21,12 +21,14 @@ module.exports = pages$ => props$ => props$.switchMap(({
     maxStoredPages = 5,
     filter,
     options = {},
+    sortOptions,
     pages,
     features = [],
     onLoad = () => { },
     onLoadError = () => { }
 }) => pages$.switchMap(({ pagesRange, pagination = {} }, { }) => getLayerJSONFeature(layer, filter, {
     ...getCurrentPaginationOptions(pagesRange, pages, size),
+    sortOptions: sortOptions,
     timeout: 15000,
     totalFeatures: pagination.totalFeatures, // this is needed to allow workaround of GEOS-7233
     propertyName: options.propertyName,

diff --git a/web/client/components/widgets/widget/TableWidget.jsx b/web/client/components/widgets/widget/TableWidget.jsx
@@ -65,7 +65,7 @@ module.exports = getWidgetFilterRenderers(({
             <FeatureGrid
                 emptyRowsView={() => <EmptyRowsView loading={loading} />}
                 gridEvents={gridEvents}
-                sortable={false}
+                sortable
                 defaultSize={false}
                 columnSettings={columnSettings}
                 pageEvents={pageEvents}