feat(layout): move all pagination controls together, use common inter…

…face

libs/ui/elements/src/index.ts

@@ -15,8 +15,6 @@ export * from './lib/metadata-info/metadata-info.component'
 export * from './lib/metadata-quality-item/metadata-quality-item.component'
 export * from './lib/metadata-quality/metadata-quality.component'
 export * from './lib/notification/notification.component'
-export * from './lib/pagination-buttons/pagination-buttons.component'
-export * from './lib/pagination/pagination.component'
 export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/related-record-card/related-record-card.component'
 export * from './lib/thumbnail/thumbnail.component'

libs/ui/inputs/src/index.ts

@@ -22,7 +22,6 @@ export * from './lib/text-input/text-input.component'
 export * from './lib/ui-inputs.module'
 export * from './lib/url-input/url-input.component'
 export * from './lib/viewport-intersector/viewport-intersector.component'
-export * from './lib/previous-next-buttons/previous-next-buttons.component'
 export * from './lib/switch-toggle/switch-toggle.component'
 export * from './lib/file-input/file-input.component'
 export * from './lib/image-input/image-input.component'

libs/ui/layout/src/index.ts

@@ -10,4 +10,8 @@ export * from './lib/sticky-header/sticky-header.component'
 export * from './lib/block-list/block-list.component'
 export * from './lib/sortable-list/sortable-list.component'
 export * from './lib/modal-dialog/modal-dialog.component'
+export * from './lib/pagination/pagination.component'
+export * from './lib/pagination-buttons/pagination-buttons.component'
+export * from './lib/previous-next-buttons/previous-next-buttons.component'
+export * from './lib/paginable.interface'
 export * from './lib/ui-layout.module'

libs/ui/layout/src/lib/carousel/carousel.component.css

@@ -6,19 +6,3 @@
   position: relative;
   display: block;
 }
-
-.carousel-step-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 6px;
-  position: relative;
-}
-
-.carousel-step-dot:after {
-  content: '';
-  position: absolute;
-  left: -7px;
-  top: -7px;
-  width: 20px;
-  height: 20px;
-}

libs/ui/layout/src/lib/carousel/carousel.component.html

@@ -10,8 +10,8 @@
 >
   <button
     *ngFor="let step of steps; let i = index"
-    class="carousel-step-dot"
-    (click)="scrollToStep(i)"
+    class="pagination-dot"
+    (click)="goToPage(i + 1)"
     [ngClass]="currentStep === i ? 'bg-primary' : 'bg-gray-400'"
   ></button>
 </div>

libs/ui/layout/src/lib/paginable.interface.ts

@@ -0,0 +1,14 @@
+/**
+ * This interface is used for components that want to offer pagination
+ * Note: pages indexes are 1-based!! so `isLastPage` means `currentPage === pagesCount`
+ * and `isFirstPage` means `currentPage === 1`
+ */
+export interface Paginable {
+  isFirstPage: boolean
+  isLastPage: boolean
+  pagesCount: number
+  currentPage: number
+  goToPage(index: number): void
+  goToNextPage(): void
+  goToPrevPage(): void
+}

libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.html → libs/ui/layout/src/lib/pagination-buttons/pagination-buttons.component.html

@@ -2,8 +2,8 @@
   <div class="flex flex-row gap-[5px] items-center">
     <gn-ui-button
       type="light"
-      [disabled]="currentPage === 1"
-      (buttonClick)="previousPage()"
+      [disabled]="listComponent.isFirstPage"
+      (buttonClick)="listComponent.goToPrevPage()"
       extraClass="!px-[3px]"
     >
       <ng-icon name="iconoirNavArrowLeft"></ng-icon>
@@ -14,17 +14,17 @@
       </ng-container>
       <ng-container *ngIf="page !== '...'">
         <gn-ui-button
-          [type]="page === currentPage ? 'primary' : 'light'"
-          [disabled]="page === currentPage"
+          [type]="page === listComponent.currentPage ? 'primary' : 'light'"
+          [disabled]="page === listComponent.currentPage"
           (buttonClick)="changePage(page)"
           >{{ page }}</gn-ui-button
         >
       </ng-container>
     </ng-container>
     <gn-ui-button
       type="light"
-      [disabled]="currentPage === totalPages"
-      (buttonClick)="nextPage()"
+      [disabled]="listComponent.isLastPage"
+      (buttonClick)="listComponent.goToNextPage()"
       extraClass="!px-[3px]"
     >
       <ng-icon name="iconoirNavArrowRight"></ng-icon>