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": {
"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",

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

@ -24,10 +24,21 @@
<mat-label>Tabelle filtern</mat-label>
<input
matInput
(input)="applyTableFilter()"
[(ngModel)]="tableFilterString"
(ngModelChange)="newFilterStringValue()"
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-paginator
[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 { MatSort } from '@angular/material/sort';
import { FormControl, FormGroup } from '@angular/forms';
import { Subject } from 'rxjs/internal/Subject';
import { debounceTime } from 'rxjs/internal/operators/debounceTime';
@Component({
selector: 'app-reference-table',
@ -78,7 +80,8 @@ export class ReferenceTableComponent {
addForm: FormGroup = new FormGroup({ addGroup: new FormControl() });
tableFilterString: string = '';
tableFilterString = '';
filterStringChanged: Subject<string> = new Subject<string>();
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;
}

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

@ -34,9 +34,20 @@
<input
matInput
[(ngModel)]="filter.includesString"
(input)="applyFilter()"
(ngModelChange)="newFilterStringValue()"
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>
<button
*ngIf="!filter.onlyUnsaved && countUnsavedRows() > 0"

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

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

Write Preview
Loading…
Cancel
Save