feat: enhance return details with checkbox selection and select all functionality

libs/feature/return/containers/src/lib/return-details-order-group-item/return-details-order-group-item.component.html

@@ -38,7 +38,7 @@
   </div>
   <div uiItemRowProdcutCheckbox class="flex justify-center items-center">
     <ui-checkbox appearance="bullet">
-      <input type="checkbox" />
+      <input type="checkbox" [checked]="selected()" (click)="selected.set(!selected())" />
     </ui-checkbox>
   </div>
 </ui-item-row>

libs/feature/return/containers/src/lib/return-details-order-group-item/return-details-order-group-item.component.ts

@@ -1,5 +1,5 @@
 import { CurrencyPipe, DatePipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';
 import { ReceiptItem } from '@feature/return/services';
 import {
   isaArtikelTaschenbuch,
@@ -37,6 +37,8 @@ const FORMAT_ICON_MAP: Record<string, string> = {
 export class ReturnDetailsOrderGroupItemComponent {
   item = input.required<ReceiptItem>();
 
+  selected = model(false);
+
   formatIcons = computed(() => {
     return FORMAT_ICON_MAP[this.item().product.format] || 'isaArtikelTaschenbuch';
   });

libs/feature/return/containers/src/lib/return-details-order-group/return-details-order-group.component.html

@@ -1,5 +1,17 @@
 <ui-toolbar size="small" class="justify-self-stretch">
   <div class="isa-text-body-2-bold text-isa-neutral-900">{{ items().length }} Artikel</div>
   <div class="flex-grow"></div>
-  <button type="button" uiTextButton color="strong" size="small">Alles auswählen</button>
+  <button
+    type="button"
+    uiTextButton
+    color="strong"
+    size="small"
+    (click)="selectAll.emit(!allSelected())"
+  >
+    @if (allSelected()) {
+      Alles abwählen
+    } @else {
+      Alles auswählen
+    }
+  </button>
 </ui-toolbar>

libs/feature/return/containers/src/lib/return-details-order-group/return-details-order-group.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
 import { ReceiptItem } from '@feature/return/services';
 import { TextButtonComponent } from '@isa/ui/buttons';
 import { ToolbarComponent } from '@isa/ui/toolbar';
@@ -13,4 +13,8 @@ import { ToolbarComponent } from '@isa/ui/toolbar';
 })
 export class ReturnDetailsOrderGroupComponent {
   items = input.required<ReceiptItem[]>();
+
+  allSelected = input<boolean>(false);
+
+  selectAll = output<boolean>();
 }

libs/feature/return/pages/src/lib/details/details-page.component.html

@@ -1,5 +1,15 @@
 @let receipt = receiptResult().data;
 
+<button
+  class="fixed bottom-6 right-6"
+  uiButton
+  color="brand"
+  size="large"
+  [disabled]="selectedItems().length === 0"
+>
+  Rückgabe starten
+</button>
+
 @if (receipt) {
   <lib-return-details-header [buyer]="receipt.buyer"></lib-return-details-header>
 
@@ -31,11 +41,17 @@
     </button>
   }
   <div></div>
-  <lib-return-details-order-group [items]="receipt.items"></lib-return-details-order-group>
+  <lib-return-details-order-group
+    [items]="receipt.items"
+    [allSelected]="receipt.items.length === selectedItems().length"
+    (selectAll)="selectAll($event)"
+  ></lib-return-details-order-group>
   @for (item of receipt.items; track item.id; let last = $last) {
     <lib-return-details-order-group-item
       class="border-b border-solid border-isa-neutral-300 last:border-none"
       [item]="item.data"
+      (selectedChange)="selectedChange(item.id)"
+      [selected]="selectedItems().includes(item.id)"
     ></lib-return-details-order-group-item>
   }
 }

libs/feature/return/pages/src/lib/details/details-page.component.ts

@@ -20,7 +20,7 @@ import { z } from 'zod';
 import { ReturnDetailsStore } from '@feature/return/services';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import { isaActionPlus, isaActionMinus } from '@isa/icons';
-import { TextButtonComponent } from '@isa/ui/buttons';
+import { ButtonComponent, TextButtonComponent } from '@isa/ui/buttons';
 
 @Component({
   selector: 'lib-return-details-page',
@@ -31,6 +31,7 @@ import { TextButtonComponent } from '@isa/ui/buttons';
   imports: [
     NgIconComponent,
     TextButtonComponent,
+    ButtonComponent,
     ReturnDetailsHeaderComponent,
     ReturnDetailsDataComponent,
     ReturnDetailsOrderGroupComponent,
@@ -42,6 +43,9 @@ import { TextButtonComponent } from '@isa/ui/buttons';
 export class DetailsPageComponent {
   private _params = toSignal(inject(ActivatedRoute).params);
 
+  // DUMMY Implementierung
+  selectedItems = signal<number[]>([]);
+
   showMore = signal(false);
 
   #returnDetailsStore = inject(ReturnDetailsStore);
@@ -67,4 +71,28 @@ export class DetailsPageComponent {
       }
     });
   }
+
+  // DUMMY Implementierung
+  selectedChange(itemId: number) {
+    const selectedItems = this.selectedItems();
+    const index = selectedItems.indexOf(itemId);
+    if (index === -1) {
+      this.selectedItems.set([...selectedItems, itemId]);
+    } else {
+      this.selectedItems.set(selectedItems.filter((id) => id !== itemId));
+    }
+  }
+
+  // DUMMY Implementierung
+  selectAll(selected: boolean) {
+    if (selected) {
+      const receiptResult = this.receiptResult();
+      if (receiptResult) {
+        const allIds = receiptResult.data?.items.map((item) => item.id) || [];
+        this.selectedItems.set(allIds);
+      }
+    } else {
+      this.selectedItems.set([]);
+    }
+  }
 }