list-view & add class to data-grid thead

2020-07-28 13:55:31 -05:00
parent 397d6753f2
commit 5b790de540
14 changed files with 176 additions and 30 deletions
@@ -1,7 +1,7 @@
 <ng-container *ngIf="loading" [ngTemplateOutlet]="loadingTemplate"></ng-container> 

 <table [ngClass]="tableClasses" style="min-height: 300px;">
-  <thead>
+  <thead [ngClass]="headerClasses">
    <tr *ngFor="let header of gridHeaders" >
      <th [attr.colspan]="columns.length">
        <ng-container [ngTemplateOutlet]="header.template"></ng-container>
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psListViewFooter]'
+})
+export class ListViewFooterDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psListViewHeader]'
+})
+export class ListViewHeaderDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psListViewItem]'
+})
+export class ListViewItemDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psListViewSeperator]'
+})
+export class ListViewSeperatorDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}
@@ -1,12 +1,25 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ListViewComponent } from './list-view/list-view.component';
+import { ListViewItemDirective } from './directives/list-view-item.directive';
+import { ListViewHeaderDirective } from './directives/list-view-header.directive';
+import { ListViewFooterDirective } from './directives/list-view-footer.directive';
+import { ListViewSeperatorDirective } from './directives/list-view-seperator.directive';



@NgModule({
-  declarations: [],
+  declarations: [ListViewComponent, ListViewItemDirective, ListViewHeaderDirective, ListViewFooterDirective, ListViewSeperatorDirective],
  imports: [
    CommonModule
+  ],
+  exports: [
+    ListViewComponent,
+    ListViewItemDirective,
+    ListViewHeaderDirective,
+    ListViewFooterDirective,
+    ListViewSeperatorDirective
+
  ]
 })
 export class ListViewModule { }
@@ -0,0 +1,17 @@
+
+<ng-container [ngTemplateOutlet]="getViewHeaderTemplate()"></ng-container>
+<ng-container *ngIf= "!noData else noResultTemplate">
+    <ng-container *ngFor="let item of latestResult.data">
+        <ng-container [ngTemplateOutlet]="getViewItemTemplate()"
+        [ngTemplateOutletContext]="{
+            $implicit: item
+          }">
+        </ng-container>
+    </ng-container>
+</ng-container>
+<ng-container [ngTemplateOutlet]="getViewFooterTemplate()"></ng-container>
+
+
+<ng-template #noResultTemplate>
+          <p>{{noRecords}}</p>
+</ng-template>
@@ -0,0 +1,68 @@
+import { Component, OnInit, Input, OnDestroy, ContentChildren, QueryList, ContentChild } from '@angular/core';
+import { IDataSource, IQueryExecutionResult, IQueryExecutionGroupResult } from '@poweredsoft/data';
+import { Subscription } from 'rxjs';
+import { ListViewItemDirective } from '../directives/list-view-item.directive';
+import { ListViewHeaderDirective } from '../directives/list-view-header.directive';
+import { ListViewFooterDirective } from '../directives/list-view-footer.directive';
+
+@Component({
+  selector: 'ps-list-view',
+  templateUrl: './list-view.component.html',
+  styleUrls: ['./list-view.component.scss']
+})
+export class ListViewComponent implements OnInit, OnDestroy {
+
+  @Input() dataSource: IDataSource<any>;
+  @Input() noRecordsText: string;
+
+  latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
+  loading:boolean;
+
+  private _dataSubscription: Subscription;
+  
+   @ContentChild(ListViewItemDirective) viewItem: ListViewItemDirective;
+   @ContentChild(ListViewHeaderDirective) viewHeader: ListViewHeaderDirective;
+   @ContentChild(ListViewFooterDirective) viewFooter: ListViewFooterDirective;
+  //@ContentChildren(ViewDataDirective) viewData: QueryList<ViewDataDirective>;
+
+  constructor() { 
+  
+  }
+
+  ngOnDestroy(): void {
+    this._dataSubscription.unsubscribe();
+  }
+
+  ngOnInit(): void {
+    this._dataSubscription = this.dataSource.data$.subscribe(newData => {      
+      this.latestResult = newData;
+    });
+  }
+
+  get noData(){
+    return !this.latestResult;
+  }
+
+  get noRecords(){
+    return this.noRecordsText || "No records...";
+  }
+
+  getViewItemTemplate(){
+    if(this.viewItem == null)
+      return null;
+    return this.viewItem.template;
+  }
+
+  getViewHeaderTemplate(){
+    if(this.viewHeader == null)
+      return null;
+    return this.viewHeader.template;
+  }
+
+
+  getViewFooterTemplate(){
+    if(this.viewFooter == null)
+      return null;
+    return this.viewFooter.template;
+  }
+}
@@ -13,3 +13,11 @@ export * from './lib/data-grid/directives/data-grid-loader.directive';
 export * from './lib/data-grid/directives/data-grid-cell-filter.directive';
 export * from './lib/data-grid/directives/data-grid-col-sort.directive';

+//list view
+export * from './lib/list-view/list-view.module';
+export * from './lib/list-view/list-view/list-view.component';
+export * from './lib/list-view/directives/list-view-item.directive';
+export * from './lib/list-view/directives/list-view-header.directive';
+export * from './lib/list-view/directives/list-view-footer.directive';
+export * from './lib/list-view/directives/list-view-seperator.directive';
+