93 lines
3.4 KiB
TypeScript
93 lines
3.4 KiB
TypeScript
import { DatePipe } from '@angular/common';
|
|
import { Component, inject } from '@angular/core';
|
|
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
|
|
import { HotToastService } from '@ngxpert/hot-toast';
|
|
import { GridApi, GridOptions, GridReadyEvent } from 'ag-grid-community';
|
|
import { ICylinder } from '../../../../model/interface/cylinder.interface';
|
|
import { IKey } from '../../../../model/interface/key.interface';
|
|
import { ApiService } from '../../../../shared/api.service';
|
|
import { HELPER } from '../../../../shared/helper.service';
|
|
import { AgGridAngular } from 'ag-grid-angular';
|
|
import { LostKeyComponent } from '../lost-key/lost-key.component';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { AgGridContainerComponent } from '../../../../shared/ag-grid/components/ag-grid-container/ag-grid-container.component';
|
|
|
|
@Component({
|
|
selector: 'app-lost-keys',
|
|
imports: [MatDialogModule, AgGridAngular, MatButtonModule],
|
|
providers: [DatePipe],
|
|
templateUrl: './lost-keys.component.html',
|
|
styleUrl: './lost-keys.component.scss'
|
|
})
|
|
export class LostKeysComponent extends AgGridContainerComponent {
|
|
private api: ApiService = inject(ApiService);
|
|
private datePipe = inject(DatePipe);
|
|
private dialog: MatDialog = inject(MatDialog);
|
|
private toast = inject(HotToastService);
|
|
|
|
gridApi!: GridApi;
|
|
|
|
dataChanged = false;
|
|
|
|
gridOptions: GridOptions = HELPER.getGridOptions();
|
|
|
|
constructor() {
|
|
super();
|
|
this.gridOptions.columnDefs = [
|
|
{ colId: 'name', field: 'name', headerName: 'Name', sort: 'asc', flex: 1, filter: true },
|
|
{ colId: 'nr', field: 'nr', headerName: 'Schlüsselnummer', flex: 1, filter: true },
|
|
{ colId: 'cylinder', field: 'cylinder', headerName: 'Zylinder', flex: 1, filter: true,
|
|
cellRenderer: (data: any) => data.value?.map((m: ICylinder) => m.name).join(', ')
|
|
},
|
|
{
|
|
colId: 'customer', field: 'customer.name', headerName: 'Mieter', flex: 1, filter: true,
|
|
},
|
|
{ colId: 'keyLost', field: 'keyLost', headerName: 'Verloren seit', width: 100,
|
|
cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value), 'dd.MM.yyyy'),
|
|
},
|
|
{
|
|
colId: 'actions',
|
|
headerName: 'Aktionen',
|
|
width: 100,
|
|
tooltipValueGetter: () => 'Als gefunden markieren',
|
|
cellRenderer: (params: any) => `<div class="icon magnifying-glass icon-btn-sm"></div>`,
|
|
onCellClicked: (event: any) => {
|
|
if (event.colDef.colId === 'actions') {
|
|
this.markAsFound(event.data);
|
|
}
|
|
}
|
|
}
|
|
];
|
|
this.gridOptions.overlayNoRowsTemplate = 'Bisher wurden keine Schlüssel als verloren gemeldet. Sobald dies der Fall ist, werden sie hier angezeigt.';
|
|
}
|
|
|
|
onGridReady(params: GridReadyEvent) {
|
|
this.gridApi = params.api;
|
|
this.loadLostKeys();
|
|
}
|
|
|
|
loadLostKeys() {
|
|
this.gridApi?.setGridOption("loading", true);
|
|
this.api.getLostKeys().subscribe({
|
|
next: keys => {
|
|
this.gridApi.setGridOption("rowData", keys);
|
|
this.gridApi.setGridOption("loading", false);
|
|
}
|
|
});
|
|
}
|
|
|
|
markAsFound(key: IKey) {
|
|
this.dialog.open(LostKeyComponent, { data: key, autoFocus: false }).afterClosed().subscribe({
|
|
next: async (result) => {
|
|
if (result == "") {
|
|
key.keyLost = null;
|
|
await this.api.updateKey(key);
|
|
this.loadLostKeys();
|
|
this.dataChanged = true;
|
|
}
|
|
}
|
|
})
|
|
|
|
}
|
|
}
|