Open-Harbor/ngx-data-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new component of kind search :)

Browse Source
This commit is contained in:
David Lebee 2021-02-08 23:06:22 -05:00
parent caefd41b09
commit 4e1affea5d
11 changed files with 200 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -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"
}

2
package.json
View File

@ -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",

7
projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.component.html Normal file
View File

@ -0,0 +1,7 @@
<form (submit)="applySearch()">
<div [ngClass]="classes">
<input type="search" (onSearch)="onSearch()" [placeholder]="finalSearchText" [ngClass]="searchClasses"
[(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
<button type="submit" [ngClass]="submitButtonClasses">{{ finalSearchText }}</button>
</div>
</form>

0
projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.component.scss Normal file
View File

76
projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.component.ts Normal file
View File

@ -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<any>;
@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 => (<ISimpleFilter>{
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 {
}
}

16
projects/poweredsoft/ngx-cdk-ui/src/lib/ds-search/ds-search.module.ts Normal file
View File

@ -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 { }

10
projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.html
View File

@ -1,17 +1,17 @@
<ng-container [ngTemplateOutlet]="getViewHeaderTemplate()"></ng-container>
<ng-container *ngIf= "!noData else noResultTemplate">
<ng-container *ngIf="!noData else noResultTemplate">
<div [ngClass]="listViewClasses">
<ng-container *ngFor="let item of latestResult.data">
<ng-container [ngTemplateOutlet]="getViewItemTemplate()"
[ngTemplateOutletContext]="{
<ng-container [ngTemplateOutlet]="getViewItemTemplate()" [ngTemplateOutletContext]="{
$implicit: item
}">
</ng-container>
</ng-container>
</div>
</ng-container>
<ng-container [ngTemplateOutlet]="getViewFooterTemplate()"></ng-container>
<ng-template #noResultTemplate>
<p>{{noRecords}}</p>
<div class="noRecordClasses">{{noRecords}}</div>
</ng-template>

7
projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.ts
View File

@ -14,6 +14,8 @@ export class ListViewComponent implements OnInit, OnDestroy {
@Input() dataSource: IDataSource<any>;
@Input() noRecordsText: string;
@Input() noRecordClasses: any;
@Input() listViewClasses: any;
latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
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(){

50
src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.html
View File

@ -1,11 +1,49 @@
<h1>list view demo</h1>
<ps-list-view [dataSource]="merchantDataSource" >
<div *psListViewHeader>Some Header ..</div>
<div *psListViewItem="let item">
<div>Name: {{item.name}} </div>
<div>Address: {{item.address}} </div>
<ps-list-view [dataSource]="merchantDataSource" listViewClasses="row">
<div *psListViewHeader>
<button class="btn-success btn" psbxFormGroupCommandModal commandTitle="Adding a new merchant" commandText="Add"
[dataSource]="merchantDataSource" command="addMerchant" (formCreate)="onFormCreate($event)"
[template]="theModal">Create New Records</button>
<div class="mt-2">
<ps-ds-search
classes="d-flex flex-row"
[dataSource]="merchantDataSource"
submitButtonClasses="btn btn-light btn-sm"
searchClasses="form-control form-control-sm d-inlineblock"
[filterPaths]="['name', 'address']">
</ps-ds-search>
</div>
</div>
<div *psListViewItem="let item" class="col-lg-4 col-md-6 col-sm-12">
<div class="card mt-2">
<div class="card-body">
<div class="card-title">
{{ item.name }}
</div>
<pre>{{ item | json }}</pre>
</div>
</div>
</div>
<div *psListViewFooter class="mt-2">
<psbx-ds-pagination [dataSource]="merchantDataSource"></psbx-ds-pagination>
</div>
<div *psListViewFooter>Some Footer ..</div>
</ps-list-view>
<ng-template #theModal let-form let-loading="loading">
<form [formGroup]="form">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-8">
<input id="name" type="text" class="form-control" formControlName="name">
</div>
<label for="address" class="col-sm-2 control-label">Address</label>
<div class="col-sm-8">
<input id="address" type="text" class="form-control" formControlName="address">
</div>
</div>
</form>
</ng-template>

33
src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.ts
View File

@ -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<IMerchant>;
merchantDataSource: IDataSource<ISchool>;
constructor(private merchantService: MerchantService) {
constructor(merchantService: MerchantService, private fb: FormBuilder) {
// this.dataSource = hdss.builder<ISchool, string>()
// .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]
});
}
}

9
src/app/list-view-demo/list-view-demo.module.ts
View File

@ -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 { }