New Angular based web version #1

Closed
thomas.nuyken wants to merge 150 commits from main into ddd
Showing only changes of commit 390241aa53 - Show all commits

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;
}
}