refactor: update to ionic v6

src/app/modules/map/page/map-page.component.ts

@@ -20,7 +20,11 @@ import {
   ViewChild,
 } from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-import {AlertController, ModalController} from '@ionic/angular';
+import {
+  AlertController,
+  IonRouterOutlet,
+  ModalController,
+} from '@ionic/angular';
 import {TranslateService} from '@ngx-translate/core';
 import {
   SCBuilding,
@@ -44,8 +48,6 @@ import {DataRoutingService} from '../../data/data-routing.service';
 import {ContextMenuService} from '../../menu/context/context-menu.service';
 import {MapProvider} from '../map.provider';
 import {MapPosition, PositionService} from '../position.service';
-import {MapListModalComponent} from './modals/map-list-modal.component';
-import {MapSingleModalComponent} from './modals/map-single-modal.component';
 import {Geolocation, PermissionStatus} from '@capacitor/geolocation';
 import {Capacitor} from '@capacitor/core';
 
@@ -116,11 +118,6 @@ export class MapPageComponent {
    */
   MAX_ZOOM = 18;
 
-  /**
-   * Modal for additional information on places or for a list of places
-   */
-  modal: HTMLIonModalElement;
-
   /**
    * Options of the leaflet map
    */
@@ -158,6 +155,7 @@ export class MapPageComponent {
     private modalController: ModalController,
     private dataRoutingService: DataRoutingService,
     private positionService: PositionService,
+    readonly routerOutlet: IonRouterOutlet,
   ) {
     // initialize the options
     this.options = {
@@ -277,8 +275,10 @@ export class MapPageComponent {
       this.dataRoutingService.itemSelectListener().subscribe(async item => {
         // in case the list item is clicked
         if (this.items.length > 1) {
-          await this.modal.dismiss();
-          await this.showItem(item.uid);
+          await Promise.all([
+            this.modalController.dismiss(),
+            this.showItem(item.uid),
+          ]);
         }
       }),
       this.positionService.watchCurrentLocation({maximumAge: 3000}).subscribe({
@@ -439,45 +439,4 @@ export class MapPageComponent {
     // center the selected place
     this.focus(geoJSON(this.items[0].geo.point).getBounds().getCenter());
   }
-
-  /**
-   * Show a single place
-   */
-  async showItemModal(item: SCPlace) {
-    const placeWithNullLocation = {
-      ...item,
-      geo: {point: {coordinates: [0, 0]}},
-    };
-    this.modal = await this.modalController.create({
-      component: MapSingleModalComponent,
-      swipeToClose: true,
-      componentProps: {
-        item: placeWithNullLocation,
-        dismissAction: () => {
-          this.modal.dismiss();
-        },
-      },
-    });
-
-    await this.modal.present();
-  }
-
-  /**
-   * Show the list of shown places
-   */
-  async showListModal() {
-    this.modal = await this.modalController.create({
-      component: MapListModalComponent,
-      swipeToClose: true,
-      componentProps: {
-        filterQuery: this.filterQuery,
-        queryText: this.queryText,
-        dismissAction: () => {
-          this.modal.dismiss();
-        },
-      },
-    });
-
-    await this.modal.present();
-  }
 }