ngx-mat-dynamic-table
Version:
Dynamic material table table.
92 lines • 13.3 kB
JavaScript
import { Component, ViewChild, Input, Output, EventEmitter } from '@angular/core';
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { FormControl } from '@angular/forms';
import { moveItemInArray } from '@angular/cdk/drag-drop';
export class TableSearchInputComponent {
constructor() {
this.visible = true;
this.selectable = true;
this.separatorKeysCodes = [ENTER, COMMA];
this.searchCtrl = new FormControl();
this.searchTerms = [];
this.searchChange = new EventEmitter();
}
ngOnInit() {
this.columnSearchSubscription = this.columnSearch$.subscribe(searchTerm => {
if ((searchTerm.search || '').trim() || searchTerm.searchType === 'empty') {
// See if there are existing global search
let columnSearch = this.searchTerms.find(st => st.column === searchTerm.column);
// If there are, update
if (columnSearch) {
columnSearch.search = searchTerm.search.trim();
columnSearch.searchType = searchTerm.searchType;
}
else // Else add
this.searchTerms.push(searchTerm);
this.emitNewSearch();
}
else {
this.remove(searchTerm);
}
});
}
add(event) {
const value = event.target.value;
// See if there are existing global search
let globalSearch = this.searchTerms.find(st => st.type === 'global');
// Add global search term
if ((value || '').trim()) {
// If there are, update
if (globalSearch)
globalSearch.search = value.trim();
else // Else add
this.searchTerms.push({ type: 'global', search: value.trim() });
this.emitNewSearch();
}
else {
this.remove(globalSearch);
}
}
remove(searchTerm) {
let index;
// if column is cleared
if (searchTerm.type === 'column') {
index = this.searchTerms.findIndex(i => i.column === searchTerm.column);
}
else {
index = this.searchTerms.findIndex(i => i.search === searchTerm.search && i.type === searchTerm.type);
if (index >= 0)
this.searchInput.nativeElement.value = null;
}
if (searchTerm.inputReference)
searchTerm.inputReference.value = '';
if (index >= 0) {
this.searchTerms.splice(index, 1);
this.emitNewSearch();
}
}
orderChanged(event) {
moveItemInArray(this.searchTerms, event.previousIndex, event.currentIndex);
this.emitNewSearch();
}
emitNewSearch() {
this.searchChange.emit(this.searchTerms);
}
ngOnDestroy() {
this.columnSearchSubscription.unsubscribe();
}
}
TableSearchInputComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-mat-table-search-input',
template: "<div fxLayout=\"column\" fxLayout.gt-xs=\"row wrap\" fxLayoutAlign=\"start start\" fxLayoutGap.gt-xs=\"15px\">\n <mat-form-field appearance=\"outline\">\n <mat-label>Search</mat-label>\n <input matInput placeholder=\"All Columns\" #searchInput (keyup)=\"add($event)\">\n </mat-form-field>\n <div fxLayout=\"column\">\n <span *ngIf=\"searchTerms.length > 0\" class=\"mat-caption\">Filters</span>\n <mat-chip-list cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"orderChanged($event)\">\n <mat-chip class=\"example-box\" cdkDrag *ngFor=\"let term of searchTerms\"\n [color]=\"term.type === 'global' ? 'primary' : 'accent'\" selected\n [matTooltip]=\"term.type === 'global' ? 'All':term.columnTitle\">\n <span *ngIf=\"term.searchType === 'empty'; else not_empty\">\n {{term.columnTitle}} (empty)\n </span>\n <ng-template #not_empty>\n {{term.search}} {{term.searchType && term.searchType === '!=' ?\n '(\u2260)' : ''}}\n </ng-template>\n <mat-icon (click)=\"remove(term)\" matChipRemove>cancel</mat-icon>\n </mat-chip>\n </mat-chip-list>\n </div>\n</div>",
styles: [""]
},] }
];
TableSearchInputComponent.ctorParameters = () => [];
TableSearchInputComponent.propDecorators = {
columnSearch$: [{ type: Input }],
searchInput: [{ type: ViewChild, args: ['searchInput',] }],
searchChange: [{ type: Output }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtc2VhcmNoLWlucHV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIuLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbWF0LWR5bmFtaWMtdGFibGUvc3JjLyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudHMvdGFibGUtc2VhcmNoLWlucHV0L3RhYmxlLXNlYXJjaC1pbnB1dC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBc0IsU0FBUyxFQUFFLEtBQUssRUFBYSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pILE9BQU8sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDckQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTdDLE9BQU8sRUFBZSxlQUFlLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQWdCdEUsTUFBTSxPQUFPLHlCQUF5QjtJQWVwQztRQVpBLFlBQU8sR0FBRyxJQUFJLENBQUM7UUFDZixlQUFVLEdBQUcsSUFBSSxDQUFDO1FBQ2xCLHVCQUFrQixHQUFhLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFDO1FBQzlDLGVBQVUsR0FBRyxJQUFJLFdBQVcsRUFBRSxDQUFDO1FBQy9CLGdCQUFXLEdBQWlCLEVBQUUsQ0FBQztRQU1yQixpQkFBWSxHQUErQixJQUFJLFlBQVksRUFBRSxDQUFDO0lBR3hFLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLHdCQUF3QixHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsU0FBUyxDQUFDLFVBQVUsQ0FBQyxFQUFFO1lBQ3hFLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxJQUFJLEVBQUUsQ0FBQyxDQUFDLElBQUksRUFBRSxJQUFJLFVBQVUsQ0FBQyxVQUFVLEtBQUssT0FBTyxFQUFFO2dCQUN6RSwwQ0FBMEM7Z0JBQzFDLElBQUksWUFBWSxHQUFHLElBQUksQ0FB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LElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztJQUMzQyxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUM5QyxDQUFDOzs7WUE3RkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSw0QkFBNEI7Z0JBQ3RDLHN5Q0FBa0Q7O2FBRW5EOzs7OzRCQUdFLEtBQUs7MEJBU0wsU0FBUyxTQUFDLGFBQWE7MkJBRXZCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgRWxlbWVudFJlZiwgVmlld0NoaWxkLCBJbnB1dCwgT25EZXN0cm95LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ09NTUEsIEVOVEVSIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2tleWNvZGVzJztcbmltcG9ydCB7IEZvcm1Db250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgU3ViamVjdCwgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBDZGtEcmFnRHJvcCwgbW92ZUl0ZW1JbkFycmF5IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2RyYWctZHJvcCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU2VhcmNoVGVybSB7XG4gIHR5cGU6ICdjb2x1bW4nIHwgJ2dsb2JhbCcsXG4gIGlucHV0UmVmZXJlbmNlPzogYW55LFxuICBjb2x1bW4/OiBzdHJpbmcsXG4gIGNvbHVtblRpdGxlPzogc3RyaW5nLFxuICBzZWFyY2g6IHN0cmluZyxcbiAgc2VhcmNoVHlwZT86ICc9JyB8ICchPScgfCAnPj0nIHwgJzw9JyB8ICdlbXB0eSdcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmd4LW1hdC10YWJsZS1zZWFyY2gtaW5wdXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFibGUtc2VhcmNoLWlucHV0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdGFibGUtc2VhcmNoLWlucHV0LmNvbXBvbmVudC5jc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBUYWJsZVNlYXJjaElucHV0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuXG4gIEBJbnB1dCgpIGNvbHVtblNlYXJjaCQ6IFN1YmplY3Q8U2VhcmNoVGVybT47XG4gIHZpc2libGUgPSB0cnVlO1xuICBzZWxlY3RhYmxlID0gdHJ1ZTtcbiAgc2VwYXJhdG9yS2V5c0NvZGVzOiBudW1iZXJbXSA9IFtFTlRFUiwgQ09NTUFdO1xuICBzZWFyY2hDdHJsID0gbmV3IEZvcm1Db250cm9sKCk7XG4gIHNlYXJjaFRlcm1zOiBTZWFyY2hUZXJtW10gPSBbXTtcblxuICBjb2x1bW5TZWFyY2hTdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbjtcblxuICBAVmlld0NoaWxkKCdzZWFyY2hJbnB1dCcpIHNlYXJjaElucHV0OiBFbGVtZW50UmVmPEhUTUxJbnB1dEVsZW1lbnQ+O1xuXG4gIEBPdXRwdXQoKSBzZWFyY2hDaGFuZ2U6IEV2ZW50RW1pdHRlcjxTZWFyY2hUZXJtW10+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5jb2x1bW5TZWFyY2hTdWJzY3JpcHRpb24gPSB0aGlzLmNvbHVtblNlYXJjaCQuc3Vic2NyaWJlKHNlYXJjaFRlcm0gPT4ge1xuICAgICAgaWYgKChzZWFyY2hUZXJtLnNlYXJjaCB8fCAnJykudHJpbSgpIHx8IHNlYXJjaFRlcm0uc2VhcmNoVHlwZSA9PT0gJ2VtcHR5Jykge1xuICAgICAgICAvLyBTZWUgaWYgdGhlcmUgYXJlIGV4aXN0aW5nIGdsb2JhbCBzZWFyY2hcbiAgICAgICAgbGV0IGNvbHVtblNlYXJjaCA9IHRoaXMuc2VhcmNoVGVybXMuZmluZChzdCA9PiBzdC5jb2x1bW4gPT09IHNlYXJjaFRlcm0uY29sdW1uKVxuICAgICAgICAvLyBJZiB0aGVyZSBhcmUsIHVwZGF0ZVxuICAgICAgICBpZiAoY29sdW1uU2VhcmNoKSB7XG4gICAgICAgICAgY29sdW1uU2VhcmNoLnNlYXJjaCA9IHNlYXJjaFRlcm0uc2VhcmNoLnRyaW0oKTtcbiAgICAgICAgICBjb2x1bW5TZWFyY2guc2VhcmNoVHlwZSA9IHNlYXJjaFRlcm0uc2VhcmNoVHlwZTtcbiAgICAgICAgfSBlbHNlIC8vIEVsc2UgYWRkXG4gICAgICAgICAgdGhpcy5zZWFyY2hUZXJtcy5wdXNoKHNlYXJjaFRlcm0pO1xuXG4gICAgICAgIHRoaXMuZW1pdE5ld1NlYXJjaCgpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5yZW1vdmUoc2VhcmNoVGVybSk7XG4gICAgICB9XG4gICAgfSlcbiAgfVxuXG4gIGFkZChldmVudDogYW55KTogdm9pZCB7XG4gICAgY29uc3QgdmFsdWUgPSAoZXZlbnQudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQpLnZhbHVlO1xuXG4gICAgLy8gU2VlIGlmIHRoZXJlIGFyZSBleGlzdGluZyBnbG9iYWwgc2VhcmNoXG4gICAgbGV0IGdsb2JhbFNlYXJjaCA9IHRoaXMuc2VhcmNoVGVybXMuZmluZChzdCA9PiBzdC50eXBlID09PSAnZ2xvYmFsJylcblxuICAgIC8vIEFkZCBnbG9iYWwgc2VhcmNoIHRlcm1cbiAgICBpZiAoKHZhbHVlIHx8ICcnKS50cmltKCkpIHtcbiAgICAgIC8vIElmIHRoZXJlIGFyZSwgdXBkYXRlXG4gICAgICBpZiAoZ2xvYmFsU2VhcmNoKVxuICAgICAgICBnbG9iYWxTZWFyY2guc2VhcmNoID0gdmFsdWUudHJpbSgpO1xuICAgICAgZWxzZSAvLyBFbHNlIGFkZFxuICAgICAgICB0aGlzLnNlYXJjaFRlcm1zLnB1c2goeyB0eXBlOiAnZ2xvYmFsJywgc2VhcmNoOiB2YWx1ZS50cmltKCkgfSk7XG5cbiAgICAgIHRoaXMuZW1pdE5ld1NlYXJjaCgpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnJlbW92ZShnbG9iYWxTZWFyY2gpO1xuICAgIH1cbiAgfVxuXG4gIHJlbW92ZShzZWFyY2hUZXJtOiBTZWFyY2hUZXJtKTogdm9pZCB7XG4gICAgbGV0IGluZGV4O1xuICAgIC8vIGlmIGNvbHVtbiBpcyBjbGVhcmVkXG4gICAgaWYgKHNlYXJjaFRlcm0udHlwZSA9PT0gJ2NvbHVtbicpIHtcbiAgICAgIGluZGV4ID0gdGhpcy5zZWFyY2hUZXJtcy5maW5kSW5kZXgoaSA9PiBpLmNvbHVtbiA9PT0gc2VhcmNoVGVybS5jb2x1bW4pO1xuICAgIH0gZWxzZSB7XG4gICAgICBpbmRleCA9IHRoaXMuc2VhcmNoVGVybXMuZmluZEluZGV4KGkgPT4gaS5zZWFyY2ggPT09IHNlYXJjaFRlcm0uc2VhcmNoICYmIGkudHlwZSA9PT0gc2VhcmNoVGVybS50eXBlKTtcbiAgICAgIGlmIChpbmRleCA+PSAwKVxuICAgICAgICB0aGlzLnNlYXJjaElucHV0Lm5hdGl2ZUVsZW1lbnQudmFsdWUgPSBudWxsO1xuICAgIH1cblxuICAgIGlmIChzZWFyY2hUZXJtLmlucHV0UmVmZXJlbmNlKVxuICAgICAgc2VhcmNoVGVybS5pbnB1dFJlZmVyZW5jZS52YWx1ZSA9ICcnO1xuXG4gICAgaWYgKGluZGV4ID49IDApIHtcbiAgICAgIHRoaXMuc2VhcmNoVGVybXMuc3BsaWNlKGluZGV4LCAxKTtcbiAgICAgIHRoaXMuZW1pdE5ld1NlYXJjaCgpO1xuICAgIH1cbiAgfVxuXG4gIG9yZGVyQ2hhbmdlZChldmVudDogQ2RrRHJhZ0Ryb3A8U2VhcmNoVGVybVtdPik6IHZvaWQge1xuICAgIG1vdmVJdGVtSW5BcnJheSh0aGlzLnNlYXJjaFRlcm1zLCBldmVudC5wcmV2aW91c0luZGV4LCBldmVudC5jdXJyZW50SW5kZXgpO1xuICAgIHRoaXMuZW1pdE5ld1NlYXJjaCgpO1xuICB9XG5cbiAgZW1pdE5ld1NlYXJjaCgpOiB2b2lkIHtcbiAgICB0aGlzLnNlYXJjaENoYW5nZS5lbWl0KHRoaXMuc2VhcmNoVGVybXMpO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5jb2x1bW5TZWFyY2hTdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgfVxuXG59XG4iXX0=