fLotte-meets-HWR-DB
/
frontend
mirror of https://github.com/fLotte-meets-HWR-DB/frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Debounce Table filter

Browse Source
urls
Max 4 years ago
parent 8d87760c33
commit bda1024cdd
5 changed files with 308 additions and 62 deletions
Show Stats Download Patch File Download Diff File

289
package-lock.json generated
Unescape Escape View File

@ -3171,20 +3171,54 @@
} }
}, },
"@graphql-codegen/visitor-plugin-common": { "@graphql-codegen/visitor-plugin-common": {
"version": "1.17.17", "version": "1.17.20",
"resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-1.17.17.tgz", "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-1.17.20.tgz",
"integrity": "sha512-UGstk36jlGSUXg2Z1/22B8qeVTY18mW6kuQVNY32kB5sy1wIVDi4eNS3OJdBTYDvL5MGTHjeWXk7EhSt3NP7gQ==", "integrity": "sha512-buIpcNNyTqVubknancX8m9jARCZsUA5eKuskg+CylWKL/8CSaD2Tiq7CfbbNO10o7XIgRrPtJMl1c9hQ6N4ytw==",
"dev": true, "dev": true,
"requires": { "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", "@graphql-tools/relay-operation-optimizer": "^6",
"array.prototype.flatmap": "^1.2.3", "array.prototype.flatmap": "^1.2.4",
"auto-bind": "~4.0.0", "auto-bind": "~4.0.0",
"dependency-graph": "^0.9.0", "dependency-graph": "^0.9.0",
"graphql-tag": "^2.11.0", "graphql-tag": "^2.11.0",
"parse-filepath": "^1.0.2", "parse-filepath": "^1.0.2",
"pascal-case": "^3.1.1", "pascal-case": "^3.1.1",
"tslib": "~2.0.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": { "dependency-graph": {
@ -3193,6 +3227,26 @@
"integrity": "sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==", "integrity": "sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==",
"dev": true "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": { "import-from": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz", "resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz",
@ -3202,6 +3256,12 @@
"resolve-from": "^5.0.0" "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": { "resolve-from": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
@ -3243,20 +3303,54 @@
} }
}, },
"@graphql-codegen/visitor-plugin-common": { "@graphql-codegen/visitor-plugin-common": {
"version": "1.17.17", "version": "1.17.20",
"resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-1.17.17.tgz", "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-1.17.20.tgz",
"integrity": "sha512-UGstk36jlGSUXg2Z1/22B8qeVTY18mW6kuQVNY32kB5sy1wIVDi4eNS3OJdBTYDvL5MGTHjeWXk7EhSt3NP7gQ==", "integrity": "sha512-buIpcNNyTqVubknancX8m9jARCZsUA5eKuskg+CylWKL/8CSaD2Tiq7CfbbNO10o7XIgRrPtJMl1c9hQ6N4ytw==",
"dev": true, "dev": true,
"requires": { "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", "@graphql-tools/relay-operation-optimizer": "^6",
"array.prototype.flatmap": "^1.2.3", "array.prototype.flatmap": "^1.2.4",
"auto-bind": "~4.0.0", "auto-bind": "~4.0.0",
"dependency-graph": "^0.9.0", "dependency-graph": "^0.9.0",
"graphql-tag": "^2.11.0", "graphql-tag": "^2.11.0",
"parse-filepath": "^1.0.2", "parse-filepath": "^1.0.2",
"pascal-case": "^3.1.1", "pascal-case": "^3.1.1",
"tslib": "~2.0.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": { "dependency-graph": {
@ -3265,6 +3359,26 @@
"integrity": "sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==", "integrity": "sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==",
"dev": true "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": { "import-from": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz", "resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz",
@ -3274,6 +3388,12 @@
"resolve-from": "^5.0.0" "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": { "resolve-from": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
@ -3283,14 +3403,15 @@
} }
}, },
"@graphql-codegen/visitor-plugin-common": { "@graphql-codegen/visitor-plugin-common": {
"version": "1.17.14", "version": "1.17.20",
"resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-1.17.14.tgz", "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-1.17.20.tgz",
"integrity": "sha512-tHVkMqQcWuq5xuXm7q8JKcKUVdEYaT61Hnz1OZNgYCBQIOCKUljZcmPuy3F8aJU29XHyZ2vwF2hNG6q4CE3fcQ==", "integrity": "sha512-buIpcNNyTqVubknancX8m9jARCZsUA5eKuskg+CylWKL/8CSaD2Tiq7CfbbNO10o7XIgRrPtJMl1c9hQ6N4ytw==",
"dev": true, "dev": true,
"requires": { "requires": {
"@graphql-codegen/plugin-helpers": "^1.17.8", "@graphql-codegen/plugin-helpers": "^1.18.2",
"@graphql-tools/relay-operation-optimizer": "^6.0.18", "@graphql-tools/optimize": "^1.0.1",
"array.prototype.flatmap": "^1.2.3", "@graphql-tools/relay-operation-optimizer": "^6",
"array.prototype.flatmap": "^1.2.4",
"auto-bind": "~4.0.0", "auto-bind": "~4.0.0",
"dependency-graph": "^0.9.0", "dependency-graph": "^0.9.0",
"graphql-tag": "^2.11.0", "graphql-tag": "^2.11.0",
@ -3299,11 +3420,68 @@
"tslib": "~2.0.1" "tslib": "~2.0.1"
}, },
"dependencies": { "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": { "dependency-graph": {
"version": "0.9.0", "version": "0.9.0",
"resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.9.0.tgz", "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.9.0.tgz",
"integrity": "sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==", "integrity": "sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==",
"dev": true "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": { "@graphql-tools/prisma-loader": {
"version": "6.2.5", "version": "6.2.5",
"resolved": "https://registry.npmjs.org/@graphql-tools/prisma-loader/-/prisma-loader-6.2.5.tgz", "resolved": "https://registry.npmjs.org/@graphql-tools/prisma-loader/-/prisma-loader-6.2.5.tgz",
@ -4973,38 +5160,6 @@
"integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
"dev": true "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": { "arraybuffer.slice": {
"version": "0.0.7", "version": "0.0.7",
"resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz", "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": { "caller-callsite": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz", "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", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==" "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": { "get-stream": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
@ -9359,6 +9535,23 @@
"resolve-from": "^3.0.0" "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": { "import-local": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz", "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",

13
src/app/components/reference-table/reference-table.component.html
Unescape Escape View File

@ -24,10 +24,21 @@
<mat-label>Tabelle filtern</mat-label> <mat-label>Tabelle filtern</mat-label>
<input <input
matInput matInput
(input)="applyTableFilter()"
[(ngModel)]="tableFilterString" [(ngModel)]="tableFilterString"
(ngModelChange)="newFilterStringValue()"
placeholder="Suchbegriff eingeben..." placeholder="Suchbegriff eingeben..."
/> />
<button
mat-button
*ngIf="tableFilterString"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="tableFilterString = ''; applyTableFilter()"
color="accent"
>
<mat-icon>close</mat-icon>
</button>
</mat-form-field> </mat-form-field>
<mat-paginator <mat-paginator
[pageSizeOptions]="[15, 25]" [pageSizeOptions]="[15, 25]"

13
src/app/components/reference-table/reference-table.component.ts
Unescape Escape View File

@ -12,6 +12,8 @@ import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator'; import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort'; import { MatSort } from '@angular/material/sort';
import { FormControl, FormGroup } from '@angular/forms'; import { FormControl, FormGroup } from '@angular/forms';
import { Subject } from 'rxjs/internal/Subject';
import { debounceTime } from 'rxjs/internal/operators/debounceTime';
@Component({ @Component({
selector: 'app-reference-table', selector: 'app-reference-table',
@ -78,7 +80,8 @@ export class ReferenceTableComponent {
addForm: FormGroup = new FormGroup({ addGroup: new FormControl() }); addForm: FormGroup = new FormGroup({ addGroup: new FormControl() });
tableFilterString: string = ''; tableFilterString = '';
filterStringChanged: Subject<string> = new Subject<string>();
constructor(private schemaService: SchemaService) {} constructor(private schemaService: SchemaService) {}
@ -92,6 +95,10 @@ export class ReferenceTableComponent {
this.addForm this.addForm
.get('addGroup') .get('addGroup')
.valueChanges.subscribe(() => this.filterPossibleValueOptions()); .valueChanges.subscribe(() => this.filterPossibleValueOptions());
this.filterStringChanged
.pipe(debounceTime(400))
.subscribe(() => this.applyTableFilter());
} }
ngAfterViewInit() { ngAfterViewInit() {
@ -175,6 +182,10 @@ export class ReferenceTableComponent {
); );
} }
newFilterStringValue(): void {
this.filterStringChanged.next(this.tableFilterString);
}
applyTableFilter() { applyTableFilter() {
this.dataSource.filter = this.tableFilterString; this.dataSource.filter = this.tableFilterString;
} }

13
src/app/components/table/table.component.html
Unescape Escape View File

@ -34,9 +34,20 @@
<input <input
matInput matInput
[(ngModel)]="filter.includesString" [(ngModel)]="filter.includesString"
(input)="applyFilter()" (ngModelChange)="newFilterStringValue()"
placeholder="Suchbegriff eingeben..." placeholder="Suchbegriff eingeben..."
/> />
<button
mat-button
*ngIf="filter.includesString"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="filter.includesString = ''; applyFilter()"
color="accent"
>
<mat-icon>close</mat-icon>
</button>
</mat-form-field> </mat-form-field>
<button <button
*ngIf="!filter.onlyUnsaved && countUnsavedRows() > 0" *ngIf="!filter.onlyUnsaved && countUnsavedRows() > 0"

42
src/app/components/table/table.component.ts
Unescape Escape View File

@ -5,6 +5,7 @@ import {
Input, Input,
Output, Output,
ViewChild, ViewChild,
AfterViewInit,
} from '@angular/core'; } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { CargoBikeResult } from 'src/app/services/bikes.service'; import { CargoBikeResult } from 'src/app/services/bikes.service';
@ -17,13 +18,15 @@ import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort'; import { MatSort } from '@angular/material/sort';
import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/internal/operators/debounceTime';
@Component({ @Component({
selector: 'app-table', selector: 'app-table',
templateUrl: './table.component.html', templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'], styleUrls: ['./table.component.scss'],
}) })
export class TableComponent { export class TableComponent implements AfterViewInit {
@Input() @Input()
headline: string = null; headline: string = null;
/** this array defines the columns and translations of the table and the order they are displayed */ /** this array defines the columns and translations of the table and the order they are displayed */
@ -69,6 +72,8 @@ export class TableComponent {
@Input() @Input()
relockingIntervalDuration = 1000 * 60 * 1; relockingIntervalDuration = 1000 * 60 * 1;
filter = { includesString: '', onlyUnsaved: false }; filter = { includesString: '', onlyUnsaved: false };
filterStringChanged: Subject<string> = new Subject<string>();
initialFilter = this.filter; initialFilter = this.filter;
isLoaded = false; isLoaded = false;
@ -78,8 +83,13 @@ export class TableComponent {
@Output() cancelEvent = new EventEmitter(); @Output() cancelEvent = new EventEmitter();
@Output() deleteEvent = new EventEmitter(); @Output() deleteEvent = new EventEmitter();
constructor(private schemaService: SchemaService, public dialog: MatDialog, private activatedroute:ActivatedRoute) { constructor(
this.filter.includesString = this.activatedroute.snapshot.queryParamMap.get('filter') || ''; private schemaService: SchemaService,
public dialog: MatDialog,
private activatedroute: ActivatedRoute
) {
this.filter.includesString =
this.activatedroute.snapshot.queryParamMap.get('filter') || '';
} }
ngAfterViewInit() { ngAfterViewInit() {
@ -109,6 +119,10 @@ export class TableComponent {
return a && b; return a && b;
}; };
this.filterStringChanged
.pipe(debounceTime(400))
.subscribe(() => this.applyFilter());
this.columnInfo.forEach((column) => this.columnInfo.forEach((column) =>
this.displayedColumns.push(column.dataPath) this.displayedColumns.push(column.dataPath)
); );
@ -119,15 +133,15 @@ export class TableComponent {
this.loadingRowIds = rowIds; this.loadingRowIds = rowIds;
}); });
this.dataService.successfullyCreatedRowWithId.subscribe(id => { this.dataService.successfullyCreatedRowWithId.subscribe((id) => {
this.data.data = this.data.data.filter(row => row.id !== id); this.data.data = this.data.data.filter((row) => row.id !== id);
}) });
this.dataService.tableData.subscribe((newTableDataSource) => { this.dataService.tableData.subscribe((newTableDataSource) => {
this.reloadingTable = false; this.reloadingTable = false;
const tempDataSource = []; const tempDataSource = [];
if (newTableDataSource === null) { if (newTableDataSource === null) {
return; return;
} }
this.isLoaded = true; this.isLoaded = true;
for (const row of newTableDataSource) { for (const row of newTableDataSource) {
@ -184,8 +198,10 @@ export class TableComponent {
this.tableDataGQLCreateInputType, this.tableDataGQLCreateInputType,
column.dataPath column.dataPath
); );
column.requiredForCreation = column.requiredForCreation || typeInformation.isRequired; column.requiredForCreation =
column.acceptedForCreation = column.acceptedForCreation || typeInformation.isPartOfType; column.requiredForCreation || typeInformation.isRequired;
column.acceptedForCreation =
column.acceptedForCreation || typeInformation.isPartOfType;
} }
} }
@ -261,7 +277,7 @@ export class TableComponent {
this.tableDataGQLCreateInputType, this.tableDataGQLCreateInputType,
deepen(row) deepen(row)
); );
this.createEvent.emit({currentId: row.id, row: newRow}); this.createEvent.emit({ currentId: row.id, row: newRow });
} }
lock(row: any) { lock(row: any) {
@ -338,7 +354,11 @@ export class TableComponent {
this.applyFilter(); this.applyFilter();
} }
applyFilter() { newFilterStringValue(): void {
this.filterStringChanged.next(this.filter.includesString);
}
applyFilter(): void {
this.data.filter = ({ this.data.filter = ({
...this.filter, ...this.filter,
includesString: this.filter.includesString.trim().toLowerCase(), includesString: this.filter.includesString.trim().toLowerCase(),

Write Preview
Loading…
Cancel
Save