refactor: improve library account views

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

@@ -1,29 +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.profile.title' | translate | titlecase
-    }}</ion-title>
-  </ion-toolbar>
-</ion-header>
-<ion-content>
-  <ion-grid *ngIf="patron">
-    <ng-container *ngFor="let property of propertiesToShow">
-      <ion-row *ngIf="patron[property]">
-        <ion-col>
-          {{
-            'library.account.pages.profile.labels' + '.' + property
-              | translate
-              | titlecase
-          }}:
-        </ion-col>
-        <ion-col>
-          {{ patron[property] }}
-        </ion-col>
-      </ion-row>
-    </ng-container>
-  </ion-grid>
-</ion-content>

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

@@ -4,11 +4,11 @@ import {PAIAPatron} from '../../types';
 
 @Component({
   selector: 'app-profile',
-  templateUrl: './profile-page.component.html',
-  styleUrls: ['./profile-page.component.scss'],
+  templateUrl: './profile-page.html',
+  styleUrls: ['./profile-page.scss'],
 })
 export class ProfilePageComponent {
-  patron: PAIAPatron;
+  patron?: PAIAPatron;
 
   propertiesToShow: (keyof PAIAPatron)[] = [
     'name',
@@ -23,9 +23,8 @@ export class ProfilePageComponent {
   async ionViewWillEnter(): Promise<void> {
     try {
       this.patron = await this.libraryAccountService.getProfile();
-      console.log(this.patron);
     } catch {
-      // TODO: error handling
+      await this.libraryAccountService.handleError();
     }
   }
 }

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

@@ -0,0 +1,41 @@
+<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.profile.title' | translate | titlecase
+    }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ion-card *ngIf="patron; else loading">
+    <ion-card-content>
+      <ion-grid>
+        <ng-container *ngFor="let property of propertiesToShow">
+          <ion-row *ngIf="patron[property]">
+            <ion-col>
+              {{
+                'library.account.pages.profile.labels' + '.' + property
+                  | translate
+              }}:
+            </ion-col>
+            <ion-col>
+              <ng-container *ngIf="!['expires'].includes(property); else date">
+                {{ patron[property] }}
+              </ng-container>
+              <ng-template #date>
+                {{ patron[property] | amDateFormat: 'll' }}
+              </ng-template>
+            </ion-col>
+          </ion-row>
+        </ng-container>
+      </ion-grid>
+    </ion-card-content>
+  </ion-card>
+  <ng-template #loading>
+    <stapps-skeleton-simple-card [title]="false" [lines]="4">
+    </stapps-skeleton-simple-card>
+  </ng-template>
+</ion-content>