refactor: improve library account views

src/app/modules/library/account/fines/fines-page.component.html

@@ -1,42 +0,0 @@
-<ion-header>
-  <ion-toolbar color="primary">
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-      <ion-menu-button></ion-menu-button>
-    </ion-buttons>
-    <ion-title>{{
-      'library.account.pages.fines.title' | translate | titlecase
-    }}</ion-title>
-  </ion-toolbar>
-</ion-header>
-<ion-content>
-  <ion-card *ngFor="let fine of fines" class="bold-header">
-    <ion-card-header *ngIf="fine.about">{{ fine.about }}</ion-card-header>
-    <ion-card-content>
-      <ion-grid *ngFor="let property of additionalPropertiesToShow">
-        <ion-row *ngIf="fine[property]">
-          <ion-col>
-            {{
-              'library.account.pages.fines.labels' + '.' + property
-                | translate
-                | titlecase
-            }}:</ion-col
-          >
-          <ion-col width-60 text-right>{{ fine[property] }}</ion-col>
-        </ion-row>
-      </ion-grid>
-    </ion-card-content>
-  </ion-card>
-  <ion-grid *ngIf="amount">
-    <ion-row *ngIf="amount">
-      <ion-col>
-        {{
-          'library.account.pages.fines.labels.amount' | translate | titlecase
-        }}:
-      </ion-col>
-      <ion-col>
-        {{ amount }}
-      </ion-col>
-    </ion-row>
-  </ion-grid>
-</ion-content>

src/app/modules/library/account/fines/fines-page.component.ts

@@ -1,38 +1,24 @@
 import {Component} from '@angular/core';
 import {LibraryAccountService} from '../library-account.service';
-import {PAIAFee, PAIAFees} from '../../types';
+import {PAIAFee} from '../../types';
 
 @Component({
   selector: 'app-fines',
-  templateUrl: './fines-page.component.html',
-  styleUrls: ['./fines-page.component.scss'],
+  templateUrl: './fines-page.html',
+  styleUrls: ['./fines-page.scss'],
 })
 export class FinesPageComponent {
-  amount: string | undefined;
-
-  additionalPropertiesToShow: (keyof PAIAFee)[] = [
-    'item',
-    'date',
-    'feetype',
-    'feeid',
-  ];
+  amount?: string;
 
   fines: PAIAFee[];
 
   constructor(private readonly libraryAccountService: LibraryAccountService) {}
 
   async ionViewWillEnter(): Promise<void> {
-    let fees: PAIAFees;
-    try {
-      fees = await this.libraryAccountService.getFees();
-      this.amount = fees.amount;
-      this.fines = this.cleanUp(fees.fee);
-    } catch {
-      // TODO: error handling
-    }
+    await this.fetchItems();
   }
 
-  private cleanUp(fines: PAIAFee[]): PAIAFee[] {
+  private async cleanUp(fines: PAIAFee[]): Promise<PAIAFee[]> {
     for (const fine of fines) {
       for (const property in fine) {
         // remove properties with "null" included
@@ -43,4 +29,16 @@ export class FinesPageComponent {
     }
     return fines;
   }
+
+  async fetchItems() {
+    try {
+      const fees = await this.libraryAccountService.getFees();
+      if (fees) {
+        this.amount = fees.amount;
+        this.fines = await this.cleanUp(fees.fee);
+      }
+    } catch {
+      await this.libraryAccountService.handleError();
+    }
+  }
 }

src/app/modules/library/account/fines/fines-page.html

@@ -0,0 +1,40 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>{{
+      'library.account.pages.fines.title' | translate | titlecase
+    }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ion-list *ngIf="fines; else loading">
+    <stapps-fee-item *ngFor="let fine of fines" [fee]="fine"></stapps-fee-item>
+  </ion-list>
+  <ng-template #loading>
+    <stapps-skeleton-list-item
+      *ngFor="let _ of [].constructor(2)"
+      hideThumbnail="true"
+    >
+    </stapps-skeleton-list-item>
+  </ng-template>
+  <ion-grid>
+    <ion-row *ngIf="amount; else amount_loading" class="ion-float-right">
+      <ion-col size="auto">
+        {{ 'library.account.pages.fines.labels.total_amount' | translate }}:
+      </ion-col>
+      <ion-col size="auto">
+        {{ amount }}
+      </ion-col>
+    </ion-row>
+    <ng-template #amount_loading>
+      <ion-row class="ion-float-right">
+        <ion-col size="auto">
+          <ion-skeleton-text animated style="width: 100px"></ion-skeleton-text>
+        </ion-col>
+      </ion-row>
+    </ng-template>
+  </ion-grid>
+</ion-content>