From 4e1affea5d4939b8aaef6e716e1505d45faef09a Mon Sep 17 00:00:00 2001 From: David Lebee Date: Mon, 8 Feb 2021 23:06:22 -0500 Subject: [PATCH] new component of kind search :) --- package-lock.json | 6 +- package.json | 2 +- .../lib/ds-search/ds-search.component.html | 7 ++ .../lib/ds-search/ds-search.component.scss | 0 .../src/lib/ds-search/ds-search.component.ts | 76 +++++++++++++++++++ .../src/lib/ds-search/ds-search.module.ts | 16 ++++ .../list-view/list-view.component.html | 18 ++--- .../list-view/list-view.component.ts | 7 +- .../list-view-demo-home.component.html | 50 ++++++++++-- .../list-view-demo-home.component.ts | 33 +++++++- .../list-view-demo/list-view-demo.module.ts | 9 ++- 11 files changed, 200 insertions(+), 24 deletions(-) create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.component.html create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.component.scss create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.component.ts create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.module.ts diff --git a/package-lock.json b/package-lock.json index ed812a3..ca6e81b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1684,9 +1684,9 @@ } }, "@poweredsoft/ngx-data": { - "version": "0.0.13", - "resolved": "https://registry.npmjs.org/@poweredsoft/ngx-data/-/ngx-data-0.0.13.tgz", - "integrity": "sha512-qfLMQuWRnHOcM5eupC5Mt7XacjGXcu9bYTLwpTlZ2Yx63iF6yH8CxF2rB5xAGxgjnKIOjYk9XL+qvijDL3dTPw==", + "version": "0.0.16", + "resolved": "https://registry.npmjs.org/@poweredsoft/ngx-data/-/ngx-data-0.0.16.tgz", + "integrity": "sha512-hk5eNvzGkotTfu0GfksOK9KtLGVUtwc/9JSSKWRIejF04oaXeBZ6PZ6s62YRnZ/EEG5JA0bQdZSHiPlaEapeeQ==", "requires": { "tslib": "^1.9.0" } diff --git a/package.json b/package.json index 03cac8b..6fa2c8a 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "@angular/router": "~9.1.4", "@ng-select/ng-select": "^4.0.1", "@poweredsoft/data": "0.0.30", - "@poweredsoft/ngx-data": "0.0.13", + "@poweredsoft/ngx-data": "0.0.16", "@poweredsoft/ngx-data-apollo": "0.0.10", "apollo-angular": "^1.8.0", "apollo-angular-link-http": "^1.9.0", diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.component.html b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.component.html new file mode 100644 index 0000000..abf511a --- /dev/null +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.component.html @@ -0,0 +1,7 @@ +
+
+ + +
+
\ No newline at end of file diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.component.scss b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.component.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.component.ts new file mode 100644 index 0000000..f157c6d --- /dev/null +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.component.ts @@ -0,0 +1,76 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { FilterType, ICompositeFilter, IDataSource, ISimpleFilter } from '@poweredsoft/data'; + +@Component({ + selector: 'ps-ds-search', + templateUrl: './ds-search.component.html', + styleUrls: ['./ds-search.component.scss'] +}) +export class DsSearchComponent implements OnInit { + + @Input() dataSource: IDataSource; + @Input() filterType: string; + @Input() filterPaths: string[]; + @Input() searchText: string; + @Input() submitButtonClasses: any; + @Input() searchClasses: any; + @Input() classes: any; + + filterValue: string = null; + lastUsedFilter: any; + + constructor() { } + + get finalSearchText() { + return this.searchText ?? "Search"; + } + + get finalFilterType() { + return this.filterType ?? FilterType.CONTAINS; + } + + onSearch() { + this.applySearch(); + } + + applySearch() { + + const existingFilters = this.dataSource.filters; + + + // adapt current filters to remove the previous one if exist + // and replace with new one. + const finalNewFilters = existingFilters + .filter(t => t != this.lastUsedFilter); + + if (this.filterValue) { + const newFilter: ICompositeFilter = { + and: true, + type: FilterType.COMPOSITE, + filters: this.filterPaths.map(filterPath => ({ + path: filterPath, + type: this.finalFilterType, + value: this.filterValue, + and: false + })) + } + + finalNewFilters.push(newFilter); + + // update last used filter to replace it if changed. + this.lastUsedFilter = newFilter; + } else { + this.lastUsedFilter = null; + } + + // execute search. + this.dataSource.query({ + page: 1, + filters: finalNewFilters + }) + } + + ngOnInit(): void { + } + +} diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.module.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.module.ts new file mode 100644 index 0000000..8f35ab4 --- /dev/null +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { DsSearchComponent } from './ds-search.component'; +import { FormsModule } from '@angular/forms'; + + + +@NgModule({ + declarations: [DsSearchComponent], + imports: [ + CommonModule, + FormsModule + ], + exports: [DsSearchComponent] +}) +export class DsSearchModule { } 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 index 6de9b49..6f101ba 100644 --- 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 @@ -1,17 +1,17 @@ - - - - + +
+ + + - +
-

{{noRecords}}

+
{{noRecords}}
 \ No newline at end of file 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 index 47b73ca..a71b72b 100644 --- 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 @@ -14,6 +14,8 @@ export class ListViewComponent implements OnInit, OnDestroy { @Input() dataSource: IDataSource; @Input() noRecordsText: string; + @Input() noRecordClasses: any; + @Input() listViewClasses: any; latestResult: IQueryExecutionResult & IQueryExecutionGroupResult; loading:boolean; @@ -40,7 +42,10 @@ export class ListViewComponent implements OnInit, OnDestroy { } get noData(){ - return !this.latestResult; + if (!this.latestResult) + return true; + + return this.latestResult.data.length == 0; } get noRecords(){ 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 7343c42..f544518 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,11 +1,49 @@

list view demo

- -
Some Header ..
-
-
Name: {{item.name}}
-
Address: {{item.address}}
+ +
+ + +
+ + + +
+
+
+
+
+
+ {{ item.name }} +
+ 
{{ item | json }}
+
+
+
+
+
-
Some Footer ..
 + +
+
+ +
+ +
+ + +
+ +
+
+
+ \ No newline at end of file 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 31a3b5a..3c70b84 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 @@ -3,6 +3,15 @@ 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'; +import { HttpDataSourceService } from '@poweredsoft/ngx-data'; +import { IModelFormCreateEvent } from '@poweredsoft/ngx-bootstrap'; +import { FormBuilder, Validators } from '@angular/forms'; + + +interface ISchool { + id: string, + name: string +} @Component({ selector: 'ps-list-view-demo-home', @@ -12,16 +21,34 @@ import { Subscription } from 'rxjs'; export class ListViewDemoHomeComponent implements OnInit { - merchantDataSource: IDataSource; + merchantDataSource: IDataSource; - constructor(private merchantService: MerchantService) { + constructor(merchantService: MerchantService, private fb: FormBuilder) { + // this.dataSource = hdss.builder() + // .defaultCriteria({ + // page: 1, + // pageSize: 6 + // }) + // .queryUrl('https://localhost:5001/api/query/schools') + // .keyResolver(m => m.id) + // .createDataSource(); + this.merchantDataSource = merchantService.createDataSource(); //Assign the dataSource } ngOnInit(): void { - this.merchantDataSource.refresh(); + this.merchantDataSource.query({ + pageSize: 6 + }) } + onFormCreate(event: IModelFormCreateEvent) { + event.shouldSetCommandModel = false; + event.formGroup = this.fb.group({ + 'name': [event.commandModel.name, Validators.required], + 'address': [event.commandModel.address, Validators.required] + }); + } } 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 c046301..c3f66cb 100644 --- a/src/app/list-view-demo/list-view-demo.module.ts +++ b/src/app/list-view-demo/list-view-demo.module.ts @@ -4,6 +4,9 @@ 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'; +import { FormGroupCommandModalModule, PaginationModule } from '@poweredsoft/ngx-bootstrap'; +import { ReactiveFormsModule } from '@angular/forms'; +import { DsSearchModule } from 'projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.module'; @@ -12,7 +15,11 @@ import { ListViewModule } from '@poweredsoft/ngx-cdk-ui'; imports: [ CommonModule, ListViewDemoRoutingModule, - ListViewModule + ListViewModule, + PaginationModule, + ReactiveFormsModule, + FormGroupCommandModalModule, + DsSearchModule ] }) export class ListViewDemoModule { }