glass: add row selection to datatable

[s0nea]

Signed-off-by: Tatjana Dehler tdehler@suse.com

Checklist

• [ ] References issues, create if required
• [ ] Updates documentation if necessary
• [ ] Includes tests for new functionality or reproducer for bug

---

Show available Jenkins commands

- `jenkins run tumbleweed` - `jenkins run leap` - `jenkins run ubuntu`

[codecov-commenter]

Codecov Report

Merging #756 (e7c2882) into main (5b9173a) will not change coverage. The diff coverage is n/a.

:exclamation: Current head e7c2882 differs from pull request most recent head 7ef0dd9. Consider uploading reports for the commit 7ef0dd9 to get more accurate results

@@           Coverage Diff           @@
##             main     #756   +/-   ##
=======================================
  Coverage   72.06%   72.06%           
=======================================
  Files          31       31           
  Lines        3412     3412           
=======================================
  Hits         2459     2459           
  Misses        953      953           

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 5b9173a...7ef0dd9. Read the comment docs.

[votdev]

Working on the new installer i realized that we need a flag to tell the datatable which selection mode to use: none, single or multiple.

[s0nea]

jenkins run leap

[votdev]

I realized that a selectionChange event is missing. It's a simple implementation, but for the moment this is ok.

diff --git a/src/glass/src/app/shared/components/datatable/datatable.component.ts b/src/glass/src/app/shared/components/datatable/datatable.component.ts
--- a/src/glass/src/app/shared/components/datatable/datatable.component.ts  (revision 94281fbc3f42452f200192ff7706816ea333ba04)
+++ b/src/glass/src/app/shared/components/datatable/datatable.component.ts  (date 1638448078860)
@@ -104,6 +104,9 @@
   @Output()
   loadData = new EventEmitter();

+  @Output()
+  selectionChange = new EventEmitter<DatatableData[]>();
+
   // Internal
   public icons = Icon;
   public page = 1;
@@ -285,6 +288,7 @@
         this.selected.splice(selectedIndex, 1);
       }
     }
+    this.selectionChange.emit(this.selected);
   }

   private updateSelection(): void {

[votdev]

I think we also need a checkbox in the column header to select all rows in one step. Imagine the user needs to select the disk devices in the installer step that are used for storage. In a production environment this could be 50, 100 or more devices. IMO we should implement that in a separate PR.

[s0nea]

I think we also need a checkbox in the column header to select all rows in one step. Imagine the user needs to select the disk devices in the installer step that are used for storage. In a production environment this could be 50, 100 or more devices. IMO we should implement that in a separate PR.

Yep, I already thought about the same. I'm in favor of a separate PR as well.