104 lines
3.1 KiB
TypeScript
104 lines
3.1 KiB
TypeScript
import { HttpErrorResponse } from '@angular/common/http';
|
|
import { Component, OnInit } from '@angular/core';
|
|
import { MatDialog } from '@angular/material/dialog';
|
|
import { MatSnackBar } from '@angular/material/snack-bar';
|
|
import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
|
|
import { Dashboard, DashboardCreationData, DashboardList, DashboardService } from '../dashboard.service';
|
|
import { NewDashboardComponent } from './new-dashboard/new-dashboard.component';
|
|
|
|
@Component({
|
|
selector: 'app-dashboard-page',
|
|
templateUrl: './dashboard-page.component.html'
|
|
})
|
|
export class DashboardPageComponent implements OnInit {
|
|
|
|
displayedColumns: string[] = [/*'icon',*/ 'name', 'description','actions'];
|
|
dataSource: Dashboard[] = [];
|
|
loading = true;
|
|
error = "";
|
|
|
|
constructor(
|
|
public dialog: MatDialog,
|
|
private dashboardService: DashboardService,
|
|
private snackBar: MatSnackBar){}
|
|
|
|
ngOnInit(): void {
|
|
this.refreshTable();
|
|
}
|
|
|
|
refreshTable() {
|
|
this.loading = true;
|
|
this.dashboardService.getDashboards().subscribe({
|
|
'next':(dashboardList: DashboardList) => {
|
|
this.dataSource = dashboardList.dashboards;
|
|
this.loading = false;
|
|
},
|
|
'error': (error: HttpErrorResponse) => {
|
|
if (error.status == 504){
|
|
this.error = "Server Unreachable";
|
|
}else{
|
|
this.error = "Failed to load dashboards";
|
|
}
|
|
this.loading = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
createNewDashboard() {
|
|
const dialogRef = this.dialog.open(NewDashboardComponent, {
|
|
data: {name: "", description: ""},
|
|
width: '30em'
|
|
});
|
|
|
|
dialogRef.afterClosed().subscribe((result: DashboardCreationData) => {
|
|
this.dashboardService.createDashboard(result).subscribe(result => this.refreshTable());
|
|
});
|
|
}
|
|
|
|
edit(dashboard: Dashboard) {
|
|
const dialogRef = this.dialog.open(NewDashboardComponent, {
|
|
data: {name: dashboard.name, description: dashboard.description},
|
|
hasBackdrop: true
|
|
});
|
|
|
|
dialogRef.afterClosed().subscribe((result?: DashboardCreationData) => {
|
|
|
|
if (result) {
|
|
dashboard.name = result.name;
|
|
dashboard.description = result.description;
|
|
this.dashboardService.saveDashboard(dashboard).subscribe({
|
|
'error': () => {
|
|
this.snackBar.open("server made a boo boo", "", {
|
|
duration:5000
|
|
})
|
|
},
|
|
complete: () => {
|
|
this.refreshTable()
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
delete(dashboard: Dashboard){
|
|
|
|
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
|
|
data: {title: "", text: "Delete dashboard '"+dashboard.name+"'?", btnOkLabel: "Delete", btnCancelLabel: "Cancel"}
|
|
});
|
|
|
|
dialogRef.afterClosed().subscribe((result: boolean) => {
|
|
if (result === true) {
|
|
this.dashboardService.deleteDashboard(dashboard.id).subscribe({
|
|
'error': (error) => {
|
|
this.snackBar.open("failed to delete dashboard","", {
|
|
duration: 5000,
|
|
verticalPosition: 'top'
|
|
});
|
|
},
|
|
'complete': () => this.refreshTable()
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|