item: keep request order

The item detailed view displays the requests made by users. The request
list should be sorted by creation date but isn't. This commit fix this
issue.

Closes rero/rero-ils#1314

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

projects/admin/src/app/class/items.ts

@@ -161,7 +161,7 @@ export class Item {
     ItemNoteType.PROVENANCE,
     ItemNoteType.CONDITION,
     ItemNoteType.PATRIMONIAL
-  ]
+  ];
 
   available: boolean;
   barcode: string;

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

@@ -47,23 +47,25 @@ <h1>{{ 'Barcode' | translate }} {{ record.metadata.barcode }}</h1>
         {{ 'Type' | translate }}:
       </dt>
       <dd class="col-sm-7 col-md-8 mb-0">
-        {{ record.metadata.item_type.pid | getRecord:'item_types':'field':'name' | async }}
+        {{ record.metadata.item_type.pid | getRecord:'item_types': 'field':'name' | async }}
       </dd>
       <!-- DOCUMENT -->
       <dt class="col-sm-3 offset-sm-2 offset-md-0">
         {{ 'Document' | translate }}:
       </dt>
       <dd class="col-sm-7 col-md-8 mb-0">
         <a [routerLink]="['/records', 'documents', 'detail', record.metadata.document.pid]">
-          {{ record.metadata.document.pid | getRecord:'documents':'field':'title' | async | mainTitle }}
+          {{ record.metadata.document.pid | getRecord:'documents': 'field' :'title' | async | mainTitle }}
         </a>
       </dd>
       <!-- LIBRARY -->
       <dt class="col-sm-3 offset-sm-2 offset-md-0">
         {{ 'Library' | translate }}:
       </dt>
       <dd class="col-sm-7 col-md-8 mb-0">
-        <ng-container *ngIf="library">{{ library.metadata.name }}</ng-container>
+        <ng-container *ngIf="location">
+          {{ location.metadata.library.pid | getRecord: 'libraries': 'field': 'name' | async }}
+        </ng-container>
       </dd>
       <!-- LOCATION -->
       <dt class="col-sm-3 offset-sm-2 offset-md-0">
@@ -145,7 +147,6 @@ <h3 translate>Issue data</h3>
             ></i>
             <strong translate>{{ note.type }}</strong>
           </dt>
-          <dd class="col-9 text-justify" [innerHTML]="note.content | nl2br"></dd>
         </div>
       </div>
       <div class="card-footer text-muted small">

projects/admin/src/app/record/detail-view/item-detail-view/item-detail-view.component.ts

@@ -15,11 +15,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { extractIdOnRef, RecordService } from '@rero/ng-core';
+import { RecordService } from '@rero/ng-core';
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
-import { forkJoin, Observable, Subscription } from 'rxjs';
-import { IssueItemStatus, Item, ItemNote, ItemNoteType } from '../../../class/items';
-import { LoanService } from '../../../service/loan.service';
+import { Observable, Subscription } from 'rxjs';
+import { IssueItemStatus, Item, ItemNote } from '../../../class/items';
 
 @Component({
   selector: 'admin-item-detail-view',
@@ -43,39 +42,21 @@ export class ItemDetailViewComponent implements DetailRecord, OnInit, OnDestroy
   /** Location record */
   location: any;
 
-  /** Library record */
-  library: any;
-
-  /** Number of requested items */
-  numberOfRequests: number;
-
   /** reference to IssueItemStatus */
   issueItemStatus = IssueItemStatus;
 
   /**
    * Constructor
-   * @param recordService - RecordService
-   * @param loanService - LoanService
+   * @param _recordService - RecordService
    */
   constructor(
-    private recordService: RecordService,
-    private loanService: LoanService
+    private _recordService: RecordService,
   ) {}
 
   ngOnInit() {
     this._recordObs = this.record$.subscribe( record => {
       this.record = record;
-      const numberOfRequest$ = this.loanService.numberOfRequests$(record.metadata.pid);
-      const locationRecord$ = this.recordService.getRecord('locations', record.metadata.location.pid);
-      forkJoin([numberOfRequest$, locationRecord$]).subscribe(
-        ([numberOfRequest, location]) => {
-          this.numberOfRequests = numberOfRequest;
-          this.location = location;
-          this.recordService.getRecord('libraries', extractIdOnRef(location.metadata.library.$ref)).subscribe(
-            library => this.library = library
-          );
-        }
-      );
+      this._recordService.getRecord('locations', record.metadata.location.pid, 1).subscribe(data => this.location = data);
     });
   }
 

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

@@ -14,59 +14,46 @@
    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="borrowedBy$ | async as borrowedBy">
-  <!-- Loan borrowed -->
-  <ng-container *ngIf="borrowedBy.length > 0">
-    <div class="card mt-2">
-      <div class="card-header">
-        <b>{{ 'Borrowed by' | translate }}</b>
-      </div>
+<ng-container *ngIf="borrowedBy.length > 0 || requestedBy.length > 0">
+  <div class="card mt-2">
+    <!-- Loan borrowed -->
+    <ng-container *ngIf="borrowedBy.length > 0">
+      <div class="card-header font-weight-bold" translate>Borrowed by</div>
       <div class="card-body">
         <div class="row mb-2">
-          <div class="col-4 font-weight-bold">{{ 'Patron' | translate }}</div>
-          <div class="col-4 font-weight-bold">{{ 'Renewal' | translate }}</div>
-          <div class="col-3 font-weight-bold">{{ 'Due date' | translate }}</div>
+          <div class="col-4 font-weight-bold" translate>Patron</div>
+          <div class="col-4 font-weight-bold" translate>Renewal</div>
+          <div class="col-3 font-weight-bold" translate>Due date</div>
         </div>
         <admin-item-transaction
           type="loan_borrow"
           [transaction]="borrowedBy[0]"
         ></admin-item-transaction>
       </div>
-    </div>
-  </ng-container>
-</ng-container>
-
-<ng-container *ngIf="requestedBy$ | async as requestedBy">
-  <!-- Loan requested -->
-  <ng-container *ngIf="requestedBy.length > 0">
-    <div class="card mt-2">
+    </ng-container>
+    <!-- Loan requested -->
+    <ng-container *ngIf="requestedBy.length > 0">
       <div class="card-header">
-        <ng-container *ngIf="requestedBy.length <= 1; else requests">
-          <b>{{ 'Request' | translate }}</b>
-        </ng-container>
-        <ng-template #requests>
-          <b>{{ 'Requests' | translate }}</b>
-        </ng-template>
-        <b> ({{ requestedBy.length }})</b>
-        <button class="btn btn-outline-primary btn-link btn-sm ml-2 float-right" (click)="addRequest(item.metadata.pid)">
-          <i class="fa fa-plus-square-o"></i> {{ 'Add' | translate }} ...
+        <b>{{ requestedBy.length | i18nPlural: {'=1': 'Request', 'other': 'Requests'} | translate }}</b>
+        <button class="btn btn-outline-primary btn-link btn-sm ml-2 float-right" (click)="addRequest()">
+          <i class="fa fa-plus-square-o"></i> {{ 'Add' | translate }} …
         </button>
       </div>
       <div class="card-body">
         <div class="row mb-2">
-          <div class="col-4 font-weight-bold">{{ 'Patron' | translate }}</div>
-          <div class="col-4 font-weight-bold">{{ 'Pick-up Location' | translate }}</div>
-          <div class="col-3 font-weight-bold">{{ 'Request date' | translate }}</div>
+          <div class="col-4 font-weight-bold" translate>Patron</div>
+          <div class="col-4 font-weight-bold" translate>Pick-up Location</div>
+          <div class="col-3 font-weight-bold" translate>Request date</div>
         </div>
         <admin-item-transaction
-          *ngFor="let request of requestedBy; let i = index"
+          *ngFor="let request of requestedBy"
           type="loan_request"
-          [background]="i % 2"
           [transaction]="request"
           [itemPid]="item.metadata.pid"
-          (removeRequest)="updateRequestList()"
+          (removeRequest)="deleteRequest(request)"
         ></admin-item-transaction>
       </div>
-    </div>
-  </ng-container>
+    </ng-container>
+  </div>
 </ng-container>
+

projects/admin/src/app/record/detail-view/item-detail-view/item-transactions/item-transactions.component.ts

@@ -17,7 +17,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { BsModalService } from 'ngx-bootstrap/modal';
 import { LoanService } from 'projects/admin/src/app/service/loan.service';
-import { Observable } from 'rxjs';
+import { forkJoin } from 'rxjs';
 import { first } from 'rxjs/operators';
 import { ItemRequestComponent } from '../../document-detail-view/item-request/item-request.component';
 
@@ -28,24 +28,18 @@ import { ItemRequestComponent } from '../../document-detail-view/item-request/it
 })
 export class ItemTransactionsComponent implements OnInit {
 
-  /**
-   * Item record
-   */
+  /** Item record */
   @Input() item: any;
 
-  /**
-   * Borrowed item
-   */
-  borrowedBy$: Observable<any>;
+  /** Borrowed loan */
+  borrowedBy: Array<any> = [];
 
-  /**
-   * Requested item(s)
-   */
-  requestedBy$: Observable<any>;
+  /** Requested loan(s) */
+  requestedBy: Array<any> = [];
 
   /**
    * Constructor
-   * @param loanService - LoanService
+   * @param _loanService - LoanService
    * @param _modalService - BsModalService
    */
   constructor(
@@ -57,27 +51,33 @@ export class ItemTransactionsComponent implements OnInit {
    * On init hook
    */
   ngOnInit() {
-    this.borrowedBy$ = this._loanService.borrowedBy$(this.item.metadata.pid);
-    this.requestedBy$ = this._loanService.requestedBy$(this.item.metadata.pid);
+    const borrowedBy$ = this._loanService.borrowedBy$(this.item.metadata.pid);
+    const requestedBy$ = this._loanService.requestedBy$(this.item.metadata.pid);
+    forkJoin([borrowedBy$, requestedBy$]).subscribe(
+      ([borrowedLoan, requestedLoans]) => {
+        this.borrowedBy = borrowedLoan;
+        this.requestedBy = requestedLoans;
+      }
+    );
   }
 
   /**
-   * Update request list
+   * Delete a request from the request list
+   * @param deletedRequest: The deletedRequest
    */
-  updateRequestList() {
-    this.requestedBy$ = this._loanService.requestedBy$(this.item.metadata.pid);
+  deleteRequest(deletedRequest: any) {
+    this.requestedBy = this.requestedBy.filter(request => request.id !== deletedRequest.id);
   }
 
   /**
-   * Add request on item
-   * @param itemPid - string
+   * Add request on this item
    */
-  addRequest(itemPid: string) {
+  addRequest() {
     const modalRef = this._modalService.show(ItemRequestComponent, {
-      initialState: { itemPid }
+      initialState: { itemPid: this.item.metadata.pid }
     });
     modalRef.content.onSubmit.pipe(first()).subscribe(value => {
-      this.updateRequestList();
+      this._loanService.requestedBy$(this.item.metadata.pid).subscribe(data => this.requestedBy = data);
     });
   }
 }

projects/admin/src/app/scss/styles.scss

@@ -200,6 +200,12 @@ json-schema-form {
   }
 }
 
+.card {
+  .card-header:not(:first-child) {
+    border-top: $card-border-width solid $card-border-color;
+  }
+}
+
 // Adapt detailed views to not use screen width
 .main-content{
   @extend .container;