fix: paging bar ui issues on cart

intershop · Mar 15, 2024 · cc23804 · cc23804
1 parent 6a0f9e3
commit cc23804
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 21 deletions.
diff --git a/src/app/shared/components/common/paging/paging.component.html b/src/app/shared/components/common/paging/paging.component.html
@@ -2,10 +2,11 @@
   <ul class="pagination">
     <li class="page-item">
       <button
+        type="button"
         class="btn btn-primary mb-0"
         [disabled]="currentPage === 1"
         (click)="setPage(currentPage - 1)"
-        [attr.aria-label]="'navigation.paging.previous_page.aria_label' | translate"
+        [title]="'navigation.paging.previous_page.label' | translate"
         [attr.aria-disabled]="currentPage === 1"
         data-testing-id="paging-previous-button"
       >
@@ -21,10 +22,10 @@
       <a
         *ngIf="p !== -1; else more"
         [attr.aria-current]="p === currentPage ? 'page' : null"
-        [attr.aria-label]="
+        [title]="
           p === currentPage
-            ? ('navigation.paging.current_page.aria_label' | translate : { '0': p })
-            : ('navigation.paging.go_to_page.aria_label' | translate : { '0': p })
+            ? ('navigation.paging.current_page.label' | translate : { '0': p })
+            : ('navigation.paging.go_to_page.label' | translate : { '0': p })
         "
         tabindex="0"
         (click)="setPage(p)"
@@ -35,10 +36,11 @@
     </li>
     <li class="page-item">
       <button
+        type="button"
         class="btn btn-primary m-0"
         [disabled]="currentPage === lastPage"
+        [title]="'navigation.paging.next_page.label' | translate"
         (click)="setPage(currentPage + 1)"
-        [attr.aria-label]="'navigation.paging.next_page.aria_label' | translate"
         [attr.aria-disabled]="currentPage === lastPage"
         data-testing-id="paging-next-button"
       >

diff --git a/src/app/shared/components/common/paging/paging.component.spec.ts b/src/app/shared/components/common/paging/paging.component.spec.ts
@@ -6,6 +6,8 @@ import { spy, verify } from 'ts-mockito';
 
 import { PagingComponent } from './paging.component';
 
+window.scrollTo = jest.fn();
+
 describe('Paging Component', () => {
   let component: PagingComponent;
   let fixture: ComponentFixture<PagingComponent>;
@@ -27,6 +29,10 @@ describe('Paging Component', () => {
     component.lastPage = 10;
   });
 
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
   it('should be created', () => {
     expect(component).toBeTruthy();
     expect(element).toBeTruthy();

diff --git a/src/app/shared/components/common/paging/paging.component.ts b/src/app/shared/components/common/paging/paging.component.ts
@@ -1,3 +1,4 @@
+import { ViewportScroller } from '@angular/common';
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 
 @Component({
@@ -14,6 +15,8 @@ export class PagingComponent implements OnChanges {
 
   pageIndices: number[] = [];
 
+  constructor(private scroller: ViewportScroller) {}
+
   ngOnChanges(): void {
     if (this.currentPage && this.lastPage) {
       this.pageIndices = this.getPages(this.currentPage, this.lastPage);
@@ -26,6 +29,7 @@ export class PagingComponent implements OnChanges {
    */
   setPage(page: number) {
     this.goToPage.emit(page);
+    this.scroller.scrollToPosition([0, 0]);
   }
 
   /**

diff --git a/src/app/shared/components/line-item/line-item-list/line-item-list.component.html b/src/app/shared/components/line-item/line-item-list/line-item-list.component.html
@@ -24,10 +24,8 @@
   </div>
 
   <div *ngIf="showPagingBar" class="row">
-    <div
-      class="col-12 d-flex grey-panel align-items-center flex-column flex-md-row justify-content-between px-3 py-2 mb-3"
-    >
-      <span>{{ 'shopping_cart.paging.items.label' | translate : { '0': lineItems.length } }}</span>
+    <div class="d-flex w-100 grey-panel align-items-center flex-wrap justify-content-between px-3 py-2 mb-3">
+      <span class="text-nowrap">{{ 'shopping_cart.paging.items.label' | translate : { '0': lineItems.length } }}</span>
       <ish-paging [currentPage]="currentPage" [lastPage]="lastPage" (goToPage)="goToPage($event)" />
     </div>
   </div>

diff --git a/src/assets/i18n/de_DE.json b/src/assets/i18n/de_DE.json
@@ -907,10 +907,10 @@
   "modal.heading.remove.order.template": "Produkt aus Bestellvorlage entfernen",
   "navigation.main.aria_label": "Hauptnavigation",
   "navigation.paging.aria_label": "Seitennavigation",
-  "navigation.paging.current_page.aria_label": "Aktuelle Seite: {{0}}",
-  "navigation.paging.go_to_page.aria_label": "Zu Seite {{0}} gehen",
-  "navigation.paging.next_page.aria_label": "Zur nächsten Seite gehen",
-  "navigation.paging.previous_page.aria_label": "Zur vorherigen Seite gehen",
+  "navigation.paging.current_page.label": "Aktuelle Seite: {{0}}",
+  "navigation.paging.go_to_page.label": "Zu Seite {{0}} gehen",
+  "navigation.paging.next_page.label": "Zur nächsten Seite gehen",
+  "navigation.paging.previous_page.label": "Zur vorherigen Seite gehen",
   "order.tracking.error": "Leider konnte keine Bestellung mit Ihren Daten gefunden werden.",
   "order_template.create.heading": "Bestellvorlage anlegen",
   "payment.error.PaymentInstrumentAlreadyExists": "Das Zahlungsmittel konnte nicht angelegt werden. Zahlungsdaten mit den angegebenen Parametern sind bereits vorhanden.",

diff --git a/src/assets/i18n/en_US.json b/src/assets/i18n/en_US.json
@@ -907,10 +907,10 @@
   "modal.heading.remove.order.template": "Remove Product From Order Template",
   "navigation.main.aria_label": "Main navigation",
   "navigation.paging.aria_label": "Page navigation",
-  "navigation.paging.current_page.aria_label": "Current page: {{0}}",
-  "navigation.paging.go_to_page.aria_label": "Go to page {{0}}",
-  "navigation.paging.next_page.aria_label": "Go to next page",
-  "navigation.paging.previous_page.aria_label": "Go to previous page",
+  "navigation.paging.current_page.label": "Current page: {{0}}",
+  "navigation.paging.go_to_page.label": "Go to page {{0}}",
+  "navigation.paging.next_page.label": "Go to next page",
+  "navigation.paging.previous_page.label": "Go to previous page",
   "order.tracking.error": "Unfortunately, we could not locate an order with the information you provided.",
   "order_template.create.heading": "Create Order Template",
   "payment.error.PaymentInstrumentAlreadyExists": "The payment instrument could not be created. Payment data with the given parameters already exists.",

diff --git a/src/assets/i18n/fr_FR.json b/src/assets/i18n/fr_FR.json
@@ -907,10 +907,10 @@
   "modal.heading.remove.order.template": "Supprimer le produit du modèle de commande",
   "navigation.main.aria_label": "Navigation principale",
   "navigation.paging.aria_label": "Navigation dans les pages",
-  "navigation.paging.current_page.aria_label": "Page actuelle : {{0}}",
-  "navigation.paging.go_to_page.aria_label": "Aller à la page {{0}}",
-  "navigation.paging.next_page.aria_label": "Aller à la page suivante",
-  "navigation.paging.previous_page.aria_label": "Aller à la page précédente",
+  "navigation.paging.current_page.label": "Page actuelle : {{0}}",
+  "navigation.paging.go_to_page.label": "Aller à la page {{0}}",
+  "navigation.paging.next_page.label": "Aller à la page suivante",
+  "navigation.paging.previous_page.label": "Aller à la page précédente",
   "order.tracking.error": "Malheureusement, nous n’avons pas pu localiser une commande avec les informations que vous avez fournies.",
   "order_template.create.heading": "Créer un modèle de commande",
   "payment.error.PaymentInstrumentAlreadyExists": "Le moyen de paiement n’a pas pu être mis en place. Les données de paiement avec les paramètres fournis existent déjà.",