1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-10 13:23:34 +00:00

[SM-650] Updating search and select all to work together properly (#5510)

* Updating search and select all to work together properly

* adding comment and moving filtered data below private variables

* thomas suggested changes

* making service-accounts-list the same as projects and secrest list

* changes

* Update service-accounts-list.component.ts

* removing unnecessary code

* setting active filter on set data, adding comment

* removing unused field

* Update libs/components/src/table/table-data-source.ts

Co-authored-by: Thomas Avery <43214426+Thomas-Avery@users.noreply.github.com>

---------

Co-authored-by: Thomas Avery <43214426+Thomas-Avery@users.noreply.github.com>
This commit is contained in:
cd-bitwarden
2023-07-08 09:59:35 -04:00
committed by GitHub
parent e6bad5998d
commit 04207647de
4 changed files with 63 additions and 26 deletions

View File

@@ -17,9 +17,16 @@ export class TableDataSource<T> extends DataSource<T> {
private readonly _sort: BehaviorSubject<Sort>;
private readonly _filter = new BehaviorSubject<string>("");
private readonly _renderData = new BehaviorSubject<T[]>([]);
private _renderChangesSubscription: Subscription | null = null;
/**
* The filtered set of data that has been matched by the filter string, or all the data if there
* is no filter. Useful for knowing the set of data the table represents.
* For example, a 'selectAll()' function would likely want to select the set of filtered data
* shown to the user rather than all the data.
*/
filteredData: T[];
constructor() {
super();
this._data = new BehaviorSubject([]);
@@ -31,7 +38,13 @@ export class TableDataSource<T> extends DataSource<T> {
}
set data(data: T[]) {
this._data.next(data ? [...data] : []);
data = Array.isArray(data) ? data : [];
this._data.next(data);
// Normally the `filteredData` is updated by the re-render
// subscription, but that won't happen if it's inactive.
if (!this._renderChangesSubscription) {
this.filterData(data);
}
}
set sort(sort: Sort) {
@@ -48,6 +61,11 @@ export class TableDataSource<T> extends DataSource<T> {
set filter(filter: string) {
this._filter.next(filter);
// Normally the `filteredData` is updated by the re-render
// subscription, but that won't happen if it's inactive.
if (!this._renderChangesSubscription) {
this.filterData(this.data);
}
}
connect(): Observable<readonly T[]> {
@@ -65,7 +83,7 @@ export class TableDataSource<T> extends DataSource<T> {
private updateChangeSubscription() {
const filteredData = combineLatest([this._data, this._filter]).pipe(
map(([data, filter]) => this.filterData(data, filter))
map(([data]) => this.filterData(data))
);
const orderedData = combineLatest([filteredData, this._sort]).pipe(
@@ -76,12 +94,13 @@ export class TableDataSource<T> extends DataSource<T> {
this._renderChangesSubscription = orderedData.subscribe((data) => this._renderData.next(data));
}
private filterData(data: T[], filter: string): T[] {
if (filter == null || filter == "") {
return data;
}
private filterData(data: T[]): T[] {
this.filteredData =
this.filter == null || this.filter === ""
? data
: data.filter((obj) => this.filterPredicate(obj, this.filter));
return data.filter((obj) => this.filterPredicate(obj, filter));
return this.filteredData;
}
private orderData(data: T[], sort: Sort): T[] {