[UXP-34] rework carousel pagination

Author: FrancescoMolinaro

src/app/shared/carousel/carousel.component.html

@@ -1,5 +1,5 @@
-<ngb-carousel #carousel [interval]="2000" (slide)="onSlide($event)" class="ds-carousel">
-  <ng-template ngbSlide *ngFor="let item of currentPageItems(); let i = index; let last = last">
+<ngb-carousel #carousel [interval]="2000" (slide)="onSlide($event)" class="ds-carousel" *ngIf="!(isLoading$ | async)">
+  <ng-template ngbSlide *ngFor="let item of (currentPageItems$ | async); let i = index; let last = last">
     <ng-container *ngIf="getItemLink(item.indexableObject); let currentLink; else carouselContent">
       <a *ngIf="internalLinkService.isLinkInternal(currentLink)" [routerLink]="internalLinkService.getRelativePath(currentLink)">
         <ng-container *ngTemplateOutlet="carouselContent"></ng-container>
@@ -33,28 +33,6 @@
     </ng-template>
   </ng-template>
 </ngb-carousel>
-<div class="text-center play-pause-button">
-  <button type="button" class="btn btn-sm toggle-paused" (click)="togglePaused()">
-    <i class="fas fa-play" *ngIf="paused"></i>
-    <i class="fas fa-pause" *ngIf="!paused"></i>
-  </button>
-</div>
-<div class="mt-4 w-100 d-flex justify-content-center align-items-center" *ngIf="totalPages > 1">
-  <button (click)="previousPage()" [disabled]="currentPage === 1" class="prev border-0 bg-transparent">
-    <i class="fa fa-arrow-left"></i>
-  </button>
-  <button
-    *ngFor="let page of pages()"
-    class="number"
-    (click)="changePage(page)"
-    style="border: none; background: none; margin: 0 5px"
-    [style.color]="page === currentPage ? '#000000' : '#7c7c7c'">
-    {{ page < 10 ? '0' + page : page }}
-  </button>
-  <button (click)="nextPage()" [disabled]="currentPage === pages().length" class="next border-0 bg-transparent">
-    <i class="fa fa-arrow-right"></i>
-  </button>
-</div>
 
 <div
   class="carousel-content-wrapper"
@@ -64,13 +42,52 @@
            }"
   *ngIf="(isLoading$ | async)"
 >
-  <a
-    href="#"
-    target="_blank"
-    class="img-container-el">
+  <div class="h-100 img-container-el">
     <div class="picsum-img-wrapper flex-column">
       <img class="img-fluid" src="assets/images/replacement_image.svg">
       {{'loading.default' | translate}}
     </div>
-  </a>
+  </div>
+</div>
+
+<div class="text-center play-pause-button">
+  <button [disabled]="isLoading$ | async" type="button" class="btn btn-sm toggle-paused" (click)="togglePaused()">
+    <i class="fas fa-play" *ngIf="paused"></i>
+    <i class="fas fa-pause" *ngIf="!paused"></i>
+  </button>
 </div>
+<div class="mt-4 w-100 d-flex justify-content-center align-items-center" *ngIf="totalPages > 1">
+  <div
+    class="page-item"
+    [class.disabled]="currentPage === 1 || (isLoading$ | async)"
+  >
+    <button (click)="previousPage()" [disabled]="currentPage === 1 || (isLoading$ | async)" class="page-link prev">
+      «
+    </button>
+  </div>
+
+  <div
+    *ngFor="let page of (currentlyVisiblePages$ | async)"
+    class="page-item"
+    [class.active]="page === currentPage"
+  >
+    <button
+      class="page-link"
+      (click)="changePage(page)"
+      [disabled]="isLoading$ | async"
+    >
+      {{ page < 10 ? '0' + page : page }}
+    </button>
+  </div>
+
+  <div
+    class="page-item"
+    [class.disabled]="currentPage === totalPages || (isLoading$ | async)"
+  >
+    <button (click)="nextPage()" [disabled]="currentPage === totalPages || (isLoading$ | async)" class="page-link next">
+      »
+    </button>
+  </div>
+</div>
+
+

src/app/shared/carousel/carousel.component.scss

@@ -91,4 +91,14 @@
     box-shadow: none !important
   }
 
+  .next {
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+  }
+
+  .prev {
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+
 }