New Angular based web version #1
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user