feat: add library account screens

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

@@ -0,0 +1,42 @@
+<ion-header>
+  <ion-toolbar>
+    <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

@@ -0,0 +1,46 @@
+import {Component} from '@angular/core';
+import {LibraryAccountService} from '../library-account.service';
+import {PAIAFee, PAIAFees} from '../../types';
+
+@Component({
+  selector: 'app-fines',
+  templateUrl: './fines-page.component.html',
+  styleUrls: ['./fines-page.component.scss'],
+})
+export class FinesPageComponent {
+  amount: string | undefined;
+
+  additionalPropertiesToShow: (keyof PAIAFee)[] = [
+    'item',
+    'date',
+    'feetype',
+    'feeid',
+  ];
+
+  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
+    }
+  }
+
+  private cleanUp(fines: PAIAFee[]): PAIAFee[] {
+    for (const fine of fines) {
+      for (const property in fine) {
+        // remove properties with "null" included
+        if (fine[<keyof PAIAFee>property]?.includes('null')) {
+          delete fine.item;
+        }
+      }
+    }
+    return fines;
+  }
+}