From 343d03e647075033fa2af61822dcfa1b94bce034 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jovan=20Kruni=C4=87?= <jovan.krunic@gmail.com>
Date: Thu, 4 Jul 2024 16:04:11 +0200
Subject: [PATCH] feat: library account adjustments

Closes #214
---
 .../elements/paia-item/paiaitem.component.ts  | 19 ++++++++++++++-
 .../account/elements/paia-item/paiaitem.html  | 10 ++++++--
 .../account/elements/paia-item/paiaitem.scss  |  3 +++
 .../library/account/holds/holds-page.html     | 24 ++++++-------------
 frontend/app/src/app/modules/library/types.ts |  6 +++++
 frontend/app/src/assets/i18n/de.json          |  6 +++--
 frontend/app/src/assets/i18n/en.json          |  8 ++++---
 7 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/frontend/app/src/app/modules/library/account/elements/paia-item/paiaitem.component.ts b/frontend/app/src/app/modules/library/account/elements/paia-item/paiaitem.component.ts
index c44aac2d..427d3af9 100644
--- a/frontend/app/src/app/modules/library/account/elements/paia-item/paiaitem.component.ts
+++ b/frontend/app/src/app/modules/library/account/elements/paia-item/paiaitem.component.ts
@@ -14,7 +14,7 @@
  */
 
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {DocumentAction, PAIADocument, PAIADocumentStatus} from '../../../types';
+import {DocumentAction, PAIADocument, PAIADocumentStatus, PAIADocumentVisualStatus} from '../../../types';
 import {LibraryAccountService} from '../../library-account.service';
 
 @Component({
@@ -27,12 +27,15 @@ export class PAIAItemComponent {
 
   renewable: boolean;
 
+  visualStatus?: PAIADocumentVisualStatus;
+
   constructor(private readonly libraryAccountService: LibraryAccountService) {}
 
   @Input()
   set item(value: PAIADocument) {
     this._item = value;
     void this.setRenewable();
+    this.visualStatus = this.getVisualStatus(Number(this.item.status));
   }
 
   get item(): PAIADocument {
@@ -56,4 +59,18 @@ export class PAIAItemComponent {
     const isActive = await this.libraryAccountService.isActivePatron();
     this.renewable = isActive && Number(this.item.status) === PAIADocumentStatus.Held;
   }
+
+  private getVisualStatus(status: PAIADocumentStatus): PAIADocumentVisualStatus | undefined {
+    switch (status) {
+      case PAIADocumentStatus.Ordered: {
+        return {color: 'warning', status: status, statusText: 'ordered'};
+      }
+      case PAIADocumentStatus.Provided: {
+        return {color: 'success', status: status, statusText: 'ready'};
+      }
+      default: {
+        return undefined;
+      }
+    }
+  }
 }
diff --git a/frontend/app/src/app/modules/library/account/elements/paia-item/paiaitem.html b/frontend/app/src/app/modules/library/account/elements/paia-item/paiaitem.html
index f98bccd7..ab42d701 100644
--- a/frontend/app/src/app/modules/library/account/elements/paia-item/paiaitem.html
+++ b/frontend/app/src/app/modules/library/account/elements/paia-item/paiaitem.html
@@ -14,10 +14,16 @@
 -->
 
 <ion-item>
-  <!-- TODO: text not selectable in Chrome, bugfix needed https://github.com/ionic-team/ionic-framework/issues/24956 -->
   <ion-label class="ion-text-wrap">
     @if (item.about) {
-      <h2 class="name">{{ item.about }}</h2>
+      <h2 class="name">
+        @if (visualStatus) {
+          <ion-badge [color]="visualStatus.color" slot="start">
+            {{ 'library.account.pages' + '.' + listName + '.' + visualStatus.statusText | translate }}
+          </ion-badge>
+        }
+        {{ item.about }}
+      </h2>
     }
     @for (property of propertiesToShow; track property) {
       @if (item[property]) {
diff --git a/frontend/app/src/app/modules/library/account/elements/paia-item/paiaitem.scss b/frontend/app/src/app/modules/library/account/elements/paia-item/paiaitem.scss
index 7f595d7f..317a9763 100644
--- a/frontend/app/src/app/modules/library/account/elements/paia-item/paiaitem.scss
+++ b/frontend/app/src/app/modules/library/account/elements/paia-item/paiaitem.scss
@@ -12,3 +12,6 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
+ion-badge {
+  vertical-align: bottom;
+}
diff --git a/frontend/app/src/app/modules/library/account/holds/holds-page.html b/frontend/app/src/app/modules/library/account/holds/holds-page.html
index f3d91764..39b423cf 100644
--- a/frontend/app/src/app/modules/library/account/holds/holds-page.html
+++ b/frontend/app/src/app/modules/library/account/holds/holds-page.html
@@ -35,23 +35,13 @@
       @switch (activeSegment) {
         @case ('orders') {
           @for (hold of paiaDocuments; track hold) {
-            @if (toNumber(hold.status) === paiaDocumentStatus.Provided) {
-              <stapps-paia-item
-                [item]="hold"
-                [propertiesToShow]="['label', 'storage']"
-                (documentAction)="onDocumentAction($event)"
-                listName="holds"
-              >
-              </stapps-paia-item>
-            } @else {
-              <stapps-paia-item
-                [item]="hold"
-                [propertiesToShow]="['label']"
-                (documentAction)="onDocumentAction($event)"
-                listName="holds"
-              >
-              </stapps-paia-item>
-            }
+            <stapps-paia-item
+              [item]="hold"
+              [propertiesToShow]="['label', 'storage']"
+              (documentAction)="onDocumentAction($event)"
+              listName="holds"
+            >
+            </stapps-paia-item>
           }
         }
         @case ('reservations') {
diff --git a/frontend/app/src/app/modules/library/types.ts b/frontend/app/src/app/modules/library/types.ts
index 15e119e1..8b651c1b 100644
--- a/frontend/app/src/app/modules/library/types.ts
+++ b/frontend/app/src/app/modules/library/types.ts
@@ -88,3 +88,9 @@ export interface DocumentAction {
   action: 'cancel' | 'renew';
   doc: PAIADocument;
 }
+
+export interface PAIADocumentVisualStatus {
+  color: 'warning' | 'success';
+  status: PAIADocumentStatus;
+  statusText: 'ordered' | 'ready';
+}
diff --git a/frontend/app/src/assets/i18n/de.json b/frontend/app/src/assets/i18n/de.json
index e5972956..48a1a1c1 100644
--- a/frontend/app/src/assets/i18n/de.json
+++ b/frontend/app/src/assets/i18n/de.json
@@ -336,13 +336,15 @@
             "title": "Titel",
             "about": "Mehr Informationen",
             "label": "Signatur",
-            "starttime": "Übermittelt am",
+            "starttime": "Vorgemerkt am",
             "endtime": "Abzuholen bis",
             "storage": "Abholtheke",
             "queue": "Position in der Warteschlange"
           },
           "holds": "Bestellungen",
-          "reservations": "Vormerkungen"
+          "reservations": "Vormerkungen",
+          "ordered": "Bestellt",
+          "ready": "Abholbereit"
         },
         "checked_out": {
           "title": "Deine Ausleihen",
diff --git a/frontend/app/src/assets/i18n/en.json b/frontend/app/src/assets/i18n/en.json
index 6f3c9c37..66af8a05 100644
--- a/frontend/app/src/assets/i18n/en.json
+++ b/frontend/app/src/assets/i18n/en.json
@@ -336,13 +336,15 @@
             "title": "Title",
             "about": "More information",
             "label": "Shelfmark",
-            "starttime": "Submitted at",
+            "starttime": "Reserved on",
             "endtime": "Available for pickup until",
-            "storage": "Pick-up counter",
+            "storage": "Pickup counter",
             "queue": "Position in the queue"
           },
           "holds": "orders",
-          "reservations": "reservations"
+          "reservations": "reservations",
+          "ordered": "Ordered",
+          "ready": "Ready for pickup"
         },
         "checked_out": {
           "title": "checked out items",