#4758 Also Updated Pickup Shelf Out

apps/page/pickup-shelf/src/lib/pickup-shelf-in/pickup-shelf-in-details/pickup-shelf-in-details.component.ts

@@ -220,6 +220,7 @@ export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseCompone
   }
 
   updateDate({ date, type }: { date: Date; type?: 'delivery' | 'pickup' | 'preferred' }) {
+    this.store.updateOrderItemSubsetLoading(true);
     switch (type) {
       case 'delivery':
         this.store.selectedOrderItems.forEach((item) =>

apps/page/pickup-shelf/src/lib/pickup-shelf-out/pickup-shelf-out-details/pickup-shelf-out-details.component.ts

@@ -152,6 +152,7 @@ export class PickupShelfOutDetailsComponent extends PickupShelfDetailsBaseCompon
   }
 
   updateDate({ date, type }: { date: Date; type?: 'delivery' | 'pickup' | 'preferred' }) {
+    this.store.updateOrderItemSubsetLoading(true);
     switch (type) {
       case 'delivery': // vsl. Lieferdatum
         this.store.orderItems.forEach((item) =>

apps/page/pickup-shelf/src/lib/shared/pickup-shelf-details-header/pickup-shelf-details-header.component.html

@@ -20,10 +20,6 @@
       </button>
     </div>
 
-    <ng-template #featureLoading>
-      <shared-skeleton-loader class="w-64 h-6"></shared-skeleton-loader>
-    </ng-template>
-
     <div class="page-pickup-shelf-details-header__details bg-white px-4 pt-4 pb-5">
       <div class="flex flex-row items-center" [class.mb-8]="!orderItem?.features?.paid && !isKulturpass">
         <page-pickup-shelf-details-header-nav-menu class="mr-2" [customer]="customer$ | async"></page-pickup-shelf-details-header-nav-menu>
@@ -162,7 +158,7 @@
 
   <ng-template #abholfrist>
     <div class="min-w-[9rem]">Abholfrist</div>
-    <div *ngIf="!(changeDateLoader$ | async)" class="flex flex-row font-bold">
+    <div *ngIf="!(orderItemSubsetLoading$ | async); else featureLoading" class="flex flex-row font-bold">
       <button
         [uiOverlayTrigger]="deadlineDatepicker"
         #deadlineDatepickerTrigger="uiOverlayTrigger"
@@ -186,12 +182,11 @@
       >
       </ui-datepicker>
     </div>
-    <ui-spinner *ngIf="changeDateLoader$ | async; let loader" class="flex flex-row font-bold loader" [show]="loader"></ui-spinner>
   </ng-template>
 
   <ng-template #preferredPickUpDate>
     <div class="min-w-[9rem]">Zurücklegen bis</div>
-    <div *ngIf="!(changePreferredDateLoader$ | async)" class="flex flex-row font-bold">
+    <div *ngIf="!(orderItemSubsetLoading$ | async); else featureLoading" class="flex flex-row font-bold">
       <button
         [uiOverlayTrigger]="preferredPickUpDatePicker"
         #preferredPickUpDatePickerTrigger="uiOverlayTrigger"
@@ -218,12 +213,11 @@
       >
       </ui-datepicker>
     </div>
-    <ui-spinner *ngIf="changePreferredDateLoader$ | async; let loader" class="flex flex-row font-bold loader" [show]="loader"> </ui-spinner>
   </ng-template>
 
   <ng-template #vslLieferdatum>
     <div class="min-w-[9rem]">vsl. Lieferdatum</div>
-    <div *ngIf="!(changeDateLoader$ | async)" class="flex flex-row font-bold">
+    <div *ngIf="!(orderItemSubsetLoading$ | async); else featureLoading" class="flex flex-row font-bold">
       <button
         class="cta-datepicker"
         [disabled]="changeDateDisabled$ | async"
@@ -247,6 +241,9 @@
       >
       </ui-datepicker>
     </div>
-    <ui-spinner *ngIf="changeDateLoader$ | async; let loader" class="flex flex-row font-bold loader" [show]="loader"></ui-spinner>
   </ng-template>
 </ng-container>
+
+<ng-template #featureLoading>
+  <shared-skeleton-loader class="w-64 h-6"></shared-skeleton-loader>
+</ng-template>

apps/page/pickup-shelf/src/lib/shared/pickup-shelf-details-header/pickup-shelf-details-header.component.ts

@@ -53,6 +53,8 @@ export class PickUpShelfDetailsHeaderComponent {
   @Output()
   updateDate = new EventEmitter<{ date: Date; type?: 'delivery' | 'pickup' | 'preferred' }>();
 
+  orderItemSubsetLoading$ = this._store.orderItemSubsetLoading$;
+
   fetchingOrder$ = this._store.fetchingOrder$;
 
   order$ = this._store.order$;

apps/page/pickup-shelf/src/lib/store/pickup-shelf-details.selectors.ts

@@ -89,6 +89,8 @@ export const selectSelectedOrderItemIds = (s: PickupShelfDetailsState) => s.sele
 
 export const selectPreviousSelectedOrderItemSubsetId = (s: PickupShelfDetailsState) => s.previousSelectedOrderItemSubsetId;
 
+export const selectOrderItemSubsetLoading = (s: PickupShelfDetailsState) => s.orderItemSubsetLoading;
+
 export const selectDisableHeaderStatusDropdown = (s: PickupShelfDetailsState) => s.disableHeaderStatusDropdown;
 
 export const selectedOrderItems = (s: PickupShelfDetailsState) => {

apps/page/pickup-shelf/src/lib/store/pickup-shelf-details.state.ts

@@ -34,6 +34,7 @@ export interface PickupShelfDetailsState {
 
   fetchingOrderItemSubsetTasks: { [orderItemSubsetId: number]: boolean };
   orderItemSubsetTasks: { [orderItemSubsetId: number]: OrderItemSubsetTaskListItemDTO[] };
+  orderItemSubsetLoading?: boolean;
 
   coverOrderItems?: DBHOrderItemListItemDTO[];
   fetchingCoverOrderItems?: boolean;

apps/page/pickup-shelf/src/lib/store/pickup-shelf-details.store.ts

@@ -245,6 +245,12 @@ export class PickupShelfDetailsStore extends ComponentStore<PickupShelfDetailsSt
     return this.get(Selectors.selectCoverOrderItems);
   }
 
+  orderItemSubsetLoading$ = this.select(Selectors.selectOrderItemSubsetLoading);
+
+  get orderItemSubsetLoading() {
+    return this.get(Selectors.selectOrderItemSubsetLoading);
+  }
+
   // Wird benöitgt um das Status Dropdown in der Details Header Komponente zu disablen wenn eine Action gehandled wird
   disableHeaderStatusDropdown$ = this.select(Selectors.selectDisableHeaderStatusDropdown);
 
@@ -579,6 +585,8 @@ export class PickupShelfDetailsStore extends ComponentStore<PickupShelfDetailsSt
     if (res.result.preferredPickUpDate) {
       this.patchPreferredPickUpDateOnOrderSubsetItemInState({ item, newPreferredPickUpDate: res.result.preferredPickUpDate });
     }
+
+    this.updateOrderItemSubsetLoading(false);
   };
 
   private patchOrderItemSubsetError = (err: any) => {
@@ -723,6 +731,10 @@ export class PickupShelfDetailsStore extends ComponentStore<PickupShelfDetailsSt
     this.patchState({ fetchingCoverOrderItems: true });
   };
 
+  updateOrderItemSubsetLoading(orderItemSubsetLoading: boolean) {
+    this.patchState({ orderItemSubsetLoading });
+  }
+
   private fetchCoverOrderItemsDone = (res: ListResponseArgsOfDBHOrderItemListItemDTO) => {
     this.patchState({ fetchingCoverOrderItems: false, coverOrderItems: res.result });
   };