LP#1626157 Grid custom field templates

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-column.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-column.component.ts
index 09f8432..7d34f8e 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-column.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-column.component.ts
@@ -21,6 +21,9 @@ export class EgGridColumnComponent implements OnInit {
     @Input() sortable: boolean;
     @Input() datatype: string;
     @Input() multiSortable: boolean;
+
+    // Used in conjunction with cellTemplate.  
+    @Input() cellContext: any;
     @Input() cellTemplate: TemplateRef<any>;
 
     // get a reference to our container grid.
@@ -41,6 +44,7 @@ export class EgGridColumnComponent implements OnInit {
         col.hidden = this.hidden === true;
         col.isIndex = this.index === true;
         col.cellTemplate = this.cellTemplate;
+        col.cellContext = this.cellContext;
         col.isSortable = this.sortable;
         col.isMultiSortable = this.multiSortable;
         this.grid.context.columnSet.add(col);

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
index 6be7e69..84c8dee 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
@@ -30,7 +30,14 @@
         (dblclick)="onRowDblClick(row)"
         (click)="onRowClick($event, row, idx)"
         *ngFor="let col of context.columnSet.displayColumns()">
-        {{context.getRowColumnValue(row, col)}}
+        <span *ngIf="!col.cellTemplate">
+          {{context.getRowColumnValue(row, col)}}
+        </span>
+        <span *ngIf="col.cellTemplate">
+          <ng-container
+            *ngTemplateOutlet="col.cellTemplate; context: col.getCellContext(row)">
+          </ng-container> 
+        </span>
       </div>
     </div>
   </div>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.ts b/Open-ILS/src/eg2/src/app/share/grid/grid.ts
index 2d8af79..e6a2def 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.ts
@@ -25,10 +25,19 @@ export class EgGridColumn {
     idlFieldDef: any;
     datatype: string;
     cellTemplate: TemplateRef<any>;
+    cellContext: any;
     isIndex: boolean;
     isDragTarget: boolean;
     isSortable: boolean;
     isMultiSortable: boolean;
+
+    getCellContext(row: any) {
+        return {
+          col: this,
+          row: row,
+          userContext: this.cellContext
+        };
+    }
 }
 
 export class EgGridColumnSet {

diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
index d6c600e..4430212 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
@@ -67,15 +67,20 @@
   <div>HERE: {{testDate}}</div>
 </div>
 
-<!-- grid stuff -->
-<!--
-<eg-grid #cbtGrid idlClass="cbt" [dataSource]="btSource">
-</eg-grid>
--->
-
 <!-- printing -->
 
 <button class="btn btn-secondary" (click)="doPrint()">Test Print</button>
 <ng-template #printTemplate let-world="world">Hello, {{world}}!</ng-template>
 
 
+<!-- grid stuff -->
+<ng-template #cellTmpl let-row="row" let-col="col" let-userContext="userContext">
+  HELLO {{userContext.hello}}
+  <button>{{row.id()}}</button>
+</ng-template>
+<eg-grid #cbtGrid idlClass="cbt" [dataSource]="btSource">
+  <eg-grid-column name="test" [cellTemplate]="cellTmpl" [cellContext]="btGridTestContext">
+  </eg-grid-column>
+</eg-grid>
+
+

diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
index 7820b7b..5456d04 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
@@ -32,6 +32,7 @@ export class EgSandboxComponent implements OnInit {
     gridDataSource: EgGridDataSource = new EgGridDataSource();
 
     btSource: EgGridDataSource = new EgGridDataSource();
+    btGridTestContext: any = {hello : 'world'};
 
     testDate: any;