class

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../../product.service';
import { Router } from '@angular/router';
import { ProductInterface } from '../../product-interface';

@Component({
  selector: 'app-admin-products',
  templateUrl: './admin-products.component.html',
  styleUrls: ['./admin-products.component.css']
})
export class AdminProductsComponent implements OnInit {
  products: ProductInterface[] = [];
  filteredProducts: ProductInterface[];

  constructor(private productService: ProductService, private router: Router) { }

  ngOnInit() {
    this.getProducts();
  }

  editProduct(id) {
    this.router.navigate([`/admin/products/${id}`]);
  }

  deleteProduct(id) {
    if (confirm('You are about to permanently remove this product. Continue?')) {
      this.productService.deleteAProduct(id).subscribe(() => this.ngOnInit());
    }
  }

  getProducts() {
    this.productService.getAllProducts().subscribe((products: ProductInterface[]) => {
      console.log(products);
      this.products = products;
      this.filteredProducts = this.products;
    });
  }

  filterProducts(query) {
    this.filteredProducts = query ?
      this.products.filter(product => product.title.toLowerCase().includes(query.toLowerCase())) :
      this.products;
  }

  // the code above is equivalent to below:
  // filterProducts(query) {
  //   this.filteredProducts = this.products;
  //   if (query) {
  //     this.filteredProducts = this.products.filter(product => product.title.toLowerCase().includes(query.toLowerCase()));
  //   } else {
  //     this.filteredProducts = this.products;
  //   }
  // }

}