primeng: circulation

Co-Authored-by: Bertrand Zuchuat <[email protected]>
rero · Feb 13, 2025 · fba6ccb · fba6ccb
1 parent 81b3814
commit fba6ccb
Show file tree

Hide file tree

Showing 69 changed files with 1,626 additions and 1,663 deletions.
diff --git a/projects/admin/src/app/circulation/checkin/checkin-action/checkin-action.component.html b/projects/admin/src/app/circulation/checkin/checkin-action/checkin-action.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021-2024 RERO
+  Copyright (C) 2021-2025 RERO
 
   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
@@ -14,22 +14,22 @@
   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 (window:keypress)="checkinItemOnEnterKey($event)">
-  <div class="font-weight-bold" translate>
+<div class="font-bold mb-3" translate>
     One item and one patron were found.
-  </div>
 </div>
-<div>
+<div class="flex gap-2" (keyup.enter)="checkinItemOnEnterKey($event)">
   <p-button
     id="action-patron"
     icon="fa fa-user"
+    styleClass="outline-none"
     [label]="'Patron account'|translate"
     outlined
     (onClick)="setAction('patron')"
   />
   <p-button
     id="action-item"
     icon="fa fa-file-o"
+    styleClass="outline-none"
     [label]="'Checkin the item'|translate"
     outlined
     (onClick)="setAction('item')"

diff --git a/projects/admin/src/app/circulation/checkin/checkin.component.html b/projects/admin/src/app/circulation/checkin/checkin.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2025 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -17,34 +17,24 @@
 -->
 <h4 translate>Checkout/checkin</h4>
 <section class="content">
-  <div class="row">
-    <div class="col col-md-6 mb-4">
-      <ng-core-search-input
-        [placeholder]="placeholder | translate"
-        [searchText]="searchText"
-        [focus]="searchInputFocus"
-        [disabled]="searchInputDisabled"
-        (search)="searchValueUpdated($event)"
-      >
-      </ng-core-search-input>
-    </div>
-    <div class="col col-md-6 mb-4">
-      <admin-circulation-patron-detailed
+  <div class="flex flex-column gap-3">
+    <ng-core-search-input
+    [placeholder]="placeholder | translate"
+    [searchText]="searchText"
+    [focus]="searchInputFocus"
+    [disabled]="searchInputDisabled"
+    (search)="searchValueUpdated($event)"
+  />
+  <admin-circulation-patron-detailed
         [patron]="patronInfo"
         [barcode]="barcode"
         [linkMode]="'circulation'"
         [clearPatronButton]="false"
-      >
-      </admin-circulation-patron-detailed>
-    </div>
-  </div>
+      />
 
-  <div class="row">
-    <div class="col-md-12">
       <admin-circulation-items-list
         [checkedInItems]="items"
-        (hasFeesEmitter)="hasFees($event)">
-      </admin-circulation-items-list>
-    </div>
+        (hasFeesEmitter)="hasFees($event)"
+      />
   </div>
 </section>
diff --git a/projects/admin/src/app/circulation/checkin/checkin.component.ts b/projects/admin/src/app/circulation/checkin/checkin.component.ts
@@ -155,14 +155,22 @@ export class CheckinComponent implements OnInit {
               item.notes = [];
             }
             item.notes.push({
-              content: error.error.status.replace(/^error:/, '').trim(),
+              content: this.processErrorMessage(error.error.status),
               type: ItemNoteType.API
             });
             this.items.unshift(item);
             // If no action could be done by the '/item/checkin' api, an error will be raised.
             // catch this error to display it as a Toast message.
             this._checkinErrorManagement(error, item);
           });
+        } else if (error.error) {
+          this.messageService.add({
+            severity: 'warn',
+            summary: this.translate.instant('Checkin'),
+            detail: this.processErrorMessage(error.error.status),
+            life: CONFIG.MESSAGE_LIFE
+          });
+          this._resetSearchInput();
         }
       }
     });
@@ -227,7 +235,8 @@ export class CheckinComponent implements OnInit {
         if (patron.total.value === 1 && item.total.value === 1) {
           const ref: DynamicDialogRef = this.dialogService.open(CheckinActionComponent, {
             header: this.translate.instant('Circulation action'),
-            width: '50vw',
+            focusOnShow: false,
+            width: '25vw',
           })
           ref.onClose.subscribe((action: string) => {
             if (action) {
@@ -316,7 +325,7 @@ export class CheckinComponent implements OnInit {
   private _checkinErrorManagement(error: any, item: Item) {
     // get the error message from the raised error. This will be the Toast message core.
     let message = (error.hasOwnProperty('error') && error.error.hasOwnProperty('status'))
-      ? error.error.status.replace(/^error:/, '').trim()
+      ? this.processErrorMessage(error.error.status)
       : error.message;
     message = this.translate.instant(message);
     message += `<br/>${this.translate.instant('Status')}: ${this.translate.instant(item.status.toString())}`;
@@ -372,6 +381,10 @@ export class CheckinComponent implements OnInit {
     }
   }
 
+  private processErrorMessage(message: string): string {
+    return message.replace(/^error:/, '').trim();
+  }
+
   /** Reset search input */
   private _resetSearchInput(): void {
     setTimeout(() => {

diff --git a/...uested-item/requested-item.component.scss → ...circulation/circulation-main.component.ts b/...uested-item/requested-item.component.scss → ...circulation/circulation-main.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2024-2025 RERO
  *
  * 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
@@ -14,24 +14,24 @@
  * 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 { Component } from '@angular/core';
 
- @import 'bootstrap/scss/functions';
- @import 'bootstrap/scss/variables';
-
-.item {
-  margin-bottom: $spacer * .25 !important;
-  padding: $spacer * .25 !important;
-  border: $border-width solid $border-color;
-  border-radius: $border-radius;
-  position: relative;
-
-  &:hover{
-     background-color: $light;
-  }
-
-  div.actions {
-    position: absolute;
-    top: $spacer * .25;
-    right: 15px;
-  }
+@Component({
+  selector: 'admin-circulation-main',
+  template: `
+    <router-outlet></router-outlet>
+    <p-toast>
+      <ng-template let-message pTemplate="message">
+        <div class="flex flex-column align-items-start flex-grow-1">
+          <div class="font-medium text-lg text-900">
+            {{ message.summary }}
+          </div>
+          <p [innerHtml]="message.detail"></p>
+        </div>
+      </ng-template>
+    </p-toast>
+    <p-confirmDialog />
+  `
+})
+export class CirculationMainComponent {
 }
diff --git a/projects/admin/src/app/circulation/circulation-routing.module.ts b/projects/admin/src/app/circulation/circulation-routing.module.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * 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
@@ -14,7 +14,6 @@
  * 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 { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { PERMISSIONS } from '@rero/shared';
@@ -30,67 +29,76 @@ import { PendingComponent } from './patron/pending/pending.component';
 import { PickupComponent } from './patron/pickup/pickup.component';
 import { ProfileComponent } from './patron/profile/profile.component';
 import { keepHistoryGuard } from './guard/keep-history.guard';
+import { CirculationMainComponent } from './circulation-main.component';
 
 const routes: Routes = [
   {
     path: '',
-    redirectTo: 'checkout',
-    pathMatch: 'full'
-  },
-  {
-    path: 'patron/:barcode',
-    component: MainComponent,
+    component: CirculationMainComponent,
     children: [
       {
         path: '',
-        redirectTo: 'loan',
-        pathMatch: 'full'
-      },
-      {
-        path: 'loan',
-        component: LoanComponent,
-        canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
+        redirectTo: 'checkout',
+        pathMatch: 'full',
       },
       {
-        path: 'pickup',
-        component: PickupComponent,
+        path: 'checkout',
+        component: CheckinComponent,
         canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
       },
       {
-        path: 'pending',
-        component: PendingComponent,
+        path: 'requests',
+        component: MainRequestComponent,
         canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
       },
       {
-        path: 'ill',
-        component: IllRequestComponent,
-        canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
+        path: 'patron/:barcode',
+        component: MainComponent,
+        children: [
+          {
+            path: '',
+            redirectTo: 'loan',
+            pathMatch: 'full'
+          },
+          {
+            path: 'loan',
+            component: LoanComponent,
+            canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
+          },
+          {
+            path: 'pickup',
+            component: PickupComponent,
+            canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
+          },
+          {
+            path: 'pending',
+            component: PendingComponent,
+            canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
+          },
+          {
+            path: 'ill',
+            component: IllRequestComponent,
+            canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
+          },
+          {
+            path: 'profile',
+            component: ProfileComponent,
+            canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
+          },
+          {
+            path: 'fees',
+            component: PatronTransactionsComponent,
+            canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
+          },
+          {
+            path: 'history',
+            component: HistoryComponent,
+            canActivate: [ keepHistoryGuard, PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
+          }
+        ]
       },
-      {
-        path: 'profile',
-        component: ProfileComponent,
-        canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
-      },
-      {
-        path: 'fees',
-        component: PatronTransactionsComponent,
-        canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
-      },
-      {
-        path: 'history',
-        component: HistoryComponent,
-        canActivate: [ keepHistoryGuard, PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
-      }
     ]
-  }, {
-      path: 'checkout',
-      component: CheckinComponent,
-      canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
-    }, {
-    path: 'requests',
-    component: MainRequestComponent,
-    canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
-  }
+  },
 ];
 
 @NgModule({

diff --git a/projects/admin/src/app/circulation/circulation.module.ts b/projects/admin/src/app/circulation/circulation.module.ts
@@ -20,6 +20,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FormlyModule } from '@ngx-formly/core';
 import { RecordModule } from '@rero/ng-core';
 import { SharedModule } from '@rero/shared';
+import { AccordionModule } from 'primeng/accordion';
 import { ButtonModule } from 'primeng/button';
 import { DynamicDialogModule } from 'primeng/dynamicdialog';
 import { InputSwitchModule } from 'primeng/inputswitch';
@@ -32,6 +33,7 @@ import { TagModule } from 'primeng/tag';
 import { JournalVolumePipe } from 'projects/public-search/src/app/pipe/journal-volume.pipe';
 import { CheckinActionComponent } from './checkin/checkin-action/checkin-action.component';
 import { CheckinComponent } from './checkin/checkin.component';
+import { CirculationMainComponent } from './circulation-main.component';
 import { CirculationRoutingModule } from './circulation-routing.module';
 import { ItemComponent } from './item/item.component';
 import { ItemsListComponent } from './items-list/items-list.component';
@@ -54,7 +56,7 @@ import { PatronFeeComponent } from './patron/patron-transactions/patron-fee/patr
 import {
   PatronTransactionEventFormComponent
 } from './patron/patron-transactions/patron-transaction-event-form/patron-transaction-event-form.component';
-import { PatronTransactionEventComponent } from './patron/patron-transactions/patron-transaction-event/patron-transaction-event.component';
+import { PatronTransactionHistoryComponent } from './patron/patron-transactions/patron-transaction/patron-transaction-history/patron-transaction-history.component';
 import {
   DefaultTransactionDetailComponent
 } from './patron/patron-transactions/patron-transaction/default-transaction-detail/default-transaction-detail.component';
@@ -69,6 +71,7 @@ import { PickupItemComponent } from './patron/pickup/pickup-item/pickup-item.com
 import { PickupComponent } from './patron/pickup/pickup.component';
 import { ProfileComponent } from './patron/profile/profile.component';
 import { GetLoanCipoPipe } from './pipe/get-loan-cipo.pipe';
+import { ScrollPanelModule } from 'primeng/scrollpanel';
 
 @NgModule({
     declarations: [
@@ -87,7 +90,6 @@ import { GetLoanCipoPipe } from './pipe/get-loan-cipo.pipe';
         PickupItemComponent,
         PatronTransactionsComponent,
         PatronTransactionComponent,
-        PatronTransactionEventComponent,
         PatronTransactionEventFormComponent,
         OverdueTransactionComponent,
         DefaultTransactionDetailComponent,
@@ -106,7 +108,9 @@ import { GetLoanCipoPipe } from './pipe/get-loan-cipo.pipe';
         IllRequestComponent,
         IllRequestItemComponent,
         JournalVolumePipe,
-        CirculationSettingsComponent
+        CirculationSettingsComponent,
+        CirculationMainComponent,
+        PatronTransactionHistoryComponent
     ],
     imports: [
         CirculationRoutingModule,
@@ -124,8 +128,10 @@ import { GetLoanCipoPipe } from './pipe/get-loan-cipo.pipe';
         RippleModule,
         MessagesModule,
         InputSwitchModule,
-        SplitButtonModule
-    ],
+        SplitButtonModule,
+        AccordionModule,
+        ScrollPanelModule
+      ],
     providers: [
       CurrencyPipe
     ]