edit dashboard and text widgets

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

@@ -26,6 +26,12 @@
     display: flex;
     flex-direction: column;
   }
+  .editable .editable-hovered {
+    visibility: hidden;
+  }
+  .editable:hover .editable-hovered {
+    visibility: visible;
+  }
 </style>
 
 <div *ngIf="dashboard === undefined && !error" class="center">
@@ -39,10 +45,12 @@
   <div class="toolbar">
     <button mat-button  (click)="addText()">Add Text</button>
     <button mat-button (click)="addPlot()">Add Plot</button>
-    <button class="save-button" mat-button (click)="save()">Save Dashboard</button>
+    <button class="save-button" mat-button (click)="save()">Save</button>
+  </div>
+  <div class="editable">
+    <h1>{{dashboard.name}}<button mat-icon-button (click)="editNameAndDescription()" class="editable-hovered"><img src="/assets/img/edit-outline.svg"/></button></h1>
+    <p>{{dashboard.description}}</p>
   </div>
-  <h1>{{dashboard.name}}</h1>
-  <p>{{dashboard.description}}</p>
 
   <div cdkDropListGroup>
     <!-- All lists in here will be connected. -->
@@ -53,12 +61,12 @@
       [cdkDropListData]="column"
       (cdkDropListDropped)="drop($event)">
       <div 
-      cdkDrag 
+        cdkDrag 
         *ngFor="let id of column" 
         [attr.widget-id]="id">
         <app-text-widget 
           *ngIf="isTextWidget(id)"
-          [text]="getTextWidget(id)!.text"></app-text-widget>
+          [data]="getTextWidget(id)!"></app-text-widget>
         <app-plot-widget
           *ngIf="isPlotWidget(id)" 
           [data]="getPlotWidget(id)!"></app-plot-widget>