Taobin-Recipe-Manager/client/src/app/features/dashboard/dashboard.component.ts

import {
  AfterContentChecked,
  AfterRenderRef,
  AfterViewChecked,
  AfterViewInit,
  Component,
  ElementRef,
  OnInit,
  ViewChild,
} from '@angular/core';
import { UserService } from 'src/app/core/services/user.service';
import { User } from 'src/app/core/models/user.model';
import { DatePipe, NgFor, NgIf } from '@angular/common';
import { Recipe, Recipe01 } from 'src/app/core/models/recipe.model';
import { RecipeService } from 'src/app/core/services/recipe.service';
import { BehaviorSubject } from 'rxjs';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [NgIf, NgFor, DatePipe],
  templateUrl: './dashboard.component.html',
})
export class DashboardComponent implements OnInit {
  userInfo: User | null = null;
  recipes: Recipe | null = null;
  recipes01: Recipe01[] | null = null;

  tableHeads: string[] = [
    'Product Code',
    'Name',
    'Other Name',
    'Description',
    'Last Updated',
  ];
  private offset = 0;
  private take = 10;

  isLoaded: boolean = false;
  isLoadMore: boolean = false;
  isHasMore: boolean = true;

  private searchStr = '';
  private oldSearchStr = '';

  @ViewChild('table', { static: false }) set content(table: ElementRef) {
    table.nativeElement.addEventListener(
      'scroll',
      () => {
        if (this.isHasMore === false) {
          return;
        }

        const { scrollTop, scrollHeight, clientHeight } = table.nativeElement;
        const isBottom = scrollTop + clientHeight >= scrollHeight - 10;
        if (isBottom && !this.isLoadMore) {
          this.isLoadMore = true;
          this._recipeService
            .getRecipes({
              offset: this.offset,
              take: this.take,
              search: this.oldSearchStr,
            })
            .subscribe(({ recipes, hasMore }) => {
              const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
              if (this.recipes01 && this.isHasMore) {
                this.recipes01 = [...this.recipes01, ...Recipe01];
              } else {
                this.recipes01 = Recipe01;
              }
              this.recipes = {
                ...recipesWithoutRecipe01,
                Recipe01: [],
              };
              this.offset += 10;
              this.isLoadMore = false;
              this.isHasMore = hasMore;
            });
        }
      },
      { passive: true }
    );
  }

  constructor(
    private _userService: UserService,
    private _recipeService: RecipeService
  ) {}

  ngOnInit(): void {
    this._userService.currentUser.subscribe((user) => {
      this.userInfo = user;
    });

    this._recipeService
      .getRecipes({
        offset: this.offset,
        take: this.take,
        search: this.oldSearchStr,
      })
      .subscribe(({ recipes, hasMore }) => {
        const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
        if (this.recipes01 && this.isHasMore) {
          this.recipes01 = [...this.recipes01, ...Recipe01];
        } else {
          this.recipes01 = Recipe01;
        }
        this.recipes = {
          ...recipesWithoutRecipe01,
          Recipe01: [],
        };
        this.offset += 10;
        this.isLoaded = true;
        this.isHasMore = hasMore;
      });
  }

  setSearch(event: Event) {
    this.searchStr = (event.target as HTMLInputElement).value;
  }

  search(event: Event) {
    this.offset = 0;
    this.oldSearchStr = this.searchStr;
    this._recipeService
      .getRecipes({
        offset: this.offset,
        take: this.take,
        search: this.searchStr,
      })
      .subscribe(({ recipes, hasMore }) => {
        const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
        this.recipes01 = Recipe01;

        this.recipes = {
          ...recipesWithoutRecipe01,
          Recipe01: [],
        };
        this.offset += 10;
        this.isLoaded = true;
        this.isHasMore = hasMore;
      });
  }

  openJsonTab() {
    window.open(environment.api + '/recipes/json', '_blank');
  }
}