From 10e3b21ad493920be7cd957d32e2e05e12ae134f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Wed, 15 Nov 2023 20:56:52 +0100
Subject: [PATCH] refactor: rework components

---
 .../data/elements/address-detail.component.ts | 14 +++---
 .../certifications-in-detail.component.ts     | 32 ++++++++++++-
 .../elements/certifications-in-detail.html    | 12 ++---
 .../data/elements/external-link.component.ts  | 13 +++--
 .../modules/data/elements/external-link.html  |  2 +-
 .../elements/favorite-button.component.ts     | 13 +++--
 ...on.component.html => favorite-button.html} |  0
 ...on.component.scss => favorite-button.scss} |  0
 .../elements/long-inline-text.component.ts    | 13 ++---
 .../data/elements/long-inline-text.html       | 18 ++++---
 .../data/elements/offers-detail.component.ts  |  2 +-
 .../modules/data/elements/offers-detail.html  |  2 +-
 .../modules/data/elements/rating.component.ts |  5 ++
 .../src/app/modules/data/elements/rating.html | 48 +++++++++----------
 14 files changed, 107 insertions(+), 67 deletions(-)
 rename frontend/app/src/app/modules/data/elements/{favorite-button.component.html => favorite-button.html} (100%)
 rename frontend/app/src/app/modules/data/elements/{favorite-button.component.scss => favorite-button.scss} (100%)

diff --git a/frontend/app/src/app/modules/data/elements/address-detail.component.ts b/frontend/app/src/app/modules/data/elements/address-detail.component.ts
index 585279e3..a3c98574 100644
--- a/frontend/app/src/app/modules/data/elements/address-detail.component.ts
+++ b/frontend/app/src/app/modules/data/elements/address-detail.component.ts
@@ -12,19 +12,19 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {SCPostalAddress} from '@openstapps/core';
+import {IonCard, IonCardContent, IonCardHeader, IonCol, IonGrid, IonRow} from '@ionic/angular/standalone';
+import {TranslateModule} from '@ngx-translate/core';
+import {TitleCasePipe} from '@angular/common';
 
-/**
- * TODO
- */
 @Component({
   selector: 'stapps-address-detail',
   templateUrl: 'address-detail.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [IonCard, IonCardHeader, IonCardContent, IonGrid, IonRow, IonCol, TranslateModule, TitleCasePipe],
 })
 export class AddressDetailComponent {
-  /**
-   * TODO
-   */
   @Input() address: SCPostalAddress;
 }
diff --git a/frontend/app/src/app/modules/data/elements/certifications-in-detail.component.ts b/frontend/app/src/app/modules/data/elements/certifications-in-detail.component.ts
index 72c06952..66d2c53f 100644
--- a/frontend/app/src/app/modules/data/elements/certifications-in-detail.component.ts
+++ b/frontend/app/src/app/modules/data/elements/certifications-in-detail.component.ts
@@ -12,13 +12,41 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {SCCertificationWithoutReferences} from '@openstapps/core';
+import {
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonContent,
+  IonNote,
+  IonPopover,
+} from '@ionic/angular/standalone';
+import {TranslateModule} from '@ngx-translate/core';
+import {ThingTranslateModule} from '../../../translation/thing-translate.module';
+import {ExternalLinkComponent} from './external-link.component';
 
 @Component({
   selector: 'stapps-certifications-in-detail',
   templateUrl: 'certifications-in-detail.html',
-  styleUrls: ['certifications-in-detail.scss'],
+  styleUrl: 'certifications-in-detail.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    IonCard,
+    IonCardHeader,
+    TranslateModule,
+    IonCardContent,
+    ThingTranslateModule,
+    IonPopover,
+    IonContent,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonNote,
+    ExternalLinkComponent,
+  ],
 })
 export class CertificationsInDetailComponent {
   @Input() certifications: SCCertificationWithoutReferences[] = [];
diff --git a/frontend/app/src/app/modules/data/elements/certifications-in-detail.html b/frontend/app/src/app/modules/data/elements/certifications-in-detail.html
index af2cc55f..01641ce0 100644
--- a/frontend/app/src/app/modules/data/elements/certifications-in-detail.html
+++ b/frontend/app/src/app/modules/data/elements/certifications-in-detail.html
@@ -16,22 +16,22 @@
   <ion-card-header>{{ 'data.types.certification.TITLE' | translate }}</ion-card-header>
   <ion-card-content>
     <div class="certification-list">
-      <ng-container *ngFor="let cert of certifications">
+      @for (certification of certifications; track $index) {
         <img
           (click)="popover.present($event)"
           [width]="72"
-          [src]="'image' | thingTranslate: cert"
-          [alt]="'description' | thingTranslate: cert"
+          [src]="'image' | thingTranslate: certification"
+          [alt]="'description' | thingTranslate: certification"
         />
         <ion-popover #popover>
           <ng-template>
             <ion-content class="ion-padding">
-              <ion-card-title>{{ 'name' | thingTranslate: cert }}</ion-card-title>
-              <ion-card-subtitle> {{ 'description' | thingTranslate: cert }} </ion-card-subtitle>
+              <ion-card-title>{{ 'name' | thingTranslate: certification }}</ion-card-title>
+              <ion-card-subtitle> {{ 'description' | thingTranslate: certification }} </ion-card-subtitle>
             </ion-content>
           </ng-template>
         </ion-popover>
-      </ng-container>
+      }
     </div>
     <ion-note>
       <stapps-external-link
diff --git a/frontend/app/src/app/modules/data/elements/external-link.component.ts b/frontend/app/src/app/modules/data/elements/external-link.component.ts
index 7e463ed6..1ae33d08 100644
--- a/frontend/app/src/app/modules/data/elements/external-link.component.ts
+++ b/frontend/app/src/app/modules/data/elements/external-link.component.ts
@@ -12,14 +12,17 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
-import {Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {SimpleBrowser} from '../../../util/browser.factory';
+import {IonIcon} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'stapps-external-link',
-  templateUrl: './external-link.html',
-  styleUrls: ['./external-link.scss'],
+  templateUrl: 'external-link.html',
+  styleUrl: 'external-link.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [IonIcon],
 })
 export class ExternalLinkComponent {
   @Input() link: string;
@@ -29,7 +32,7 @@ export class ExternalLinkComponent {
   constructor(private browser: SimpleBrowser) {}
 
   onLinkClick(url: string) {
-    // make sure if the url is valid and then open it in the browser (prevent problem in iOS)
+    // make sure if the url is valid and then open it in the browser (prevent issues in iOS)
     this.browser.open(new URL(url).href);
   }
 }
diff --git a/frontend/app/src/app/modules/data/elements/external-link.html b/frontend/app/src/app/modules/data/elements/external-link.html
index c4abb899..3078486a 100644
--- a/frontend/app/src/app/modules/data/elements/external-link.html
+++ b/frontend/app/src/app/modules/data/elements/external-link.html
@@ -12,4 +12,4 @@
   ~ You should have received a copy of the GNU General Public License along with
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
-<a (click)="onLinkClick(link)">{{ text }}<ion-icon name="open_in_browser"></ion-icon> </a>
+<a (click)="onLinkClick(link)">{{ text }}<ion-icon name="open_in_browser"></ion-icon></a>
diff --git a/frontend/app/src/app/modules/data/elements/favorite-button.component.ts b/frontend/app/src/app/modules/data/elements/favorite-button.component.ts
index f7116014..c7dd72dd 100644
--- a/frontend/app/src/app/modules/data/elements/favorite-button.component.ts
+++ b/frontend/app/src/app/modules/data/elements/favorite-button.component.ts
@@ -12,19 +12,24 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {SCIndexableThings} from '@openstapps/core';
 import {FavoritesService} from '../../favorites/favorites.service';
 import {Observable} from 'rxjs';
 import {map, take} from 'rxjs/operators';
+import {IonButton, IonIcon} from '@ionic/angular/standalone';
+import {AsyncPipe} from '@angular/common';
 
 /**
  * The button to add or remove a thing from favorites
  */
 @Component({
   selector: 'stapps-favorite-button',
-  templateUrl: './favorite-button.component.html',
-  styleUrls: ['./favorite-button.component.scss'],
+  templateUrl: 'favorite-button.html',
+  styleUrl: 'favorite-button.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [IonButton, IonIcon, AsyncPipe],
 })
 export class FavoriteButtonComponent {
   /**
@@ -63,7 +68,7 @@ export class FavoriteButtonComponent {
    * @param event A click event
    */
   async toggle(event: Event) {
-    // prevent additional effects e.g. router to be activated
+    // prevent additional effects e.g., router to be activated
     event.stopPropagation();
 
     this.isFavorite$.pipe(take(1)).subscribe(enabled => {
diff --git a/frontend/app/src/app/modules/data/elements/favorite-button.component.html b/frontend/app/src/app/modules/data/elements/favorite-button.html
similarity index 100%
rename from frontend/app/src/app/modules/data/elements/favorite-button.component.html
rename to frontend/app/src/app/modules/data/elements/favorite-button.html
diff --git a/frontend/app/src/app/modules/data/elements/favorite-button.component.scss b/frontend/app/src/app/modules/data/elements/favorite-button.scss
similarity index 100%
rename from frontend/app/src/app/modules/data/elements/favorite-button.component.scss
rename to frontend/app/src/app/modules/data/elements/favorite-button.scss
diff --git a/frontend/app/src/app/modules/data/elements/long-inline-text.component.ts b/frontend/app/src/app/modules/data/elements/long-inline-text.component.ts
index 41ee3434..49fd9e9e 100644
--- a/frontend/app/src/app/modules/data/elements/long-inline-text.component.ts
+++ b/frontend/app/src/app/modules/data/elements/long-inline-text.component.ts
@@ -12,23 +12,16 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 
-/**
- * TODO
- */
 @Component({
   selector: 'stapps-long-inline-text',
   templateUrl: 'long-inline-text.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class LongInlineTextComponent {
-  /**
-   * TODO
-   */
   @Input() size: number;
 
-  /**
-   * TODO
-   */
   @Input() text: string;
 }
diff --git a/frontend/app/src/app/modules/data/elements/long-inline-text.html b/frontend/app/src/app/modules/data/elements/long-inline-text.html
index aac2348e..d9af2439 100644
--- a/frontend/app/src/app/modules/data/elements/long-inline-text.html
+++ b/frontend/app/src/app/modules/data/elements/long-inline-text.html
@@ -14,14 +14,20 @@
   -->
 
 <span class="ion-hide-sm-up">
-  {{ text | slice: 0 : size }}
-  <span *ngIf="text.length > size" class="ion-hide-sm-up">…</span>
+  {{ text.slice(0, size) }}
+  @if (text.length > size) {
+    …
+  }
 </span>
 <span class="ion-hide-sm-down ion-hide-md-up">
-  {{ text | slice: 0 : size * 2 }}
-  <span *ngIf="text.length > size * 2" class="ion-hide-sm-down ion-hide-md-up"> … </span>
+  {{ text.slice(0, size * 2) }}
+  @if (text.length > size * 2) {
+    …
+  }
 </span>
 <span class="ion-hide-md-down">
-  {{ text | slice: 0 : size * 3 }}
-  <span *ngIf="text.length > size * 3" class="ion-hide-md-down">…</span>
+  {{ text.slice(0, size * 3) }}
+  @if (text.length > size * 3) {
+    …
+  }
 </span>
diff --git a/frontend/app/src/app/modules/data/elements/offers-detail.component.ts b/frontend/app/src/app/modules/data/elements/offers-detail.component.ts
index b9f7b321..c99d369e 100644
--- a/frontend/app/src/app/modules/data/elements/offers-detail.component.ts
+++ b/frontend/app/src/app/modules/data/elements/offers-detail.component.ts
@@ -55,5 +55,5 @@ import {FormatPipeModule, ParseIsoPipeModule} from 'ngx-date-fns';
   ],
 })
 export class OffersDetailComponent {
-  @Input() offers: Array<SCThingThatCanBeOfferedOffer<SCAcademicPriceGroup>>;
+  @Input() offers: SCThingThatCanBeOfferedOffer<SCAcademicPriceGroup>[];
 }
diff --git a/frontend/app/src/app/modules/data/elements/offers-detail.html b/frontend/app/src/app/modules/data/elements/offers-detail.html
index a32e4b0a..065a65e0 100644
--- a/frontend/app/src/app/modules/data/elements/offers-detail.html
+++ b/frontend/app/src/app/modules/data/elements/offers-detail.html
@@ -49,7 +49,7 @@
         </ion-grid>
       } @else if (offer.prices) {
         <ion-grid>
-          @for (group of offer.prices | keyvalue) {
+          @for (group of offer.prices | keyvalue; track $index) {
             <ion-row>
               @if (group[0] !== 'default') {
                 <ion-col>{{ 'data.detail.offers.' + group[0] | translate }} </ion-col>
diff --git a/frontend/app/src/app/modules/data/elements/rating.component.ts b/frontend/app/src/app/modules/data/elements/rating.component.ts
index 9149a555..56542c28 100644
--- a/frontend/app/src/app/modules/data/elements/rating.component.ts
+++ b/frontend/app/src/app/modules/data/elements/rating.component.ts
@@ -19,6 +19,9 @@ import {RatingProvider} from '../rating.provider';
 import {ratingAnimation} from './rating.animation';
 import {BehaviorSubject, filter, merge, mergeMap, of, ReplaySubject, withLatestFrom} from 'rxjs';
 import {catchError, map} from 'rxjs/operators';
+import {IonButton, IonIcon} from '@ionic/angular/standalone';
+import {AsyncPipe} from '@angular/common';
+import {TranslateModule} from '@ngx-translate/core';
 
 @Component({
   selector: 'stapps-rating',
@@ -26,6 +29,8 @@ import {catchError, map} from 'rxjs/operators';
   styleUrls: ['rating.scss'],
   animations: [ratingAnimation],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [IonButton, AsyncPipe, IonIcon, TranslateModule],
 })
 export class StappsRatingComponent {
   performRating = new BehaviorSubject(false);
diff --git a/frontend/app/src/app/modules/data/elements/rating.html b/frontend/app/src/app/modules/data/elements/rating.html
index 05cec835..cae9cd74 100644
--- a/frontend/app/src/app/modules/data/elements/rating.html
+++ b/frontend/app/src/app/modules/data/elements/rating.html
@@ -13,28 +13,28 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<ion-button
-  *ngIf="canBeRated | async"
-  fill="clear"
-  (click)="$event.stopPropagation(); performRating.next(true)"
-  [disabled]="wasAlreadyRated | async"
->
-  <ion-icon slot="icon-only" color="medium" name="thumbs_up_down"></ion-icon>
-</ion-button>
+@if (canBeRated | async) {
+  <ion-button
+    fill="clear"
+    (click)="$event.stopPropagation(); performRating.next(true)"
+    [disabled]="wasAlreadyRated | async"
+  >
+    <ion-icon slot="icon-only" color="medium" name="thumbs_up_down"></ion-icon>
+  </ion-button>
+}
 
-<div
-  class="rating-stars"
-  *ngIf="(performRating | async) && (wasAlreadyRated | async) !== true"
-  [@rating]="(userRating | async) === undefined ? 'abandoned' : 'rated'"
->
-  <ion-icon
-    [class.rated-value]="(userRating | async) === i"
-    *ngFor="let i of [5, 4, 3, 2, 1]"
-    (click)="$event.stopPropagation(); userRating.next(i)"
-    slot="icon-only"
-    size="32"
-    color="medium"
-    name="grade"
-  ></ion-icon>
-  <label class="thank-you">{{ 'ratings.thank_you' | translate }}</label>
-</div>
+@if ((performRating | async) && (wasAlreadyRated | async) !== true) {
+  <div class="rating-stars" [@rating]="(userRating | async) === undefined ? 'abandoned' : 'rated'">
+    @for (i of [5, 4, 3, 2, 1]; track i) {
+      <ion-icon
+        [class.rated-value]="(userRating | async) === i"
+        (click)="$event.stopPropagation(); userRating.next(i)"
+        slot="icon-only"
+        size="32"
+        color="medium"
+        name="grade"
+      ></ion-icon>
+    }
+    <label class="thank-you">{{ 'ratings.thank_you' | translate }}</label>
+  </div>
+}