rero · zannkukai · Apr 25, 2022 · Apr 13, 2022
diff --git a/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.css b/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.css
diff --git a/...ects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.html b/...ects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.html
@@ -14,50 +14,70 @@
   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/>.
 -->
-<div class="row col">
-  <div class="log-date">
-    <button
-      id="circulation-history-{{ record.metadata.pid }}"
-      type="button"
-      class="pl-0 pr-2 pt-0 btn btn-toogle"
-      (click)="isCollapsed = !isCollapsed"
-      [attr.aria-expanded]="!isCollapsed"
-      aria-controls="collapseEvent"
-    >
-      <i class="fa pr-0" [ngClass]="{ 'fa-caret-right': isCollapsed, 'fa-caret-down': !isCollapsed }"></i>
-    </button>
-    {{ record.metadata.date | dateTranslate :'shortDate' }}
-    {{ record.metadata.date | dateTranslate :'mediumTime' }}
-  </div>
-  <div class="log-action text-bold">
-    {{ record.metadata.loan.trigger | translate }}
-  </div>
-  <div class="log-library">
-    <ng-container *ngIf="record.metadata.loan.transaction_location; else noLibrary">
-      <ng-container *ngIf="record.metadata.loan.transaction_location.pid | getRecord : 'locations' | async as location">
-        {{ location.metadata.library.pid | getRecord : 'libraries' : 'field' : 'name' | async }}
+<div class="transaction-log pt-2 pb-1 position-relative" [class.highlight]="isHighlight" [class.border-top]="separator">
+  <button type="button" class="btn-show-more"
+          [ngClass]="{'btn-expanded': !isCollapsed, 'btn-collapsed': isCollapsed}"
+          (click)="isCollapsed = !isCollapsed"
+          [attr.aria-expanded]="!isCollapsed" aria-controls="collapse">
+  </button>
+  <div class="container-fluid pl-0">
+    <dl class="row my-0 text-muted">
+    <dd class="col-2 small">
+      <div class="transaction-date">{{ record.metadata.date | dateTranslate :'shortDate' }}</div>
+      <div class="transaction-time">{{ record.metadata.date | dateTranslate :'mediumTime' }}</div>
+    </dd>
+    <dd class="col-2 transaction-trigger">
+      <span class="badge badge-pill badge-primary">{{ record.metadata.loan.trigger | translate }}</span>
+    </dd>
+    <!-- transaction library -->
+    <dt class="col-2 label-title font-weight-bold transaction-library" [collapse]="isCollapsed" translate>Library</dt>
+    <dd [ngClass]="{
+      'col-6': !isCollapsed,
+      'col-5 transaction-library': isCollapsed
+    }">
+      <ng-container *ngIf="record.metadata.loan.transaction_location; else noLibrary">
+        <ng-container *ngIf="record.metadata.loan.transaction_location.pid | getRecord : 'locations' | async as location">
+          {{ location.metadata.library.pid | getRecord : 'libraries' : 'field' : 'name' | async }}
+        </ng-container>
       </ng-container>
-    </ng-container>
-    <ng-template #noLibrary>---</ng-template>
-  </div>
-  <div class="log-patron">
-    <ng-container *ngIf="record.metadata.loan.patron.pid; else anonymous">
-      <ng-container *ngIf="record.metadata.loan.patron.pid | getRecord : 'patrons' | async as patron">
-        <a [routerLink]="['/circulation', 'patron', patron.metadata.patron.barcode[0]]" (click)="closeDialog()">
-          {{ patron.metadata.last_name }}, {{ patron.metadata.first_name }}
-        </a>
+      <ng-template #noLibrary>
+        <span class="no-data">---</span>
+      </ng-template>
+    </dd>
+    <!-- pickup location -->
+    <dt class="offset-4 col-2 label-title font-weight-bold transaction-location" [collapse]="isCollapsed" translate>Location</dt>
+    <dd class="col-6" [collapse]="isCollapsed">{{ record.metadata.loan.pickup_location.name }}</dd>
+    <!-- related patron -->
+    <dt class="offset-4 col-2 label-title font-weight-bold transaction-patron" [collapse]="isCollapsed" translate>Patron</dt>
+    <dd [ngClass]="{
+      'col-6': !isCollapsed,
+      'col-3 transaction-patron': isCollapsed
+    }">
+      <ng-container *ngIf="record.metadata.loan.patron.pid; else anonymous">
+        <ng-container *ngIf="record.metadata.loan.patron.pid | getRecord : 'patrons' | async as patron">
+          <a [routerLink]="['/circulation', 'patron', patron.metadata.patron.barcode[0]]" (click)="closeDialog()">
+            {{ patron.metadata.last_name }}, {{ patron.metadata.first_name }}
+          </a>
+        </ng-container>
       </ng-container>
-    </ng-container>
-    <ng-template #anonymous>
-      {{ 'Patron type' | translate }}: {{ record.metadata.loan.patron.type }}
-    </ng-template>
+      <ng-template #anonymous>
+        {{ 'Patron type' | translate }}: {{ record.metadata.loan.patron.type }}
+      </ng-template>
+    </dd>
+    <!-- operator -->
+    <dt class="offset-4 col-2 label-title font-weight-bold transaction-operator" [collapse]="isCollapsed" translate>Operator</dt>
+    <dd class="col-6" [collapse]="isCollapsed">{{ record.metadata.user_name }}</dd>
+    <!-- debug information -->
+    <pre class="offset-4 col-8" [hidden]="!debugMode">{{ record | json }}</pre>
+    </dl>
   </div>
+  <!-- debug mode button -->
+  <button class="btn btn-sm btn-outline-warning d-flex p-2 debug-button"
+          *ngIf="canUseDebugMode && !isCollapsed"
+          [class.btn-hover]="debugMode"
+          (click)="debugMode=!debugMode">
+    <i class="fa fa-bug pr-1"></i>
+    <i class="fa" [ngClass]="debugMode ? 'fa-toggle-on' : 'fa-toggle-off'"></i>
+  </button>
 </div>
-<div id="circulation-history-{{ record.metadata.pid }}" [collapse]="isCollapsed" [isAnimated]="true" class="col-lg-12 pl-3">
-  <dl class="row pl-1">
-    <dt class="col-2 mb-0" translate>Pickup location</dt>
-    <dd class="col-10 mb-0 pl-1">{{ record.metadata.loan.pickup_location.name }}</dd>
-    <dt class="col-2 mb-0" translate>Operator</dt>
-    <dd class="col-10 mb-0 pl-1">{{ record.metadata.user_name }}</dd>
-  </dl>
-</div>
+
diff --git a/...ects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.scss b/...ects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.scss
@@ -0,0 +1,89 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2021 RERO
+ * Copyright (C) 2022 UCLouvain
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * 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/>.
+ */
+
+@import '~bootstrap/scss/_functions';
+@import '~bootstrap/scss/_variables';
+
+.transaction-log {
+  display: flex;
+  position: relative;
+
+  &:before {
+    content: "";
+    background-color: $border-color;
+    position: absolute;
+    left: 0.85rem;
+    top: 0;
+    width: 1px;
+    height: 100%;
+    z-index: 1;
+  }
+
+  &.highlight .btn-show-more{
+    background-color: theme-color-level('info', -10);
+    border-color: $info;
+  }
+
+  &:hover {
+    background-color: $light !important;
+    border-top: $border-width solid $border-color;
+    border-bottom: $border-width solid $border-color;
+  }
+
+  .btn-show-more{
+    z-index: 2;
+  }
+
+  *[class^='transaction-'], *[class*=' transaction-'] {
+    &:before {
+      font-family: 'FontAwesome';
+      font-weight: 100;
+      display: inline-block;
+      min-width: 20px;
+    }
+  }
+
+  .transaction-date:before {
+    content: "\f133";
+  }
+  .transaction-time:before{
+    content: "\f017";
+  }
+  .transaction-trigger {
+    font-variant: small-caps;
+  }
+  .transaction-library:before {
+    content: "\f0ac";
+  }
+  .transaction-location:before {
+    content: "\f041";
+  }
+  .transaction-patron:before {
+    content: "\f007";
+  }
+  .transaction-operator:before {
+    content: "\f2be";
+  }
+
+  .debug-button{
+    position: absolute;
+    top: map-get($spacers, 1);
+    right: map-get($spacers, 1);
+  }
+}
+
diff --git a/...s/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.spec.ts b/...s/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.spec.ts
@@ -20,6 +20,8 @@ import { TranslateModule } from '@ngx-translate/core';
 import { DateTranslatePipe, RecordModule } from '@rero/ng-core';
 import { BsLocaleService } from 'ngx-bootstrap/datepicker';
 import { BsModalService } from 'ngx-bootstrap/modal';
+import { UserService } from '@rero/shared';
+import { userTestingService } from 'projects/admin/tests/utils';
 import { CirculationLogComponent } from './circulation-log.component';
 
 
@@ -79,7 +81,11 @@ describe('CirculationLogComponent', () => {
         TranslateModule.forRoot(),
         RecordModule
       ],
-      providers: [ BsModalService, BsLocaleService ]
+      providers: [
+          { provide: UserService, useValue: userTestingService },
+          BsModalService,
+          BsLocaleService
+      ]
     })
     .compileComponents();
   });

diff --git a/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.ts b/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.ts
@@ -15,22 +15,50 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { UserService } from '@rero/shared';
 
 @Component({
   selector: 'admin-circulation-log',
   templateUrl: './circulation-log.component.html',
-  styleUrls: ['./circulation-log.component.css']
+  styleUrls: ['./circulation-log.component.scss']
 })
 export class CirculationLogComponent {
+
+  // COMPONENT ATTRIBUTES =====================================================
   /** Operation log record */
   @Input() record: any;
+  /** Is the log should be highligthed */
+  @Input() isHighlight = false;
+  /** Is the transaction must be separated from sibling elements */
+  @Input() separator = false;
 
   /** Event for close dialog */
   @Output() closeDialogEvent  = new EventEmitter();
 
   /** Circulation informations is collapsed */
   isCollapsed = true;
+  /** debugMode */
+  debugMode = false;
+
+  // GETTER & SETTER ==========================================================
+  /**
+   * Is the debug mode could be activated ?
+   * @returns True if the debug mode can be enabled and switched
+   */
+  get canUseDebugMode(): boolean {
+    return this._userService.user.isSystemLibrarian;
+  }
+
+  // CONSTRUCTOR & HOOKS ======================================================
+  /**
+   * Constructor
+   * @param _userService - UserService
+   */
+  constructor(
+    private _userService: UserService
+  ) {  }
 
+  // COMPONENT FUNCTIONS ======================================================
   /** Close dialog */
   closeDialog(): void {
     this.closeDialogEvent.emit(null);

diff --git a/projects/admin/src/app/record/circulation-logs/circulation-logs.component.html b/projects/admin/src/app/record/circulation-logs/circulation-logs.component.html
@@ -26,24 +26,36 @@ <h5 class="modal-title" translate>Circulation history</h5>
       <div class="modal-body overflow-auto overflow-max-size">
         <ng-container *ngIf="loadedRecord; else loaded">
           <ul *ngIf="recordTotals > 0; else noRecord" class="list-unstyled mx-2 mb-0">
-            <li *ngFor="let record of records; let index = index" class="py-1" [ngClass]="{ 'bg-light': index % 2 }">
-              <admin-circulation-log [record]="record" (closeDialogEvent)="closeDialog()"></admin-circulation-log>
-            </li>
+            <ng-container *ngFor="let record of records; first as isFirst; let idx = index">
+              <div class="transactionDate" *ngIf="isFirst || !isSamePeriod(record, records[idx-1])">
+                {{ record.metadata.date | dateTranslate :'MMMM Y' | titlecase }}
+              </div>
+              <admin-circulation-log
+                [record]="record"
+                [isHighlight]="record.metadata.loan.pid === highligthedLoanPid"
+                [separator]="!isSamePeriod(record, records[idx-1], 'day')"
+                (closeDialogEvent)="closeDialog()"
+                (mouseenter)="mouseEventTransaction(record, $event)"
+                (mouseleave)="highligthedLoanPid=null"
+              ></admin-circulation-log>
+            </ng-container>
           </ul>
-          <ng-container *ngIf="isLinkShowMore">
-            <button type="button" id="show-more-items-{{ resourcePid }}" class="btn btn-link pl-1" (click)="showMore()">
-              <i class="fa fa-arrow-circle-o-down"></i> {{ 'Show more' | translate }}
-            </button>
-            <small *ngIf="isLinkShowMore">({{ hiddenOperationLogs }})</small>
-          </ng-container>
-          <ng-template #noRecord>
-            {{ 'No history for this item' | translate }}
-          </ng-template>
         </ng-container>
-        <ng-template #loaded>
-          {{ 'loading in progress' | translate }}
-        </ng-template>
+      </div>
+      <div class="modal-footer py-1 justify-content-start">
+        <ng-container *ngIf="loadedRecord && isLinkShowMore">
+          <button type="button" id="show-more-items-{{ resourcePid }}" class="btn btn-link pl-1" (click)="showMore()">
+            <i class="fa fa-arrow-circle-o-down"></i> {{ 'Show more' | translate }}
+          </button>
+          <small *ngIf="isLinkShowMore">({{ hiddenTransactionLabel }})</small>
+        </ng-container>
       </div>
     </div>
   </div>
 </div>
+<ng-template #noRecord>
+  {{ 'No history for this item' | translate }}
+</ng-template>
+<ng-template #loaded>
+  {{ 'loading in progress' | translate }}
+</ng-template>
diff --git a/...ation-logs/circulation-logs.component.css → ...tion-logs/circulation-logs.component.scss b/...ation-logs/circulation-logs.component.css → ...tion-logs/circulation-logs.component.scss
@@ -15,6 +15,26 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+@import '~bootstrap/scss/_functions';
+@import '~bootstrap/scss/_variables';
+
 .overflow-max-size {
-  max-height: 600px;
+  max-height: 750px;
+}
+
+
+.transactionDate {
+  border-top: $border-width solid $border-color;
+  border-bottom: $border-width solid $border-color;
+  padding-top: map-get($spacers, 2);
+  padding-bottom: map-get($spacers, 2);
+  background-color: $light;
+
+  &:before {
+    font-family: 'FontAwesome';
+    font-weight: 100;
+    content: " \f073";
+    margin-left: map-get($spacers, 2);
+    margin-right: map-get($spacers, 3);
+  }
 }