Compare commits

...

3 Commits

Author SHA1 Message Date
d8f82bb2d1 Add entry filtering
All checks were successful
continuous-integration/drone/push Build is passing
2025-06-19 13:38:40 +02:00
390241aa53 Add sending entries to api 2025-06-19 13:38:29 +02:00
b323f7a29f Fix api clients 2025-06-19 13:38:15 +02:00
5 changed files with 130 additions and 96 deletions

View File

@@ -22,8 +22,8 @@ export class CarClient {
return this.http.post<Car>(`${this.apiBasePath}/v1/cars`, request);
}
update(request: UpdateCarRequest): Observable<Car> {
return this.http.put<Car>(`${this.apiBasePath}/v1/cars`, request);
update(id: string, request: UpdateCarRequest): Observable<Car> {
return this.http.put<Car>(`${this.apiBasePath}/v1/cars/${id}`, request);
}
delete(id: string): Observable<void> {

View File

@@ -18,12 +18,12 @@ export class ConsumptionClient {
return this.http.get<ConsumptionEntry>(`${this.apiBasePath}/v1/consumptions/${id}`);
}
create(request: CreateCarRequest): Observable<ConsumptionEntry> {
create(request: CreateConsumptionEntry): Observable<ConsumptionEntry> {
return this.http.post<ConsumptionEntry>(`${this.apiBasePath}/v1/consumptions`, request);
}
update(request: UpdateCarRequest): Observable<ConsumptionEntry> {
return this.http.put<ConsumptionEntry>(`${this.apiBasePath}/v1/consumptions`, request);
update(id: string, request: UpdateConsumptionEntry): Observable<ConsumptionEntry> {
return this.http.put<ConsumptionEntry>(`${this.apiBasePath}/v1/consumptions/${id}`, request);
}
delete(id: string): Observable<void> {

View File

@@ -1,4 +1,4 @@
import { Component, computed, inject, Signal } from '@angular/core';
import { Component, computed, DestroyRef, inject, input, Signal } from '@angular/core';
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { Router } from '@angular/router';
@@ -14,8 +14,11 @@ import { InputTextModule } from 'primeng/inputtext';
import { MultiSelectModule } from 'primeng/multiselect';
import { SelectModule } from 'primeng/select';
import { SkeletonModule } from 'primeng/skeleton';
import { map } from 'rxjs';
import { catchError, EMPTY, map, Observable, switchMap, tap, throwError } from 'rxjs';
import { RequiredMarkerComponent } from './components/required-marker.component';
import { ConsumptionClient } from '@vegasco-web/api/consumptions/consumption-client';
import { HttpErrorResponse } from '@angular/common/http';
import { MessageService } from 'primeng/api';
@Component({
selector: 'app-edit-entry',
@@ -40,14 +43,19 @@ import { RequiredMarkerComponent } from './components/required-marker.component'
export class EditEntryComponent {
private readonly formBuilder = inject(FormBuilder);
private readonly carClient = inject(CarClient);
private readonly consumptionClient = inject(ConsumptionClient);
private readonly router = inject(Router);
private readonly destroyRef = inject(DestroyRef);
private readonly messageService = inject(MessageService);
protected readonly entryId = input<string | undefined>(undefined);
protected readonly formFieldNames = {
car: 'car',
date: 'date',
mileage: 'mileage',
amount: 'amount',
}
} as const;
protected readonly formGroup = this.formBuilder.group({
[this.formFieldNames.car]: [<Car | null>null, Validators.required],
@@ -84,88 +92,82 @@ export class EditEntryComponent {
}
onSubmit(): void {
// if (!this.entryId) {
// this.createEntry();
// return;
// }
var entryId = this.entryId();
if (entryId === undefined || entryId === null) {
this.createEntry();
return;
}
// this.updateEntry();
this.updateEntry(entryId);
}
private getFormData() {
var dateTime = new Date((this.formGroup.controls[this.formFieldNames.date].value ?? new Date).setHours(0, 0, 0, 0));
return {
carId: this.formGroup.controls[this.formFieldNames.car].value!.id,
dateTime: dateTime.toISOString(),
distance: this.formGroup.controls[this.formFieldNames.mileage].value!,
amount: this.formGroup.controls[this.formFieldNames.amount].value!,
ignoreInCalculation: false,
};
}
createEntry() {
// this.api
// .createWeightEntry(
// this.getWeighedAt(),
// this.formGroup.controls['weight'].value,
// this.formGroup.controls['comment'].value,
// this.formGroup.controls['rabbit'].value!.id,
// this.formGroup.controls['medicines'].value?.map((x) => x.id) ?? [],
// )
// .subscribe({
// next: (_) => {
// this.router.navigateByUrl('/weight-entries');
// },
// error: (error: HttpErrorResponse) => {
// switch (true) {
// case error.status >= 500 && error.status <= 599:
// this.messageService.add({
// severity: 'error',
// summary: 'Serverfehler',
// detail:
// 'Beim Erstellen des Eintrags ist ein Fehler aufgetreten. Bitte versuche es erneut.',
// });
// break;
// case error.status == 400:
// this.messageService.add({
// severity: 'error',
// summary: 'Clientfehler',
// detail:
// 'Die Anwendung scheint falsche Daten an den Server zu senden.',
// });
// break;
// default:
// break;
// }
// },
// });
var request: CreateConsumptionEntry = this.getFormData();
this.consumptionClient.create(request)
.pipe(
takeUntilDestroyed(this.destroyRef),
catchError((error) => this.handleError(error)),
switchMap(() => this.router.navigateByUrl('/entries'))
)
.subscribe();
}
updateEntry() {
// this.api
// .updateWeightEntry(
// this.entryId!,
// this.getWeighedAt(),
// this.formGroup.controls['weight'].value,
// this.formGroup.controls['comment'].value,
// this.formGroup.controls['rabbit'].value!.id,
// this.formGroup.controls['medicines'].value?.map((x) => x.id) ?? [],
// )
// .subscribe({
// next: (_) => {
// this.router.navigateByUrl('/weight-entries');
// },
// error: (error: HttpErrorResponse) => {
// switch (true) {
// case error.status >= 500 && error.status <= 599:
// this.messageService.add({
// severity: 'error',
// summary: 'Serverfehler',
// detail:
// 'Beim Aktualisieren des Eintrags ist ein Fehler aufgetreten. Bitte versuche es erneut.',
// });
// break;
// case error.status == 400:
// this.messageService.add({
// severity: 'error',
// summary: 'Clientfehler',
// detail:
// 'Die Anwendung scheint falsche Daten an den Server zu senden.',
// });
// break;
// default:
// break;
// }
// },
// });
updateEntry(id: string) {
var request: UpdateConsumptionEntry = this.getFormData();
this.consumptionClient.update(id, request)
.pipe(
takeUntilDestroyed(this.destroyRef),
catchError((error) => this.handleError(error)),
switchMap(() => this.router.navigateByUrl('/entries'))
)
.subscribe();
}
private handleError(error: unknown): Observable<never> {
if (!(error instanceof HttpErrorResponse)) {
return throwError(() => error);
}
switch (true) {
case error.status >= 500 && error.status <= 599:
this.messageService.add({
severity: 'error',
summary: 'Serverfehler',
detail:
'Beim Erstellen des Eintrags ist ein Fehler aufgetreten. Bitte versuche es erneut.',
});
break;
case error.status == 400:
this.messageService.add({
severity: 'error',
summary: 'Clientfehler',
detail:
'Die Anwendung scheint falsche Daten an den Server zu senden.',
});
break;
default:
console.error(error);
this.messageService.add({
severity: 'error',
summary: 'Unerwarteter Fehler',
detail:
'Beim Erstellen des Eintrags hat der Server eine unerwartete Antwort zurückgegeben.',
});
break;
}
return EMPTY;
}
}

View File

@@ -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"
[options]="(rabbits$ | async)!" optionLabel="name" /> -->
<p-select styleClass="w-full" [formControl]="selectedCar" placeholder="Auto" [showClear]="true"
[options]="(cars$ | async)!" optionLabel="name" />
</div>
<div>
<p-button label="Erstellen" routerLink="/entries/create">

View File

@@ -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) => {
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.',
});
}
}