edit dashboard and text widgets

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

@@ -1,8 +1,30 @@
 <style>
   :host {
     display: block;
-    margin-top: 1em;
-    background-color: aliceblue;
+  }
+  .text-widget {
+    position: relative;
+    padding: 1em 0;
+  }
+  .text-widget:hover {
+    outline: solid 1px black;
+    border-radius: 3px;
+  }
+
+  .editable-hovered {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .text-widget .editable-hovered {
+    visibility: hidden;
+  }
+  .text-widget:hover .editable-hovered {
+    visibility: visible;
   }
 </style>
-<p *ngFor="let line of lines()">{{line}}</p>
+<div class="text-widget">
+  <button mat-icon-button (click)="edit()" class="editable-hovered"><img src="/assets/img/edit-outline.svg"/></button>
+  <p *ngFor="let line of lines()">{{line}}</p>
+</div>

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

@@ -1,4 +1,7 @@
 import { Component, Input } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { TextWidget } from 'src/app/dashboard.service';
+import { AddTextDialogComponent } from '../add-text-dialog/add-text-dialog.component';
 
 @Component({
   selector: 'app-text-widget',
@@ -6,9 +9,22 @@ import { Component, Input } from '@angular/core';
 })
 export class TextWidgetComponent {
   @Input()
-  text = "";
+  data! : TextWidget;
+
+  constructor(private dialog: MatDialog){}
 
   lines(): string[]{
-    return typeof this.text == 'string' ? this.text.split(/\r?\n/) : [];
+    return typeof this.data.text == 'string' ? this.data.text.split(/\r?\n/) : [];
+  }
+
+  edit() {
+    this.dialog.open(AddTextDialogComponent,{
+      data: {text : this.data.text},
+      width: '600px'
+    }).afterClosed().subscribe((text?: string) => {
+      if (text !== undefined) {
+        this.data.text = text;
+      }
+    });
   }
 }