general: fix several UI issues.

Closes rero/rero-ils#1487
Fixes item link displayed on an overdue transaction. The link used the
`loan.pid` instead of `loan.item.pid`.

Closes rero/rero-ils#1488
Correct some translation problems on the detail document view (in the
description tab).

Close rero/rero-ils#1482
Updates the pickup counter when a 'ready to pickup' item is checked out.

Authored-by: Renaud Michotte <renaud.michotte@gmail.com>

projects/admin/src/app/circulation/patron/loan/loan.component.ts

@@ -32,28 +32,23 @@ export class LoanComponent implements OnInit, OnDestroy {
 
   /** Search text (barcode) entered in search input */
   public searchText = '';
-
   /** Current patron */
   public patron: User;
-
   /** Is loading */
   public isLoading = false;
-
   /** List of checked out items */
   public checkedOutItems = [];
-
   /** List of checked in items */
   public checkedInItems = [];
-
   /** Focus attribute of the search input */
   searchInputFocus = false;
-
   /** Library PID of the logged user */
   currentLibraryPid: string;
 
+  /** ready to pickup items */
+  private _pickupItems = [];
   /** Observable subscription */
   private _subscription = new Subscription();
-
   /** checkout list sort criteria */
   private _sortCriteria = '-transaction_date';
 
@@ -79,17 +74,24 @@ export class LoanComponent implements OnInit, OnDestroy {
       if (patron) {
         this.isLoading = true;
         this.patron.displayPatronMode = true;
-        this._patronService.getItems(patron.pid, this._sortCriteria).subscribe(items => {
-          // items is an array of brief item data (pid, barcode). For each one, we need to
+
+        const loanedItems$ = this._patronService.getItems(patron.pid, this._sortCriteria);
+        const pickupItems$ = this._patronService.getItemsPickup(patron.pid);
+        forkJoin([loanedItems$, pickupItems$]).subscribe(([loanedItems, pickupItems]) => {
+
+          // loanedItems is an array of brief item data (pid, barcode). For each one, we need to
           // call the detail item service to get full data about it
-          items.map((item: any) => item.loading = true);
-          this.checkedOutItems = items;
+          loanedItems.map((item: any) => item.loading = true);
+          this.checkedOutItems = loanedItems;
           this.isLoading = false;
-
           // for each checkedOutElement call the detail item service.
-          items.forEach((data: any, index) => {
-            this._patronService.getItem(data.barcode).subscribe(item => items[index] = item);
+          loanedItems.forEach((data: any, index) => {
+            this._patronService.getItem(data.barcode).subscribe(item => loanedItems[index] = item);
           });
+
+          // we need to know which items are ready to pickup to decrement the counter if a checkout
+          // operation is done on one of this items.
+          this._pickupItems = pickupItems;
         });
       }
     }));
@@ -217,6 +219,12 @@ export class LoanComponent implements OnInit, OnDestroy {
               this.checkedOutItems.unshift(newItem);
               this.checkedInItems = this.checkedInItems.filter(currItem => currItem.pid !== newItem.pid);
               this.patron.incrementCirculationStatistic('loans');
+              // check if items was ready to pickup. if yes, then we need to decrement the counter
+              const idx = this._pickupItems.findIndex(item => item.metadata.item_pid.value === newItem.pid);
+              if (idx > -1) {
+                this._pickupItems.splice(idx, 1);
+                this.patron.decrementCirculationStatistic('pickup');
+              }
               break;
             }
             case ItemAction.extend_loan: {

projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/overdue-transaction/overdue-transaction.component.ts

@@ -23,7 +23,7 @@ export class OverdueTransactionComponent implements OnInit {
   /** Load item informations if the transaction is linked to a loan */
   ngOnInit(): void {
     if (this.transaction && this.transaction.loan && this.transaction.loan.pid) {
-      this._recordService.getRecord('loans', this.transaction.pid).pipe(
+      this._recordService.getRecord('loans', this.transaction.loan.pid).pipe(
         map(data => data.metadata),
         mergeMap( data => this._recordService.getRecord('items', data.item_pid.value)),
         map(data => new Item(data.metadata))

projects/admin/src/app/circulation/patron/pickup/pickup.component.ts

@@ -23,14 +23,9 @@ import { PatronService } from '../../../service/patron.service';
 })
 export class PickupComponent implements OnInit {
 
-  /**
-   * Loans
-   */
+  /** Loans */
   loans: [];
-
-  /**
-   * Is loading
-   */
+  /** is the component is loading */
   isLoading = false;
 
   /**
@@ -39,9 +34,7 @@ export class PickupComponent implements OnInit {
    */
   constructor(private _patronService: PatronService) { }
 
-  /**
-   * Init
-   */
+  /** OnInit hook */
   ngOnInit() {
     this._patronService.currentPatron$.subscribe(patron => {
       if (patron) {

projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html

@@ -228,8 +228,8 @@ <h3 id="{{'doc-altgr-title-' + i}}">{{ altgr_title }}</h3>
             <ng-container *ngIf="record.metadata.seriesStatement">
               <ng-container *ngFor="let serie of getStatement(record.metadata.seriesStatement); first as isFirst; let i = index">
                 <dt class="col-sm-4 offset-sm-2 offset-md-0">
-                  <ng-container *ngIf="isFirst; else empty" translate>
-                    <span id="doc-series-statement-label">Series statement</span>
+                  <ng-container *ngIf="isFirst; else empty">
+                    <span id="doc-series-statement-label" translate>Series statement</span>
                   </ng-container>
                   <ng-template #empty>
                     &nbsp;
@@ -247,7 +247,7 @@ <h3 id="{{'doc-altgr-title-' + i}}">{{ altgr_title }}</h3>
                 Mode of issuance
               </dt>
               <dd id="doc-issuance" [ngClass]="ddCssClass">
-                {{ record.metadata.issuance.main_type }} / {{ record.metadata.issuance.subtype }}
+                {{ record.metadata.issuance.main_type | translate}} / {{ record.metadata.issuance.subtype }}
               </dd>
             </ng-container>
 
@@ -370,7 +370,9 @@ <h3 id="{{'doc-altgr-title-' + i}}">{{ altgr_title }}</h3>
                   Colors
                 </dt>
                 <dd id="doc-colors" [ngClass]="ddCssClass">
-                  {{ colors.join(", ") }}
+                  <ng-container *ngFor="let color of colors; last as isLast">
+                    {{ color | translate }}<ng-container *ngIf="!isLast">, </ng-container>
+                  </ng-container>
                 </dd>
               </ng-container>
             </ng-container>