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

@@ -1,83 +1,59 @@
-@if (!loaded) {
+@if (isLoading()) {
   <p-skeleton height="4rem" styleClass="mb-2" />
 } @else {
   <form [formGroup]="formGroup" class="flex flex-col gap-4" (ngSubmit)="onSubmit()">
 
-    <div class="flex gap-2 w-full">
-      <div class="flex flex-col gap-2 w-full">
-        <label for="date"> Datum </label>
-        <p-datepicker [iconDisplay]="'input'"
-                      [firstDayOfWeek]="1"
-                      placeholder="Datum auswählen"
-                      [showIcon]="true"
-                      inputId="date"
-                      formControlName="date"
-                      styleClass="w-full"
-                      dateFormat="dd.mm.yy" />
-      </div>
-
-      <div class="flex flex-col gap-2 w-full">
-        <label for="time"> Uhrzeit </label>
-        <p-datepicker [iconDisplay]="'input'"
-                      [showIcon]="true"
-                      [timeOnly]="true"
-                      placeholder="Uhrzeit auswählen"
-                      inputId="time"
-                      formControlName="time"
-                      styleClass="w-full"
-                      inputStyleClass="w-full" />
-      </div>
-    </div>
-
     <div class="flex flex-col gap-2">
-      <label for="rabbit"> Kaninchen </label>
+      <label [for]="formFieldNames.car"> Auto </label>
-      @if (rabbits$ | async; as rabbits) {
+      @if (cars(); as cars) {
         <p-select
-          [options]="rabbits"
+          [options]="cars"
-          placeholder="Kaninchen auswählen"
+          placeholder="Auto auswählen"
-          formControlName="rabbit"
+          [formControlName]="formFieldNames.car"
-          optionLabel="name"
+          [optionLabel]="formFieldNames.car"
-          inputId="rabbit"
+          [inputId]="formFieldNames.car"
           styleClass="w-full" />
       }
     </div>
 
     <div class="flex flex-col gap-2">
-      <label for="medicines"> Medizin </label>
+      <label [for]="formFieldNames.date"> Datum </label>
-      @if (medicines$ | async; as medicines) {
+      <p-datepicker [iconDisplay]="'input'"
-        <p-multiSelect
+                    [firstDayOfWeek]="1"
-          [options]="medicines"
+                    placeholder="Datum auswählen"
-          [showToggleAll]="false"
+                    [showIcon]="true"
-          [showHeader]="false"
+                    [inputId]="formFieldNames.date"
-          [autoOptionFocus]="false"
+                    [formControlName]="formFieldNames.date"
-          [filter]="false"
+                    styleClass="w-full"
-          [showClear]="true"
+                    dateFormat="dd.mm.yy" />
-          [maxSelectedLabels]="medicines.length"
-          optionLabel="abbreviation"
-          formControlName="medicines"
-          inputId="medicines"
-          placeholder="Medizin auswählen"
-          display="chip"
-          styleClass="w-full">
-          <ng-template let-medicine pTemplate="item">
-            {{ medicine.name }} ({{ medicine.abbreviation }})
-          </ng-template>
-        </p-multiSelect>
-      }
     </div>
 
     <div class="flex flex-col gap-2">
-      <label for="weight"> Gewicht </label>
+      <label [for]="formFieldNames.mileage"> Kilometerstand </label>
       <p-inputGroup>
-        <input id="weight" placeholder="Gewicht eingeben" type="number" min="1" pInputText formControlName="weight" />
+        <input 
-        <p-inputGroupAddon>g</p-inputGroupAddon>
+          id="mileage"
+          placeholder="Kilometerstand eingeben"
+          type="number"
+          min="1"
+          pInputText
+          [formControlName]="formFieldNames.mileage" />
+        <p-inputGroupAddon>km</p-inputGroupAddon>
       </p-inputGroup>
     </div>
 
     <div class="flex flex-col gap-2">
-      <label for="comment"> Kommentar </label>
+      <label [for]="formFieldNames.amount"> Menge </label>
-      <input pInputText id="comment" placeholder="Kommentar eingeben" type="text" formControlName="comment"
+      <p-inputGroup>
-             class="w-full" />
+        <input 
+          id="amount"
+          placeholder="Menge eingeben"
+          type="number"
+          min="1"
+          pInputText
+          [formControlName]="formFieldNames.amount" />
+        <p-inputGroupAddon>l</p-inputGroupAddon>
+      </p-inputGroup>
     </div>
 
     <div class="flex gap-2">

src/Vegasco-Web/src/app/modules/entries/edit-entry/edit-entry.component.ts

@@ -1,6 +1,8 @@
-import { AsyncPipe } from '@angular/common';
+import { Component, computed, inject, Signal } from '@angular/core';
-import { Component, inject } from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { CarClient } from '@vegasco-web/api/cars/car-client';
 import { ButtonModule } from 'primeng/button';
 import { ChipModule } from 'primeng/chip';
 import { DatePickerModule } from 'primeng/datepicker';
@@ -12,11 +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';
 
 @Component({
   selector: 'app-edit-entry',
   imports: [
-    AsyncPipe,
     ButtonModule,
     ChipModule,
     DatePickerModule,
@@ -35,16 +37,133 @@ import { SkeletonModule } from 'primeng/skeleton';
 })
 export class EditEntryComponent {
   private readonly formBuilder = inject(FormBuilder);
+  private readonly carClient = inject(CarClient);
+  private readonly router = inject(Router);
+
+  protected readonly formFieldNames = {
+    car: 'car',
+    date: 'date',
+    mileage: 'mileage',
+    amount: 'amount',
+  }
 
   protected readonly formGroup = this.formBuilder.group({
-    date: [<Date | null>null],
+    [this.formFieldNames.car]: [<Car | null>null, Validators.required],
-    time: [<Date | null>null],
+    [this.formFieldNames.date]: [<Date | null>null],
-    rabbit: [<Rabbit | null>null, Validators.required],
+    [this.formFieldNames.mileage]: [
-    weight: [
       <number | null>null,
-      Validators.min(1),
+      [Validators.required, Validators.min(1)],
+    ],
+    [this.formFieldNames.amount]: [
+      <number | null>null,
+      [Validators.required, Validators.min(1)],
     ],
-    medicines: [<Medicine[]>[]],
-    comment: [<string | null>null],
   });
+
+  protected readonly cars: Signal<Car[] | undefined>;
+
+  protected readonly isLoading = computed(() => {
+    return this.cars() === undefined;
+  })
+
+  constructor() {
+    this.cars = toSignal(
+      this.carClient
+        .getAll()
+        .pipe(
+          takeUntilDestroyed(),
+          map(response => response.cars)
+        ),
+    );
+  }
+
+  async navigateToOverviewPage(): Promise<void> {
+    await this.router.navigateByUrl(`/entries`);
+  }
+
+  onSubmit(): void {
+    // if (!this.entryId) {
+    //   this.createEntry();
+    //   return;
+    // }
+
+    // this.updateEntry();
+  }
+
+  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;
+    //       }
+    //     },
+    //   });
+  }
+
+  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;
+    //       }
+    //     },
+    //   });
+  }
 }