refactor: update to ionic v6

src/app/modules/data/detail/data-detail.component.ts

@@ -21,7 +21,7 @@ import {
   TemplateRef,
 } from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
-import {IonRefresher, ViewWillEnter} from '@ionic/angular';
+import {IonRefresher, ViewWillEnter, ModalController} from '@ionic/angular';
 import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
 import {
   SCLanguageCode,
@@ -57,6 +57,10 @@ export class DataDetailComponent implements ViewWillEnter {
    */
   item?: SCThings | null = undefined;
 
+  @Input() inputItem?: SCThings;
+
+  @Input() isModal = false;
+
   /**
    * The language of the item
    */
@@ -100,12 +104,14 @@ export class DataDetailComponent implements ViewWillEnter {
    * @param route the route the page was accessed from
    * @param dataProvider the data provider
    * @param favoritesService the favorites provider
+   * @param modalController the modal controller
    * @param translateService he translate provider
    */
   constructor(
     protected readonly route: ActivatedRoute,
     private readonly dataProvider: DataProvider,
     private readonly favoritesService: FavoritesService,
+    readonly modalController: ModalController,
     translateService: TranslateService,
   ) {
     this.language = translateService.currentLang as SCLanguageCode;
@@ -127,11 +133,13 @@ export class DataDetailComponent implements ViewWillEnter {
    */
   async getItem(uid: SCUuid, forceReload: boolean) {
     try {
-      const item = await (this.externalData
-        ? new Promise<SCThings | null | undefined>(resolve =>
-            this.loadItem.emit({uid, forceReload, resolve}),
-          )
-        : this.dataProvider.get(uid, DataScope.Remote));
+      const item =
+        this.inputItem ??
+        (await (this.externalData
+          ? new Promise<SCThings | null | undefined>(resolve =>
+              this.loadItem.emit({uid, forceReload, resolve}),
+            )
+          : this.dataProvider.get(uid, DataScope.Remote)));
 
       this.item = !item
         ? // eslint-disable-next-line unicorn/no-null
@@ -170,7 +178,9 @@ export class DataDetailComponent implements ViewWillEnter {
    * @param refresher Refresher component that triggers the update
    */
   async refresh(refresher: IonRefresher) {
-    await this.getItem(this.route.snapshot.paramMap.get('uid') ?? '', true);
+    if (!this.inputItem) {
+      await this.getItem(this.route.snapshot.paramMap.get('uid') ?? '', true);
+    }
     await refresher.complete();
   }
 }

src/app/modules/data/detail/data-detail.html

@@ -1,16 +1,21 @@
 <ion-header *ngIf="defaultHeader">
   <ion-toolbar color="primary">
-    <ion-buttons slot="start">
+    <ion-buttons slot="start" *ngIf="!isModal">
       <ion-back-button></ion-back-button>
       <ion-menu-button></ion-menu-button>
     </ion-buttons>
     <ion-title>{{ 'data.detail.TITLE' | translate }}</ion-title>
-    <ion-buttons slot="primary">
+    <ion-buttons [slot]="isModal ? 'start' : 'primary'">
       <stapps-favorite-button
         *ngIf="item"
         [item]="$any(item)"
       ></stapps-favorite-button>
     </ion-buttons>
+    <ion-buttons slot="end" *ngIf="isModal">
+      <ion-button fill="clear" (click)="modalController.dismiss()">
+        <ion-label>{{ 'modal.DISMISS' | translate }}</ion-label>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 <ng-content select="[header]"></ng-content>