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

import { 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 { environment } from 'src/environments/environment';
import { RecipeModalComponent } from 'src/app/shared/modal/recipe-modal.component';
import { BehaviorSubject } from 'rxjs';
import * as lodash from 'lodash';

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

  tableHeads: string[] = [
    'Product Code',
    'Name',
    'Other Name',
    'Description',
    'Last Updated',
  ];
  private offset = 0;
  private take = 20;
  private recipeVersionData: string[] = [];
  private currentRecipeVersion: string = 'coffeethai02_580.json';

  recipeVersion: BehaviorSubject<string> = new BehaviorSubject<string>('');
  recipeVersion$ = this.recipeVersion.asObservable();

  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,
              version: this.currentRecipeVersion,
            })
            .subscribe(({ recipes, hasMore, fileName }) => {
              const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
              if (this.recipes01 && this.isHasMore) {
                this.recipes01 = [...this.recipes01, ...Recipe01];
              } else {
                this.recipes01 = Recipe01;
              }
              this.recipes = {
                ...recipesWithoutRecipe01,
                Recipe01: [],
              };
              this.fileName = fileName;
              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,
        version: this.currentRecipeVersion,
      })
      .subscribe(({ recipes, hasMore, fileName }) => {
        const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
        if (this.recipes01 && this.isHasMore) {
          this.recipes01 = [...this.recipes01, ...Recipe01];
        } else {
          this.recipes01 = Recipe01;
        }
        this.recipes = {
          ...recipesWithoutRecipe01,
          Recipe01: [],
        };
        this.fileName = fileName;
        this.offset += 10;
        this.isLoaded = true;
        this.isHasMore = hasMore;
      });

    this.recipeVersion$.subscribe((version) => {
      if (version)
        this.recipeVersions = lodash.filter(this.recipeVersionData, (v) =>
          v.includes(version)
        );
    });
  }

  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,
        version: this.currentRecipeVersion,
      })
      .subscribe(({ recipes, hasMore, fileName }) => {
        const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
        this.recipes01 = Recipe01;

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

  loadRecipe(recipeVersion: string) {
    // clear all recipes
    this.recipes = null;
    this.recipes01 = null;
    this.offset = 0;
    this.isLoaded = false;
    this.isHasMore = true;
    this.isLoadMore = false;
    this.oldSearchStr = '';
    this.currentRecipeVersion = recipeVersion;

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

  setRecipeVersion(event: Event) {
    this.recipeVersion.next((event.target as HTMLInputElement).value);
  }

  getRecipeVersions() {
    if (this.recipeVersionData.length > 0) return;
    this._recipeService.getRecipeVersions().subscribe((versions) => {
      this.recipeVersionData = versions;
      this.recipeVersions = versions;
    });
  }

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