edit name and description on dashboard page

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

@@ -17,6 +17,9 @@
     font-weight: bold;
     color: #333;
   }
+  .no-break {
+    white-space: nowrap;
+  }
 </style>
 
 <div *ngIf="loading" class="center">
@@ -49,11 +52,14 @@
       <th mat-header-cell *matHeaderCellDef>Description</th>
       <td mat-cell *matCellDef="let element">{{element.description}}</td>
     </ng-container>
-    <!-- Delete Column -->
-    <ng-container matColumnDef="delete">
-      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let element">
-        <button mat-icon-button (click)="delete(element)" aria-label="delete dashboard">
+    <!-- actions Column -->
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef>Actions</th>
+      <td mat-cell *matCellDef="let element" class="no-break">
+        <button mat-icon-button (click)="edit(element)" aria-label="edit dashboard" title="edit dashboard">
+          <img src="assets/img/edit-outline.svg" class="icon-small" title="delete" />
+        </button>
+        <button mat-icon-button (click)="delete(element)" aria-label="delete dashboard" title="delete dashboard">
           <img src="assets/img/recycle-bin-line.svg" class="icon-small" title="delete" />
         </button>
       </td>

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

@@ -12,7 +12,7 @@ import { NewDashboardComponent } from './new-dashboard/new-dashboard.component';
 })
 export class DashboardPageComponent implements OnInit {
 
-  displayedColumns: string[] = [/*'icon',*/ 'name', 'description','delete'];
+  displayedColumns: string[] = [/*'icon',*/ 'name', 'description','actions'];
   dataSource: Dashboard[] = [];
   loading = true;
   error = "";
@@ -54,6 +54,31 @@ export class DashboardPageComponent implements OnInit {
     });
   }
 
+  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, {