import { Component , OnDestroy , OnInit } from '@angular/core' ; import { Subscription } from 'rxjs' ; import { HttpClient } from '@angular/common/http' ; import { MatDialog } from '@angular/material' ; import { Project } from './project' ; import { ProjectService } from './project.service' ; import { AddProjectComponent } from './dialogs/add-project/add-project.component' ; import { EditProjectTitleComponent } from './dialogs/edit-project-title/edit-project-title.component' ; import { AddEmployeeToProjectComponent } from './dialogs/add-employee-to-project/add-employee-to-project.component' ; import { Employee } from '../employees/employee' ; import { EditEmployeeInProjectComponent } from './dialogs/edit-employee-in-project/edit-employee-in-project.component' ; import { DeleteProjectComponent } from './dialogs/delete-project/delete-project.component' ; @ Component ( { selector : 'app-project' , templateUrl : './project.component.html' , styleUrls : [ './project.component.css' ] } ) export class ProjectComponent implements OnInit , OnDestroy { dataSource : Project [ ] = [ ] ; isLoadingResults = true ; displayedColumns : string [ ] = [ 'name' , 'beginDate' , 'endDate' , 'employeesCount' , 'employees' ] ; private subscription : Subscription = null ; constructor ( public dialog , private http , private service ) { } ngOnInit ( ) { this . refreshTable ( ) ; } ngOnDestroy ( ) { if ( this . subscription ) { this . subscription . unsubscribe ( ) ; } } refreshTable ( ) { this . subscription = this . service . getAll ( ) . subscribe ( data => { this . isLoadingResults = false ; this . dataSource = data ; } ) ; } getEmployeesCount ( project ) { return project . employees . length ; } isEmptyEmployees ( project ) { return project . employees . length > 0 ; } openAddProjectDialog ( ) { const project = new Project ( ) ; const dialogRef = this . dialog . open ( AddProjectComponent , { data : project } ) ; dialogRef . afterClosed ( ) . subscribe ( outProject => { if ( outProject ) { this . service . add ( project ) . subscribe ( proj => { this . dataSource . push ( proj ) ; this . refreshTable ( ) ; } ) ; } } ) ; } openEditTitleDialog ( id , name ) { const currentName = name ; const dialogRef = this . dialog . open ( EditProjectTitleComponent , { data : currentName } ) ; dialogRef . afterClosed ( ) . subscribe ( outName => { if ( outName && outName !== currentName ) { this . service . editProjectName ( id , outName ) . subscribe ( proj => { this . dataSource . push ( proj ) ; this . refreshTable ( ) ; } ) ; } } ) ; } deleteProject ( id , name ) { const dialogRef = this . dialog . open ( DeleteProjectComponent , { data : name } ) ; dialogRef . afterClosed ( ) . subscribe ( isYes => { if ( isYes ) { this . service . delete ( id ) . subscribe ( ( ) => this . refreshTable ( ) ) ; } } ) ; } openAddEmployeeDialog ( project ) { const dialogRef = this . dialog . open ( AddEmployeeToProjectComponent , { data : project . name } ) ; dialogRef . afterClosed ( ) . subscribe ( outEmployee => { if ( outEmployee ) { this . service . addEmployee ( project . id , outEmployee . id ) . subscribe ( proj => { this . dataSource . push ( proj ) ; this . refreshTable ( ) ; } ) ; } } ) ; } openChangeEmployeeDialog ( project , oldEmployee ) { const currentEmployeeId = oldEmployee . id ; const dialogRef = this . dialog . open ( EditEmployeeInProjectComponent , { data : { projectName : project . name , employeeId : currentEmployeeId } } ) ; dialogRef . afterClosed ( ) . subscribe ( outEmployeeId => { if ( outEmployeeId && outEmployeeId !== currentEmployeeId ) { this . service . editEmployee ( project . id , currentEmployeeId , outEmployeeId ) . subscribe ( proj => { this . dataSource . push ( proj ) ; this . refreshTable ( ) ; } ) ; } } ) ; } deleteEmployee ( projectId , employeeId ) { this . service . deleteEmployee ( projectId , employeeId ) . subscribe ( ( ) => this . refreshTable ( ) ) ; } }