Merged PR 1875: feat(remission-list-item): Item View (Basic), Refs: #4769

feat(remission-list-item): Item View (Basic), Refs: #4769

libs/remission/feature/remission-list/src/lib/remission-list-item/remission-list-item.component.html

@@ -0,0 +1 @@
+<remi-product-info [item]="item()"></remi-product-info>

libs/remission/feature/remission-list/src/lib/remission-list-item/remission-list-item.component.ts

@@ -1,9 +1,14 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ReturnItem, ReturnSuggestion } from '@isa/remission/data-access';
+import { ProductInfoComponent } from '@isa/remission/shared/product';
 
 @Component({
   selector: 'remission-feature-remission-list-item',
   templateUrl: './remission-list-item.component.html',
   styleUrl: './remission-list-item.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ProductInfoComponent],
 })
-export class RemissionListItemComponent {}
+export class RemissionListItemComponent {
+  item = input.required<ReturnItem | ReturnSuggestion>();
+}

libs/remission/feature/remission-list/src/lib/remission-list.component.html

@@ -10,3 +10,25 @@
 >
   {{ hits() }} Einträge
 </span>
+
+<div class="flex flex-col gap-4 w-full items-center justify-center">
+  @for (item of items(); track item.id) {
+    @defer (on viewport) {
+      <a [routerLink]="['../', 'return', item.id]" class="w-full">
+        <remission-feature-remission-list-item
+          #listElement
+          [item]="item"
+        ></remission-feature-remission-list-item>
+      </a>
+    } @placeholder {
+      <div class="h-[7.75rem] w-full flex items-center justify-center">
+        <ui-icon-button
+          [pending]="true"
+          [color]="'tertiary'"
+          data-what="load-spinner"
+          data-which="item-placeholder"
+        ></ui-icon-button>
+      </div>
+    }
+  }
+</div>

libs/remission/feature/remission-list/src/lib/remission-list.component.ts

@@ -4,7 +4,7 @@ import {
   inject,
   computed,
 } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import {
   provideFilter,
   withQuerySettingsFactory,
@@ -18,6 +18,8 @@ import { RemissionListSelectComponent } from './remission-list-select/remission-
 import { toSignal } from '@angular/core/rxjs-interop';
 import { createRemissionListResource } from './resources';
 import { injectRemissionListType } from './injects/inject-remission-list-type';
+import { RemissionListItemComponent } from './remission-list-item/remission-list-item.component';
+import { IconButtonComponent } from '@isa/ui/buttons';
 
 function querySettingsFactory() {
   return inject(ActivatedRoute).snapshot.data['querySettings'];
@@ -38,6 +40,9 @@ function querySettingsFactory() {
     RemissionStartCardComponent,
     FilterControlsPanelComponent,
     RemissionListSelectComponent,
+    RemissionListItemComponent,
+    RouterLink,
+    IconButtonComponent,
   ],
   host: {
     '[class]':