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

@@ -61,7 +61,6 @@
   </div>
 
   <div cdkDropListGroup>
-    <!-- All lists in here will be connected. -->
     <div 
       cdkDropList
       class="dashboard-column"
@@ -78,7 +77,7 @@
           [data]="getTextWidget(id)!" (deleted)="delete($event)"></app-text-widget>
         <app-plot-widget
           *ngIf="isPlotWidget(id)" 
-          [data]="getPlotWidget(id)!"></app-plot-widget>
+          [data]="getPlotWidget(id)!" (deleted)="delete($event)"></app-plot-widget>
       </div>
     </div>
   </div>

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

@@ -20,7 +20,6 @@
     cursor: zoom-in;
   }
 
-
   .editable-hovered {
     position: absolute;
     right: 0;
@@ -35,7 +34,10 @@
   }
 </style>
 <div class="dashboard-card" [ngClass]="{'size-medium' : true}">
-  <button mat-icon-button (click)="edit()" class="editable-hovered"><img src="/assets/img/edit-outline.svg"/></button>
+  <div class="editable-hovered">
+    <button mat-icon-button (click)="edit()" ><img src="/assets/img/edit-outline.svg"/></button>
+    <button mat-icon-button (click)="delete()"><img src="/assets/img/recycle-bin-line.svg"/></button>
+  </div>
   <mat-spinner *ngIf="!hasRender('main') && !isError"></mat-spinner>
   <img *ngIf="hasRender('main')" [src]="getImageUrl('main')" (click)="showFullScreenImage()" />
   <div *ngIf="isError">

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

@@ -1,5 +1,6 @@
-import { AfterViewInit, Component, Input, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { ConfirmationDialogComponent } from 'src/app/confirmation-dialog/confirmation-dialog.component';
 import { PlotWidget, PlotWidgetRenderData } from 'src/app/dashboard.service';
 import { PlotViewComponent } from 'src/app/plot-view/plot-view.component';
 import { PlotConfig, PlotResponse, PlotService } from 'src/app/plot.service';
@@ -20,6 +21,9 @@ export class PlotWidgetComponent  {
 
   @ViewChild("plotView") plotView!: PlotViewComponent;
 
+  @Output()
+  deleted : EventEmitter<string> = new EventEmitter<string>();
+
   constructor(private dialog: MatDialog, private service: PlotService){}
 
 
@@ -41,7 +45,18 @@ export class PlotWidgetComponent  {
     });
   }
 
-  
+  delete() {
+    this.dialog
+      .open(ConfirmationDialogComponent, {
+        data: {title: "", text: "Delete plot?", btnOkLabel: "Delete", btnCancelLabel: "Cancel"}
+      })
+      .afterClosed()
+      .subscribe((result: boolean) => {
+        if (result === true) {
+          this.deleted.emit(this.data.widget.id);
+        }
+      });   
+  } 
 
   edit() {
     this.dialog.open(AddPlotDialogComponent, {

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

@@ -25,7 +25,7 @@
   }
 </style>
 <div class="text-widget">
-  <div class="actions editable-hovered">
+  <div class="editable-hovered">
     <button mat-icon-button (click)="edit()"><img src="/assets/img/edit-outline.svg"/></button>
     <button mat-icon-button (click)="delete()"><img src="/assets/img/recycle-bin-line.svg"/></button>
   </div>