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

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 {
  public readonly displayedColumns: string[] = ['id', 'username'];
  public readonly pageSizeOptions: number[] = [5, 10, 25, 100];
  public readonly startingPageSize = this.pageSizeOptions[2];

  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;
  }
}