|
|
|
@ -7,6 +7,7 @@ import {
|
|
|
|
ViewChild,
|
|
|
|
ViewChild,
|
|
|
|
AfterViewInit,
|
|
|
|
AfterViewInit,
|
|
|
|
ChangeDetectorRef,
|
|
|
|
ChangeDetectorRef,
|
|
|
|
|
|
|
|
ElementRef,
|
|
|
|
} from '@angular/core';
|
|
|
|
} from '@angular/core';
|
|
|
|
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
|
|
|
|
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
|
|
|
|
import { flatten } from 'src/app/helperFunctions/flattenObject';
|
|
|
|
import { flatten } from 'src/app/helperFunctions/flattenObject';
|
|
|
|
@ -62,9 +63,15 @@ export class TableComponent implements AfterViewInit {
|
|
|
|
@Input()
|
|
|
|
@Input()
|
|
|
|
tableDataGQLUpdateInputType: string;
|
|
|
|
tableDataGQLUpdateInputType: string;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@Input()
|
|
|
|
|
|
|
|
copyableRows = false;
|
|
|
|
|
|
|
|
|
|
|
|
@ViewChild(MatPaginator) paginator: MatPaginator;
|
|
|
|
@ViewChild(MatPaginator) paginator: MatPaginator;
|
|
|
|
@ViewChild(MatSort) sort: MatSort;
|
|
|
|
@ViewChild(MatSort) sort: MatSort;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ViewChild('filterRow', { read: ElementRef }) filterRow: ElementRef;
|
|
|
|
|
|
|
|
@ViewChild('headerRow', { read: ElementRef }) headerRow: ElementRef;
|
|
|
|
|
|
|
|
|
|
|
|
additionalColumnsFront: string[] = [];
|
|
|
|
additionalColumnsFront: string[] = [];
|
|
|
|
additionalColumnsBack: string[] = ['buttons'];
|
|
|
|
additionalColumnsBack: string[] = ['buttons'];
|
|
|
|
displayedColumns: string[] = [];
|
|
|
|
displayedColumns: string[] = [];
|
|
|
|
@ -88,10 +95,12 @@ export class TableComponent implements AfterViewInit {
|
|
|
|
filterChanged: Subject<any> = new Subject<any>();
|
|
|
|
filterChanged: Subject<any> = new Subject<any>();
|
|
|
|
|
|
|
|
|
|
|
|
isLoaded = false;
|
|
|
|
isLoaded = false;
|
|
|
|
|
|
|
|
isProcessing = false;
|
|
|
|
|
|
|
|
|
|
|
|
@Output() createEvent = new EventEmitter();
|
|
|
|
@Output() createEvent = new EventEmitter();
|
|
|
|
@Output() lockEvent = new EventEmitter();
|
|
|
|
@Output() lockEvent = new EventEmitter();
|
|
|
|
@Output() saveEvent = new EventEmitter();
|
|
|
|
@Output() saveEvent = new EventEmitter();
|
|
|
|
|
|
|
|
@Output() copyEvent = new EventEmitter();
|
|
|
|
@Output() cancelEvent = new EventEmitter();
|
|
|
|
@Output() cancelEvent = new EventEmitter();
|
|
|
|
@Output() deleteEvent = new EventEmitter();
|
|
|
|
@Output() deleteEvent = new EventEmitter();
|
|
|
|
|
|
|
|
|
|
|
|
@ -108,20 +117,20 @@ export class TableComponent implements AfterViewInit {
|
|
|
|
|
|
|
|
|
|
|
|
ngOnInit() {
|
|
|
|
ngOnInit() {
|
|
|
|
this.addColumnPropertiesFromGQLSchemaToColumnInfo();
|
|
|
|
this.addColumnPropertiesFromGQLSchemaToColumnInfo();
|
|
|
|
console.log(this.columnInfo);
|
|
|
|
|
|
|
|
this.columnInfo.forEach((column) =>
|
|
|
|
this.columnInfo.forEach((column) =>
|
|
|
|
this.displayedColumns.push(column.dataPath)
|
|
|
|
this.displayedColumns.push(column.dataPath)
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
this.displayedColumns.unshift(...this.additionalColumnsFront);
|
|
|
|
|
|
|
|
this.displayedColumns.push(...this.additionalColumnsBack);
|
|
|
|
this.displayedFilterColumns = this.displayedColumns.map(
|
|
|
|
this.displayedFilterColumns = this.displayedColumns.map(
|
|
|
|
(columnName) => columnName + '.filter'
|
|
|
|
(columnName) => columnName + '.filter'
|
|
|
|
);
|
|
|
|
);
|
|
|
|
this.displayedColumns.unshift(...this.additionalColumnsFront);
|
|
|
|
|
|
|
|
this.displayedColumns.push(...this.additionalColumnsBack);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.resetFilters();
|
|
|
|
this.resetFilters();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
ngAfterViewInit(): void {
|
|
|
|
ngAfterViewInit(): void {
|
|
|
|
|
|
|
|
this.setTableFilterRowHeight();
|
|
|
|
this.data.paginator = this.paginator;
|
|
|
|
this.data.paginator = this.paginator;
|
|
|
|
this.data.sortingDataAccessor = (item, columnName) => {
|
|
|
|
this.data.sortingDataAccessor = (item, columnName) => {
|
|
|
|
if (typeof item[columnName] === 'string') {
|
|
|
|
if (typeof item[columnName] === 'string') {
|
|
|
|
@ -147,13 +156,19 @@ export class TableComponent implements AfterViewInit {
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
this.dataService.tableData.subscribe((newTableDataSource) => {
|
|
|
|
this.dataService.tableData.subscribe((newTableDataSource) => {
|
|
|
|
this.reloadingTable = false;
|
|
|
|
|
|
|
|
const tempDataSource = [];
|
|
|
|
const tempDataSource = [];
|
|
|
|
if (newTableDataSource === null) {
|
|
|
|
if (newTableDataSource === null) {
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.reloadingTable = false;
|
|
|
|
this.isLoaded = true;
|
|
|
|
this.isLoaded = true;
|
|
|
|
for (const row of newTableDataSource) {
|
|
|
|
for (const row of newTableDataSource) {
|
|
|
|
|
|
|
|
if (row.newObject) {
|
|
|
|
|
|
|
|
// its a copied object
|
|
|
|
|
|
|
|
row.id = this.getNewId();
|
|
|
|
|
|
|
|
tempDataSource.push(flatten(row));
|
|
|
|
|
|
|
|
continue;
|
|
|
|
|
|
|
|
}
|
|
|
|
const oldRow = this.getRowById(row.id);
|
|
|
|
const oldRow = this.getRowById(row.id);
|
|
|
|
/** make sure to not overwrite a row that is being edited */
|
|
|
|
/** make sure to not overwrite a row that is being edited */
|
|
|
|
if (!oldRow) {
|
|
|
|
if (!oldRow) {
|
|
|
|
@ -335,6 +350,14 @@ export class TableComponent implements AfterViewInit {
|
|
|
|
this.saveEvent.emit(deepenRow);
|
|
|
|
this.saveEvent.emit(deepenRow);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
copy(row: any) {
|
|
|
|
|
|
|
|
const deepenRow = this.schemaService.filterObject(
|
|
|
|
|
|
|
|
this.tableDataGQLUpdateInputType,
|
|
|
|
|
|
|
|
deepen(row)
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
this.copyEvent.emit(deepenRow);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
cancel(row: any) {
|
|
|
|
cancel(row: any) {
|
|
|
|
this.cancelEvent.emit(row);
|
|
|
|
this.cancelEvent.emit(row);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -419,32 +442,60 @@ export class TableComponent implements AfterViewInit {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
newFilterValue(): void {
|
|
|
|
newFilterValue(): void {
|
|
|
|
console.log(this.filters);
|
|
|
|
|
|
|
|
this.filterChanged.next(this.filters);
|
|
|
|
this.filterChanged.next(this.filters);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
applyFilters(): void {
|
|
|
|
applyFilters(): void {
|
|
|
|
this.isLoaded = false;
|
|
|
|
this.isProcessing = true;
|
|
|
|
setTimeout(() => {
|
|
|
|
setTimeout(() => {
|
|
|
|
this.data.filter = (this.filters as unknown) as string;
|
|
|
|
this.data.filter = (this.filters as unknown) as string;
|
|
|
|
this.isLoaded = true;
|
|
|
|
this.isProcessing = false;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
resetFilters() {
|
|
|
|
columnFiltersAreSet(): boolean {
|
|
|
|
this.filters = [];
|
|
|
|
for (const filterObject of Object.keys(this.filters.columnFilters)) {
|
|
|
|
|
|
|
|
if (this.filters.columnFilters[filterObject].isSet) {
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
resetColumnFilters() {
|
|
|
|
this.filters['columnFilters'] = [];
|
|
|
|
this.filters['columnFilters'] = [];
|
|
|
|
for (const column of this.columnInfo) {
|
|
|
|
for (const column of this.columnInfo) {
|
|
|
|
this.filters.columnFilters[column.dataPath] = {
|
|
|
|
this.filters.columnFilters[column.dataPath] = {
|
|
|
|
|
|
|
|
isSet: false,
|
|
|
|
value: null,
|
|
|
|
value: null,
|
|
|
|
minValue: {},
|
|
|
|
minValue: {},
|
|
|
|
maxValue: {},
|
|
|
|
maxValue: {},
|
|
|
|
fromValue: {},
|
|
|
|
fromValue: {},
|
|
|
|
toValue: {},
|
|
|
|
toValue: {},
|
|
|
|
type: column.type,
|
|
|
|
type: column.type,
|
|
|
|
|
|
|
|
list: column.list,
|
|
|
|
options: {},
|
|
|
|
options: {},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setTableFilterRowHeight();
|
|
|
|
|
|
|
|
this.applyFilters();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
resetFilters() {
|
|
|
|
|
|
|
|
this.filters = [];
|
|
|
|
|
|
|
|
this.resetColumnFilters();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setTableFilterRowHeight() {
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
|
|
const filterRowHeight = this.filterRow.nativeElement.clientHeight;
|
|
|
|
|
|
|
|
const headerRowCells = Array.from(
|
|
|
|
|
|
|
|
this.headerRow.nativeElement.children as HTMLCollectionOf<HTMLElement>
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
for (let i = 0; i < headerRowCells.length; i++) {
|
|
|
|
|
|
|
|
headerRowCells[i].style.top = filterRowHeight + 'px';
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
resetSorting() {
|
|
|
|
resetSorting() {
|
|
|
|
|
FlayInAHook
4 years ago
