feat: enhance return process feature with improved layout and EAN validation

libs/oms/feature/return-process/src/lib/return-process-feature.component.html

@@ -1,17 +1,20 @@
+<button
+  uiButton
+  color="tertiary"
+  size="small"
+  class="absolute top-0 left-0 px-[0.875rem] py-1 min-w-0 bg-white gap-1"
+  (click)="location.back()"
+>
+  <ng-icon name="isaActionChevronLeft" size="1.5rem" class="-ml-2"></ng-icon>
+  <span>zurück</span>
+</button>
+
+<h1 class="isa-text-subtitle-1-regular text-center">
+  Wählen Sie den Artikelzustand und den <br />
+  Rückgabegrund aus
+</h1>
+
 @if (returnProcesses(); as processes) {
-  <div class="return-process-header">
-    <div>
-      <button uiButton color="tertiary" size="small">
-        <ng-icon name="isaActionChevronLeft"></ng-icon>
-        <span>zurück</span>
-      </button>
-    </div>
-    <h1 class="isa-text-subtitle-1-regular text-center">
-      Wählen Sie den Artikelzustand und den <br />
-      Rückgabegrund aus
-    </h1>
-    <div></div>
-  </div>
   @for (process of processes; track process.id) {
     <lib-return-process-item [returnProcessId]="process.id"></lib-return-process-item>
   }

libs/oms/feature/return-process/src/lib/return-process-feature.component.scss

@@ -1,14 +1,3 @@
 :host {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 1.5rem;
-  align-self: stretch;
-}
-
-.return-process-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  align-self: stretch;
+  @apply grid gap-5 isa-desktop-l:gap-6 relative mt-5 isa-desktop-l:mt-6;
 }

libs/oms/feature/return-process/src/lib/return-process-feature.component.ts

@@ -5,6 +5,7 @@ import { isaActionChevronLeft } from '@isa/icons';
 import { ReturnProcess, ReturnProcessStore } from '@isa/oms/data-access';
 import { injectActivatedProcessId } from '@isa/core/process';
 import { ReturnProcessItemComponent } from './return-process-item/return-process-item.component';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'lib-return-process-feature',
@@ -15,6 +16,8 @@ import { ReturnProcessItemComponent } from './return-process-item/return-process
   providers: [provideIcons({ isaActionChevronLeft })],
 })
 export class ReturnProcessFeatureComponent {
+  location = inject(Location);
+
   #returnProcessStore = inject(ReturnProcessStore);
 
   processId = injectActivatedProcessId();

libs/oms/feature/return-process/src/lib/return-process-questions/return-process-product-question/return-process-product-question.component.ts

@@ -1,5 +1,12 @@
 import { ChangeDetectionStrategy, Component, effect, inject, input, signal } from '@angular/core';
-import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import {
+  AbstractControl,
+  FormControl,
+  ReactiveFormsModule,
+  ValidationErrors,
+  ValidatorFn,
+  Validators,
+} from '@angular/forms';
 import { Product, ReturnProcessProductQuestion, ReturnProcessStore } from '@isa/oms/data-access';
 import { TextButtonComponent } from '@isa/ui/buttons';
 import { TextFieldComponent } from '@isa/ui/input-controls';
@@ -9,6 +16,14 @@ import { CatalougeSearchService } from '@isa/catalogue/data-access';
 import { tapResponse } from '@ngrx/operators';
 import { ProductImageDirective } from '@isa/shared/product-image';
 
+const eanValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
+  const value = control.value;
+  if (value && !/^[0-9]{13}$/.test(value)) {
+    return { invalidEan: true };
+  }
+  return null;
+};
+
 @Component({
   selector: 'lib-return-process-product-question',
   templateUrl: './return-process-product-question.component.html',
@@ -24,7 +39,7 @@ export class ReturnProcessProductQuestionComponent {
 
   question = input.required<ReturnProcessProductQuestion>();
 
-  control = new FormControl<string>('', [Validators.required]);
+  control = new FormControl<string>('', [Validators.required, eanValidator]);
 
   product = signal<Product | undefined>(undefined);