feat(public-search): display disabled request button with explanatory tooltip

* Only when the patron has reached the maximum number of
  active loans, fees, or requests, the request button is now displayed
  in the public UI but disabled with a tooltip explaining the reason.
  This allows patron to understand why they cannot place a request.
* Depends on rero/rero-ils#3992.

Co-Authored-by: Pascal Repond <[email protected]>

Author: PascalRepond

projects/admin/src/app/service/holdings.service.spec.ts

@@ -68,8 +68,8 @@ describe('HoldingsService', () => {
   });
 
   it('should return true on the possibility of making a request', () => {
-    httpClientSpy.get.and.returnValue(of(true));
-    service.canRequest('pid').subscribe((result: any) => expect(result).toBeTrue());
+    httpClientSpy.get.and.returnValue(of({ can: true, reasons: {} }));
+    service.canRequest('pid').subscribe((result: any) => expect(result.can).toBeTrue());
   });
 
   it('should return a list of pickup locations', () => {

projects/admin/src/app/service/items.service.spec.ts

@@ -203,8 +203,8 @@ describe('ItemsService', () => {
   });
 
   it('canRequest', () => {
-    httpClientSpy.get.and.returnValue(of(true));
-    service.canRequest('1').subscribe((result: boolean) => expect(result).toBeTrue());
+    httpClientSpy.get.and.returnValue(of({ can: true, reasons: {} }));
+    service.canRequest('1').subscribe((result: any) => expect(result.can).toBeTrue());
   });
 
   it('needCallout', () => {

projects/public-holdings-items/src/app/app.module.ts

@@ -50,7 +50,7 @@ import { HoldingsComponent } from 'projects/public-search/src/app/document-detai
 import { ItemsComponent } from 'projects/public-search/src/app/document-detail/holdings/items/items.component';
 import { ItemComponent } from 'projects/public-search/src/app/document-detail/item/item.component';
 import { PickupLocationComponent } from 'projects/public-search/src/app/document-detail/request/pickup-location/pickup-location.component';
-import { RequestComponent } from 'projects/public-search/src/app/document-detail/request/request.component';
+import { HoldingsRequestComponent } from 'projects/public-search/src/app/document-detail/request/holdings-request.component';
 import { AppConfigService } from './app-config-service.service';
 import { AppInitializerService } from './app-initializer.service';
 import { ItemRequestComponent } from 'projects/public-search/src/app/document-detail/item/item-request.component';
@@ -88,7 +88,7 @@ import { ItemRequestComponent } from 'projects/public-search/src/app/document-de
         ItemComponent,
         ItemsComponent,
         PickupLocationComponent,
-        RequestComponent,
+        HoldingsRequestComponent,
         DocumentDetailViewComponent,
         ElectronicHoldingsComponent,
         ItemRequestComponent

projects/public-search/src/app/api/item-api.service.spec.ts

@@ -58,7 +58,7 @@ describe('ItemService', () => {
 
   const canRequest = {
     can: true,
-    reasons: []
+    reasons: {}
   };
 
   const request = {

projects/public-search/src/app/api/loan-api.service.spec.ts

@@ -51,7 +51,7 @@ describe('LoanApiService', () => {
 
   const canExtend = {
     can: true,
-    reasons: []
+    reasons: {}
   };
 
   const renew = {

projects/public-search/src/app/api/loan-api.service.ts

@@ -17,7 +17,7 @@
 import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 import { LoanOverduePreview } from '@app/admin/classes/loans';
-import { ApiService, Error, Record, RecordService } from '@rero/ng-core';
+import { ApiService, Error, Record as EsRecord, RecordService } from '@rero/ng-core';
 import { BaseApi } from '@rero/shared';
 import { Observable, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
@@ -43,7 +43,7 @@ export class LoanApiService extends BaseApi {
     patronPid: string, page: number,
     itemsPerPage = 20, headers = BaseApi.reroJsonheaders,
     sort?: string
-  ): Observable<Record | Error> {
+  ): Observable<EsRecord | Error> {
     const loanStates = ['ITEM_ON_LOAN'];
     return this.recordService.getRecords(
       'loans', this._patronStateQuery(patronPid, loanStates), page, itemsPerPage,
@@ -62,7 +62,7 @@ export class LoanApiService extends BaseApi {
   getRequest(
     patronPid: string, page: number,
     itemsPerPage = 10, headers = BaseApi.reroJsonheaders
-  ): Observable<Record | Error> {
+  ): Observable<EsRecord | Error> {
     const requestStates = ['PENDING', 'ITEM_AT_DESK', 'ITEM_IN_TRANSIT_FOR_PICKUP'];
     return this.recordService.getRecords(
       'loans', this._patronStateQuery(patronPid, requestStates), page, itemsPerPage,
@@ -141,5 +141,5 @@ export class LoanApiService extends BaseApi {
 
 export type CanExtend = {
   can: boolean;
-  reasons: string[];
+  reasons: Record<string, string>;
 }

projects/public-search/src/app/document-detail/holdings/holdings.component.ts

@@ -24,15 +24,15 @@ import { ButtonDirective } from 'primeng/button';
 import { Message } from 'primeng/message';
 import { Ripple } from 'primeng/ripple';
 import { HoldingsApiService } from '../../api/holdings-api.service';
-import { RequestComponent } from '../request/request.component';
+import { HoldingsRequestComponent } from '../request/holdings-request.component';
 import { HoldingsStore } from '../store/holdings-store';
 import { ItemsComponent } from './items/items.component';
 import { MultiSelect } from 'primeng/multiselect';
 
 @Component({
     selector: 'public-search-holdings',
     templateUrl: './holdings.component.html',
-    imports: [Message, Accordion, AccordionPanel, Ripple, AccordionHeader, SharedModule, TranslateDirective, AccordionContent, ItemsComponent, RequestComponent, NgClass, ButtonDirective, I18nPluralPipe, TranslatePipe, CoreModule, MultiSelect],
+    imports: [Message, Accordion, AccordionPanel, Ripple, AccordionHeader, SharedModule, TranslateDirective, AccordionContent, ItemsComponent, HoldingsRequestComponent, NgClass, ButtonDirective, I18nPluralPipe, TranslatePipe, CoreModule, MultiSelect],
     providers: [HoldingsStore]
 })
 export class HoldingsComponent implements OnInit {

projects/public-search/src/app/document-detail/item/item-request.component.ts

@@ -29,7 +29,7 @@ import { canRequest } from '../model/can-request-model';
   <p-button
     class="ui:pointer-events-auto"
     outlined
-    [hidden]="!canRequest().can"
+    [hidden]="!hiddenRequestButton()"
     [disabled]="!canRequest().can"
     [tooltipDisabled]="canRequest().can"
     [pTooltip]="tooltip()"
@@ -52,9 +52,23 @@ export class ItemRequestComponent implements OnInit {
 
   canRequest = signal<canRequest>({ can: false });
 
-  tooltip = computed(() => this.canRequest().reasons?.map(
-    (reason: string) => this.translateService.instant(reason)
-  ).join('\n\n'));
+    reasonsToDisplay = [
+      "patron_type_overdue_items_limit",
+      "patron_type_fee_amount_limit",
+      "patron_type_unpaid_subscription",
+      "patron_type_request_limits"
+    ]
+
+  allReasonsDisplayable = computed(() =>
+    this.canRequest().reasons &&
+    Object.keys(reasons).every(key => this.reasonsToDisplay.includes(key))
+  );
+
+  hiddenRequestButton = computed(() => this.canRequest().can || this.allReasonsDisplayable());
+
+  tooltip = computed(() => Object.values(this.canRequest().reasons || {}).map(
+    (reason: string) => "- " + this.translateService.instant(reason)
+  ).join('\n'));
 
   private _patron: IPatron;
 

projects/public-search/src/app/document-detail/model/can-request-model.ts

@@ -16,5 +16,5 @@
  */
 export type canRequest = {
   can: boolean;
-  reasons?: string[];
+  reasons?: Record<string, string>;
 }

projects/public-search/src/app/document-detail/request/request.component.html renamed to projects/public-search/src/app/document-detail/request/holdings-request.component.html

@@ -22,17 +22,17 @@
       id="record-{{ record.metadata.pid }}-request-button"
       outlined
       (onClick)="showRequestDialog()"
-      [hidden]="!canRequest?.can"
+      [hidden]="!hiddenRequestButton()"
+      [disabled]="!canRequest().can"
+      [tooltipDisabled]="canRequest().can"
+      [pTooltip]="tooltip()"
+      tooltipPosition="top"
     >
       <i class="fa fa-cart-arrow-down ui:mr-2"></i>
-      @if (recordType === 'item') {
-        {{ 'Request' | translate }}
+      @if (holdingsItemsCount > 0) {
+        {{ 'Request another issue' | translate }}
       } @else {
-        @if (holdingsItemsCount > 0) {
-          {{ 'Request another issue' | translate }}
-        } @else {
-          {{ 'Request an issue' | translate }}
-        }
+        {{ 'Request an issue' | translate }}
       }
       </p-button>
   } @else {