diff --git a/client/src/app/modules/keys/keys.component.ts b/client/src/app/modules/keys/keys.component.ts index 209083a..500c50b 100644 --- a/client/src/app/modules/keys/keys.component.ts +++ b/client/src/app/modules/keys/keys.component.ts @@ -1,7 +1,7 @@ import { Component, inject } from '@angular/core'; import { AG_GRID_LOCALE_DE } from '@ag-grid-community/locale'; import { AgGridAngular } from 'ag-grid-angular'; -import { GridOptions,GridApi, GridReadyEvent, CellEditingStoppedEvent, ICellEditorParams, FilterActionParams, FilterAction, themeQuartz, Theme, ThemeDefaultParams, AgGridEvent, CellClickedEvent, CellDoubleClickedEvent } from 'ag-grid-community'; +import { GridOptions,GridApi, GridReadyEvent, CellEditingStoppedEvent, ICellEditorParams, FilterActionParams, FilterAction, themeQuartz, Theme, ThemeDefaultParams, AgGridEvent, CellClickedEvent, CellDoubleClickedEvent, ColDef } from 'ag-grid-community'; import { DatePipe } from '@angular/common'; import { ApiService } from '../../shared/api.service'; import { IKey } from '../../model/interface/key.interface'; @@ -47,20 +47,20 @@ export class KeysComponent extends AgGridContainerComponent { localeText: AG_GRID_LOCALE_DE, rowData: [], columnDefs: [ - + { colId: 'id', field: 'id', headerName: 'ID', hide: true }, { colId: 'name', field: 'name' , headerName: 'Name', flex: 1, editable: true, sort: 'asc', filter: true }, { colId: 'nr', field: 'nr' , headerName: 'Schlüsselnummer', flex: 1, editable: true, filter: true }, - { colId: 'cylinder', field: 'cylinder' , headerName: 'Zylinder', flex: 1, editable: false, filter: true, + { + colId: 'cylinder', field: 'cylinder' , headerName: 'Zylinder', flex: 1, editable: false, filter: true, valueFormatter: (data: any) => { return data; }, cellRenderer: (data: any) => {return data.value?.map((m: ICylinder) => m.name).join(', ')}, tooltipValueGetter: (data: any) => data.value?.map((m: ICylinder) => m.name).join(','), - onCellDoubleClicked: (event) => { - this.openSelectCylinder(event) - }, + onCellDoubleClicked: (event) => { this.openSelectCylinder(event) }, cellEditorPopup: true, filterValueGetter: (params: any) => {return params.data.cylinder?.map((m: ICylinder) => m.name).join(', ')}, }, - { colId: 'system', field: 'cylinder' , headerName: 'Schließanlage', flex: 1, editable: false, filter: true, cellRenderer: (data: any) => { + { + colId: 'system', field: 'cylinder' , headerName: 'Schließanlage', flex: 1, editable: false, filter: true, cellRenderer: (data: any) => { const s = new Set(data.value?.map((m: ICylinder) => m.system?.name)); return [...s].join(', ') }, @@ -70,46 +70,38 @@ export class KeysComponent extends AgGridContainerComponent { }, valueFormatter: (data: any) => { return data; }, }, - { colId: 'customer', field: 'customer' , headerName: 'Mieter', flex: 1, editable: false, filter: true, + { + colId: 'customer', field: 'customer' , headerName: 'Mieter', flex: 1, editable: false, filter: true, cellRenderer: (data: any) => {return data.value?.name}, filterValueGetter: (params: any) => {return params.data.customer?.name}, valueFormatter: (data: any) => { return data; }, }, - { - field: 'createdAt' - , headerName: 'Erstellt' - , width: 120 - // , type: 'date' + { + field: 'createdAt', headerName: 'Erstellt', width: 120 , cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value)) , tooltipValueGetter: (data: any) => this.datePipe.transform(new Date(data.value), 'medium'), valueFormatter: (data: any) => { return data; }, },{ - colId: 'updatedAt', - field: 'updatedAt' - , headerName: 'Geändert' - , width: 120 - // , type: 'date' + colId: 'updatedAt', field: 'updatedAt', headerName: 'Geändert', width: 120, hide: true , cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value)) : '-' , tooltipValueGetter: (data: any) => this.datePipe.transform(new Date(data.value), 'medium') + }, { colId: 'handedOut', field: 'handedOut' , headerName: 'Ausgegeben', width: 100, editable: false, filter: true, headerTooltip: 'Ausgegeben' }, - { - colId: 'actions' - , headerName: 'Aktionen' - , width: 140 + { colId: 'digital', field: 'digital', headerName: 'Digital', hide: true }, + { + colId: 'actions', headerName: 'Aktionen', width: 140, sortable: false , cellRenderer: AgKeyActionsComponent - , sortable: false ,valueFormatter: (data: any) => { return data; }, + } ], loading: true, - // rowHeight: 54, loadingOverlayComponent: AgLoadingComponent, pagination: true, } editKey(id: string) { - } ngOnInit(): void { @@ -128,7 +120,6 @@ export class KeysComponent extends AgGridContainerComponent { } }) } if (Object.keys(params).includes('nr')) { - console.log("SET " + params['nr'] ) this.gridApi.setFilterModel({ nr: { filterType: 'text',