From 69c32a2b7aaa63cc4a39d4e56a0d30684f50c0e2 Mon Sep 17 00:00:00 2001 From: sethg Date: Mon, 4 Mar 2024 14:17:29 +0100 Subject: [PATCH] Add clearing button for grid spatial filter --- .../button/SpatialQueryButtonController.js | 10 ++++- app/controller/grid/Grid.js | 18 +++++++++ app/view/grid/Grid.js | 37 ++++++++++++------- .../button/SpatialQueryButton.spec.js | 15 ++++++++ test/spec/controller/grid/Grid.spec.js | 32 ++++++++++++---- .../view/button/SpatialQueryButton.spec.js | 12 ++++++ 6 files changed, 102 insertions(+), 22 deletions(-) create mode 100644 test/spec/controller/button/SpatialQueryButton.spec.js create mode 100644 test/spec/view/button/SpatialQueryButton.spec.js diff --git a/app/controller/button/SpatialQueryButtonController.js b/app/controller/button/SpatialQueryButtonController.js index 77eac138..fd3a12a6 100644 --- a/app/controller/button/SpatialQueryButtonController.js +++ b/app/controller/button/SpatialQueryButtonController.js @@ -187,14 +187,20 @@ Ext.define('CpsiMapview.controller.button.SpatialQueryButtonController', { renderTo: Ext.getBody(), items: [{ text: 'Clear Feature', + scope: me, handler: function () { var view = me.getView(); // remove the spatial filter on the layer by firing an event view.fireEvent('cmv-spatial-query-filter', null); // now remove the polygon from the layer me.onClearAssociatedPermanentLayer(); - }, - scope: me + } + }, { + text: 'Cancel Drawing', + scope: me, + handler: function () { + me.drawQueryInteraction.abortDrawing(); + } }] }); menu.showAt(evt.pageX, evt.pageY); diff --git a/app/controller/grid/Grid.js b/app/controller/grid/Grid.js index e8c9bd03..fe862830 100644 --- a/app/controller/grid/Grid.js +++ b/app/controller/grid/Grid.js @@ -659,6 +659,24 @@ Ext.define('CpsiMapview.controller.grid.Grid', { store.reload(); }, + /** + * Clear the spatial filter only + */ + onClearSpatialFilter: function () { + + var me = this; + var view = me.getView(); + + // trigger a refresh of the store without the spatial filter + me.onSpatialFilter(null); + // now remove the polygon from the layer + var spatialQueryButton = view.down('cmv_spatial_query_button'); + if (spatialQueryButton !== null) { + spatialQueryButton.fireEvent('clearAssociatedPermanentLayer'); + spatialQueryButton.toggle(false); + } + }, + /** * Clear both the grid filters and any spatial filter. * This will cause the store to reload. diff --git a/app/view/grid/Grid.js b/app/view/grid/Grid.js index 419ede26..65b1fb17 100644 --- a/app/view/grid/Grid.js +++ b/app/view/grid/Grid.js @@ -129,21 +129,32 @@ Ext.define('CpsiMapview.view.grid.Grid', { }, '->', { - xtype: 'cmv_spatial_query_button', - drawGeometryType: 'Polygon', - text: 'Select by Shape', - spatialOperator: 'intersect', - toggleGroup: 'map', - triggerWfsRequest: false, - displayPermanently: true, - glyph: 'xf044@FontAwesome', - bind: { - hidden: '{!useSimpleSelection}' + xtype: 'buttongroup', + items: [{ + xtype: 'cmv_spatial_query_button', + drawGeometryType: 'Polygon', + text: 'Select by Shape', + spatialOperator: 'intersect', + toggleGroup: 'map', + triggerWfsRequest: false, + displayPermanently: true, + glyph: 'xf044@FontAwesome', + bind: { + hidden: '{!useSimpleSelection}' + }, + listeners: { + 'cmv-spatial-query-filter': 'onSpatialFilter' + } }, - listeners: { - 'cmv-spatial-query-filter': 'onSpatialFilter' - } + { + xtype: 'button', + text: 'Clear', + tooltip: 'Clear the spatial filter', + glyph: 'f057@FontAwesome', + handler: 'onClearSpatialFilter' + }] }, + { xtype: 'buttongroup', // segmentedbutton does not support toggleGroup bind: { diff --git a/test/spec/controller/button/SpatialQueryButton.spec.js b/test/spec/controller/button/SpatialQueryButton.spec.js new file mode 100644 index 00000000..4dc86f51 --- /dev/null +++ b/test/spec/controller/button/SpatialQueryButton.spec.js @@ -0,0 +1,15 @@ +describe('CpsiMapview.controller.button.SpatialQueryButtonController', function () { + + Ext.Loader.syncRequire(['CpsiMapview.controller.button.SpatialQueryButtonController']); + + describe('Basics', function() { + it('is defined', function() { + expect(CpsiMapview.controller.button.SpatialQueryButtonController).not.to.be(undefined); + }); + + it('can be created', function() { + var ctrl = new CpsiMapview.controller.button.SpatialQueryButtonController(); + expect(ctrl).to.not.be(undefined); + }); + }); +}); diff --git a/test/spec/controller/grid/Grid.spec.js b/test/spec/controller/grid/Grid.spec.js index 47ef7f38..7ca77b7b 100644 --- a/test/spec/controller/grid/Grid.spec.js +++ b/test/spec/controller/grid/Grid.spec.js @@ -2,18 +2,18 @@ describe('CpsiMapview.controller.grid.Grid', function () { Ext.Loader.syncRequire(['CpsiMapview.controller.grid.Grid']); - describe('Basics', function() { - it('is defined', function() { + describe('Basics', function () { + it('is defined', function () { expect(CpsiMapview.controller.grid.Grid).not.to.be(undefined); }); - it('can be created', function() { + it('can be created', function () { var ctrl = new CpsiMapview.controller.grid.Grid(); expect(ctrl).to.not.be(undefined); }); }); - describe('Advanced', function() { + describe('Advanced', function () { var view; var ctrl; @@ -28,7 +28,7 @@ describe('CpsiMapview.controller.grid.Grid', function () { view.destroy(); }); - it('Orders column selector dropdown alphabetically', function() { + it('Orders column selector dropdown alphabetically', function () { view.on('headermenucreate', function (grid, menu) { var menuItems = menu.down('[itemId=columnItem]').menu.items.items; var orderedTitles = menuItems.map(function (item) { @@ -45,7 +45,7 @@ describe('CpsiMapview.controller.grid.Grid', function () { text: 'Test1' }, { text: 'Test3' - }, { + }, { text: 'Test2' }]); @@ -53,7 +53,7 @@ describe('CpsiMapview.controller.grid.Grid', function () { view.getEl().down('.x-column-header-trigger').dom.click(); }); - it('Gets visible columns, adds Id prop and any extra propertyNames', function() { + it('Gets visible columns, adds Id prop and any extra propertyNames', function () { var store = view.getStore(); var vm = ctrl.getViewModel(); @@ -83,5 +83,23 @@ describe('CpsiMapview.controller.grid.Grid', function () { expect(store.propertyName).to.be('id,Test1,Test3,Extra'); }); + it('spatial filter is cleared', function (done) { + + var spatialQueryButton = view.down('cmv_spatial_query_button'); + var polygonCoords = [ + [0, 0], + [10, 10], + [20, 0] + ]; + var polygon = new ol.geom.Polygon([polygonCoords]); + var filter = spatialQueryButton.getController().createSpatialFilter(polygon); + ctrl.spatialFilter = filter; + spatialQueryButton.on('clearAssociatedPermanentLayer', function () { + expect(ctrl.spatialFilter).to.be(null); + done(); + }); + + ctrl.onClearSpatialFilter(); + }); }); }); diff --git a/test/spec/view/button/SpatialQueryButton.spec.js b/test/spec/view/button/SpatialQueryButton.spec.js new file mode 100644 index 00000000..70aa85d4 --- /dev/null +++ b/test/spec/view/button/SpatialQueryButton.spec.js @@ -0,0 +1,12 @@ +describe('CpsiMapview.view.button.SpatialQueryButton', function() { + describe('Basics', function() { + it('is defined', function() { + expect(CpsiMapview.view.button.SpatialQueryButton).not.to.be(undefined); + }); + + it('can be instantiated', function() { + var inst = Ext.create('CpsiMapview.view.button.SpatialQueryButton'); + expect(inst).to.be.a(CpsiMapview.view.button.SpatialQueryButton); + }); + }); +});