view ready :)

2021-08-18 02:20:25 -04:00
parent c6fc24db82
commit d886ff797e
17 changed files with 370 additions and 5 deletions
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psViewContent]'
+})
+export class ViewContentDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psViewLoading]'
+})
+export class ViewLoadingDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psViewNoRecords]'
+})
+export class ViewNoRecordsDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}
@@ -0,0 +1,27 @@
+<ng-container *ngIf="loading; else notLoading"> 
+    <ng-container *ngIf="viewLoading">
+        <ng-container [ngTemplateOutlet]="getViewLoadingTemplate()"></ng-container>
+    </ng-container>
+    <ng-container *ngIf="!viewLoading">
+        {{ finalLoadingText }}
+    </ng-container>
+</ng-container>
+
+<ng-template #notLoading>
+    <ng-container *ngIf="!noData else noResultTemplate">
+        <ng-container [ngTemplateOutlet]="getViewContentTemplate()" [ngTemplateOutletContext]="{
+            $implicit: viewModel
+            }">
+        </ng-container>
+    </ng-container>
+</ng-template>
+
+
+<ng-template #noResultTemplate>
+    <ng-container *ngIf="viewNoRecords">
+        <ng-container [ngTemplateOutlet]="getViewNoRecordsTemplate()"></ng-container>
+    </ng-container>
+    <ng-container *ngIf="!viewNoRecords">
+        <div [ngClass]="noRecordClasses">{{noRecords}}</div>
+    </ng-container>
+</ng-template>
@@ -0,0 +1,84 @@
+import { Component, ContentChild, Input, OnDestroy, OnInit } from '@angular/core';
+import { IDataSource } from '@poweredsoft/data';
+import { Subscription } from 'rxjs';
+import { ViewContentDirective } from './directives/view-content.directive';
+import { ViewLoadingDirective } from './directives/view-loading.directive';
+import { ViewNoRecordsDirective } from './directives/view-no-records.directive';
+
+@Component({
+  selector: 'ps-view',
+  templateUrl: './view.component.html',
+  styleUrls: ['./view.component.scss']
+})
+export class ViewComponent implements OnInit, OnDestroy {
+ 
+
+  constructor() { }
+
+  @Input() dataSource: IDataSource<any>;
+  @Input() noRecordsText: string;
+  @Input() loadingText: string;
+  @Input() noRecordClasses: any;
+
+  @ContentChild(ViewContentDirective) viewContent: ViewContentDirective;
+  @ContentChild(ViewLoadingDirective) viewLoading: ViewLoadingDirective;
+  @ContentChild(ViewNoRecordsDirective) viewNoRecords: ViewNoRecordsDirective;
+
+  loading:boolean = false;
+  private _viewModel: any = null;
+
+  private _dataSubscription: Subscription;
+  private _loadingSubscription: Subscription;
+
+  ngOnDestroy(): void {
+    this._dataSubscription.unsubscribe();
+    this._loadingSubscription.unsubscribe();
+  }
+
+  ngOnInit(): void {
+    this._dataSubscription = this.dataSource.data$.subscribe(newData => { 
+      if (newData && newData.data && newData.data.length)     
+        this._viewModel = newData.data[0];
+    });
+
+    this._loadingSubscription = this.dataSource.loading$.subscribe(loading => {
+      this.loading = loading;
+    });
+  }
+
+  get noData(){
+    return this._viewModel ? false : true;
+  }
+
+  get viewModel() {
+    return this._viewModel;
+  }
+
+  get noRecords(){
+    return this.noRecordsText || "No records...";
+  }
+
+  get finalLoadingText() {
+    return this.loadingText || 'Loading ...';
+  }
+
+  getViewContentTemplate(){
+    if(this.viewContent == null)
+      return null;
+    return this.viewContent.template;
+  }
+
+  getViewNoRecordsTemplate(){
+    if(this.viewNoRecords == null)
+      return null;
+    return this.viewNoRecords.template;
+  }
+
+  getViewLoadingTemplate(){
+    if(this.viewLoading == null)
+      return null;
+    return this.viewLoading.template;
+  }
+
+}
+
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ViewComponent } from './view.component';
+import { ViewContentDirective } from './directives/view-content.directive';
+import { ViewLoadingDirective } from './directives/view-loading.directive';
+import { ViewNoRecordsDirective } from './directives/view-no-records.directive';
+
+
+
+@NgModule({
+  declarations: [ViewComponent, ViewContentDirective, ViewLoadingDirective, ViewNoRecordsDirective],
+  imports: [
+    CommonModule
+  ],
+  exports: [ViewComponent, ViewContentDirective, ViewLoadingDirective, ViewNoRecordsDirective]
+})
+export class ViewModule { }
@@ -2,6 +2,7 @@
 * Public API Surface of ngx-cdk-ui
 */

+// data grid.
 export * from './lib/data-grid/data-grid.module';
 export * from './lib/data-grid/data-grid/data-grid.component';
 export * from './lib/data-grid/directives/data-grid-cell.directive';
@@ -21,9 +22,17 @@ 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';

+// search
 export * from './lib/ds-search/ds-search.module';
 export * from './lib/ds-search/ds-search.component';

 // ds validation
 export * from './lib/ds-validation-error/ds-validation-error.module';
-export * from './lib/ds-validation-error/ds-validation-error.component';
+export * from './lib/ds-validation-error/ds-validation-error.component';
+
+// view
+export * from './lib/view/view.module';
+export * from './lib/view/view.component';
+export * from './lib/view/directives/view-content.directive';
+export * from './lib/view/directives/view-loading.directive';
+export * from './lib/view/directives/view-no-records.directive';