Improved dots paginator

src/app/activity-editor/activity-editor.component.html

@@ -168,7 +168,7 @@ <h3>Apply a predefined mapping from a given entity</h3>
               <div *ngIf="!targetRemote || !item?.icon" style="width: 30px; height: 30px"></div>
             </div>
             <div class="inline-block p-1">
-              {{item.name}} ({{item.entity_id}})
+              {{Helper.getEntityName(item)}} ({{item.entity_id}})
             </div>
           </div>
         </ng-template>

src/app/controls/pagination/pagination.component.css

@@ -42,6 +42,16 @@
   flex: 1 0 100%;
 }
 
+.small-dot {
+  height: 5px;
+  width: 5px;
+  background-color: #8e8e8e;
+  border-radius: 50%;
+  display: inline-block;
+  cursor: pointer;
+  transition: all 0.5s ease-in-out;
+}
+
 .dot {
   height: 8px;
   width: 8px;

src/app/controls/pagination/pagination.component.html

@@ -1,6 +1,6 @@
 <div #paginationContainer *ngIf="numberOfPages > 1"
      [class]="'flex align-items-center pagination-container'+ (smallSizeMode ? ' pagination-container-small':'')">
   <div #paginationCollection class="pagination-collection">
-    <div *ngFor="let index of indexes" [class]="index.current ? 'active-dot' : 'dot'" (click)="selectIndex($event, index)"></div>
+    <div *ngFor="let index of indexes" [class]="getClass(index)" (click)="selectIndex($event, index)"></div>
   </div>
 </div>

src/app/controls/pagination/pagination.component.ts

@@ -13,7 +13,7 @@ import {NgForOf, NgIf} from "@angular/common";
 interface Indexes
 {
   index: number;
-  current: boolean
+  current: boolean;
 }
 
 @Component({
@@ -53,9 +53,18 @@ export class PaginationComponent implements AfterViewInit {
   padding = 15;
   @Input() smallSizeMode = false;
   widthFixed = false;
+  firstDisplayed = 0;
+  lastDisplayed = 0;
 
   constructor(private cdr: ChangeDetectorRef) {}
 
+  getClass(index: Indexes): string
+  {
+    if (index.current) return 'active-dot';
+    if (index.index === this.firstDisplayed || index.index === this.lastDisplayed) return 'small-dot'
+    return 'dot';
+  }
+
   update()
   {
     if (this.indexes.length == 0 || this.currentIndex >= this.indexes.length) {
@@ -89,20 +98,34 @@ export class PaginationComponent implements AfterViewInit {
     let indexRight = this.currentIndex + 1;
     let indexLeft = this.currentIndex -1;
     const indexesLeft: Indexes[] = [];
-    // const indexesRight: Indexes[] = [];
+    const indexesRight: Indexes[] = [];
     for (let i=0; i<this.displayedIndexes-1; i++)
     {
       if (direction && indexRight < this.numberOfPages) {
-        // indexesRight.push({index: indexRight, current: false});
+        indexesRight.push({index: indexRight, current: false});
         indexRight++
       } else if (indexLeft >= 0) {
         indexesLeft.push({index: indexLeft, current: false});
         indexLeft--;
+      } else if (indexRight < this.numberOfPages) {
+        indexesRight.push({index: indexRight, current: false});
+        indexRight++
       }
       direction = !direction;
     }
     const newIndex = this.currentIndex-indexesLeft.length;
 
+    if (indexesLeft.length > 0 && indexesLeft[indexesLeft.length-1].index > 0)
+      this.firstDisplayed = indexesLeft[indexesLeft.length-1].index;
+    else
+      this.firstDisplayed = this.currentIndex;
+
+    if (indexesRight.length > 0 && indexesRight[indexesRight.length-1].index < this.indexes.length-1)
+      this.lastDisplayed = indexesRight[indexesRight.length-1].index;
+    else this.lastDisplayed = this.currentIndex;
+
+    console.debug(this.displayedIndexes, indexesRight, this.lastDisplayed);
+
     if (this.paginationCollection?.nativeElement && this.currentIndex >= 0) {
       this.paginationCollection.nativeElement.setAttribute("style",
         `gap:0 ${(itemWidth-this.dotSize)}px;transform: translate3d(-${newIndex * itemWidth}px, 0px, 0px`);