Add reference table
Max Ehrlicher-Schmidt
4 years ago
parent
80771eded3
commit
260e105504
@ -0,0 +1,93 @@
|
|||||||
|
<div class="table-page-wrapper">
|
||||||
|
<div class="table-control">
|
||||||
|
<form [formGroup]="addForm">
|
||||||
|
<mat-form-field>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
matInput
|
||||||
|
placeholder="Element hinzufügen"
|
||||||
|
formControlName="addGroup"
|
||||||
|
[matAutocomplete]="autoGroup"
|
||||||
|
/>
|
||||||
|
<mat-autocomplete #autoGroup="matAutocomplete">
|
||||||
|
<mat-option
|
||||||
|
*ngFor="let element of possibleValueOptions"
|
||||||
|
[value]="nameToShowInSelection(element)"
|
||||||
|
(click)="addReference(element)"
|
||||||
|
>
|
||||||
|
{{ nameToShowInSelection(element) }}
|
||||||
|
</mat-option>
|
||||||
|
</mat-autocomplete>
|
||||||
|
</mat-form-field>
|
||||||
|
</form>
|
||||||
|
<mat-form-field class="filter">
|
||||||
|
<mat-label>Tabelle filtern</mat-label>
|
||||||
|
<input
|
||||||
|
matInput
|
||||||
|
(input)="applyTableFilter()"
|
||||||
|
[(ngModel)]="tableFilterString"
|
||||||
|
placeholder="Suchbegriff eingeben..."
|
||||||
|
/>
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-paginator
|
||||||
|
[pageSizeOptions]="[15, 25]"
|
||||||
|
showFirstLastButtons
|
||||||
|
></mat-paginator>
|
||||||
|
</div>
|
||||||
|
<div class="table-container">
|
||||||
|
<table mat-table class="mat-elevation-z8" matSort [dataSource]="dataSource">
|
||||||
|
<!--- Note that these columns can be defined in any order.
|
||||||
|
The actual rendered columns are set as a property on the row definition" -->
|
||||||
|
|
||||||
|
<!-- Other Columns -->
|
||||||
|
<ng-container
|
||||||
|
*ngFor="let column of columnInfo"
|
||||||
|
[matColumnDef]="column.name"
|
||||||
|
[sticky]="isStickyColumn(column.name)"
|
||||||
|
>
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>
|
||||||
|
{{ column.translation || column.name }}
|
||||||
|
</th>
|
||||||
|
<td mat-cell *matCellDef="let element">
|
||||||
|
<app-cell
|
||||||
|
*ngIf="column.type === 'Boolean'; else stringValue"
|
||||||
|
[editable]="false"
|
||||||
|
[(value)]="element[column.name]"
|
||||||
|
[inputType]="column.type"
|
||||||
|
></app-cell>
|
||||||
|
<ng-template #stringValue>
|
||||||
|
<span *ngIf="!column.link">{{ element[column.name] }}</span>
|
||||||
|
<a
|
||||||
|
mat-button
|
||||||
|
color="primary"
|
||||||
|
*ngIf="column.link"
|
||||||
|
[routerLink]="column.link(element)"
|
||||||
|
>{{ element[column.name] }}</a
|
||||||
|
>
|
||||||
|
</ng-template>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Buttons Column -->
|
||||||
|
<ng-container matColumnDef="buttons" stickyEnd>
|
||||||
|
<th mat-header-cell *matHeaderCellDef></th>
|
||||||
|
<td mat-cell *matCellDef="let element">
|
||||||
|
<div class="button-wrapper">
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
matTooltip="Entfernen"
|
||||||
|
(click)="delete(element)"
|
||||||
|
[disabled]="!editable"
|
||||||
|
>
|
||||||
|
<mat-icon>delete</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Table Definition -->
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
|
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
.table-page-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
.headline {
|
||||||
|
margin: 0 0.5em;
|
||||||
|
}
|
||||||
|
.table-control {
|
||||||
|
margin: 0.5em;
|
||||||
|
flex: none;
|
||||||
|
.table-control-button {
|
||||||
|
margin: 0.25em;
|
||||||
|
}
|
||||||
|
.filter {
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
.mat-paginator {
|
||||||
|
display: inline-block;
|
||||||
|
width: 50em;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.table-container {
|
||||||
|
flex: 1;
|
||||||
|
width: auto;
|
||||||
|
margin-left: 0.5em;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
table {
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
.mat-header-cell,
|
||||||
|
.mat-footer-cell,
|
||||||
|
.mat-cell {
|
||||||
|
min-width: 3em;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 0.25em;
|
||||||
|
::ng-deep.mat-form-field-infix {
|
||||||
|
width: auto !important;
|
||||||
|
min-width: 50px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::ng-deep.mat-form-field {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-table-sticky {
|
||||||
|
filter: brightness(90%);
|
||||||
|
//opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,189 @@
|
|||||||
|
import {
|
||||||
|
Component,
|
||||||
|
EventEmitter,
|
||||||
|
Input,
|
||||||
|
Output,
|
||||||
|
ViewChild,
|
||||||
|
} from '@angular/core';
|
||||||
|
import { flatten } from 'src/app/helperFunctions/flattenObject';
|
||||||
|
import { SchemaService } from 'src/app/services/schema.service';
|
||||||
|
|
||||||
|
import { MatTableDataSource } from '@angular/material/table';
|
||||||
|
import { MatPaginator } from '@angular/material/paginator';
|
||||||
|
import { MatSort } from '@angular/material/sort';
|
||||||
|
import { FormControl, FormGroup } from '@angular/forms';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-reference-table',
|
||||||
|
templateUrl: './reference-table.component.html',
|
||||||
|
styleUrls: ['./reference-table.component.scss'],
|
||||||
|
})
|
||||||
|
export class ReferenceTableComponent {
|
||||||
|
/** this array defines the columns and translations of the table and the order they are displayed */
|
||||||
|
@Input()
|
||||||
|
columnInfo: {
|
||||||
|
name: string;
|
||||||
|
translation: string;
|
||||||
|
sticky?: boolean;
|
||||||
|
type?: string;
|
||||||
|
link?: (row: any) => string;
|
||||||
|
}[] = [];
|
||||||
|
|
||||||
|
@Input()
|
||||||
|
dataServiceThatProvidesThePossibleData: any;
|
||||||
|
@Input()
|
||||||
|
nameToShowInSelection: any;
|
||||||
|
@Input()
|
||||||
|
set editable(value: boolean) {
|
||||||
|
this._editable = value;
|
||||||
|
value
|
||||||
|
? this.addForm.get('addGroup').enable()
|
||||||
|
: this.addForm.get('addGroup').disable();
|
||||||
|
}
|
||||||
|
get editable() {
|
||||||
|
return this._editable;
|
||||||
|
}
|
||||||
|
_editable: boolean = false;
|
||||||
|
|
||||||
|
@Input()
|
||||||
|
set data(newdata) {
|
||||||
|
if (!newdata) return;
|
||||||
|
this.dataSource.data = [];
|
||||||
|
for (const element of newdata) {
|
||||||
|
this.dataSource.data.push(flatten(element));
|
||||||
|
}
|
||||||
|
this.dataSource.data = this.dataSource.data;
|
||||||
|
this.onReferenceChange();
|
||||||
|
}
|
||||||
|
get data(): any {
|
||||||
|
return this.dataSource.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Input()
|
||||||
|
tableDataGQLType: string;
|
||||||
|
|
||||||
|
@Output() referenceIds = new EventEmitter();
|
||||||
|
|
||||||
|
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||||
|
@ViewChild(MatSort) sort: MatSort;
|
||||||
|
|
||||||
|
displayedColumns: string[] = [];
|
||||||
|
|
||||||
|
/** data source of the table */
|
||||||
|
dataSource: MatTableDataSource<any> = new MatTableDataSource([]);
|
||||||
|
possibleValues: Array<any> = [];
|
||||||
|
possibleValueOptions: Array<any> = [];
|
||||||
|
|
||||||
|
reloadingTable = false;
|
||||||
|
|
||||||
|
addForm: FormGroup = new FormGroup({ addGroup: new FormControl() });
|
||||||
|
|
||||||
|
tableFilterString: string = '';
|
||||||
|
|
||||||
|
constructor(private schemaService: SchemaService) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.addColumnPropertiesFromGQLSchemaToColumnInfo();
|
||||||
|
this.columnInfo.forEach((column) => {
|
||||||
|
this.displayedColumns.push(column.name);
|
||||||
|
});
|
||||||
|
this.displayedColumns.push('buttons');
|
||||||
|
|
||||||
|
this.addForm
|
||||||
|
.get('addGroup')
|
||||||
|
.valueChanges.subscribe(() => this.filterPossibleValueOptions());
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this.dataSource.paginator = this.paginator;
|
||||||
|
this.dataSource.sort = this.sort;
|
||||||
|
|
||||||
|
this.dataSource.sortingDataAccessor = (item, columnName) => {
|
||||||
|
if (typeof item[columnName] === 'string') {
|
||||||
|
return item[columnName].toLocaleLowerCase();
|
||||||
|
}
|
||||||
|
return item[columnName];
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dataServiceThatProvidesThePossibleData.tableData.subscribe((data) => {
|
||||||
|
this.possibleValues = [];
|
||||||
|
if (data) {
|
||||||
|
for (const row of data) {
|
||||||
|
this.possibleValues.push(flatten(row));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.filterPossibleValueOptions();
|
||||||
|
});
|
||||||
|
this.dataServiceThatProvidesThePossibleData.loadTableData();
|
||||||
|
}
|
||||||
|
|
||||||
|
addColumnPropertiesFromGQLSchemaToColumnInfo() {
|
||||||
|
for (const column of this.columnInfo) {
|
||||||
|
const typeInformation = this.schemaService.getTypeInformation(
|
||||||
|
this.tableDataGQLType,
|
||||||
|
column.name
|
||||||
|
);
|
||||||
|
column.type = column.type || typeInformation.type;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
isStickyColumn(propertyName: string) {
|
||||||
|
return (
|
||||||
|
this.columnInfo.find((column) => column.name === propertyName)?.sticky ||
|
||||||
|
false
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
delete(row: any) {
|
||||||
|
const index = this.dataSource.data.findIndex(
|
||||||
|
(element) => element.id === row.id
|
||||||
|
);
|
||||||
|
if (index === -1) return;
|
||||||
|
this.dataSource.data.splice(index, 1);
|
||||||
|
this.dataSource.data = this.dataSource.data; //needed to trigger update lol
|
||||||
|
this.filterPossibleValueOptions();
|
||||||
|
this.onReferenceChange();
|
||||||
|
}
|
||||||
|
|
||||||
|
addReference(row: any) {
|
||||||
|
this.addForm.get('addGroup').reset();
|
||||||
|
this.dataSource.data = [row, ...this.dataSource.data];
|
||||||
|
|
||||||
|
this.tableFilterString = '';
|
||||||
|
this.applyTableFilter();
|
||||||
|
this.filterPossibleValueOptions();
|
||||||
|
this.onReferenceChange();
|
||||||
|
}
|
||||||
|
|
||||||
|
getRowById(id: string) {
|
||||||
|
return this.dataSource.data.find((row) => row.id === id);
|
||||||
|
}
|
||||||
|
|
||||||
|
filterPossibleValueOptions() {
|
||||||
|
this.possibleValueOptions = this.possibleValues.filter(
|
||||||
|
(element) => !this.dataSource.data.find((row) => row.id === element.id)
|
||||||
|
);
|
||||||
|
let searchString = this.addForm.get('addGroup').value;
|
||||||
|
if (!searchString) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
searchString = searchString.toLocaleLowerCase();
|
||||||
|
this.possibleValueOptions = this.possibleValueOptions.filter((element) =>
|
||||||
|
this.nameToShowInSelection(element)
|
||||||
|
.toLocaleLowerCase()
|
||||||
|
.includes(searchString)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
applyTableFilter() {
|
||||||
|
this.dataSource.filter = this.tableFilterString;
|
||||||
|
}
|
||||||
|
|
||||||
|
onReferenceChange() {
|
||||||
|
const ids = [];
|
||||||
|
for (const element of this.data) {
|
||||||
|
ids.push(element.id);
|
||||||
|
}
|
||||||
|
this.referenceIds.emit(ids);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { TableOverviewComponent } from './table-overview.component';
|
|
||||||
|
|
||||||
describe('TableOverviewComponent', () => {
|
|
||||||
let component: TableOverviewComponent;
|
|
||||||
let fixture: ComponentFixture<TableOverviewComponent>;
|
|
||||||
|
|
||||||
beforeEach(async(() => {
|
|
||||||
TestBed.configureTestingModule({
|
|
||||||
declarations: [ TableOverviewComponent ]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
}));
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
fixture = TestBed.createComponent(TableOverviewComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue