104 lines
3.7 KiB
TypeScript
104 lines
3.7 KiB
TypeScript
import { Component, inject } from '@angular/core';
|
|
import { HELPER } from '../../shared/helper.service';
|
|
import { CellEditingStoppedEvent, GridApi, GridOptions, GridReadyEvent } from 'ag-grid-community';
|
|
import { AgGridAngular } from 'ag-grid-angular';
|
|
import { ApiService } from '../../shared/api.service';
|
|
import { DatePipe } from '@angular/common';
|
|
import { AgDeleteCylinderComponent } from '../../shared/ag-grid/components/ag-delete-cylinder/ag-delete-cylinder.component';
|
|
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
|
|
import { CreateCylinderComponent } from './components/create-cylinder/create-cylinder.component';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { AgGridContainerComponent } from '../../shared/ag-grid/components/ag-grid-container/ag-grid-container.component';
|
|
import { CylinderArchiveComponent } from './components/cylinder-archive/cylinder-archive.component';
|
|
import { ICylinder } from '../../model/interface/cylinder.interface';
|
|
import { DialogPosition } from '@angular/material/dialog'
|
|
|
|
@Component({
|
|
selector: 'app-cylinder',
|
|
imports: [AgGridAngular, MatDialogModule, MatIconModule, MatButtonModule],
|
|
providers: [DatePipe],
|
|
templateUrl: './cylinder.component.html',
|
|
styleUrl: './cylinder.component.scss'
|
|
})
|
|
export class CylinderComponent extends AgGridContainerComponent {
|
|
private api: ApiService = inject(ApiService);
|
|
private datePipe = inject(DatePipe);
|
|
private dialog = inject(MatDialog);
|
|
|
|
gridApi!: GridApi;
|
|
|
|
gridOptions: GridOptions = HELPER.getGridOptions();
|
|
|
|
|
|
constructor() {
|
|
super();
|
|
|
|
this.gridOptions.columnDefs = [
|
|
{ field: 'name', headerName: 'Name', sort: 'asc', flex: 1, filter: true, editable: true },
|
|
{ field: 'description', headerName: 'Beschreibung', flex: 1, filter: true, editable: true },
|
|
{ field: 'system.name', headerName: 'System', flex: 1, filter: true },
|
|
{ field: 'keyCount', headerName: 'Anzahl Schlüssel', flex: 0, type: 'number' },
|
|
{ field: 'createdAt', headerName: 'Angelegt', cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value)) : '-' },
|
|
{ field: 'updatedAt', headerName: 'Upgedated', cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value)) : '-' },
|
|
{
|
|
colId: 'actions'
|
|
, headerName: 'Aktionen'
|
|
, width: 120
|
|
, cellRenderer: AgDeleteCylinderComponent
|
|
}
|
|
]
|
|
}
|
|
|
|
loadCylinders() {
|
|
this.gridApi.setGridOption("loading", true);
|
|
this.api.refreshCylinders();
|
|
}
|
|
|
|
onGridReady(params: GridReadyEvent) {
|
|
this.gridApi = params.api;
|
|
this.gridApi.addEventListener("cellEditingStopped", evt => this.cellEditEnd(evt));
|
|
this.loadCylinders();
|
|
this.api.cylinders.asObservable().subscribe({
|
|
next: (data) => {
|
|
this.gridApi.setGridOption("rowData", data);
|
|
this.gridApi.setGridOption("loading", false);
|
|
}
|
|
})
|
|
}
|
|
|
|
private async cellEditEnd(event: CellEditingStoppedEvent) {
|
|
const cylinder: ICylinder = event.data;
|
|
|
|
if (!event.valueChanged || event.newValue == event.oldValue) { return; }
|
|
|
|
await this.api.updateCylinder(cylinder)
|
|
|
|
}
|
|
|
|
openCreateCylinder() {
|
|
this.dialog.open(CreateCylinderComponent, {
|
|
maxWidth: "calc(100vw - 48px)",
|
|
width: "800px",
|
|
minWidth: "200px",
|
|
disableClose: true,
|
|
}).afterClosed().subscribe({
|
|
next: (cylinder) => {
|
|
if (cylinder) {
|
|
this.loadCylinders();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
openArchive() {
|
|
this.dialog.open(CylinderArchiveComponent, {
|
|
maxHeight: "calc(100vh - 48px)",
|
|
maxWidth: "calc(100vw - 48px)",
|
|
width: "800px",
|
|
minWidth: "min(700px,calc(100vw - 24px))",
|
|
height: "70vh",
|
|
})
|
|
}
|
|
}
|