add lazy loaded userlist to userpanel

frontend/src/app/routes/settings/settings-users/settings-users.component.ts

@@ -1,12 +1,60 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
+import { EUser } from 'picsur-shared/dist/entities/user.entity';
+import { HasFailed } from 'picsur-shared/dist/types';
+import { BehaviorSubject, Subject, throttleTime } from 'rxjs';
+import { UserManageService } from 'src/app/services/api/usermanage.service';
 
 @Component({
   templateUrl: './settings-users.component.html',
+  styleUrls: ['./settings-users.component.scss'],
 })
 export class SettingsUsersComponent implements OnInit {
-  constructor() {}
+  public readonly displayedColumns: string[] = ['id', 'username'];
+  public readonly pageSizeOptions: number[] = [5, 10, 25, 100];
+  public readonly startingPageSize = this.pageSizeOptions[2];
 
-  ngOnInit(): void {
+  public dataSubject = new BehaviorSubject<EUser[]>([]);
+  public updateSubject = new Subject<PageEvent>();
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  constructor(private userManageService: UserManageService) {}
+
+  async ngOnInit() {
+    this.subscribeToUpdate();
+    this.fetchUsers(this.startingPageSize, 0);
   }
 
+  @AutoUnsubscribe()
+  private subscribeToUpdate() {
+    return this.updateSubject
+      .pipe(throttleTime(500, undefined, { leading: true, trailing: true }))
+      .subscribe(async (pageEvent: PageEvent) => {
+        let amount = await this.fetchUsers(
+          pageEvent.pageSize,
+          pageEvent.pageIndex
+        );
+        if (amount === 0) {
+          if ( pageEvent.previousPageIndex === pageEvent.pageIndex - 1){
+            this.paginator.previousPage();
+          } else {
+            this.paginator.firstPage();
+          }
+        }
+      });
+  }
+
+  private async fetchUsers(
+    pageSize: number,
+    pageIndex: number
+  ): Promise<number> {
+    const result = await this.userManageService.getUsers(pageSize, pageIndex);
+    if (HasFailed(result)) return 0;
+
+    this.dataSubject.next(result);
+
+    return result.length;
+  }
 }