Merged PR 1179: #2742 AHF Zubuchen Button mit Zusatz anzeigen

#2742 AHF Zubuchen Button mit Zusatz anzeigen

Related work items: #2742

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

@@ -10,6 +10,19 @@
 <div class="spacer"></div>
 
 <div class="goods-in-out-order-details-action-wrapper">
+  <button
+    [disabled]="(changeActionDisabled$ | async) || (addToPreviousCompartmentActionDisabled$ | async)"
+    *ngIf="addToPreviousCompartmentAction$ | async; let action"
+    class="cta-action shadow-action"
+    [class.cta-action-primary]="action.selected"
+    [class.cta-action-secondary]="!action.selected"
+    (click)="handleAction(action, { compartmentCode: latestCompartmentCode })"
+  >
+    <ui-spinner [show]="(changeActionLoader$ | async) === action.command"
+      >{{ latestCompartmentCode$ | async | addToPreviousCompartmentCodeLabelPipe }} zubuchen</ui-spinner
+    >
+  </button>
+
   <button
     [disabled]="changeActionDisabled$ | async"
     class="cta-action shadow-action"
@@ -20,14 +33,4 @@
   >
     <ui-spinner [show]="(changeActionLoader$ | async) === action.command">{{ action.label }}</ui-spinner>
   </button>
-  <button
-    [disabled]="(changeActionDisabled$ | async) || (addToPreviousCompartmentActionDisabled$ | async)"
-    *ngIf="addToPreviousCompartmentAction$ | async; let action"
-    class="cta-action shadow-action"
-    [class.cta-action-primary]="action.selected"
-    [class.cta-action-secondary]="!action.selected"
-    (click)="handleAction(action, { compartmentCode: latestCompartmentCode })"
-  >
-    <ui-spinner [show]="(changeActionLoader$ | async) === action.command">{{ latestCompartmentCode$ | async }} zubuchen</ui-spinner>
-  </button>
 </div>

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

@@ -11,12 +11,13 @@
 }
 
 .goods-in-out-order-details-action-wrapper {
-  @apply fixed bottom-28 inline-grid grid-flow-col gap-7;
+  @apply fixed bottom-28 inline-flex flex-row-reverse flex-wrap justify-center items-center;
+  width: 80%;
   left: 50%;
   transform: translateX(-50%);
 
   .cta-action {
-    @apply border-2 border-solid border-brand rounded-full py-3 px-6 font-bold text-lg outline-none self-end whitespace-nowrap;
+    @apply border-2 border-solid border-brand rounded-full py-3 px-6 font-bold text-lg outline-none self-end whitespace-nowrap m-2;
   }
 
   .fetching {

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

@@ -1,4 +1,4 @@
-import { Input, OnDestroy } from '@angular/core';
+import { OnDestroy } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
 import { KeyValueDTOOfStringAndString, OrderItemListItemDTO, ReceiptDTO } from '@swagger/oms';
 import { isEqual } from 'lodash';
@@ -67,6 +67,7 @@ export abstract class SharedGoodsInOutOrderDetailsStore extends ComponentStore<S
         ?.find((_) => true)
         ?.actions?.filter((action) => typeof action?.enabled !== 'boolean')
         ?.filter((action) => (fetchPartial ? !action.command.includes('FETCHED_PARTIAL') : true))
+        ?.sort((a, b) => (a.selected === b.selected ? 0 : a.selected ? -1 : 1))
     )
   );
 
@@ -87,7 +88,17 @@ export abstract class SharedGoodsInOutOrderDetailsStore extends ComponentStore<S
     }
   }
 
-  readonly latestCompartmentCode$ = this.select((s) => s.latestCompartmentCode);
+  readonly latestCompartmentCode$ = combineLatest([
+    this.select((s) => s.latestCompartmentCode),
+    this.select((s) => s.latestCompartmentInfo),
+  ]).pipe(
+    map(([code, info]) => {
+      if (!!info) {
+        return `${code}_${info}`;
+      }
+      return code;
+    })
+  );
 
   get latestCompartmentInfo() {
     return this.get((s) => s.latestCompartmentInfo);
@@ -105,7 +116,6 @@ export abstract class SharedGoodsInOutOrderDetailsStore extends ComponentStore<S
     map(([orderItems, latestCompartmentCode]) => {
       const orderItem = orderItems[0];
       //  [16, 8192].includes(orderItems[0]?.processingStatus) && latestCompartmentCode
-
       if ([16, 8192].includes(orderItem?.processingStatus) && latestCompartmentCode) {
         return orderItem.actions.find((a) => a.key === '128');
       }

apps/shared/goods-in-out/src/lib/pipes/add-to-prevoius-compartment-code-label.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'addToPreviousCompartmentCodeLabelPipe',
+})
+export class AddToPreviousCompartmentCodeLabelPipe implements PipeTransform {
+  transform(compartmentCode: string): string {
+    const compartmentCodeSplit = compartmentCode?.split('_');
+    compartmentCodeSplit?.shift();
+    return compartmentCodeSplit?.join('_');
+  }
+}

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

@@ -10,6 +10,7 @@ import { ShelfEditActionInProgressPipe } from './shelf-edit-action-in-progress.p
 import { ShowCoverCompartmentCodePipe } from './show-cover-compartment-code.pipe';
 import { NotificationsChannelPipe } from './notifications-channel.pipe';
 import { CoverCompartmentCodePipe } from './cover-compartment-code.pipe';
+import { AddToPreviousCompartmentCodeLabelPipe } from './add-to-prevoius-compartment-code-label.pipe';
 
 @NgModule({
   imports: [],
@@ -26,6 +27,7 @@ import { CoverCompartmentCodePipe } from './cover-compartment-code.pipe';
     ProcessingStatusOptionsPipe,
     NotificationsChannelPipe,
     CoverCompartmentCodePipe,
+    AddToPreviousCompartmentCodeLabelPipe,
   ],
   declarations: [
     ProcessingStatusPipe,
@@ -40,6 +42,7 @@ import { CoverCompartmentCodePipe } from './cover-compartment-code.pipe';
     ProcessingStatusOptionsPipe,
     NotificationsChannelPipe,
     CoverCompartmentCodePipe,
+    AddToPreviousCompartmentCodeLabelPipe,
   ],
   providers: [],
 })