From c26d086d2541f998555258094d541cd7929056ca Mon Sep 17 00:00:00 2001 From: Esteban Gehring Date: Tue, 16 Jun 2020 09:04:51 +0200 Subject: [PATCH] update ngx-mat-select-search to version 3.0.0 --- package-lock.json | 6 +- package.json | 2 +- src/app/app.component.html | 2 + src/app/app.module.ts | 6 +- .../multiple-selection-example.component.html | 4 +- .../custom-clear-icon-example.component.html | 8 +- .../option-groups-example.component.html | 4 +- ...election-select-all-example.component.html | 4 +- .../tooltip-select-all-example.component.html | 10 +- .../tooltip-select-all-example.component.scss | 0 .../tooltip-select-all-example.component.ts | 0 .../infinite-scroll-example.component.html | 25 ++++ .../infinite-scroll-example.component.scss | 0 .../infinite-scroll-example.component.ts | 107 ++++++++++++++++++ 14 files changed, 162 insertions(+), 16 deletions(-) rename src/app/examples/{07-tooltip-select-all-exemple => 07-tooltip-select-all-example}/tooltip-select-all-example.component.html (51%) rename src/app/examples/{07-tooltip-select-all-exemple => 07-tooltip-select-all-example}/tooltip-select-all-example.component.scss (100%) rename src/app/examples/{07-tooltip-select-all-exemple => 07-tooltip-select-all-example}/tooltip-select-all-example.component.ts (100%) create mode 100644 src/app/examples/08-infinite-scroll-example/infinite-scroll-example.component.html create mode 100644 src/app/examples/08-infinite-scroll-example/infinite-scroll-example.component.scss create mode 100644 src/app/examples/08-infinite-scroll-example/infinite-scroll-example.component.ts diff --git a/package-lock.json b/package-lock.json index 9f54ae1..1b42a7c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8977,9 +8977,9 @@ "dev": true }, "ngx-mat-select-search": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-2.2.0.tgz", - "integrity": "sha512-hhkH5cNjX0fWd1A39oa0d5D9VyQ6Vu2MPgVz3DkqS4sg1vK2TQ9upD2ngp+5te2R58vO8MUEairRcsL3q0Tbpg==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-3.0.0.tgz", + "integrity": "sha512-WpI0j0oQIo4uHiQZy53fli29cfurrHZ5L6T970d+uGyfu2ckXrBSgmXN+zgIYTEPjFyA0ybK9/wimoOCpWgdPA==", "requires": { "tslib": "^1.9.0" } diff --git a/package.json b/package.json index c2597e0..2797a23 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@angular/platform-browser-dynamic": "8.2.14", "@angular/router": "8.2.14", "core-js": "^2.6.1", - "ngx-mat-select-search": "^2.2.0", + "ngx-mat-select-search": "^3.0.0", "rxjs": "6.5.4", "zone.js": "~0.9.0" }, diff --git a/src/app/app.component.html b/src/app/app.component.html index 5b34ea7..c0ef0a5 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -25,6 +25,8 @@

Examples

+ + ngx-mat-select-search Version: {{matSelectSearchVersion}}
Material Version: {{version.full}} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8911d7b..0d0e547 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -16,7 +16,8 @@ import { CustomClearIconExampleComponent } from './examples/03-custom-clear-icon import { MultipleSelectionExampleComponent } from './examples/02-multiple-selection-example/multiple-selection-example.component'; import { SingleSelectionExampleComponent } from './examples/01-single-selection-example/single-selection-example.component'; import { MultipleSelectionSelectAllExampleComponent } from './examples/06-multiple-selection-select-all-example/multiple-selection-select-all-example.component'; -import { TooltipSelectAllExampleComponent } from './examples/07-tooltip-select-all-exemple/tooltip-select-all-example.component'; +import { TooltipSelectAllExampleComponent } from './examples/07-tooltip-select-all-example/tooltip-select-all-example.component'; +import { InfiniteScrollExampleComponent } from './examples/08-infinite-scroll-example/infinite-scroll-example.component'; @NgModule({ @@ -28,7 +29,8 @@ import { TooltipSelectAllExampleComponent } from './examples/07-tooltip-select-a OptionGroupsExampleComponent, ServerSideSearchExampleComponent, MultipleSelectionSelectAllExampleComponent, - TooltipSelectAllExampleComponent + TooltipSelectAllExampleComponent, + InfiniteScrollExampleComponent ], imports: [ BrowserModule, diff --git a/src/app/examples/02-multiple-selection-example/multiple-selection-example.component.html b/src/app/examples/02-multiple-selection-example/multiple-selection-example.component.html index e3db65f..8295e5a 100644 --- a/src/app/examples/02-multiple-selection-example/multiple-selection-example.component.html +++ b/src/app/examples/02-multiple-selection-example/multiple-selection-example.component.html @@ -3,7 +3,9 @@

Multiple selection

- + + + {{bank.name}} diff --git a/src/app/examples/03-custom-clear-icon-example/custom-clear-icon-example.component.html b/src/app/examples/03-custom-clear-icon-example/custom-clear-icon-example.component.html index 551d6c3..9943382 100644 --- a/src/app/examples/03-custom-clear-icon-example/custom-clear-icon-example.component.html +++ b/src/app/examples/03-custom-clear-icon-example/custom-clear-icon-example.component.html @@ -2,9 +2,11 @@

Single selection with custom clear icon

- - delete - + + + delete + + {{bank.name}} diff --git a/src/app/examples/04-option-groups-example/option-groups-example.component.html b/src/app/examples/04-option-groups-example/option-groups-example.component.html index 5dcaa68..3e86666 100644 --- a/src/app/examples/04-option-groups-example/option-groups-example.component.html +++ b/src/app/examples/04-option-groups-example/option-groups-example.component.html @@ -2,7 +2,9 @@

Single selection with option groups

- + + + {{bank.name}} diff --git a/src/app/examples/06-multiple-selection-select-all-example/multiple-selection-select-all-example.component.html b/src/app/examples/06-multiple-selection-select-all-example/multiple-selection-select-all-example.component.html index cb3f2e8..f046ad8 100644 --- a/src/app/examples/06-multiple-selection-select-all-example/multiple-selection-select-all-example.component.html +++ b/src/app/examples/06-multiple-selection-select-all-example/multiple-selection-select-all-example.component.html @@ -3,7 +3,9 @@

Multiple selection with Select All Checkbox

- + + + {{bank.name}} diff --git a/src/app/examples/07-tooltip-select-all-exemple/tooltip-select-all-example.component.html b/src/app/examples/07-tooltip-select-all-example/tooltip-select-all-example.component.html similarity index 51% rename from src/app/examples/07-tooltip-select-all-exemple/tooltip-select-all-example.component.html rename to src/app/examples/07-tooltip-select-all-example/tooltip-select-all-example.component.html index e28fac5..b3d47a7 100644 --- a/src/app/examples/07-tooltip-select-all-exemple/tooltip-select-all-example.component.html +++ b/src/app/examples/07-tooltip-select-all-example/tooltip-select-all-example.component.html @@ -2,12 +2,14 @@

Tooltip on the Select All Checkbox

- + + + {{bank.name}} -

\ No newline at end of file +

diff --git a/src/app/examples/07-tooltip-select-all-exemple/tooltip-select-all-example.component.scss b/src/app/examples/07-tooltip-select-all-example/tooltip-select-all-example.component.scss similarity index 100% rename from src/app/examples/07-tooltip-select-all-exemple/tooltip-select-all-example.component.scss rename to src/app/examples/07-tooltip-select-all-example/tooltip-select-all-example.component.scss diff --git a/src/app/examples/07-tooltip-select-all-exemple/tooltip-select-all-example.component.ts b/src/app/examples/07-tooltip-select-all-example/tooltip-select-all-example.component.ts similarity index 100% rename from src/app/examples/07-tooltip-select-all-exemple/tooltip-select-all-example.component.ts rename to src/app/examples/07-tooltip-select-all-example/tooltip-select-all-example.component.ts diff --git a/src/app/examples/08-infinite-scroll-example/infinite-scroll-example.component.html b/src/app/examples/08-infinite-scroll-example/infinite-scroll-example.component.html new file mode 100644 index 0000000..d3b459c --- /dev/null +++ b/src/app/examples/08-infinite-scroll-example/infinite-scroll-example.component.html @@ -0,0 +1,25 @@ +

Integration with ngx-infinite-scroll

+ +

+ Selected Bank: {{ctrl?.value}} +

+ + + + + + + + + + {{option}} + + + \ No newline at end of file diff --git a/src/app/examples/08-infinite-scroll-example/infinite-scroll-example.component.scss b/src/app/examples/08-infinite-scroll-example/infinite-scroll-example.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/examples/08-infinite-scroll-example/infinite-scroll-example.component.ts b/src/app/examples/08-infinite-scroll-example/infinite-scroll-example.component.ts new file mode 100644 index 0000000..da6c986 --- /dev/null +++ b/src/app/examples/08-infinite-scroll-example/infinite-scroll-example.component.ts @@ -0,0 +1,107 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { FormControl } from '@angular/forms'; +import { BehaviorSubject, Subject, Subscription } from 'rxjs'; +import { scan, takeUntil } from 'rxjs/operators'; + +/** + * Based upon: https://stackblitz.com/edit/mat-select-search-with-infinity-scroll + */ +@Component({ + selector: 'app-infinite-scroll-example', + templateUrl: './infinite-scroll-example.component.html', + styleUrls: ['./infinite-scroll-example.component.scss'] +}) +export class InfiniteScrollExampleComponent implements OnInit, OnDestroy { + // Mocks some sort of backend data source + mockBankList = Array.from({ length: 1000 }).map((_, i) => `Bank ${i}`); + private _data = new BehaviorSubject(this.mockBankList); + data$ = this._data.asObservable(); + + ctrl: FormControl = new FormControl(); + searchCtrl: FormControl = new FormControl(); + + subscriptions: Subscription[] = []; + _options = new BehaviorSubject([]); + options$ = this._options.asObservable().pipe( + scan((acc, curr) => { + if (!acc || !curr) { + return []; + } + return [...acc, ...curr]; + }, []) + ); + offset = 0; + limit = 20; + /** + * Holds the option matches + * a subset of this data is selected + * using the offset and limit + */ + data = []; + + /** Subject that emits when the component has been destroyed. */ + protected _onDestroy = new Subject(); + + constructor() { } + + ngOnInit() { + this.data$.pipe( + takeUntil(this._onDestroy) + ).subscribe({ + next: (data) => { + console.log('Ingested data changed'); + this.data = data; + this.offset = 0; + this._options.next(null); + this.getNextBatch(); + } + }); + + this.searchCtrl + .valueChanges + .pipe( + takeUntil(this._onDestroy) + ) + .subscribe((val) => this.onSearchChange(val)); + + this.options$ + .pipe( + takeUntil(this._onDestroy) + ). + subscribe((val) => console.log(`New view array contains ${val.length} items`)); + } + + ngOnDestroy(): void { + this._onDestroy.next(); + this._onDestroy.complete(); + } + + onChange(e): void { + console.log(`Value Changed: ${e}`); + } + + onSearchChange(e): void { + console.log(`Search Changed: ${e}`); + let val = e ? e.trim() : null; + if (!val) { + // Empty search, returns everything + this._data.next(this.mockBankList); + return; + } else { + val = val.toLowerCase(); + } + + const matches = this.mockBankList.filter((i) => i.toLowerCase().indexOf(val.toLowerCase()) > -1); + this._data.next(matches); + } + + /** + * Used for selecting next batch + * for ngx-infinite-scroll + */ + getNextBatch(): void { + const results = this.data.slice(this.offset, this.offset + this.limit); + this._options.next(results); + this.offset += this.limit; + } +}