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/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/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]="!shouldDisplay()"
     [disabled]="!canRequest().can"
     [tooltipDisabled]="canRequest().can"
     [pTooltip]="tooltip()"
@@ -52,9 +52,25 @@ 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));
+  });
+
+  shouldDisplay = computed(() => {
+    return 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]="!shouldDisplay()"
+      [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 {

projects/public-search/src/app/document-detail/request/request.component.ts renamed to 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,22 @@ 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));
+  });
+
+  shouldDisplay = computed(() => {
+    return 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 +98,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));
       }
     }
   }