first test done!

2020-06-05 16:06:01 -05:00
parent 39755ddf43
commit e1180ac9a9
10 changed files with 237 additions and 44 deletions
@@ -1,14 +1,17 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DataGridComponent } from './data-grid/data-grid.component';
+import { DataGridColDirective } from './directives/DataGridCol.directive';
+import { DataGridColHeaderDirective } from './directives/DataGridColHeader.directive';
+import { DataGridCellDirective } from './directives/DataGridCell.directive';



@NgModule({
-  declarations: [DataGridComponent],
+  declarations: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective],
  imports: [
    CommonModule
  ],
-  exports: [DataGridComponent]
+  exports: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective]
 })
 export class DataGridModule { }
@@ -1,5 +1,36 @@
+<p>some content is showing up here!</p>
+
 <table>
-    <tr>
-        <th>some header</th>
-    </tr>
+    <thead>
+        <tr>
+            <th *ngFor="let column of columns">
+                <p *ngIf="hasHeaderTemplate(column)">
+                    <ng-container
+                      [ngTemplateOutlet]="getColumnHeaderTemplate(column)"
+                    ></ng-container>
+                </p>
+            </th>
+        </tr>
+    </thead>
+
+    <tbody *ngIf="latestResult">
+        <tr *ngFor="let rowModel of latestResult.data; let i = index;">
+          <td *ngFor="let column of columns">
+            <ng-container *ngIf="hasCellTemplate(column)">
+              <ng-container
+                [ngTemplateOutlet]="getColumnCellTemplate(column)"
+                [ngTemplateOutletContext]="{
+                  $implicit: rowModel,
+                  column: column,
+                  rowIndex: i
+                }"
+              ></ng-container>
+            </ng-container>
+          </td>
+        </tr>
+      </tbody>
 </table>
+
+
+
+<!-- test content !!! -->
@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ContentChildren, QueryList, Input } from '@angular/core';
+import { IQueryExecutionResult, IQueryExecutionGroupResult, IDataSource } from '@poweredsoft/data';
+import { DataGridColDirective } from '../directives/DataGridCol.directive';

@Component({
  selector: 'ps-data-grid',
@@ -7,9 +9,56 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DataGridComponent implements OnInit {

+  latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
+  pages: any[];
+
+  @ContentChildren(DataGridColDirective) headers: QueryList<DataGridColDirective>;
+  
+  @Input() columns: string[];
+  @Input() dataSource: IDataSource<any>;
  constructor() { }

  ngOnInit(): void {
+    this.dataSource.data$.subscribe(newData => {
+      this.latestResult = newData;
+      if (newData)
+        this.pages = new Array(newData.numberOfPages);
+    });
  }

+  getColumn(columnName: string) {
+    
+    const ret = this.headers.find(t => 
+    {
+      return t.columnName == columnName;
+    });
+
+    return ret;
+  }
+
+  getColumnHeaderTemplate(columnName: string) {
+    const ret = this.getColumn(columnName);
+    if (ret && ret.headerTemplate) 
+      return ret.headerTemplate.template;
+
+    return null;
+  } 
+
+  getColumnCellTemplate(columnName: string) {
+    const ret = this.getColumn(columnName);
+    if (ret && ret.cellTemplate) 
+      return ret.cellTemplate.template;
+
+    return null;
+  } 
+
+  hasHeaderTemplate(columnName: string) {
+    return this.getColumnHeaderTemplate(columnName) ? true :false;
+  }
+
+  hasCellTemplate(columnName: string) {
+    return this.getColumnCellTemplate(columnName) ? true :false;
+  }
+
+
 }
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psDataGridCell]'
+})
+export class DataGridCellDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}
@@ -0,0 +1,16 @@
+import { Directive, Input, ContentChild } from '@angular/core';
+import { DataGridColHeaderDirective } from './DataGridColHeader.directive';
+import { DataGridCellDirective } from './DataGridCell.directive';
+
+@Directive({
+  selector: '[psDataGridCol]'
+})
+export class DataGridColDirective {
+
+  @Input('psDataGridCol') columnName:string;
+  @ContentChild(DataGridColHeaderDirective) headerTemplate:DataGridColHeaderDirective;
+  @ContentChild(DataGridCellDirective) cellTemplate:DataGridCellDirective;  
+
+  constructor() { }
+
+}
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psDataGridColHeader]'
+})
+export class DataGridColHeaderDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}
@@ -3,4 +3,7 @@
 */

 export * from './lib/data-grid/data-grid.module';
-export * from './lib/data-grid/data-grid/data-grid.component';
+export * from './lib/data-grid/data-grid/data-grid.component';
+export * from './lib/data-grid/directives/DataGridCell.directive';
+export * from './lib/data-grid/directives/DataGridCol.directive';
+export * from './lib/data-grid/directives/DataGridColHeader.directive';