Merged PR 1124: #2756 Anmerkungsfeld mehrzeilig

#2756 Anmerkungsfeld mehrzeilig

Related work items: #2756

apps/shared/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.html

@@ -160,30 +160,38 @@
   <div class="goods-in-out-order-details-item-comment">
     <label for="comment">Anmerkung</label>
 
-    <input
+    <textarea
+      matInput
+      cdkTextareaAutosize
+      #autosize="cdkTextareaAutosize"
+      cdkAutosizeMinRows="1"
+      cdkAutosizeMaxRows="5"
       #specialCommentInput
+      (keydown.delete)="triggerResize()"
+      (keydown.backspace)="triggerResize()"
       type="text"
       name="comment"
       [formControl]="specialCommentControl"
       [class.inactive]="!specialCommentControl.dirty"
-      (keyup.enter)="saveSpecialComment()"
-    />
+    ></textarea>
 
-    <button
-      type="reset"
-      class="clear"
-      *ngIf="!!specialCommentControl.value?.length"
-      (click)="specialCommentControl.setValue(''); saveSpecialComment()"
-    >
-      <ui-icon icon="close" size="12px"></ui-icon>
-    </button>
-    <button
-      class="cta-save"
-      type="submit"
-      *ngIf="specialCommentControl?.enabled && specialCommentControl.dirty"
-      (click)="saveSpecialComment()"
-    >
-      Speichern
-    </button>
+    <div class="comment-actions">
+      <button
+        type="reset"
+        class="clear"
+        *ngIf="!!specialCommentControl.value?.length"
+        (click)="specialCommentControl.setValue(''); saveSpecialComment(); triggerResize()"
+      >
+        <ui-icon icon="close" size="12px"></ui-icon>
+      </button>
+      <button
+        class="cta-save"
+        type="submit"
+        *ngIf="specialCommentControl?.enabled && specialCommentControl.dirty"
+        (click)="saveSpecialComment()"
+      >
+        Speichern
+      </button>
+    </div>
   </div>
 </ng-container>

apps/shared/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.scss

@@ -59,7 +59,20 @@ button {
 }
 
 .goods-in-out-order-details-item-comment {
-  @apply flex flex-row items-center p-4 bg-white text-base font-bold;
+  @apply flex flex-row items-start p-4 bg-white text-base font-bold;
+
+  textarea {
+    @apply flex-grow bg-transparent border-none outline-none text-base mx-4;
+    resize: none;
+  }
+
+  textarea.inactive {
+    @apply text-warning font-bold;
+    @apply flex-grow bg-transparent border-none outline-none text-base mx-4 text-warning font-bold;
+    // ipad color fix
+    -webkit-text-fill-color: rgb(190, 129, 0);
+    opacity: 1;
+  }
 
   input {
     @apply flex-grow bg-transparent border-none outline-none text-base mx-4;
@@ -80,6 +93,10 @@ button {
   button.clear {
     @apply text-inactive-customer;
   }
+
+  .comment-actions {
+    @apply flex justify-center items-center;
+  }
 }
 
 .cta-more {

apps/shared/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.ts

@@ -1,4 +1,15 @@
-import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  Output,
+  EventEmitter,
+  ChangeDetectorRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { DomainOmsService, DomainReceiptService } from '@domain/oms';
 import { HistoryComponent } from '@modal/history';
@@ -27,6 +38,8 @@ export interface SharedGoodsInOutOrderDetailsItemComponentState {
 })
 export class SharedGoodsInOutOrderDetailsItemComponent extends ComponentStore<SharedGoodsInOutOrderDetailsItemComponentState>
   implements OnInit, OnDestroy {
+  @ViewChild('autosize') autosize: CdkTextareaAutosize;
+
   @Input()
   get orderItem() {
     return this.get((s) => s.orderItem);
@@ -215,4 +228,8 @@ export class SharedGoodsInOutOrderDetailsItemComponent extends ComponentStore<Sh
     const orderItems = this.order?.items;
     return orderItems.find((orderItem) => orderItem.data.id === orderItemListItem.orderItemId)?.data?.features?.orderType;
   }
+
+  triggerResize() {
+    this.autosize.reset();
+  }
 }

apps/shared/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details.module.ts

@@ -18,6 +18,7 @@ import { UiSliderModule } from '@ui/slider';
 import { UiSelectBulletModule } from '@ui/select-bullet';
 import { UiSpinnerModule } from 'apps/ui/spinner/src/lib/ui-spinner.module';
 import { UiTooltipModule } from '@ui/tooltip';
+import { TextFieldModule } from '@angular/cdk/text-field';
 
 @NgModule({
   imports: [
@@ -35,6 +36,7 @@ import { UiTooltipModule } from '@ui/tooltip';
     UiSelectBulletModule,
     UiSpinnerModule,
     UiTooltipModule,
+    TextFieldModule,
   ],
   exports: [
     SharedGoodsInOutOrderDetailsComponent,