adding dashbord

pdb-js/src/app/dashboard-page/dashboard-page.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+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',
+  styleUrls: ['./dashboard-page.component.scss']
+})
+export class DashboardPageComponent implements OnInit {
+
+  displayedColumns: string[] = ['name', 'description'];
+  dataSource: Dashboard[] = [];
+  loading = true;
+
+  constructor(public dialog: MatDialog, private dashboardService: DashboardService){
+
+  }
+
+  ngOnInit(): void {
+      this.refreshTable();
+  }
+
+  refreshTable(){
+
+    this.loading = true;
+    this.dashboardService.getDashboards().subscribe((dashboardList: DashboardList) => {
+      this.dataSource = dashboardList.dashboards;
+      this.loading = false;
+    });
+  }
+
+  createNewDashboard() {
+    const dialogRef = this.dialog.open(NewDashboardComponent, {
+      data: {name: "", description: ""},
+      hasBackdrop: true
+    });
+
+    dialogRef.afterClosed().subscribe((result: DashboardCreationData) => {
+      console.log('The dialog was closed with result ', JSON.stringify(result));
+      this.dashboardService.createDashboard(result).subscribe(result => {
+        console.log(result);
+
+        this.refreshTable();
+      });
+    });
+  }
+}