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

PascalRepond · PascalRepond · commit 2be9ec46f2a3 · 2025-12-04T11:19:50.000+01:00
* 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 <pascal.repond@rero.ch>
diff --git a/projects/admin/src/app/service/holdings.service.spec.ts b/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', () => {
diff --git a/projects/admin/src/app/service/items.service.spec.ts b/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', () => {
diff --git a/projects/public-holdings-items/src/app/app.module.ts b/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
diff --git a/projects/public-search/src/app/api/item-api.service.spec.ts b/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 = {
diff --git a/projects/public-search/src/app/api/loan-api.service.spec.ts b/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 = {
diff --git a/projects/public-search/src/app/api/loan-api.service.ts b/projects/public-search/src/app/api/loan-api.service.ts
@@ -141,5 +141,6 @@ export class LoanApiService extends BaseApi {
 
 export type CanExtend = {
   can: boolean;
-  reasons: string[];
+  // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
+  reasons: {[key: string]: string};
 }
diff --git a/projects/public-search/src/app/document-detail/holdings/holdings.component.ts b/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 {
diff --git a/projects/public-search/src/app/document-detail/item/item-request.component.ts b/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(() => {
+    const reasons = this.canRequest().reasons;
+    return 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;
 
diff --git a/projects/public-search/src/app/document-detail/model/can-request-model.ts b/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>;
 }
diff --git a/projects/public-search/src/app/document-detail/request/holdings-request.component.html b/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 {
diff --git a/projects/public-search/src/app/document-detail/request/holdings-request.component.ts b/projects/public-search/src/app/document-detail/request/holdings-request.component.ts
@@ -14,25 +14,27 @@
  * 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, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output, signal, computed } from '@angular/core';
 import { IPatron, UserService, SharedModule } from '@rero/shared';
 import { ItemApiService } from '../../api/item-api.service';
 import { HoldingsApiService } from '../../api/holdings-api.service';
 import { Button } from 'primeng/button';
 import { Tooltip } from 'primeng/tooltip';
 import { PickupLocationComponent } from './pickup-location/pickup-location.component';
-import { TranslatePipe } from '@ngx-translate/core';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { canRequest } from '../model/can-request-model';
 
 @Component({
     selector: 'public-search-request',
-    templateUrl: './request.component.html',
+    templateUrl: './holdings-request.component.html',
     imports: [Button, Tooltip, PickupLocationComponent, TranslatePipe, SharedModule]
 })
-export class RequestComponent implements OnInit {
+export class HoldingsRequestComponent implements OnInit {
 
   private itemApiService: ItemApiService = inject(ItemApiService);
   private holdingsApiService: HoldingsApiService = inject(HoldingsApiService);
   private userService: UserService = inject(UserService);
+  private translateService: TranslateService = inject(TranslateService);
 
   /** Record: item or holding */
   @Input() record: any;
@@ -47,10 +49,25 @@ export class RequestComponent implements OnInit {
   @Input() holdingsItemsCount: number;
 
   /** Item Can request with reason(s) */
-  canRequest = {
-    can: false,
-    reasons: []
-  };
+  canRequest = signal<canRequest>({ can: false, reasons: {} });
+
+  reasonsToDisplay = [
+    "patron_type_overdue_items_limit",
+    "patron_type_fee_amount_limit",
+    "patron_type_unpaid_subscription",
+    "patron_type_request_limits"
+  ]
+
+  allReasonsDisplayable = computed(() => {
+    const reasons = this.canRequest().reasons;
+    return 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'));
 
   /** Request dialog */
   requestDialog = false;
@@ -84,7 +101,7 @@ export class RequestComponent implements OnInit {
           this.record.metadata.pid,
           this.record.metadata.library.pid,
           this._patron.patron.barcode[0],
-        ).subscribe((can: any) => this.canRequest = can);
+        ).subscribe((can: canRequest) => this.canRequest.set(can));
       }
     }
   }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.html b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.html
@@ -49,7 +49,7 @@
     <p-button
       size="small"
       class="ui:pointer-events-auto"
-      [pTooltip]="canExtend.reasons | arrayTranslate | join:' / '"
+      [pTooltip]="canExtend.reasons?.values() | arrayTranslate | join:' / '"
       tooltipPosition="top"
       [tooltipDisabled]="canExtend.can"
       (onClick)="renew()"
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.ts
@@ -54,7 +54,7 @@ export class PatronProfileLoanComponent implements OnInit {
   /** Loan can extend */
   canExtend = {
     can: false,
-    reasons: []
+    reasons: {}
   };
   /** Fees */
   fees = 0;

Original file line number	Diff line number	Diff line change
`@@ -141,5 +141,6 @@ export class LoanApiService extends BaseApi {`
`141`	`141`
`142`	`142`	`export type CanExtend = {`
`143`	`143`	`can: boolean;`
`144`		`- reasons: string[];`
	`144`	`+ // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style`
	`145`	`+ reasons: {[key: string]: string};`
`145`	`146`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,5 +16,5 @@`
`16`	`16`	`*/`
`17`	`17`	`export type canRequest = {`
`18`	`18`	`can: boolean;`
`19`		`- reasons?: string[];`
	`19`	`+ reasons?: Record<string, string>;`
`20`	`20`	`}`