diff --git a/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.html b/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.html index df3e664..5dd85e0 100644 --- a/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.html +++ b/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.html @@ -2,8 +2,8 @@
- +
diff --git a/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.ts b/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.ts index 2abd85d..bfbf62d 100644 --- a/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.ts +++ b/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.ts @@ -1,18 +1,22 @@ import { AsyncPipe, CommonModule } from '@angular/common'; import { Component, inject } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; -import { ReactiveFormsModule } from '@angular/forms'; +import { FormControl, ReactiveFormsModule } from '@angular/forms'; import { RouterLink } from '@angular/router'; import { CarClient } from '@vegasco-web/api/cars/car-client'; import { ConsumptionClient } from '@vegasco-web/api/consumptions/consumption-client'; +import { MessageService } from 'primeng/api'; import { ButtonModule } from 'primeng/button'; import { DataViewModule } from 'primeng/dataview'; import { ScrollTopModule } from 'primeng/scrolltop'; import { SelectModule } from 'primeng/select'; import { SkeletonModule } from 'primeng/skeleton'; import { + BehaviorSubject, + combineLatest, map, Observable, + startWith, tap } from 'rxjs'; @@ -35,29 +39,57 @@ import { export class EntriesComponent { private readonly consumptionClient = inject(ConsumptionClient); private readonly carClient = inject(CarClient); + private readonly messageService = inject(MessageService); protected readonly consumptionEntries$: Observable; protected readonly cars$: Observable; protected readonly skeletonsIterationSource = Array(10).fill(0); + protected readonly selectedCar = new FormControl(null); + + private readonly deletedEntries$ = new BehaviorSubject([]); + constructor() { - this.consumptionEntries$ = this.consumptionClient.getAll() + const consumptionEntries = this.consumptionClient.getAll() + .pipe( + map(response => response.consumptions) + ); + + this.consumptionEntries$ = combineLatest([ + consumptionEntries, + this.selectedCar.valueChanges.pipe(startWith(null)), + this.deletedEntries$, + ]) .pipe( takeUntilDestroyed(), - tap((response) => { - console.log('Entries response:', response); - }), - map(response => response.consumptions) + map(([entries, selectedCar, deletedEntries]) => { + const nonDeletedEntries = + deletedEntries.length === 0 + ? entries + : entries.filter(entry => !deletedEntries.includes(entry.id)); + + if (!selectedCar) { + return nonDeletedEntries; + } + + return nonDeletedEntries.filter(entry => entry.carId === selectedCar.id); + }) ); this.cars$ = this.carClient.getAll() .pipe( takeUntilDestroyed(), - tap((response) => { - console.log('Cars response:', response); - }), map(response => response.cars) ); } + + onEntryDeleted(entry: ConsumptionEntry): void { + this.deletedEntries$.next([...this.deletedEntries$.value, entry.id]); + this.messageService.add({ + severity: 'success', + summary: 'Eintrag gelöscht', + detail: 'Der Eintrag wurde erfolgreich gelöscht.', + }); + } }