mgr/dashboard_v2: Easy table cell transformation

The table column definition is extended by "cellTransformation"
property, which is filled through the use of "CellTemplate" enum.
If you have set that, a specific template reference will be used for
the ngx column property "cellTemplate". All references are stored
at the bottom of the data table template.

Signed-off-by: Stephan Müller <smueller@suse.com>

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/table/table.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/table/table.component.html
index 8c01f556be867b95126826bfbe7a319b709a1e86..30e1e42a51f684ba9fadebe00c26a1560fec91fe 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/table/table.component.html
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/table/table.component.html
@@ -67,3 +67,9 @@
   </ngx-datatable>
 </div>
 <ng-template cdTableDetails></ng-template>
+<!-- cell templates that can be accessed from outside -->
+<ng-template #bold
+             let-row="row"
+             let-value="value">
+  <strong>{{ value }}</strong>
+</ng-template>

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/table/table.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/table/table.component.ts
index 009d14dfb4f67b808b39e36e70561a2155d87959..c0df5b16cf680fdbe01f72bf545d339b093a4ca7 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/table/table.component.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/table/table.component.ts
@@ -6,12 +6,14 @@ import {
   OnChanges,
   OnInit,
   Output,
+  TemplateRef,
   Type,
   ViewChild
 } from '@angular/core';
 
-import { DatatableComponent, TableColumn } from '@swimlane/ngx-datatable';
+import { DatatableComponent } from '@swimlane/ngx-datatable';
 
+import { CdTableColumn } from '../../models/cd-table-column';
 import { TableDetailsDirective } from './table-details.directive';
 
 @Component({
@@ -26,7 +28,7 @@ export class TableComponent implements OnInit, OnChanges {
   // This is the array with the items to be shown
   @Input() data: any[];
   // Each item -> { prop: 'attribute name', name: 'display name' }
-  @Input() columns: TableColumn[];
+  @Input() columns: CdTableColumn[];
   // Method used for setting column widths.
   @Input() columnMode ?= 'force';
   // Name of the component fe 'TableDetailsComponent'
@@ -40,6 +42,11 @@ export class TableComponent implements OnInit, OnChanges {
   // Should be the function that will update the input data
   @Output() fetchData = new EventEmitter();
 
+  @ViewChild('bold') bold: TemplateRef<any>;
+  cellTemplates: {
+    [key: string]: TemplateRef<any>
+  } = {};
+
   selectable: String = undefined;
   search = '';
   rows = [];
@@ -55,12 +62,23 @@ export class TableComponent implements OnInit, OnChanges {
   constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
 
   ngOnInit() {
+    this._addTemplates();
+    this.columns.map((column) => {
+      if (column.cellTransformation) {
+        column.cellTemplate = this.cellTemplates[column.cellTransformation];
+      }
+      return column;
+    });
     this.reloadData();
     if (this.detailsComponent) {
       this.selectable = 'multi';
     }
   }
 
+  _addTemplates () {
+    this.cellTemplates.bold = this.bold;
+  }
+
   ngOnChanges(changes) {
     this.useData();
   }

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/enum/cell-template.enum.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/enum/cell-template.enum.ts
new file mode 100644 (file)
index 0000000..19f37c5
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/enum/cell-template.enum.ts
@@ -0,0 +1,3 @@
+export enum CellTemplate {
+  bold = 'bold'
+}

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/models/cd-table-column.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/models/cd-table-column.ts
new file mode 100644 (file)
index 0000000..9f29edd
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/models/cd-table-column.ts
@@ -0,0 +1,6 @@
+import { TableColumn } from '@swimlane/ngx-datatable';
+import { CellTemplate } from '../enum/cell-template.enum';
+
+export interface CdTableColumn extends TableColumn {
+  cellTransformation?: CellTemplate;
+}