From d340fab9db1cd9718c0080327d79770e3b2e4079 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 15 May 2023 16:58:28 +0300
Subject: [PATCH] UI: Implement edit buttons for widget edit mode.

---
 .../dashboard-page.component.html             | 23 ++++++++++++++++---
 .../dashboard-page.component.scss             |  2 +-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
index a65678c0f8..7ff3f08a0e 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
@@ -316,15 +316,32 @@
             </tb-dashboard-layout>
           </mat-drawer-content>
         </mat-drawer-container>
-        <section data-html2canvas-ignore fxLayout="row" class="layout-wrap tb-header-buttons tb-enter-edit-mode" fxLayoutAlign="start end" *ngIf="!readonly && hideToolbar">
-          <button color="primary"
+        <section data-html2canvas-ignore fxLayout="row" class="layout-wrap tb-header-buttons tb-enter-edit-mode" fxLayoutAlign="start end" *ngIf="!readonly && (hideToolbar || widgetEditMode)">
+          <button [fxShow]="!isEdit"
+                  color="primary"
                   mat-mini-fab
-                  class="tb-btn-header tb-btn-enter-edit-mode"
+                  class="tb-btn-header tb-btn-edit"
                   (click)="toggleDashboardEditMode()"
                   matTooltip="{{ 'action.enter-edit-mode' | translate }}"
                   matTooltipPosition="above">
             <mat-icon>edit</mat-icon>
           </button>
+          <button [fxShow]="isEdit"
+                  color="primary"
+                  mat-mini-fab
+                  class="tb-btn-header tb-btn-edit"
+                  (click)="saveDashboard()"
+                  matTooltip="{{'action.save' | translate}}"
+                  matTooltipPosition="below">
+            <mat-icon>done</mat-icon></button>
+          <button [fxShow]="isEdit"
+                  color="primary"
+                  mat-mini-fab
+                  class="tb-btn-header tb-btn-edit"
+                  (click)="toggleDashboardEditMode()"
+                  matTooltip="{{'action.cancel' | translate}}"
+                  matTooltipPosition="below">
+            <mat-icon>close</mat-icon></button>
         </section>
         <section *ngIf="!embedded" data-html2canvas-ignore class="tb-powered-by-footer" [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">
           <span>Powered by <a href="https://thingsboard.io" target="_blank">Thingsboard v.{{ thingsboardVersion }}</a></span>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.scss
index 27fe88f7d8..d8d1de2905 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.scss
@@ -146,7 +146,7 @@ div.tb-dashboard-page {
 
   section.tb-header-buttons.tb-enter-edit-mode {
     top: 2px;
-    .mdc-fab.tb-btn-enter-edit-mode {
+    .mdc-fab.tb-btn-edit {
       opacity: .5;
     }
   }