From 5ffece425a56f9c9c509d30e93b8a310b32f7813 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Stephan=20M=C3=BCller?= <smueller@suse.com>
Date: Mon, 12 Feb 2018 18:16:42 +0100
Subject: [PATCH] mgr/dashboard_v2: Easy table cell transformation
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

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>
---
 .../components/table/table.component.html     |  6 +++++
 .../components/table/table.component.ts       | 22 +++++++++++++++++--
 .../src/app/shared/enum/cell-template.enum.ts |  3 +++
 .../src/app/shared/models/cd-table-column.ts  |  6 +++++
 4 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/enum/cell-template.enum.ts
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/models/cd-table-column.ts

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 8c01f556be8..30e1e42a51f 100644
--- 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 009d14dfb4f..c0df5b16cf6 100644
--- 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
index 00000000000..19f37c5858a
--- /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
index 00000000000..9f29edd1b0f
--- /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;
+}
-- 
2.39.5