admin: circulation loan

Co-Authored-by: Bertrand Zuchuat <[email protected]>

projects/admin/src/app/circulation/circulation.scss

@@ -15,23 +15,38 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
- @import 'bootstrap/scss/functions';
- @import 'bootstrap/scss/variables';
+ p {
+  margin-block-start: 0.5rem;
+  margin-block-end: 0.5rem;
+}
 
- .item {
-   margin-bottom: map-get($spacers, 1) !important;
-   padding: map-get($spacers, 1) !important;
-   border: $border-width solid $border-color;
-   border-radius: $border-radius;
-   position: relative;
+ul {
+  padding-inline-start: 0.5rem;
+  margin-block-start: 0.5rem;
+}
 
-   &:hover{
-     background-color: $light;
-   }
+p-messages div.p-message {
+  margin: 0;
+  margin-bottom: 0.5rem;
+}
 
-   div.actions {
-     position: absolute;
-     top: map-get($spacers, 1);
-     right: 15px;
-   }
- }
+//  @import 'bootstrap/scss/functions';
+//  @import 'bootstrap/scss/variables';
+
+//  .item {
+//    margin-bottom: map-get($spacers, 1) !important;
+//    padding: map-get($spacers, 1) !important;
+//    border: $border-width solid $border-color;
+//    border-radius: $border-radius;
+//    position: relative;
+
+//    &:hover{
+//      background-color: $light;
+//    }
+
+//    div.actions {
+//      position: absolute;
+//      top: map-get($spacers, 1);
+//      right: 15px;
+//    }
+//  }

projects/admin/src/app/circulation/patron/card/card.component.html

@@ -15,11 +15,11 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (patron?.patron) {
-  <div class="m-0" [ngClass]="{'text-muted': !clearPatronButton}">
+  <div [ngClass]="{'text-muted': !clearPatronButton}">
     <div class="grid">
-      <div class="col-6">
+      <div class="col-6 mt-0">
         <div class="flex w-full">
-          <div class="flex mr-3 align-items-center">
+          <div class="flex mr-4 align-items-center">
             <i class="fa fa-user fa-5x" aria-hidden="true"></i>
           </div>
           <div class="flex w-full">
@@ -63,10 +63,10 @@ <h3>
         @if (patron.notes) {
           <p-messages class="w-full" severity="warn" [enableService]="false" [closable]="false" showTransitionOptions="0ms">
             <ng-template pTemplate>
-              <ul class="list-unstyled mb-0">
+              <ul class="list-none mb-0">
                 @for (note of patron.notes; track note) {
                   <li>
-                    <span class="font-bold">{{ note.type | translate | ucfirst }}</span>
+                    <span class="font-bold text-xl">{{ note.type | translate | ucfirst }}</span>
                     <p [innerHTML]="note.content | nl2br"></p>
                   </li>
                 }
@@ -75,7 +75,7 @@ <h3>
           </p-messages>
         }
       </div>
-      <div class="col-6">
+      <div class="col-6 mt-0">
         <!-- Circulation message -->
         @if (displayCirculationMessages) {
             @if (patron.circulation_information) {
@@ -88,14 +88,12 @@ <h3>
                 />
               }
             }
-            @for (message of circulationMessages; track message) {
-              <p-messages
-                [value]="[{ severity: getMessageSeverity(message.type), detail: message.content }]"
-                [closable]="false"
-                [enableService]="false"
-                showTransitionOptions="0ms"
-              />
-            }
+            <p-messages
+              [value]="circulationMessages"
+              [closable]="false"
+              [enableService]="false"
+              showTransitionOptions="0ms"
+            />
         }
       </div>
     </div>

projects/admin/src/app/circulation/patron/card/card.component.ts

@@ -14,7 +14,7 @@
  * 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, EventEmitter, inject, Input, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
 import { DateTime } from 'luxon';
 import { getSeverity } from '../../../utils/utils';
 import { CirculationService } from '../../services/circulation.service';
@@ -24,7 +24,7 @@ import { CirculationService } from '../../services/circulation.service';
   templateUrl: './card.component.html',
   styleUrls: ['./card.component.scss']
 })
-export class CardComponent {
+export class CardComponent implements OnInit {
 
   private circulationService: CirculationService = inject(CirculationService);
 
@@ -42,40 +42,38 @@ export class CardComponent {
   /** event emitter when the close button are fired */
   @Output() clearPatron = new EventEmitter<any>();
 
-  // GETTER & SETTER ==========================================================
-  /** Build the link used on the patron name */
-  get patronLink(): string {
+  /** Link used on the patron name */
+  patronLink: string;
+  /** it's the birthday of the patron */
+  isBirthday: boolean = false;
+  /** Patron age */
+  patronAge: number;
+  /** circulation messages about the loaded patron if exists */
+  circulationMessages: {severity: string, detail: string}[] = [];
+
+  ngOnInit(): void {
     if (this.patron) {
-      return (this.linkMode === 'detail')
+      this.patronLink = (this.linkMode === 'detail')
         ? '/records/patrons/detail/' + this.patron.pid
         : '/circulation/patron/' + this.barcode + '/loan';
     }
-  }
 
-  /** Get the patron age */
-  get patronAge(): number {
     if (this.patron && this.patron.birth_date) {
-      const birthDate = DateTime.fromISO(this.patron.birth_date);
-      return Math.floor(DateTime.now().diff(birthDate, 'years').years);
+      const today = DateTime.now().toFormat('M-dd');
+      const birthDate = DateTime.fromISO(this.patron.birth_date).toFormat('M-dd');
+      if (today === birthDate) {
+        this.isBirthday = true;
+      }
     }
-  }
 
-  /** Defined if it's the birthday of the patron */
-  get isBirthday(): boolean {
     if (this.patron && this.patron.birth_date) {
-      const today = DateTime.fromISO(DateTime.now().toFormat('yyyy-M-d'));
       const birthDate = DateTime.fromISO(this.patron.birth_date);
-      return today.diff(birthDate, 'years').years % 1 === 0;
+      this.patronAge = Math.floor(DateTime.now().diff(birthDate, 'years').years);
     }
-    return false;
-  }
 
-  /** Get the circulation messages about the loaded patron if exists */
-  get circulationMessages(): Array<{type: string, content: string}> {
-    return this.circulationService.messages();
+    this.circulationMessages = this.circulationService.messages();
   }
 
-  // COMPONENT FUNCTIONS ======================================================
   /** Clear current patron */
   clear(): void {
     if (this.patron) {
@@ -91,5 +89,4 @@ export class CardComponent {
   getMessageSeverity(level: string): string {
     return getSeverity(level);
   }
-
 }

projects/admin/src/app/circulation/patron/loan/loan.component.html

@@ -15,9 +15,9 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <section class="content">
-  <div class="row mb-4">
+  <div class="grid mb-4">
     <div class="col-12 col-md-6">
-      <div class="row d-flex">
+      <div class="grid d-flex">
         <div class="col pr-0">
           <ng-core-search-input
             [placeholder]="'Checkout/checkin: please enter an item barcode.' | translate"
@@ -32,7 +32,7 @@
         </div>
       </div>
       @if (checkoutSettings) {
-        <div class="row col mt-1">
+        <div class="grid col mt-1">
           @for (setting of checkoutSettings; track setting) {
             <p-tag [severity]="setting.extra?.severity || 'warning'">
               {{ setting.label }}
@@ -47,12 +47,12 @@
     <div class="col-md-4 d-flex align-items-end justify-content-end">
       <ng-core-menu-sort
         [config]="[
-          {value:'-transactiondate', label:'Transaction date (desc)' | translate, icon:'fa-sort-numeric-desc'},
-          {value:'transactiondate', label:'Transaction date' | translate, icon:'fa-sort-numeric-asc'},
-          {value:'-duedate', label:'Due date (desc)' | translate, icon:'fa-sort-numeric-desc'},
-          {value:'duedate', label:'Due date' | translate, icon:'fa-sort-numeric-asc'},
-          {value:'-location', label:'Location (desc)' | translate, icon: 'fa-sort-numeric-desc'},
-          {value:'location', label:'Location' | translate, icon: 'fa-sort-numeric-asc'}
+          {value:'-transactiondate', label:'Transaction date (desc)' | translate, icon:'fa fa-sort-numeric-desc'},
+          {value:'transactiondate', label:'Transaction date' | translate, icon:'fa fa-sort-numeric-asc'},
+          {value:'-duedate', label:'Due date (desc)' | translate, icon:'fa fa-sort-numeric-desc'},
+          {value:'duedate', label:'Due date' | translate, icon:'fa fa-sort-numeric-asc'},
+          {value:'-location', label:'Location (desc)' | translate, icon: 'fa fa-sort-numeric-desc'},
+          {value:'location', label:'Location' | translate, icon: 'fa fa-sort-numeric-asc'}
         ]"
         (selectChange)="selectingSortCriteria($event)"
       />

projects/admin/src/app/circulation/patron/main/main.component.html

@@ -14,38 +14,36 @@
  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/>.
 -->
-@if (patron) {
-  <div class="col mb-4">
-    <admin-circulation-patron-detailed
-      [patron]="patron"
-      [barcode]="barcode"
-      [displayCirculationMessages]="true"
-      (clearPatron)="clearPatron()"
-    ></admin-circulation-patron-detailed>
-  </div>
+@if (patron && items) {
+  <admin-circulation-patron-detailed
+    [patron]="patron"
+    [barcode]="barcode"
+    [displayCirculationMessages]="true"
+    (clearPatron)="clearPatron()"
+  ></admin-circulation-patron-detailed>
 
-  <div class="col">
-    <p-tabMenu [model]="items" [activeItem]="activeItem" (activeItemChange)="onActiveItemChange($event)">
-      <ng-template pTemplate="item" let-item>
-        <a pRipple class="p-menuitem-link">
-          <span class="mr-2">{{ item.label }}</span>
-          @if (item.tag?.statistics && item.tag?.statistics()[item.id] && item.tag?.statistics()[item.id] > 0) {
-            @if (item.tag.withCurrency) {
-              <p-badge
-                [severity]="item.tag.severity || 'info'"
-                [value]="item.tag.statistics()[item.id] | currency: organisation.default_currency"
-              />
-            } @else {
-              <p-badge [severity]="item.tag.severity || 'info'" [value]="item.tag.statistics()[item.id]" />
-            }
+  <p-tabMenu [model]="items" [activeItem]="activeItem" (activeItemChange)="onActiveItemChange($event)">
+    <ng-template pTemplate="item" let-item>
+      <a pRipple class="p-menuitem-link">
+        <span class="mr-2">{{ item.label }}</span>
+        @if (item.tag?.statistics && item.tag?.statistics()[item.id] && item.tag?.statistics()[item.id] > 0) {
+          @if (item.tag.withCurrency) {
+            <p-badge
+              [severity]="item.tag.severity || 'info'"
+              [value]="item.tag.statistics()[item.id] | currency: organisation.default_currency"
+            />
+          } @else {
+            <p-badge [severity]="item.tag.severity || 'info'" [value]="item.tag.statistics()[item.id]" />
           }
-        </a>
-      </ng-template>
-    </p-tabMenu>
-    <div class="mt-4">
-      <router-outlet></router-outlet>
-    </div>
+        }
+      </a>
+    </ng-template>
+  </p-tabMenu>
+  <div class="mt-4">
+    <router-outlet></router-outlet>
   </div>
+
+
   <p-toast>
     <ng-template let-message pTemplate="message">
       <div class="flex flex-column align-items-start" style="flex: 1">

projects/admin/src/app/circulation/patron/main/main.component.ts

@@ -26,7 +26,7 @@ import { MenuItem } from 'primeng/api';
 import { Subscription } from 'rxjs';
 import { OperationLogsApiService } from '../../../api/operation-logs-api.service';
 import { CirculationService } from '../../services/circulation.service';
-import { PatronTransactionService } from '../../services/patron-transaction.service';
+import { getSeverity } from '@app/admin/utils/utils';
 
 @Component({
   selector: 'admin-main',
@@ -37,7 +37,6 @@ export class MainComponent implements OnInit, OnDestroy {
   private route: ActivatedRoute = inject(ActivatedRoute);
   private router: Router = inject(Router);
   private patronService: PatronService = inject(PatronService);
-  private patronTransactionService: PatronTransactionService = inject(PatronTransactionService);
   private organisationService: OrganisationService = inject(OrganisationService);
   private hotKeysService: HotkeysService = inject(HotkeysService);
   private translateService: TranslateService = inject(TranslateService);
@@ -173,7 +172,10 @@ export class MainComponent implements OnInit, OnDestroy {
           this.circulationService.statisticsIncrease('fees', data.fees.engaged + data.fees.preview);
           this._parseStatistics(data.statistics || {});
           for (const message of (data.messages || [])) {
-            this.circulationService.addCirculationMessage(message as any);
+            this.circulationService.addCirculationMessage({
+              severity: getSeverity(message.type),
+              detail: message.content
+            });
           }
           this.initializeMenu();
         });

projects/admin/src/app/circulation/services/circulation.service.ts

@@ -21,7 +21,7 @@ import { Injectable, signal, WritableSignal } from '@angular/core';
 })
 export class CirculationService {
 
-  messages: WritableSignal<{type: string, content: string}[]> = signal([]);
+  messages: WritableSignal<{severity: string, detail: string}[]> = signal([]);
   statistics: WritableSignal<{[key: string]: number}> = signal({});
 
   statisticsIncrease(type: string, increment: number = 1): void {
@@ -45,7 +45,7 @@ export class CirculationService {
     this.statistics.set(stats);
   }
 
-  addCirculationMessage(message: {type: string, content: string}): void {
+  addCirculationMessage(message: {severity: string, detail: string}): void {
     this.messages.set([...this.messages(), message]);
   }
 

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

@@ -29,6 +29,8 @@
 @import '../../../../shared/src/scss/styles.scss';
 @import '../menu/menu-dashboard/menu-dashboard.component.scss';
 @import '../menu/menu-app/menu-app.component.scss';
+@import '../circulation/circulation.scss';
+
 
 // @layer bootstrap {
 // @import 'variables';