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

@@ -1,22 +1,41 @@
-@if (consumptionEntries$ | async; as consumptionEntries) {
+<section>
-<div>
+  <p-scrollTop />
-  <table>
+  <div class="mb-4 flex gap-2 md:justify-between">
-    <thead>
+    <div class="basis-full lg:basis-1/4 md:basis-1/2 p-0">
-      <tr>
+      <p-select styleClass="w-full" [formControl]="selectedRabbit" placeholder="Kaninchen" [showClear]="true"
-        <th>Datum</th>
+        [options]="(rabbits$ | async)!" optionLabel="name" />
-        <th>Distanz</th>
+    </div>
-        <th>Menge</th>
+    <div>
-      </tr>
+      <p-button label="Erstellen" routerLink="/weight-entries/create">
-    </thead>
+        <ng-icon name="matAddSharp"></ng-icon>
-    <tbody>
+      </p-button>
-      @for (entry of consumptionEntries; track entry.id) {
+    </div>
-      <tr>
+  </div>
-        <td>{{ entry.dateTime | date }}</td>
+  <div>
-        <td>{{ entry.distance }} km</td>
+    @if (filteredWeightEntries$ | async; as weightEntries) {
-        <td>{{ entry.amount }} l</td>
+      <p-dataView [value]="weightEntries"
-      </tr>
+                  [paginator]="true"
+                  [rows]="rowsPerPageDefaultOption"
+                  [rowsPerPageOptions]="rowsPerPageOptions"
+                  [pageLinks]="0"
+                  [showCurrentPageReport]="true"
+                  [currentPageReportTemplate]="currentPageReportTemplate"
+                  layout="list">
+        <ng-template #list let-entries>
+          <div class="flex flex-col gap-2">
+            @for (weightEntry of entries; track weightEntry.id) {
+              <app-weight-entry-card [weightEntry]="weightEntry"
+                                     (entryDeleted)="onEntryDeleted($event)"></app-weight-entry-card>
             }
-    </tbody>
+          </div>
-  </table>
+        </ng-template>
-</div>
+      </p-dataView>
-}
+    } @else {
+    <div class="flex flex-col gap-2">
+      @for (_ of skeletonsIterationSource; track $index) {
+      <p-skeleton height="4rem" styleClass="mb-2" />
+      }
+    </div>
+    }
+  </div>
+</section>

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

@@ -1,12 +1,37 @@
-import { AsyncPipe, DatePipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
 import { Component, inject } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { RouterLink } from '@angular/router';
+import { MessageService } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+import { DataViewModule } from 'primeng/dataview';
+import { SelectModule } from 'primeng/select';
+import { ScrollTopModule } from 'primeng/scrolltop';
+import { SkeletonModule } from 'primeng/skeleton';
+import {
+  BehaviorSubject,
+  combineLatest,
+  map,
+  Observable,
+  of,
+  startWith,
+  tap,
+} from 'rxjs';
+import { HttpClient } from '@angular/common/http';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { map, Observable, tap } from 'rxjs';
 
 @Component({
   selector: 'app-entries',
-  imports: [AsyncPipe, DatePipe],
+  imports: [
+    ButtonModule,
+    CommonModule,
+    DataViewModule,
+    SkeletonModule,
+    SelectModule,
+    ReactiveFormsModule,
+    RouterLink,
+    ScrollTopModule,
+  ],
   templateUrl: './entries.component.html',
   styleUrl: './entries.component.scss'
 })