refactor: polish map module ui/ux

src/app/modules/map/page/modals/map-list-modal.component.ts

@@ -13,9 +13,10 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component, Input, OnInit} from '@angular/core';
-import {SCPlace, SCSearchFilter} from '@openstapps/core';
+import {SCSearchBooleanFilter, SCPlace, SCSearchFilter} from '@openstapps/core';
 import {MapProvider} from '../../map.provider';
 import {ModalController} from '@ionic/angular';
+import {LatLngBounds} from 'leaflet';
 
 /**
  * Modal showing a provided list of places
@@ -31,6 +32,11 @@ export class MapListModalComponent implements OnInit {
    */
   @Input() filterQuery?: SCSearchFilter;
 
+  /**
+   * Map visible boundaries limiting items in lust
+   */
+  @Input() mapBounds?: LatLngBounds;
+
   /**
    * Places to show in the list
    */
@@ -50,8 +56,44 @@ export class MapListModalComponent implements OnInit {
    * Populate the list with the results from the search
    */
   ngOnInit() {
+    let geofencedFilter: SCSearchBooleanFilter | undefined;
+    if (typeof this.mapBounds !== 'undefined') {
+      geofencedFilter = {
+        arguments: {
+          operation: 'and',
+          filters: [
+            {
+              type: 'geo',
+              arguments: {
+                field: 'geo',
+                shape: {
+                  coordinates: [
+                    [
+                      this.mapBounds.getNorthWest().lng,
+                      this.mapBounds.getNorthWest().lat,
+                    ],
+                    [
+                      this.mapBounds.getSouthEast().lng,
+                      this.mapBounds.getSouthEast().lat,
+                    ],
+                  ],
+                  type: 'envelope',
+                },
+                spatialRelation: 'intersects',
+              },
+            },
+          ],
+        },
+        type: 'boolean',
+      };
+      if (typeof this.filterQuery !== 'undefined') {
+        geofencedFilter.arguments.filters.push(this.filterQuery);
+      }
+    }
+
+    const geofencedFilterQuery = geofencedFilter ?? this.filterQuery;
     this.mapProvider
-      .searchPlaces(this.filterQuery, this.queryText)
+      .searchPlaces(geofencedFilterQuery, this.queryText)
       .then(result => {
         this.items = result.data as SCPlace[];
       });