Add entry filtering

src/Vegasco-Web/src/app/modules/entries/entries/entries.component.html

@@ -2,8 +2,8 @@
   <p-scrollTop />
   <div class="mb-4 flex gap-2 md:justify-between">
     <div class="basis-full lg:basis-1/4 md:basis-1/2 p-0">
-      <!-- <p-select styleClass="w-full" [formControl]="selectedRabbit" placeholder="Kaninchen" [showClear]="true"
+      <p-select styleClass="w-full" [formControl]="selectedCar" placeholder="Auto" [showClear]="true"
-        [options]="(rabbits$ | async)!" optionLabel="name" /> -->
+        [options]="(cars$ | async)!" optionLabel="name" />
     </div>
     <div>
       <p-button label="Erstellen" routerLink="/entries/create">

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<ConsumptionEntry[]>;
   protected readonly cars$: Observable<Car[]>;
 
   protected readonly skeletonsIterationSource = Array(10).fill(0);
 
+  protected readonly selectedCar = new FormControl<Car | null | undefined>(null);
+
+  private readonly deletedEntries$ = new BehaviorSubject(<string[]>[]);
+
   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) => {
+        map(([entries, selectedCar, deletedEntries]) => {
-          console.log('Entries response:', response);
+          const nonDeletedEntries =
-        }),
+            deletedEntries.length === 0
-        map(response => response.consumptions)
+              ? 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.',
+    });
+  }
 }