delete dashboards

pdb-js/src/app/app.module.ts

@@ -43,6 +43,8 @@ import { FullScreenPlotDialogComponent } from './dashboard-page/dashboard/full-s
 import { CustomizableGridComponent } from './customizable-grid/customizable-grid.component';
 
 import {DragDropModule} from '@angular/cdk/drag-drop';
+import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
+import { FocusDirective } from './focus.directive';
 
 @NgModule({
   declarations: [
@@ -68,7 +70,9 @@ import {DragDropModule} from '@angular/cdk/drag-drop';
     AddPlotDialogComponent,
     PlotWidgetComponent,
     FullScreenPlotDialogComponent,
-    CustomizableGridComponent
+    CustomizableGridComponent,
+    ConfirmationDialogComponent,
+    FocusDirective
   ],
   imports: [
     BrowserModule,

pdb-js/src/app/confirmation-dialog/confirmation-dialog.component.html

@@ -0,0 +1,16 @@
+<style>
+  div[mat-dialog-content] {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+  }
+</style>
+<h1 *ngIf="data.title" mat-dialog-title>{{data.title}}</h1>
+<div mat-dialog-content>
+  <img src="assets/img/question-mark-round.svg" class="icon-middle" /> 
+  <div>{{data.text}}</div>
+</div>
+<div mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close cdkFocusRegionStart focus>{{data.btnCancelLabel}}</button>
+  <button mat-raised-button color="warn" mat-dialog-close (click)="onOkClick()" cdkFocusRegionEnd>{{data.btnOkLabel}}</button>
+</div>

pdb-js/src/app/confirmation-dialog/confirmation-dialog.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmationDialogComponent } from './confirmation-dialog.component';
+
+describe('ConfirmationDialogComponent', () => {
+  let component: ConfirmationDialogComponent;
+  let fixture: ComponentFixture<ConfirmationDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConfirmationDialogComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ConfirmationDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

pdb-js/src/app/confirmation-dialog/confirmation-dialog.component.ts

@@ -0,0 +1,18 @@
+import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-confirmation-dialog',
+  templateUrl: './confirmation-dialog.component.html'
+})
+export class ConfirmationDialogComponent {
+  
+  constructor(
+    public dialogRef: MatDialogRef<boolean>, 
+    @Inject(MAT_DIALOG_DATA) public data: {title:string, text: string, btnOkLabel:string, btnCancelLabel:string}){
+  }
+
+  onOkClick(): void {
+    this.dialogRef.close(true);
+  }
+}

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

@@ -55,6 +55,15 @@
       <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)">
+          <img src="assets/img/recycle-bin.svg" class="icon-small" title="delete" />
+        </button>
+      </td>
+    </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

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

@@ -1,6 +1,7 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
 import { Dashboard, DashboardCreationData, DashboardList, DashboardService } from '../dashboard.service';
 import { NewDashboardComponent } from './new-dashboard/new-dashboard.component';
 
@@ -10,7 +11,7 @@ import { NewDashboardComponent } from './new-dashboard/new-dashboard.component';
 })
 export class DashboardPageComponent implements OnInit {
 
-  displayedColumns: string[] = [/*'icon',*/ 'name', 'description'];
+  displayedColumns: string[] = [/*'icon',*/ 'name', 'description','delete'];
   dataSource: Dashboard[] = [];
   loading = true;
   error = "";
@@ -23,8 +24,7 @@ export class DashboardPageComponent implements OnInit {
       this.refreshTable();
   }
 
-  refreshTable(){
-
+  refreshTable() {
     this.loading = true;
     this.dashboardService.getDashboards().subscribe({
       'next':(dashboardList: DashboardList) => {
@@ -57,4 +57,28 @@ export class DashboardPageComponent implements OnInit {
       });
     });
   }
+
+  
+
+  delete(dashboard: Dashboard){
+
+    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: {title: "", text: "Delete dashboard '"+dashboard.name+"'?", btnOkLabel: "Delete", btnCancelLabel: "Cancel"},
+      hasBackdrop: true
+    });
+
+    dialogRef.afterClosed().subscribe((result: boolean) => {
+      if (result === true) {
+        this.dashboardService.deleteDashboard(dashboard.id).subscribe({
+          'error': (error) => {
+    
+          },
+          'complete': () => this.refreshTable()
+        });
+      }
+    });
+
+
+    
+  }
 }

pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html

@@ -18,5 +18,5 @@
 
 <div mat-dialog-actions align="end">
   <button mat-button mat-dialog-close>Cancel</button>
-  <button mat-button mat-dialog-close (click)="onSaveClick()" cdkFocusInitial>Save</button>
+  <button mat-button mat-dialog-close (click)="onSaveClick()">Save</button>
 </div>

pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html

@@ -2,10 +2,10 @@
 <div mat-dialog-content>
   <mat-form-field appearance="fill">
     <mat-label>Text</mat-label>
-    <textarea matInput [(ngModel)]="text" #textElement></textarea>
+    <textarea matInput [(ngModel)]="text" #textElement focus></textarea>
   </mat-form-field>
 </div>
 <div mat-dialog-actions align="end">
   <button mat-button mat-dialog-close>Cancel</button>
-  <button mat-button mat-dialog-close (click)="onSaveClick()" cdkFocusInitial>Save</button>
+  <button mat-button mat-dialog-close (click)="onSaveClick()">Save</button>
 </div>

pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef,  ViewChild } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
@@ -6,7 +6,7 @@ import { MatDialogRef } from '@angular/material/dialog';
   templateUrl: './add-text-dialog.component.html',
   styleUrls: ['./add-text-dialog.component.scss']
 })
-export class AddTextDialogComponent implements OnInit {
+export class AddTextDialogComponent  {
   text = "";
 
   @ViewChild('textElement') textElement!: ElementRef;
@@ -14,9 +14,6 @@ export class AddTextDialogComponent implements OnInit {
   constructor(public dialogRef: MatDialogRef<string>){
   }
 
-  ngOnInit(): void {
-      window.setTimeout(() => this.textElement.nativeElement.focus(), 0);
-  }
 
   onSaveClick(): void {
     this.dialogRef.close(this.text);

pdb-js/src/app/dashboard.service.ts

@@ -25,6 +25,10 @@ export class DashboardService {
   saveDashboard(dashboard: Dashboard): Observable<Dashboard>{
     return this.http.put<Dashboard>('//'+window.location.hostname+':'+window.location.port+'/api/dashboards/'+dashboard.id, dashboard);
   }
+
+  deleteDashboard(id: string): Observable<void> {
+    return this.http.delete<void>('//'+window.location.hostname+':'+window.location.port+'/api/dashboards/'+id);
+  }
 }
 
 

pdb-js/src/app/focus.directive.spec.ts

@@ -0,0 +1,8 @@
+import { FocusDirective } from './focus.directive';
+
+describe('FocusDirective', () => {
+  it('should create an instance', () => {
+    const directive = new FocusDirective();
+    expect(directive).toBeTruthy();
+  });
+});

pdb-js/src/app/focus.directive.ts

@@ -0,0 +1,14 @@
+import { AfterViewInit, Directive, ElementRef } from '@angular/core';
+
+@Directive({
+  selector: '[focus]'
+})
+export class FocusDirective implements AfterViewInit {
+
+  constructor(private element: ElementRef) { }
+
+  ngAfterViewInit(): void {
+    this.element.nativeElement.focus();
+  }
+
+}