circulation: circulation infos refactoring.

The message returned by the backend when a user is blocked has changed.
This commit adapts the UI to this change and display the error message
returned by the backend directly.
This commit also adds counter on tabs of the patron circulation detailed
page. Available counters are for checkin/checkout, pickup and pending
tabs.

Small correction on the template detail view.

Closes rero/rero-ils#1278
Closes rero/rero-ils#1281

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

projects/admin/src/app/circulation/checkin/checkin.component.html

@@ -31,12 +31,6 @@
     </div>
   </div>
 
-  <div class="row" *ngIf="patronInfo | patronBlockedMessage as message">
-    <div class="col">
-        <div class="alert alert-danger" role="alert">{{ message }}</div>
-    </div>
-  </div>
-
   <div class="row">
     <div class="col-md-12">
       <admin-circulation-items-list

projects/admin/src/app/circulation/patron/card/card.component.html

@@ -26,7 +26,7 @@
           <h3>
             <a [routerLink]="['/records', 'patrons','detail', patron.pid]">
               <span id="patron-last-name" *ngIf="patron.last_name">{{ patron.last_name }}</span>
-              <span id="patron-first-name" *ngIf="patron.first_name">, {{ patron.first_name }} </span>
+              <span id="patron-first-name" *ngIf="patron.first_name">, {{ patron.first_name }}</span>
             </a>
           </h3>
         </div>
@@ -38,32 +38,36 @@ <h3>
       </div>
       <div class="row">
         <div class="col-md-6">
-          <div>
-            <span id="patron-birth-date"
-              *ngIf="patron.birth_date">{{ patron.birth_date | dateTranslate:'mediumDate' }}</span>
-          </div>
-          <div>
-            <span id="patron-city" *ngIf="patron.city">{{ patron.city}}</span>
-          </div>
+          <div id="patron-birth-date">{{ patron.birth_date | dateTranslate:'mediumDate' }}</div>
+          <div id="patron-city">{{ patron.city }}</div>
         </div>
         <div class="col-md-6">
-          <div>
-            <span id="patron-type" *ngIf="patronType$ | async as patronType">{{ patronType }}</span>
-          </div>
-          <div>
-            <span id="patron-barcode">
-              {{ patron.patron.barcode }}
-            </span>
+          <div id="patron-type"
+               *ngIf="patron.patron.type.pid | getRecord: 'patron_types': 'string':'name' | async as patronTypeName"
+          >
+            {{ patronTypeName }}
           </div>
+          <div id="patron-barcode">{{ patron.patron.barcode }}</div>
         </div>
       </div>
     </div>
-      <!-- NOTES-->
-      <div *ngIf="notes && notes.length > 0" class="col alert alert-warning" role="alert">
-        <ng-container *ngFor="let note of notes">
-          <strong class="alert-heading">{{ note.type | translate }}</strong>
-          <p class="mb-0" [innerHTML]="note.content"></p>
-        </ng-container>
-      </div>
+  </div>
 
+  <!-- NOTES-->
+  <div *ngIf="patron.notes" class="alert alert-warning" role="alert">
+    <ng-container *ngFor="let note of patron.notes">
+      <strong class="alert-heading">{{ note.type.toString() | translate }}</strong>
+      <p class="mb-0" [innerHTML]="note.content | nl2br"></p>
+    </ng-container>
   </div>
+
+  <!-- Circulation message -->
+  <ng-container *ngIf="patron.circulation_informations">
+    <div *ngFor="let message of patron.circulation_informations.messages"
+         class="alert alert-{{ getBoootstrapColor(message.type) }}"
+         role="alert"
+         [innerHTML]="message.content | nl2br"
+    ></div>
+  </ng-container>
+
+</div>

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

@@ -15,56 +15,28 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { RecordService } from '@rero/ng-core';
-import { map } from 'rxjs/operators';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { User } from '../../../class/user';
+import { getBootstrapLevel } from '../../../utils/utils';
+
 
 @Component({
   selector: 'admin-circulation-patron-detailed',
   templateUrl: './card.component.html',
   styleUrls: ['./card.component.scss']
 })
-export class CardComponent implements OnInit {
+export class CardComponent {
   @Input() patron: User;
   @Output() clearPatron = new EventEmitter<User>();
-  patronType$: any;
-
-  constructor(
-    private recordService: RecordService,
-    private _sanitizer: DomSanitizer
-  ) { }
-
-  ngOnInit() {
-    if (this.patron) {
-      this.patronType$ = this.recordService.getRecord('patron_types', this.patron.patron.type.pid).pipe(
-        map(patronType => patronType.metadata.name)
-      );
-    }
-  }
 
   clear() {
     if (this.patron) {
       this.clearPatron.emit(this.patron);
     }
   }
-  /**
-   * Get the patron notes.
-   *
-   * It replace a new line to the corresponding html code.
-   * Allows to render html.
-   */
-  get notes(): Array<{ type: string, content: SafeHtml }> {
-    if (!this.patron || !this.patron.notes || this.patron.notes.length < 1) {
-      return null;
-    }
-    return this.patron.notes.map((note: any) => {
-      return {
-        type: note.type,
-        content: this._sanitizer.bypassSecurityTrustHtml(
-          note.content.replace('\n', '<br>'))
-      };
-    });
+
+  getBoootstrapColor(level: string): string {
+    return getBootstrapLevel(level);
+    return 'info';
   }
 }

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

@@ -21,15 +21,13 @@ import { ToastrService } from 'ngx-toastr';
 import { forkJoin, Subscription } from 'rxjs';
 import { Item, ItemAction, ItemNoteType, ItemStatus } from '../../../class/items';
 import { User } from '../../../class/user';
-import { PatronBlockedMessagePipe } from '../../../pipe/patron-blocked-message.pipe';
 import { ItemsService } from '../../../service/items.service';
 import { PatronService } from '../../../service/patron.service';
 import { UserService } from '../../../service/user.service';
 
 @Component({
   selector: 'admin-loan',
-  templateUrl: './loan.component.html',
-  providers: [PatronBlockedMessagePipe]
+  templateUrl: './loan.component.html'
 })
 export class LoanComponent implements OnInit, OnDestroy {
   public placeholder: string = this._translate.instant(
@@ -65,15 +63,13 @@ export class LoanComponent implements OnInit, OnDestroy {
    * @param _toastService: Toastr Service
    * @param _patronService: Patron Service
    * @param _userService: UserService
-   * @param _patronBlockedMessagePipe: PatronBlockingPipe
    */
   constructor(
     private _itemsService: ItemsService,
     private _translate: TranslateService,
     private _toastService: ToastrService,
     private _patronService: PatronService,
-    private _userService: UserService,
-    private _patronBlockedMessagePipe: PatronBlockedMessagePipe
+    private _userService: UserService
   ) {}
 
   ngOnInit() {
@@ -212,12 +208,14 @@ export class LoanComponent implements OnInit, OnDestroy {
                   this._translate.instant('Checkin')
                 );
               }
+              this.patron.decrementCirculationStatistic('loans');
               break;
             }
             case ItemAction.checkout: {
               this._displayCirculationNote(newItem, ItemNoteType.CHECKOUT);
               this.checkedOutItems.unshift(newItem);
               this.checkedInItems = this.checkedInItems.filter(currItem => currItem.pid !== newItem.pid);
+              this.patron.incrementCirculationStatistic('loans');
               break;
             }
             case ItemAction.extend_loan: {
@@ -236,23 +234,17 @@ export class LoanComponent implements OnInit, OnDestroy {
           errorMessage = err.error.message;
         }
         if (err.error.status === 403) {
-          // Specific case when user is blocked (for better user comprehension)
-          if (errorMessage !== '' && errorMessage.startsWith('BLOCKED USER')) {
-            const blockedMessage = this._patronBlockedMessagePipe.transform(this.patron);
-            this._toastService.error(
-              `${this._translate.instant('Checkout not possible.')} ${blockedMessage}`,
-              this._translate.instant('Circulation')
-            );
-          } else {
-            this._toastService.error(
-              this._translate.instant('Checkout is not allowed by circulation policy'),
-              this._translate.instant('Checkout')
-            );
-          }
+          const message = errorMessage || this._translate.instant('Checkout is not allowed by circulation policy');
+          this._toastService.error(
+            message,
+            this._translate.instant('Circulation'),
+            {disableTimeOut: true, closeButton: true, enableHtml: true}
+          );
         } else {
           this._toastService.error(
             this._translate.instant('An error occurred on the server: ') + errorMessage,
-            this._translate.instant('Circulation')
+            this._translate.instant('Circulation'),
+            {disableTimeOut: true, closeButton: true, enableHtml: true}
           );
         }
         this.searchText = '';

projects/admin/src/app/circulation/patron/main/main.component.html

@@ -25,12 +25,6 @@
     </div>
   </div>
 
-  <div class="col mb-4" *ngIf="patron | patronBlockedMessage as message">
-      <div class="alert alert-danger" role="alert">
-      {{ message }}
-      </div>
-  </div>
-
   <div class="col">
     <ul class="nav nav-tabs">
       <li class="nav-item">
@@ -39,32 +33,38 @@
           class="nav-link"
           routerLinkActive="active"
           [routerLinkActiveOptions]="{exact: true}"
-          [routerLink]="['/circulation', 'patron', patron.patron.barcode, 'loan']"
-          translate
-          >Checkin/Checkout</a
-        >
+          [routerLink]="['/circulation', 'patron', patron.patron.barcode, 'loan']">
+          {{ 'Checkin/Checkout' | translate }}
+          <span *ngIf="getCirculationStatistics('loans') > 0" class="badge badge-info font-weight-normal">
+            {{ getCirculationStatistics('loans') }}
+          </span>
+        </a>
       </li>
       <li class="nav-item">
         <a
           id="pick-up-tab"
           class="nav-link"
           routerLinkActive="active"
           [routerLinkActiveOptions]="{exact: true}"
-          [routerLink]="['/circulation', 'patron', patron.patron.barcode, 'pickup']"
-          translate
-          >To pick up</a
-        >
+          [routerLink]="['/circulation', 'patron', patron.patron.barcode, 'pickup']">
+          {{ 'To pick up' | translate }}
+          <span *ngIf="getCirculationStatistics('pickup') > 0" class="badge badge-info font-weight-normal">
+            {{ getCirculationStatistics('pickup') }}
+          </span>
+        </a>
       </li>
       <li class="nav-item">
         <a
           id="pending-tab"
           class="nav-link"
           routerLinkActive="active"
           [routerLinkActiveOptions]="{exact: true}"
-          [routerLink]="['/circulation', 'patron', patron.patron.barcode, 'pending']"
-          translate
-          >Pending</a
-        >
+          [routerLink]="['/circulation', 'patron', patron.patron.barcode, 'pending']">
+          {{ 'Pending' | translate }}
+          <span *ngIf="getCirculationStatistics('pending') > 0 as stat" class="badge badge-info font-weight-normal">
+            {{ getCirculationStatistics('pending') }}
+          </span>
+        </a>
       </li>
       <li class="nav-item">
         <a
@@ -84,7 +84,7 @@
           routerLinkActive="active"
           [routerLinkActiveOptions]="{exact: true}"
           [routerLink]="['/circulation', 'patron', patron.patron.barcode, 'fees']">
-          {{ 'Fees' }}
+          {{ 'Fees' | translate }}
           <span *ngIf="transactionsTotalAmount > 0" class="badge badge-warning font-weight-normal">
             {{ transactionsTotalAmount | currency: organisation.default_currency }}
           </span>