Add Clear button for grid spatial filter

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);

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.

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: {

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);
+        });
+    });
+});

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,15 +45,15 @@ describe('CpsiMapview.controller.grid.Grid', function () {
                 text: 'Test1'
             }, {
                 text: 'Test3'
-            },  {
+            }, {
                 text: 'Test2'
             }]);
 
             // trigger the headermenucreate event by clicking a column header dropdown icon
             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();
+        });
     });
 });

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);
+        });
+    });
+});