Skip to content

Commit

Permalink
transactions: better transactions history display.
Browse files Browse the repository at this point in the history
Improves the item transaction history display to highligh transactions
links (all transactions related to the same loan) and improves look and
feel.

Co-authored-by: Renaud Michotte <renaud.michotte@gmail.com>
  • Loading branch information
zannkukai committed Apr 21, 2022
1 parent 928d243 commit 36ba78c
Show file tree
Hide file tree
Showing 8 changed files with 285 additions and 109 deletions.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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>

Original file line number Diff line number Diff line change
@@ -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);
}
}

Original file line number Diff line number Diff line change
Expand Up @@ -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';


Expand Down Expand Up @@ -79,7 +81,11 @@ describe('CirculationLogComponent', () => {
TranslateModule.forRoot(),
RecordModule
],
providers: [ BsModalService, BsLocaleService ]
providers: [
{ provide: UserService, useValue: userTestingService },
BsModalService,
BsLocaleService
]
})
.compileComponents();
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
Loading

0 comments on commit 36ba78c

Please sign in to comment.