#4547 WE Updated Annotation Implementation

apps/page/package-inspection/src/lib/package-details/package-details.component.css

@@ -5,3 +5,7 @@
 .action-wrapper {
   @apply grid grid-flow-col gap-4 justify-center my-6 fixed bottom-24 inset-x-0;
 }
+
+.annotation-layout {
+  @apply col-span-2;
+}

apps/page/package-inspection/src/lib/package-details/package-details.component.html

@@ -3,33 +3,7 @@
 </div>
 <ng-container *ngIf="packageDetails$ | async; else loader; let packageDetails" (sharedOnInit)="calculateListHeight()">
   <div class="bg-background-liste">
-    <div #handlungsAnweisung [ngSwitch]="packageDetails.package.arrivalStatus | arrivalStatus">
-      <div class="bg-white" *ngSwitchCase="'Falsche Filiale'">
-        <p class="text-center text-xl py-10">
-          Stellen Sie dieses Packstück für die andere Filiale bereit. <br />
-          Der Spediteur holt es zum nächstmöglichen Zeitpunkt ab.
-        </p>
-      </div>
-      <div class="bg-white" *ngSwitchCase="'Offen'">
-        <p class="text-center text-xl py-10" *ngIf="!(childActions$ | async)">
-          Können Sie sich erinnern, dass Sie dieses Packstück <br />
-          ausgepackt haben?
-        </p>
-        <p class="text-center text-xl py-10" *ngIf="!!(childActions$ | async)">
-          Prüfen Sie bitte stichprobenartig den Filialbestand des <br />
-          dargestellten Artikels. Ist der angezeigte Filialbestand <br />
-          korrekt?
-        </p>
-      </div>
-      <div class="bg-white" *ngSwitchCase="'Fehlt'">
-        <p class="text-center text-xl py-10">
-          Prüfen Sie bitte stichprobenartig den Filialbestand <br />
-          des dargestellten Artikels. Ist der angezeigte Filialbestand <br />
-          korrekt?
-        </p>
-      </div>
-      <div class="pt-3" *ngSwitchDefault></div>
-    </div>
+    <div class="bg-white text-center text-xl py-10" [innerText]="packageDetails?.package?.features?.['description'] ?? ''"></div>
 
     <div class="bg-white rounded-t shadow-card grid grid-flow-row p-4 gap-2">
       <div class="grid grid-cols-6">
@@ -38,7 +12,7 @@
           <span *ngIf="packageDetails.package.packageNumber && packageDetails.package.deliveryNoteNumber"> | </span>
           {{ packageDetails.package.deliveryNoteNumber }}
         </div>
-        <div class="col-span-3">
+        <div class="col-span-3" [class.annotation-layout]="packageDetails?.package?.features?.['annotation']">
           <ng-container *ngIf="packageDetails.package.arrivalStatus !== 8; else irrlauferTmplt">
             Filialstopp
             <span class="font-bold ml-2">
@@ -52,7 +26,7 @@
             </span>
           </ng-template>
         </div>
-        <div class="text-right">
+        <div class="text-right" *ngIf="!packageDetails?.package?.features?.['annotation']; else annotationTmpl">
           <ng-container *ngIf="(packageDetails.package.arrivalStatus | arrivalStatus) === 'Fehlt'">
             <button
               class="isa-icon-button mr-2"
@@ -82,6 +56,11 @@
             {{ packageDetails.package.arrivalStatus | arrivalStatus }}
           </div>
         </div>
+        <ng-template #annotationTmpl>
+          <div class="text-right text-[#5A728A] col-span-2">
+            {{ packageDetails?.package?.features?.['annotation'] }}
+          </div>
+        </ng-template>
       </div>
       <div class="grid grid-cols-6">
         <div class="col-span-2">

apps/page/package-inspection/src/lib/package-details/package-details.component.ts

@@ -148,7 +148,7 @@ export class PackageDetailsComponent {
 
   @HostListener('window:resize')
   calculateListHeight() {
-    const handlungsAnweisungHeight = this.handlungsAnweisung?.nativeElement.offsetHeight;
+    const handlungsAnweisungHeight = this.handlungsAnweisung?.nativeElement?.offsetHeight ?? 0;
     const windowHeight = window.innerHeight;
     this.detailsListHeight = windowHeight - handlungsAnweisungHeight - 516;
     this._cdr.markForCheck();

apps/shared/components/package-inspection/package-list/src/lib/package-list-item.component.ts

@@ -18,7 +18,7 @@ export class PackageListItemComponent implements OnChanges {
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.package) {
-      this.annotation = this.package?.features?.['Annotation'] ?? undefined;
+      this.annotation = this.package?.features?.['annotation'] ?? undefined;
       this.hasAnnotation = !!this.annotation;
     }
   }