primeng: admin loans

Co-Authored-by: Johnny Mariéthoz <Johnny.Mariethoz@rero.ch> Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>
rero · Dec 10, 2024 · 6175a39 · 6175a39
1 parent b6a0329
commit 6175a39
Show file tree

Hide file tree

Showing 20 changed files with 188 additions and 487 deletions.
diff --git a/projects/admin/src/app/app.module.ts b/projects/admin/src/app/app.module.ts
@@ -81,7 +81,6 @@ import { VendorBriefViewComponent } from './record/brief-view/vendor-brief-view.
 import { CirculationLogLoanComponent } from './record/circulation-logs/circulation-log/circulation-log-loan/circulation-log-loan.component';
 import { CirculationLogNotificationComponent } from './record/circulation-logs/circulation-log/circulation-log-notification/circulation-log-notification.component';
 import { CirculationLogComponent } from './record/circulation-logs/circulation-log/circulation-log.component';
-import { CirculationLogsDialogComponent } from './record/circulation-logs/circulation-logs-dialog.component';
 import { CirculationLogsComponent } from './record/circulation-logs/circulation-logs.component';
 import { CirculationStatsComponent } from './record/circulation-logs/circulation-stats/circulation-stats.component';
 import { DocumentEditorComponent } from './record/custom-editor/document-editor/document-editor.component';
@@ -278,7 +277,6 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
     DialogImportComponent,
     NotificationTypePipe,
     CirculationLogsComponent,
-    CirculationLogsDialogComponent,
     CirculationLogComponent,
     ItemInCollectionPipe,
     CountryCodeTranslatePipe,

diff --git a/projects/admin/src/app/record/brief-view/loans-brief-view/loans-brief-view.component.html b/projects/admin/src/app/record/brief-view/loans-brief-view/loans-brief-view.component.html
@@ -15,65 +15,58 @@
   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/>.
 -->
-<section class="container-fluid">
+<div class="flex flex-column gap-2">
   <!-- LOAN METADATA -->
-  <div class="row">
-    <div class="col">
-      <h5 class="mb-0">{{ record.metadata.document.title | mainTitle }}</h5>
-      <div class="container">
-        <dl class="row m-0">
-          <dt class="label-title col-3" translate>Item</dt>
-          <dd class="col-9">
-            <shared-inherited-call-number [item]="record.metadata.item"></shared-inherited-call-number>
-            (<a [routerLink]="['/records', 'items', 'detail', record.metadata.item.pid]">{{ record.metadata.item.barcode }}</a>)
-          </dd>
-          <dt class="label-title col-3" translate>Patron</dt>
-          <dd class="col-9">
-            <a [routerLink]="['/records', 'patrons', 'detail', this.record.metadata.patron.pid]">
-              {{ record.metadata.patron.formatted_name }}
-            </a>
-          </dd>
-          <dt class="label-title col-3" translate>Status</dt>
-          <dd class="col-9">
-            <span class="badge" [class]="stateClass">{{ record.metadata.state | translate }}</span>
-            @switch(record.metadata.state) {
-              <!-- ITEM_ON_LOAN additional information -->
-              @case (loanState.ITEM_ON_LOAN) {
-                @if (record.metadata?.is_late) {
-                  <span class="badge badge-danger ml-1" translate>overdue</span>
-                  ({{ 'due date' | translate }}
-                  <span [ngClass]="{'text-danger font-weight-bold': record.metadata?.is_late}">
-                    {{record.metadata.end_date | date: 'shortDate' }}</span>)
-                }
-              }
-              <!-- REQUEST additional information -->
-              @case (loanState.ITEM_AT_DESK) {
-                ({{ 'request expire at' | translate }}
-                <span [ngClass]="{'text-danger': isRequestExpired}">{{ record.metadata.request_expire_date | date: 'shortDate' }}</span>)
-              }
-            }
-          </dd>
-        </dl>
+    <div class="flex gap-2">
+      <h5 class="flex-grow-1">{{ record.metadata.document.title | mainTitle }}</h5>
+          <!-- ACTIONS BUTTON -->
+      <div class="flex gap-1">
+        <p-button icon="fa fa-history" severity="secondary" [outlined]="true" size="small"  (onClick)="openTransactionHistoryDialog(record.metadata.pid)" />
+        @if (canUseDebugMode) {
+          <p-button [icon]="debugMode ? 'fa fa-toggle-on' : 'fa fa-toggle-off'" severity="warning" [outlined]="!debugMode" size="small"
+            (onClick)="debugMode=!debugMode"
+          >
+            <i class="mr-1 fa fa-bug" [ngClass]=""></i>
+          </p-button>
+        }
       </div>
     </div>
-    <!-- ACTIONS BUTTON -->
-    <div class="col-2 text-right">
-      <button class="btn btn-sm btn-outline-secondary" (click)="openTransactionHistoryDialog(record.metadata.pid)">
-        <i class="fa fa-history"></i>
-      </button>
-      @if (canUseDebugMode) {
-        <button class="debug-button btn btn-sm btn-outline-warning ml-1"
-          [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>
+    <dl class="metadata">
+      <dt translate>Item</dt>
+      <dd>
+        <shared-inherited-call-number [item]="record.metadata.item" />
+        (<a [routerLink]="['/records', 'items', 'detail', record.metadata.item.pid]">{{ record.metadata.item.barcode }}</a>)
+      </dd>
+      <dt translate>Patron</dt>
+      <dd>
+        <a [routerLink]="['/records', 'patrons', 'detail', this.record.metadata.patron.pid]">
+          {{ record.metadata.patron.formatted_name }}
+        </a>
+      </dd>
+      <dt translate>Status</dt>
+      <dd>
+        <p-tag class="badge" [severity]="tagSeverity">{{ record.metadata.state | translate }}</p-tag>
+        @switch(record.metadata.state) {
+          <!-- ITEM_ON_LOAN additional information -->
+          @case (loanState.ITEM_ON_LOAN) {
+            @if (record.metadata?.is_late) {
+              <p-tag severity="danger" translate>overdue</p-tag>
+              ({{ 'due date' | translate }}
+              <span [ngClass]="{'text-danger font-bold': record.metadata?.is_late}">
+                {{record.metadata.end_date | date: 'shortDate' }}</span>)
+            }
+          }
+          <!-- REQUEST additional information -->
+          @case (loanState.ITEM_AT_DESK) {
+            ({{ 'request expire at' | translate }}
+            <span [ngClass]="{'text-danger': isRequestExpired}">{{ record.metadata.request_expire_date | date: 'shortDate' }}</span>)
+          }
+        }
+      </dd>
+    </dl>
+
     <!-- DEBUG PANEL -->
     @if (debugMode) {
-      <pre class="col-12 mt-2">{{ record.metadata | json }}</pre>
+        <pre style="text-wrap: auto" class="text-xs surface-100 p-2">{{ record.metadata | json }}</pre>
     }
   </div>
-</section>
diff --git a/projects/admin/src/app/record/brief-view/loans-brief-view/loans-brief-view.component.scss b/projects/admin/src/app/record/brief-view/loans-brief-view/loans-brief-view.component.scss
diff --git a/projects/admin/src/app/record/brief-view/loans-brief-view/loans-brief-view.component.ts b/projects/admin/src/app/record/brief-view/loans-brief-view/loans-brief-view.component.ts
@@ -22,16 +22,17 @@ import { DateTime } from 'luxon';
 import { DialogService } from 'primeng/dynamicdialog';
 import { LoanState } from '../../../classes/loans';
 import { CirculationLogsComponent } from '../../circulation-logs/circulation-logs.component';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'admin-loans-brief-view',
-  templateUrl: './loans-brief-view.component.html',
-  styleUrls: ['./loans-brief-view.component.scss']
+  templateUrl: './loans-brief-view.component.html'
 })
 export class LoansBriefViewComponent implements ResultItem, OnInit {
 
   private dialogService: DialogService = inject(DialogService);
   private permissionsService: PermissionsService = inject(PermissionsService);
+  private translateService: TranslateService = inject(TranslateService);
 
   // COMPONENT ATTRIBUTES =====================================================
   /** Information to build the URL on the record detail view. */
@@ -44,7 +45,7 @@ export class LoansBriefViewComponent implements ResultItem, OnInit {
   /** debug mode toggle */
   debugMode = false;
   /** class to use for the state bullet */
-  stateClass: string = null;
+  tagSeverity: string = null;
   /** Reference on LoanState */
   loanState = LoanState;
   /** is the current request is expired */
@@ -63,7 +64,7 @@ export class LoansBriefViewComponent implements ResultItem, OnInit {
   /** OnInit hook */
   ngOnInit() {
     // State bullet color
-    this._getBadgeStyle();
+    this.setTagSeverity();
     // Is request is expired
     this.record.metadata.request_expire_date = "2024-10-28T08:58:59.979434+00:00";
     if ('request_expire_date' in this.record.metadata) {
@@ -76,6 +77,8 @@ export class LoansBriefViewComponent implements ResultItem, OnInit {
   /** Open transaction history logs dialog */
   openTransactionHistoryDialog(loanPid: string): void {
     this.dialogService.open(CirculationLogsComponent, {
+      header: this.translateService.instant("Circulation history"),
+      width: '60vw',
       dismissableMask: true,
       data: {
         resourcePid: loanPid,
@@ -87,19 +90,19 @@ export class LoansBriefViewComponent implements ResultItem, OnInit {
   // PRIVATE COMPONENT FUNCTIONS ==============================================
 
   /** Define the bullet color. */
-  private _getBadgeStyle(): void {
+  private setTagSeverity(): void {
     switch (this.record.metadata.state) {
       case LoanState.CREATED:
       case LoanState.PENDING:
       case LoanState.ITEM_AT_DESK:
-        this.stateClass = 'badge-info';
+        this.tagSeverity = 'info';
         break;
       case LoanState.ITEM_ON_LOAN:
-        this.stateClass = 'badge-success';
+        this.tagSeverity = 'success';
         break;
       case LoanState.ITEM_IN_TRANSIT_FOR_PICKUP:
       case LoanState.ITEM_IN_TRANSIT_TO_HOUSE:
-        this.stateClass = 'badge-warning';
+        this.tagSeverity = 'warning';
     }
   }
 }
diff --git a/...circulation-logs/circulation-log/circulation-log-loan/circulation-log-loan.component.html b/...circulation-logs/circulation-log/circulation-log-loan/circulation-log-loan.component.html
@@ -20,10 +20,11 @@
   [isHighlight]="isHighlight"
   [separator]="separator"
 >
-  <span badge class="badge badge-pill badge-primary">{{ record.metadata.loan.trigger | translate }}</span>
-  <div collapsedContent class="row">
+  <p-tag badge>{{ record.metadata.loan.trigger | translate }}</p-tag>
+  <div collapsedContent class="grid">
     <!-- Location -->
-    <div class="col-8 fa-icon-library">
+    <div class="col-8">
+      <i class="fa fa-globe"></i>&nbsp;
       @if (record.metadata.loan.transaction_location) {
         @if (record.metadata.loan.transaction_location.pid | getRecord : 'locations' | async; as location) {
           {{ $any(location).metadata.library.pid | getRecord : 'libraries' : 'field' : 'name' | async }}
@@ -33,7 +34,8 @@
       }
     </div>
     <!-- Patron -->
-    <div class="col-4 fa-icon-patron">
+    <div class="col-4">
+      <i class="fa fa-user"></i>&nbsp;
       @if (record.metadata.loan.patron.pid) {
         @if (record.metadata.loan.patron.pid | getRecord : 'patrons' | async; as patron) {
           <a [routerLink]="['/circulation', 'patron', $any(patron).metadata.patron.barcode[0]]"  (click)="closeDialog()">
@@ -45,10 +47,10 @@
       }
     </div>
   </div>
-  <dl class="row" expandedContent>
+  <dl class="metadata" expandedContent>
     <!-- Library -->
-    <dt class="col-4 label-title font-weight-bold fa-icon-library" translate>Library</dt>
-    <dd class="col-8">
+    <dt><i class="fa fa-globe"></i>&nbsp;{{'Library' | translate}}</dt>
+    <dd>
       @if (record.metadata.loan.transaction_location) {
         @if (record.metadata.loan.transaction_location.pid | getRecord : 'locations' | async; as location) {
           {{ $any(location).metadata.library.pid | getRecord : 'libraries' : 'field' : 'name' | async }}
@@ -59,12 +61,12 @@
     </dd>
 
     <!-- Location -->
-    <dt class="col-4 label-title font-weight-bold fa-icon-pickup-location" translate>Pickup location</dt>
-    <dd class="col-8">{{ record.metadata.loan.pickup_location.name }}</dd>
+    <dt><i class="fa fa-map-marker"></i>&nbsp;{{'Pickup location' | translate}}</dt>
+    <dd>{{ record.metadata.loan.pickup_location.name }}</dd>
 
     <!-- Patron -->
-    <dt class="col-4 label-title font-weight-bold fa-icon-patron" translate>Patron</dt>
-    <dd class="col-8">
+    <dt><i class="fa fa-user"></i>&nbsp;{{ 'Patron' | translate }}</dt>
+    <dd>
       @if (record.metadata.loan.patron.pid) {
         @if (record.metadata.loan.patron.pid | getRecord : 'patrons' | async; as patron) {
           <a [routerLink]="['/circulation', 'patron', $any(patron).metadata.patron.barcode[0]]" (click)="closeDialog()">
@@ -77,8 +79,8 @@
     </dd>
 
     <!-- Operator -->
-    <dt class="col-4 label-title font-weight-bold fa-icon-operator" translate>Operator</dt>
-    <dd class="col-8">
+    <dt><i class="fa fa-user-circle-o"></i>&nbsp;{{ 'Operator' | translate }}</dt>
+    <dd>
       {{ record.metadata.user_name }}
       @if (record.metadata.loan.auto_extend) {
         ({{ 'automatic renewal' | translate }})

diff --git a/...circulation-logs/circulation-log/circulation-log-loan/circulation-log-loan.component.scss b/...circulation-logs/circulation-log/circulation-log-loan/circulation-log-loan.component.scss
diff --git a/...d/circulation-logs/circulation-log/circulation-log-loan/circulation-log-loan.component.ts b/...d/circulation-logs/circulation-log/circulation-log-loan/circulation-log-loan.component.ts
@@ -19,8 +19,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
   selector: 'admin-circulation-log-loan',
-  templateUrl: './circulation-log-loan.component.html',
-  styleUrls: ['./circulation-log-loan.component.scss']
+  templateUrl: './circulation-log-loan.component.html'
 })
 export class CirculationLogLoanComponent {