From bda1024cdd3e9ea76e284dbbfb61b4d3bfc72766 Mon Sep 17 00:00:00 2001 From: Max Date: Sat, 28 Nov 2020 14:22:48 +0100 Subject: [PATCH] Debounce Table filter --- package-lock.json | 289 +++++++++++++++--- .../reference-table.component.html | 13 +- .../reference-table.component.ts | 13 +- src/app/components/table/table.component.html | 13 +- src/app/components/table/table.component.ts | 42 ++- 5 files changed, 308 insertions(+), 62 deletions(-) diff --git a/package-lock.json b/package-lock.json index c776c76..c6bcf83 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3171,20 +3171,54 @@ } }, "@graphql-codegen/visitor-plugin-common": { - "version": "1.17.17", - "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-1.17.17.tgz", - "integrity": "sha512-UGstk36jlGSUXg2Z1/22B8qeVTY18mW6kuQVNY32kB5sy1wIVDi4eNS3OJdBTYDvL5MGTHjeWXk7EhSt3NP7gQ==", + "version": "1.17.20", + "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-1.17.20.tgz", + "integrity": "sha512-buIpcNNyTqVubknancX8m9jARCZsUA5eKuskg+CylWKL/8CSaD2Tiq7CfbbNO10o7XIgRrPtJMl1c9hQ6N4ytw==", "dev": true, "requires": { - "@graphql-codegen/plugin-helpers": "^1.18.1", + "@graphql-codegen/plugin-helpers": "^1.18.2", + "@graphql-tools/optimize": "^1.0.1", "@graphql-tools/relay-operation-optimizer": "^6", - "array.prototype.flatmap": "^1.2.3", + "array.prototype.flatmap": "^1.2.4", "auto-bind": "~4.0.0", "dependency-graph": "^0.9.0", "graphql-tag": "^2.11.0", "parse-filepath": "^1.0.2", "pascal-case": "^3.1.1", "tslib": "~2.0.1" + }, + "dependencies": { + "@graphql-codegen/plugin-helpers": { + "version": "1.18.2", + "resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-1.18.2.tgz", + "integrity": "sha512-SvX+Ryq2naLcoD6jJNxtzc/moWTgHJ+X0KRfvhGWTa+xtFTS02i+PWOR89YYPcD8+LF6GmyFBjx2FmLCx4JwMg==", + "dev": true, + "requires": { + "@graphql-tools/utils": "^6", + "camel-case": "4.1.1", + "common-tags": "1.8.0", + "constant-case": "3.0.3", + "import-from": "3.0.0", + "lodash": "~4.17.20", + "lower-case": "2.0.1", + "param-case": "3.0.3", + "pascal-case": "3.1.1", + "tslib": "~2.0.1", + "upper-case": "2.0.1" + } + }, + "array.prototype.flatmap": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz", + "integrity": "sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==", + "dev": true, + "requires": { + "call-bind": "^1.0.0", + "define-properties": "^1.1.3", + "es-abstract": "^1.18.0-next.1", + "function-bind": "^1.1.1" + } + } } }, "dependency-graph": { @@ -3193,6 +3227,26 @@ "integrity": "sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==", "dev": true }, + "es-abstract": { + "version": "1.18.0-next.1", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz", + "integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==", + "dev": true, + "requires": { + "es-to-primitive": "^1.2.1", + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.1", + "is-callable": "^1.2.2", + "is-negative-zero": "^2.0.0", + "is-regex": "^1.1.1", + "object-inspect": "^1.8.0", + "object-keys": "^1.1.1", + "object.assign": "^4.1.1", + "string.prototype.trimend": "^1.0.1", + "string.prototype.trimstart": "^1.0.1" + } + }, "import-from": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz", @@ -3202,6 +3256,12 @@ "resolve-from": "^5.0.0" } }, + "is-callable": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz", + "integrity": "sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==", + "dev": true + }, "resolve-from": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", @@ -3243,20 +3303,54 @@ } }, "@graphql-codegen/visitor-plugin-common": { - "version": "1.17.17", - "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-1.17.17.tgz", - "integrity": "sha512-UGstk36jlGSUXg2Z1/22B8qeVTY18mW6kuQVNY32kB5sy1wIVDi4eNS3OJdBTYDvL5MGTHjeWXk7EhSt3NP7gQ==", + "version": "1.17.20", + "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-1.17.20.tgz", + "integrity": "sha512-buIpcNNyTqVubknancX8m9jARCZsUA5eKuskg+CylWKL/8CSaD2Tiq7CfbbNO10o7XIgRrPtJMl1c9hQ6N4ytw==", "dev": true, "requires": { - "@graphql-codegen/plugin-helpers": "^1.18.1", + "@graphql-codegen/plugin-helpers": "^1.18.2", + "@graphql-tools/optimize": "^1.0.1", "@graphql-tools/relay-operation-optimizer": "^6", - "array.prototype.flatmap": "^1.2.3", + "array.prototype.flatmap": "^1.2.4", "auto-bind": "~4.0.0", "dependency-graph": "^0.9.0", "graphql-tag": "^2.11.0", "parse-filepath": "^1.0.2", "pascal-case": "^3.1.1", "tslib": "~2.0.1" + }, + "dependencies": { + "@graphql-codegen/plugin-helpers": { + "version": "1.18.2", + "resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-1.18.2.tgz", + "integrity": "sha512-SvX+Ryq2naLcoD6jJNxtzc/moWTgHJ+X0KRfvhGWTa+xtFTS02i+PWOR89YYPcD8+LF6GmyFBjx2FmLCx4JwMg==", + "dev": true, + "requires": { + "@graphql-tools/utils": "^6", + "camel-case": "4.1.1", + "common-tags": "1.8.0", + "constant-case": "3.0.3", + "import-from": "3.0.0", + "lodash": "~4.17.20", + "lower-case": "2.0.1", + "param-case": "3.0.3", + "pascal-case": "3.1.1", + "tslib": "~2.0.1", + "upper-case": "2.0.1" + } + }, + "array.prototype.flatmap": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz", + "integrity": "sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==", + "dev": true, + "requires": { + "call-bind": "^1.0.0", + "define-properties": "^1.1.3", + "es-abstract": "^1.18.0-next.1", + "function-bind": "^1.1.1" + } + } } }, "dependency-graph": { @@ -3265,6 +3359,26 @@ "integrity": "sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==", "dev": true }, + "es-abstract": { + "version": "1.18.0-next.1", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz", + "integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==", + "dev": true, + "requires": { + "es-to-primitive": "^1.2.1", + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.1", + "is-callable": "^1.2.2", + "is-negative-zero": "^2.0.0", + "is-regex": "^1.1.1", + "object-inspect": "^1.8.0", + "object-keys": "^1.1.1", + "object.assign": "^4.1.1", + "string.prototype.trimend": "^1.0.1", + "string.prototype.trimstart": "^1.0.1" + } + }, "import-from": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz", @@ -3274,6 +3388,12 @@ "resolve-from": "^5.0.0" } }, + "is-callable": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz", + "integrity": "sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==", + "dev": true + }, "resolve-from": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", @@ -3283,14 +3403,15 @@ } }, "@graphql-codegen/visitor-plugin-common": { - "version": "1.17.14", - "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-1.17.14.tgz", - "integrity": "sha512-tHVkMqQcWuq5xuXm7q8JKcKUVdEYaT61Hnz1OZNgYCBQIOCKUljZcmPuy3F8aJU29XHyZ2vwF2hNG6q4CE3fcQ==", + "version": "1.17.20", + "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-1.17.20.tgz", + "integrity": "sha512-buIpcNNyTqVubknancX8m9jARCZsUA5eKuskg+CylWKL/8CSaD2Tiq7CfbbNO10o7XIgRrPtJMl1c9hQ6N4ytw==", "dev": true, "requires": { - "@graphql-codegen/plugin-helpers": "^1.17.8", - "@graphql-tools/relay-operation-optimizer": "^6.0.18", - "array.prototype.flatmap": "^1.2.3", + "@graphql-codegen/plugin-helpers": "^1.18.2", + "@graphql-tools/optimize": "^1.0.1", + "@graphql-tools/relay-operation-optimizer": "^6", + "array.prototype.flatmap": "^1.2.4", "auto-bind": "~4.0.0", "dependency-graph": "^0.9.0", "graphql-tag": "^2.11.0", @@ -3299,11 +3420,68 @@ "tslib": "~2.0.1" }, "dependencies": { + "@graphql-codegen/plugin-helpers": { + "version": "1.18.2", + "resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-1.18.2.tgz", + "integrity": "sha512-SvX+Ryq2naLcoD6jJNxtzc/moWTgHJ+X0KRfvhGWTa+xtFTS02i+PWOR89YYPcD8+LF6GmyFBjx2FmLCx4JwMg==", + "dev": true, + "requires": { + "@graphql-tools/utils": "^6", + "camel-case": "4.1.1", + "common-tags": "1.8.0", + "constant-case": "3.0.3", + "import-from": "3.0.0", + "lodash": "~4.17.20", + "lower-case": "2.0.1", + "param-case": "3.0.3", + "pascal-case": "3.1.1", + "tslib": "~2.0.1", + "upper-case": "2.0.1" + } + }, + "array.prototype.flatmap": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz", + "integrity": "sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==", + "dev": true, + "requires": { + "call-bind": "^1.0.0", + "define-properties": "^1.1.3", + "es-abstract": "^1.18.0-next.1", + "function-bind": "^1.1.1" + } + }, "dependency-graph": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.9.0.tgz", "integrity": "sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==", "dev": true + }, + "es-abstract": { + "version": "1.18.0-next.1", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz", + "integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==", + "dev": true, + "requires": { + "es-to-primitive": "^1.2.1", + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.1", + "is-callable": "^1.2.2", + "is-negative-zero": "^2.0.0", + "is-regex": "^1.1.1", + "object-inspect": "^1.8.0", + "object-keys": "^1.1.1", + "object.assign": "^4.1.1", + "string.prototype.trimend": "^1.0.1", + "string.prototype.trimstart": "^1.0.1" + } + }, + "is-callable": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz", + "integrity": "sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==", + "dev": true } } }, @@ -3835,6 +4013,15 @@ } } }, + "@graphql-tools/optimize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@graphql-tools/optimize/-/optimize-1.0.1.tgz", + "integrity": "sha512-cRlUNsbErYoBtzzS6zXahXeTBZGPVlPHXCpnEZ0XiK/KY/sQL96cyzak0fM/Gk6qEI9/l32MYEICjasiBQrl5w==", + "dev": true, + "requires": { + "tslib": "~2.0.1" + } + }, "@graphql-tools/prisma-loader": { "version": "6.2.5", "resolved": "https://registry.npmjs.org/@graphql-tools/prisma-loader/-/prisma-loader-6.2.5.tgz", @@ -4973,38 +5160,6 @@ "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", "dev": true }, - "array.prototype.flatmap": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.3.tgz", - "integrity": "sha512-OOEk+lkePcg+ODXIpvuU9PAryCikCJyo7GlDG1upleEpQRx6mzL9puEBkozQ5iAx20KV0l3DbyQwqciJtqe5Pg==", - "dev": true, - "requires": { - "define-properties": "^1.1.3", - "es-abstract": "^1.17.0-next.1", - "function-bind": "^1.1.1" - }, - "dependencies": { - "es-abstract": { - "version": "1.17.6", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.6.tgz", - "integrity": "sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==", - "dev": true, - "requires": { - "es-to-primitive": "^1.2.1", - "function-bind": "^1.1.1", - "has": "^1.0.3", - "has-symbols": "^1.0.1", - "is-callable": "^1.2.0", - "is-regex": "^1.1.0", - "object-inspect": "^1.7.0", - "object-keys": "^1.1.1", - "object.assign": "^4.1.0", - "string.prototype.trimend": "^1.0.1", - "string.prototype.trimstart": "^1.0.1" - } - } - } - }, "arraybuffer.slice": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz", @@ -5837,6 +5992,16 @@ } } }, + "call-bind": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.0.tgz", + "integrity": "sha512-AEXsYIyyDY3MCzbwdhzG3Jx1R0J2wetQyUynn6dYHAO+bg8l1k7jwZtRv4ryryFs7EP+NDlikJlVe59jr0cM2w==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "get-intrinsic": "^1.0.0" + } + }, "caller-callsite": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz", @@ -8559,6 +8724,17 @@ "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==" }, + "get-intrinsic": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.0.1.tgz", + "integrity": "sha512-ZnWP+AmS1VUaLgTRy47+zKtjTxz+0xMpx3I52i+aalBK1QP19ggLF3Db89KJX7kjfOfP2eoa01qc++GwPgufPg==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.1" + } + }, "get-stream": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", @@ -9359,6 +9535,23 @@ "resolve-from": "^3.0.0" } }, + "import-from": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz", + "integrity": "sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==", + "dev": true, + "requires": { + "resolve-from": "^5.0.0" + }, + "dependencies": { + "resolve-from": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true + } + } + }, "import-local": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz", diff --git a/src/app/components/reference-table/reference-table.component.html b/src/app/components/reference-table/reference-table.component.html index fc64366..65952af 100644 --- a/src/app/components/reference-table/reference-table.component.html +++ b/src/app/components/reference-table/reference-table.component.html @@ -24,10 +24,21 @@ Tabelle filtern + = new Subject(); constructor(private schemaService: SchemaService) {} @@ -92,6 +95,10 @@ export class ReferenceTableComponent { this.addForm .get('addGroup') .valueChanges.subscribe(() => this.filterPossibleValueOptions()); + + this.filterStringChanged + .pipe(debounceTime(400)) + .subscribe(() => this.applyTableFilter()); } ngAfterViewInit() { @@ -175,6 +182,10 @@ export class ReferenceTableComponent { ); } + newFilterStringValue(): void { + this.filterStringChanged.next(this.tableFilterString); + } + applyTableFilter() { this.dataSource.filter = this.tableFilterString; } diff --git a/src/app/components/table/table.component.html b/src/app/components/table/table.component.html index 75ea4e1..b3707cb 100644 --- a/src/app/components/table/table.component.html +++ b/src/app/components/table/table.component.html @@ -34,9 +34,20 @@ +