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

import {
  Component,
  ElementRef,
  OnDestroy,
  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-details/recipe-modal.component';
import { BehaviorSubject, Subject, Subscriber, Subscription } from 'rxjs';
import * as lodash from 'lodash';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';

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

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

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

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

  tableCtx?: ElementRef;

  @ViewChild('table', { static: false }) set content(table: ElementRef) {
    // expose element ref for other fn
    this.tableCtx = table;

    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._recipeService.getCurrentVersion(),
            })
            .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.currentFile = fileName;
              this.offset += 10;
              this.isLoadMore = false;
              this.isHasMore = hasMore;
            });
        }
      },
      { passive: true }
    );
  }

  constructor(private _recipeService: RecipeService) {}

  ngOnInit(): void {
    this._recipeService
      .getRecipes({
        offset: this.offset,
        take: this.take,
        search: this.oldSearchStr,
        version: this._recipeService.getCurrentVersion(),
      })
      .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.currentFile = fileName;
        this.offset += 10;
        this.isLoaded = true;
        this.isHasMore = hasMore;
      });

    this.initRecipeSelection();
  }

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

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

  // Recipe Version selection
  currentCountryFilter: BehaviorSubject<string> = new BehaviorSubject<string>(
    ''
  );
  currentFileFilter: BehaviorSubject<string> = new BehaviorSubject<string>('');
  recipeCountryFiltered: string[] = [];
  recipeFileCountries: string[] = [];

  currentCountryFilterSubScription: Subscription | null = null;
  currentFileFilterSubScription: Subscription | null = null;

  selectedCountry: string | null = null;
  isCountrySelected: boolean = false;

  initRecipeSelection() {
    if (this._recipeService.getRecipeFileCountries().length == 0) {
      this._recipeService.getRecipeCountries().subscribe((countries) => {
        this.recipeCountryFiltered = countries;
      });
    }
  }

  setCountryFilter(event: Event) {
    this.currentCountryFilter.next((event.target as HTMLInputElement).value);
  }

  setFileFilter(event: Event) {
    this.currentFileFilter.next((event.target as HTMLInputElement).value);
  }

  getRecipeCountries() {
    this.currentCountryFilterSubScription = this.currentCountryFilter.subscribe(
      (c) => {
        const countries = this._recipeService.getRecipeFileCountries();
        if (countries.length > 0) {
          this.recipeFileCountries = lodash.filter(countries, (country) =>
            country.includes(c)
          );
        }
      }
    );
  }

  getRecipeFileCountries() {
    this.currentFileFilterSubScription = this.currentFileFilter.subscribe(
      (c) => {
        const countries = this._recipeService.getRecipeFileCountries();
        if (countries.length > 0) {
          this.recipeCountryFiltered = lodash.filter(countries, (country) =>
            country.includes(c)
          );
        }
      }
    );
  }

  countrySelected(country: string) {
    this.selectedCountry = country;
    this.isCountrySelected = true;
  }

  loadRecipe(recipeFileName: 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._recipeService
      .getRecipes({
        offset: this.offset,
        take: this.take,
        search: this.oldSearchStr,
        version: recipeFileName,
      })
      .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.currentFile = fileName;
        this.offset += 10;
        this.isLoaded = true;
        this.isHasMore = hasMore;
      });
  }

  // end of Recipe Version selection

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

  scrollToTop() {
    this.tableCtx!.nativeElement.scroll;
  }

  ngOnDestroy(): void {
    if (this.currentCountryFilterSubScription) {
      this.currentCountryFilterSubScription.unsubscribe();
    }
    if (this.currentFileFilterSubScription) {
      this.currentFileFilterSubScription.unsubscribe();
    }
  }
}