Feat: Add pagination to action log (#21)

src/app/action-log/pages/action-log/action-log.component.html

@@ -38,6 +38,23 @@
           </tr>
         </table>
       </div>
+      <div class="card-footer">
+        <ul class="pagination text-center">
+          <li class="paginate_button page-item previous" [class.disabled]="currentPage <= 1">
+            <a href="javascript:void(0)" class="page-link" (click)="goToPage(currentPage - 1)">
+              Previous
+            </a>
+          </li>
+          <li *ngFor="let page of pages" class="paginate_button page-item" [class.active]="currentPage === page">
+            <a href="javascript:void(0)" class="page-link" (click)="goToPage(page)">{{page}}</a>
+          </li>
+          <li class="paginate_button page-item next" [class.disabled]="currentPage === pages[pages.length - 1]">
+            <a href="javascript:void(0)" class="page-link" (click)="goToPage(currentPage + 1)">
+              Next
+            </a>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </ng-template>

src/app/action-log/pages/action-log/action-log.component.ts

@@ -5,37 +5,74 @@ import {ActionLogReportActivity, ActionLogReportType, ActionLogResponse} from ".
 import {toPromise} from "../../../types/resolvable";
 import {ApiResponseHelperService} from "../../../services/api-response-helper.service";
 import {MessageService} from "../../../services/message.service";
+import {ActivatedRoute, Router} from "@angular/router";
+import {int} from "../../../types/number";
 
 @Component({
   selector: 'app-action-log',
   templateUrl: './action-log.component.html',
   styleUrls: ['./action-log.component.scss']
 })
 export class ActionLogComponent implements OnInit {
+  private readonly apiPagesPerPage = 2;
+
   protected readonly ActionLogReportType = ActionLogReportType;
   protected readonly ActionLogReportActivity = ActionLogReportActivity;
 
   public loading: boolean = true;
   public actionLog: ActionLogResponse | null = null;
 
+  public pages: int[] = [1, 2, 3, 4, 5];
+  public currentPage: int = 1;
+  public lastPageReached: boolean = false;
+
   constructor(
     private readonly titleService: TitleService,
     private readonly api: FediseerApiService,
     private readonly messageService: MessageService,
+    private readonly activatedRoute: ActivatedRoute,
+    private readonly router: Router,
   ) {
   }
 
   public async ngOnInit(): Promise<void> {
     this.titleService.title = 'Action log';
 
-    const response = await toPromise(this.api.getActionLog(1, 5));
-    if (response === null) {
-      this.messageService.createError('Failed getting list of actions');
+    this.activatedRoute.queryParams.subscribe(async params => {
+      this.loading = true;
+
+      this.currentPage = Number(params['page'] ?? 1);
+      const pageStart = ((this.currentPage - 1) * this.apiPagesPerPage) + 1;
+      const pageEnd = this.currentPage * this.apiPagesPerPage;
+
+      const response = await toPromise(this.api.getActionLog(pageStart, pageEnd));
+      if (response === null) {
+        this.messageService.createError('Failed getting list of actions');
+        this.loading = false;
+        return;
+      }
+      this.actionLog = response;
+      if (!this.actionLog.length) {
+        this.messageService.createWarning('No more pages available');
+        this.lastPageReached = true;
+        this.goToPage(this.currentPage - 1);
+        this.pages.pop();
+        return;
+      }
+
+      if (!this.lastPageReached && !this.pages.includes(this.currentPage + 1)) {
+        this.pages.push(this.currentPage + 1);
+      }
+
       this.loading = false;
-      return;
-    }
+    });
+  }
 
-    this.actionLog = response;
-    this.loading = false;
+  public goToPage(page: int): void {
+    this.router.navigate([], {
+      relativeTo: this.activatedRoute,
+      queryParams: {page: page},
+      queryParamsHandling: 'merge',
+    });
   }
 }

src/app/components/notification/notification.component.html

@@ -2,13 +2,15 @@
   class="alert alert-dismissible"
   [class.alert-success]="kind === NotificationType.Success"
   [class.alert-danger]="kind === NotificationType.Error"
+  [class.alert-warning]="kind === NotificationType.Warning"
   *ngIf="!isDeleted"
 >
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true" (click)="remove()">×</button>
   <h5><i
     class="icon fas fa-check"
     [class.fa-check]="kind === NotificationType.Success"
     [class.fa-ban]="kind === NotificationType.Error"
+    [class.fa-exclamation-triangle]="kind === NotificationType.Warning"
   ></i> {{ title | async }}</h5>
   {{ message }}
 </div>