mgr/dashboard: table cell inline edit emit editing state

- Emit the editing state so that the consuming component can manipulate
that to add some extra validations

- Replace button with cds-icon-button.
- Replace submit button with tertiary instead of ghost for visibility.
- Also added a cancel button to cancel the ongoing edit

Fixes: https://tracker.ceph.com/issues/75949
Signed-off-by: Nizamudeen A <nia@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index 21cd4f873dbcac0c95f6414256ec4caf64ea406d..6f5c54f177b96c8dde0d75ada9329e722677a5dc 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
@@ -467,13 +467,22 @@
       <div cdsCol
            [columnNumbers]="{sm:1}"
            class="cds-p-0 cds-pt-3">
-        <button cdsButton="ghost"
-                size="sm"
-                id="cell-inline-save-btn"
-                type="button"
-                (click)="saveCellItem(row, column?.prop)">
+        <div cdsRow>
+        <cds-icon-button kind="tertiary"
+                         size="sm"
+                         id="cell-inline-save-btn"
+                         type="button"
+                         (click)="saveCellItem(row, column?.prop)">
           <cd-icon type="check"></cd-icon>
-        </button>
+        </cds-icon-button>
+        <cds-icon-button kind="ghost"
+                         size="sm"
+                         id="cell-inline-cancel-btn"
+                         type="button"
+                         (click)="cancelCellEdit(row[identifier], column?.prop)">
+          <cd-icon type="destroy"></cd-icon>
+        </cds-icon-button>
+        </div>
       </div>
     </div>
   </form>
@@ -486,12 +495,12 @@
     <div cdsCol
          [columnNumbers]="{lg: 5}"
          class="edit-btn">
-      <button cdsButton="ghost"
-              size="sm"
-              id="cell-inline-edit-btn"
-              (click)="editCellItem(row[identifier], column, value)">
+      <cds-icon-button kind="ghost"
+                       size="sm"
+                       id="cell-inline-edit-btn"
+                       (click)="editCellItem(row[identifier], column, value)">
         <cd-icon type="edit"></cd-icon>
-      </button>
+      </cds-icon-button>
     </div>
   </div>
   }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
index 7b6baeb809e3476036becc7131863bbfb91f3722..3ee596f212e172c154f5923fbb6ae56a0a3e498d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
@@ -285,6 +285,9 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
     row: any;
   }>();
 
+  @Output()
+  isCellEditingEvent = new EventEmitter<boolean>();
+
   /**
    * Use this variable to access the selected row(s).
    */
@@ -1445,6 +1448,7 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
     }
     this.formGroup?.get(key).setValue(value);
     this.editStates[rowId][column.prop] = value;
+    this.isCellEditingEvent.emit(true);
   }
 
   saveCellItem(row: any, colProp: string) {
@@ -1471,4 +1475,27 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
   valueChange(rowId: string, colProp: string, value: string) {
     this.editStates[rowId][colProp] = value;
   }
+
+  cancelCellEdit(rowId: string, colProp: string, event?: Event) {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    const key = `${rowId}-${colProp}`;
+    if (!this.formGroup.controls[key]) {
+      return;
+    }
+
+    if (this.editStates[rowId]) {
+      delete this.editStates[rowId][colProp];
+    }
+    this.editingCells.clear();
+    this.isCellEditingEvent.emit(false);
+
+    setTimeout(() => {
+      if (this.formGroup.controls[key]) {
+        this.formGroup.removeControl(key);
+      }
+    }, 0);
+  }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
index 290da0e09cbb2522af7a97652d867f9579b0a2bf..7479cb9be8cc1eacedb5009a52ca51ea3496b956 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
@@ -169,7 +169,8 @@ export const ICON_TYPE = {
   checkMarkOutline: 'checkmark--outline',
   arrowUpRight: ' arrow--up-right',
   inProgress: 'in-progress',
-  arrowDown: 'arrow--down'
+  arrowDown: 'arrow--down',
+  destroy: 'close'
 } as const;
 
 export const EMPTY_STATE_IMAGE = {