validation

2020-06-17 10:57:57 -05:00
parent 7ffcc93769
commit 1cd6e16ce4
15 changed files with 187 additions and 62 deletions
@@ -13,12 +13,18 @@ import { DataGridLoaderDirective } from './directives/data-grid-loader.directive


@NgModule({
-  declarations: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective, DataGridLoaderDirective,
+  declarations: [
+    DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,
+    DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective, 
+    DataGridLoaderDirective,
    
  ],
  imports: [
    CommonModule
  ],
-  exports: [DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective,DataGridLoaderDirective]
+  exports: [
+    DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,
+    DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective,
+    DataGridLoaderDirective]
 })
 export class DataGridModule { }
@@ -1,4 +1,6 @@
-<table [ngClass]="tableClasses">
+<ng-container *ngIf="loading" [ngTemplateOutlet]="loadingTemplate"></ng-container> 
+
+<table [ngClass]="tableClasses" style="min-height: 300px;">
  <thead>
    <tr>
      <th *ngFor="let header of gridHeaders" [attr.colspan]="columns.length">
@@ -15,12 +17,7 @@
      </th>
    </tr>
  </thead>
-  <tbody *ngIf="loading">
-    <tr>
-      <td [attr.colspan]="columns.length"><ng-content select="psDataGridLoader"></ng-content></td>
-    </tr>
-  </tbody>
-  <tbody *ngIf="latestResult&&!loading">
+  <tbody *ngIf="!noData else noResultTemplate">
    <tr *ngFor="let rowModel of latestResult.data; let i = index">
      <td *ngFor="let column of columns">
        <ng-container *ngIf="hasCellTemplate(column)">
@@ -44,3 +41,18 @@
    </tr>
  </tfoot>
 </table>
+
+<ng-template #loadingTemplate>
+  <ng-container *ngFor="let loader of loaders">
+    <ng-container [ngTemplateOutlet]="loader.template"></ng-container>
+  </ng-container>
+</ng-template>
+<ng-template #noResultTemplate>
+  <tbody>
+    <tr>
+      <td [attr.colspan]="columns.length">
+        <p style="text-align: center;">{{ noRecordsDisplayText }}</p>
+      </td>
+    </tr>
+  </tbody>
+</ng-template>
@@ -1,27 +1,34 @@
-import { Component, OnInit, ContentChildren, QueryList, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, ContentChildren, QueryList, Input, Output, EventEmitter, ContentChild, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { IQueryExecutionResult, IQueryExecutionGroupResult, IDataSource } from '@poweredsoft/data';
 import { DataGridColDirective } from '../directives/data-grid-col.directive';
 import { DataGridHeaderDirective } from '../directives/data-grid-header.directive';
 import { DataGridFooterDirective } from '../directives/data-grid-footer.directive';
+import { DataGridLoaderDirective } from '../directives/data-grid-loader.directive';
+import { Subscription } from 'rxjs';

@Component({
  selector: 'ps-data-grid',
  templateUrl: './data-grid.component.html',
  styleUrls: ['./data-grid.component.scss']
 })
-export class DataGridComponent implements OnInit {
+export class DataGridComponent implements OnInit, OnDestroy {

  latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
+  loading:boolean;

  @ContentChildren(DataGridColDirective) columnDefinitions: QueryList<DataGridColDirective>;
  @ContentChildren(DataGridHeaderDirective) gridHeaders: QueryList<DataGridHeaderDirective>;
  @ContentChildren(DataGridFooterDirective) gridFooters: QueryList<DataGridFooterDirective>;
-  
+  @ContentChildren(DataGridLoaderDirective) loaders: QueryList<DataGridLoaderDirective>;
  
  @Input() dataSource: IDataSource<any>;
  @Input() tableClasses: any;
+  @Input() noRecordsText: string;
+
  private _columns: string[];
-  loading:boolean;
+  private _dataSubscription: Subscription;
+  private _loadingSubscription: Subscription;
+
  @Input() set columns(value: string[]) {
    this._columns = value;
    this.columnsChange.emit(value);
@@ -32,19 +39,45 @@ export class DataGridComponent implements OnInit {
  }  

  @Output() columnsChange:EventEmitter<string []> = new EventEmitter<string []>();
-  constructor() { }
+
+  
+
+  get noData() {
+    return !this.latestResult || this.latestResult.totalRecords == 0; 
+  }
+
+  get noRecordsDisplayText() {
+    return this.noRecordsText || 'No records';
+  }
+
+  constructor(private cdr: ChangeDetectorRef) { 
+
+  }
+
+  ngOnDestroy(): void {
+    this._dataSubscription.unsubscribe();
+    this._loadingSubscription.unsubscribe();
+  }

  ngOnInit(): void {
-    this.loading = true;
-    console.log(this.columnDefinitions);
-    this.dataSource.data$.subscribe(newData => {
-      this.loading=false;
+  
+    this._dataSubscription = this.dataSource.data$.subscribe(newData => {
      this.latestResult = newData;
    });
+
+    this._loadingSubscription = this.dataSource.loading$.subscribe(isLoading => {
+      this.loading = isLoading;
+      this.cdr.detectChanges();
+    });
+
+    console.log(this.loaders);
  }

  getColumn(columnName: string) {
    
+    if (!this.columnDefinitions)
+      return null;
+
    const ret = this.columnDefinitions.find(t => 
    {
      return t.columnName == columnName;
@@ -1,10 +1,10 @@
-import { Directive } from '@angular/core';
+import { Directive, TemplateRef } from '@angular/core';

@Directive({
  selector: '[psDataGridLoader]'
 })
 export class DataGridLoaderDirective {

-  constructor() { }
+  constructor(public template: TemplateRef<any>) { }

 }