translations: fix show more item link

On the professional interface, when displaying the detailed view of a
journal with lots of issues, a show more… link is collapsed by default
and the number of hidden issues is displayed. This messages was not well
formed for translations. This commit fix this problem.

Closes rero/rero-ils#1223

Co-Authored-by: Renaud Michotte <renaud.michotte@gmail.com>

projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.html

@@ -82,7 +82,7 @@
                 <i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
                 {{ 'Show more' | translate }} ...
               </a>
-              <span class="pl-2 pt-1 small text-secondary">({{ showMoreItemsCounter('issue' | translate, 'issues' | translate) }})</span>
+              <span class="pl-2 pt-1 small text-secondary">({{ showMoreItemsCounter('issue') }})</span>
             </div>
           </ng-container>
           <ng-template #no_items>
@@ -113,7 +113,7 @@
                 <i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
                 {{ 'Show more' | translate }} ...
               </a>
-              <span class="pl-2 pt-1 small text-secondary">({{ showMoreItemsCounter('item' | translate, 'items' | translate) }})</span>
+              <span class="pl-2 pt-1 small text-secondary">({{ showMoreItemsCounter('item') }})</span>
             </div>
           </ng-container>
         </ng-container>

projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.ts

@@ -160,12 +160,28 @@ export class HoldingComponent implements OnInit, OnDestroy {
 
   /**
    * Get the counter string about not loaded items
+   * @param itemType: the type of item related to the counter
    * @return the string to display with the 'show more' link
    */
-  showMoreItemsCounter(itemType: string, pluralForm?: string) {
-    const plural = (pluralForm == null) ? itemType + 's' : pluralForm;
-    const additionalIssueCounter = this.totalItemsCounter - this.displayItemsCounter;
-    itemType = (additionalIssueCounter > 1) ? plural : itemType;
-    return additionalIssueCounter + ' ' + this._translateService.instant('hidden') + ' ' + itemType;
+  showMoreItemsCounter(itemType: string) {
+    let messages: {'singular':string, 'plural':string};
+    switch (itemType) {
+      case 'issue':
+        messages = {
+          singular: '{{ counter }} hidden issue',
+          plural: '{{ counter }} hidden issues'
+        };
+        break;
+      default:  // 'item' string will be used as generic term.
+        messages = {
+          singular: '{{ counter }} hidden item',
+          plural: '{{ counter }} hidden items'
+        }
+    }
+    const additionalItemCounter = this.totalItemsCounter - this.displayItemsCounter;
+    return this._translateService.instant(
+      (additionalItemCounter === 1) ? messages.singular : messages.plural,
+      {counter: additionalItemCounter}
+    );
   }
 }

projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/serial-holding-detail-view.component.ts

@@ -146,8 +146,9 @@ export class SerialHoldingDetailViewComponent implements OnInit {
   get showMoreIssuesCounter() {
     const additionalIssueCounter = this.totalReceivedItems - this.receivedItems.length;
     return (additionalIssueCounter === 1)
-      ? '1 ' + this._translateService.instant('hidden issue')
-      : additionalIssueCounter + ' ' + this._translateService.instant('hidden issues');
+      ? this._translateService.instant('1 hidden issue')
+      : this._translateService.instant('{{ counter }} hidden issues',
+        {counter: additionalIssueCounter});
   }
 
   /**