home.component.ts

import {Component, OnInit} from '@angular/core';
import {Course, sortCoursesBySeqNo} from '../model/course';
import { Observable } from 'rxjs';
import { finalize, map } from 'rxjs/operators';
import {HttpClient} from '@angular/common/http';
import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
import {CourseDialogComponent} from '../course-dialog/course-dialog.component';
import { CoursesService } from '../services/courses.service';
import { LoadingService } from '../services/loading.service';


@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  beginnerCourses$: Observable<Course[]>;
  advancedCourses$: Observable<Course[]>;

  constructor(private http: HttpClient, private dialog: MatDialog, private coursesService: CoursesService, private loadingService: LoadingService) {}

  ngOnInit() {
    this.reloadCourses();
  }

  reloadCourses() {

    this.loadingService.loadingOn();

    const courses$ = this.coursesService.loadAllCourses()
      .pipe(
        map(courses => courses.sort(sortCoursesBySeqNo)),
        finalize(() =>     this.loadingService.loadingOff())
      )

    this.beginnerCourses$ = courses$
      .pipe(
        map(courses => courses.filter(course => course.category === "BEGINNER"))
      )

    this.advancedCourses$ = courses$
      .pipe(
        map(courses => courses.filter(course => course.category === "ADVANCED"))
      )
  }

  editCourse(course: Course) {

    const dialogConfig = new MatDialogConfig();
    
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.width = "400px";

    dialogConfig.data = course;

    const dialogRef = this.dialog.open(CourseDialogComponent, dialogConfig);

  }

}