diff --git a/projects/poweredsoft/ngx-cdk-ui/package.json b/projects/poweredsoft/ngx-cdk-ui/package.json
index b6e56ab..c316897 100644
--- a/projects/poweredsoft/ngx-cdk-ui/package.json
+++ b/projects/poweredsoft/ngx-cdk-ui/package.json
@@ -1,6 +1,6 @@
{
"name": "@poweredsoft/ngx-cdk-ui",
- "version": "0.0.2",
+ "version": "0.0.3",
"peerDependencies": {
"@angular/common": "^9.1.9",
"@angular/core": "^9.1.9"
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html
index b50289b..0dd058d 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html
@@ -1,7 +1,7 @@
-
-
+
+
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-footer.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-footer.directive.ts
new file mode 100644
index 0000000..3bdb23a
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-footer.directive.ts
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+ selector: '[psListViewFooter]'
+})
+export class ListViewFooterDirective {
+
+ constructor(public template: TemplateRef) { }
+
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-header.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-header.directive.ts
new file mode 100644
index 0000000..c9e9fc0
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-header.directive.ts
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+ selector: '[psListViewHeader]'
+})
+export class ListViewHeaderDirective {
+
+ constructor(public template: TemplateRef) { }
+
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-item.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-item.directive.ts
new file mode 100644
index 0000000..8f5e757
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-item.directive.ts
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+ selector: '[psListViewItem]'
+})
+export class ListViewItemDirective {
+
+ constructor(public template: TemplateRef) { }
+
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-seperator.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-seperator.directive.ts
new file mode 100644
index 0000000..a58151a
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-seperator.directive.ts
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+ selector: '[psListViewSeperator]'
+})
+export class ListViewSeperatorDirective {
+
+ constructor(public template: TemplateRef) { }
+
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view.module.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view.module.ts
index 861d768..5cfa430 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view.module.ts
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view.module.ts
@@ -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 { }
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.html b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.html
new file mode 100644
index 0000000..6de9b49
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ {{noRecords}}
+
\ No newline at end of file
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.scss b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.ts
new file mode 100644
index 0000000..47b73ca
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.ts
@@ -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;
+ @Input() noRecordsText: string;
+
+ latestResult: IQueryExecutionResult & IQueryExecutionGroupResult;
+ loading:boolean;
+
+ private _dataSubscription: Subscription;
+
+ @ContentChild(ListViewItemDirective) viewItem: ListViewItemDirective;
+ @ContentChild(ListViewHeaderDirective) viewHeader: ListViewHeaderDirective;
+ @ContentChild(ListViewFooterDirective) viewFooter: ListViewFooterDirective;
+ //@ContentChildren(ViewDataDirective) viewData: QueryList;
+
+ 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;
+ }
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
index fc3e30d..6734524 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
+++ b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
@@ -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';
+
diff --git a/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.html b/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.html
index 251ed97..7343c42 100644
--- a/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.html
+++ b/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.html
@@ -1 +1,11 @@
-list-view-demo-home works!
+list view demo
+
+
+ Some Header ..
+
+ Name: {{item.name}}
+ Address: {{item.address}}
+
+ Some Footer ..
+
+
diff --git a/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.spec.ts b/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.spec.ts
deleted file mode 100644
index d31cc21..0000000
--- a/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ListViewDemoHomeComponent } from './list-view-demo-home.component';
-
-describe('ListViewDemoHomeComponent', () => {
- let component: ListViewDemoHomeComponent;
- let fixture: ComponentFixture;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ ListViewDemoHomeComponent ]
- })
- .compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(ListViewDemoHomeComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.ts b/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.ts
index b00abe0..31a3b5a 100644
--- a/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.ts
+++ b/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.ts
@@ -1,4 +1,8 @@
import { Component, OnInit } from '@angular/core';
+import { IMerchant } from 'src/app/data/services/IMerchant';
+import { IDataSource } from '@poweredsoft/data';
+import { MerchantService } from 'src/app/data/services/merchant.service';
+import { Subscription } from 'rxjs';
@Component({
selector: 'ps-list-view-demo-home',
@@ -7,9 +11,17 @@ import { Component, OnInit } from '@angular/core';
})
export class ListViewDemoHomeComponent implements OnInit {
- constructor() { }
+
+ merchantDataSource: IDataSource;
+
+
+ constructor(private merchantService: MerchantService) {
+ this.merchantDataSource = merchantService.createDataSource(); //Assign the dataSource
+ }
ngOnInit(): void {
+
+ this.merchantDataSource.refresh();
}
}
diff --git a/src/app/list-view-demo/list-view-demo.module.ts b/src/app/list-view-demo/list-view-demo.module.ts
index 65c77ac..c046301 100644
--- a/src/app/list-view-demo/list-view-demo.module.ts
+++ b/src/app/list-view-demo/list-view-demo.module.ts
@@ -3,13 +3,16 @@ import { CommonModule } from '@angular/common';
import { ListViewDemoRoutingModule } from './list-view-demo-routing.module';
import { ListViewDemoHomeComponent } from './list-view-demo-home/list-view-demo-home.component';
+import { ListViewModule } from '@poweredsoft/ngx-cdk-ui';
+
@NgModule({
declarations: [ListViewDemoHomeComponent],
imports: [
CommonModule,
- ListViewDemoRoutingModule
+ ListViewDemoRoutingModule,
+ ListViewModule
]
})
export class ListViewDemoModule { }
|