Update Matomo Docker Konfiguration

#4760 Fehler bei Abholpreisberechnung in Filiale Darmstadt Ernst-Ludwig-Straße

.gitignore

@@ -1,5 +1,7 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
+.matomo
+
 # compiled output
 /dist
 /tmp

.husky/pre-commit

@@ -0,0 +1 @@
+npm run pretty-quick

TASKS.md

@@ -1,4 +0,0 @@
-- Neue Icon Module (z.B. mit SVG sprites)
-- Breadcrumb Navigation (Neu)
-- Remissions Produkt Liste (Refactoring / Neu)
-- Angular Version (Upgrade)

angular.json

@@ -2,6 +2,7 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "apps",
+  
   "projects": {
     "@swagger/availability": {
       "root": "apps/swagger/availability",
@@ -959,10 +960,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "isa-app:build:production"
+              "buildTarget": "isa-app:build:production"
             },
             "development": {
-              "browserTarget": "isa-app:build:development"
+              "buildTarget": "isa-app:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -970,7 +971,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "isa-app:build"
+            "buildTarget": "isa-app:build"
           }
         },
         "test": {
@@ -1470,39 +1471,6 @@
           }
         }
       }
-    },
-    "shell": {
-      "projectType": "library",
-      "root": "apps/shell",
-      "sourceRoot": "apps/shell/src",
-      "prefix": "shell",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "project": "apps/shell/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "apps/shell/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "apps/shell/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "tsConfig": "apps/shell/tsconfig.spec.json",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ]
-          }
-        }
-      }
     }
   },
   "cli": {

apps/domain/availability/src/lib/availability.service.ts

@@ -36,7 +36,7 @@ export class DomainAvailabilityService {
     private _logisticanService: LogisticianService,
     private _stockService: StockService,
     private _supplierService: StoreCheckoutSupplierService,
-    private _branchService: StoreCheckoutBranchService
+    private _branchService: StoreCheckoutBranchService,
   ) {}
 
   @memorize({ ttl: 10000 })
@@ -48,7 +48,7 @@ export class DomainAvailabilityService {
   getSuppliers(): Observable<SupplierDTO[]> {
     return this._supplierService.StoreCheckoutSupplierGetSuppliers({}).pipe(
       map((response) => response.result),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -56,7 +56,7 @@ export class DomainAvailabilityService {
   getTakeAwaySupplier(): Observable<SupplierDTO> {
     return this._supplierService.StoreCheckoutSupplierGetSuppliers({}).pipe(
       map(({ result }) => result?.find((supplier) => supplier?.supplierNumber === 'F')),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -64,7 +64,7 @@ export class DomainAvailabilityService {
   getBranches(): Observable<BranchDTO[]> {
     return this._branchService.StoreCheckoutBranchGetBranches({}).pipe(
       map((response) => response.result),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -73,7 +73,7 @@ export class DomainAvailabilityService {
     return this._stockService.StockGetStocksByBranch({ branchId }).pipe(
       map((response) => response.result),
       map((result) => result?.find((_) => true)),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -81,7 +81,7 @@ export class DomainAvailabilityService {
   getDefaultStock(): Observable<StockDTO> {
     return this._stockService.StockCurrentStock().pipe(
       map((response) => response.result),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -105,7 +105,7 @@ export class DomainAvailabilityService {
         status: response.result.status,
         version: response.result.version,
       })),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -113,7 +113,7 @@ export class DomainAvailabilityService {
   getLogisticians(): Observable<LogisticianDTO> {
     return this._logisticanService.LogisticianGetLogisticians({}).pipe(
       map((response) => response.result?.find((l) => l.logisticianNumber === '2470')),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -146,7 +146,7 @@ export class DomainAvailabilityService {
         });
         return availabilities;
       }),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -167,13 +167,13 @@ export class DomainAvailabilityService {
           this._stockService.StockInStock({ articleIds: [item.itemId], stockId: s.id }),
           this.getTakeAwaySupplier(),
           this.getDefaultBranch(),
-        ])
+        ]),
       ),
       map(([response, supplier, defaultBranch]) => {
         const price = item?.price;
         return this._mapToTakeAwayAvailability({ response, supplier, branchId: branch?.id ?? defaultBranch?.id, quantity, price });
       }),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -196,7 +196,7 @@ export class DomainAvailabilityService {
       map(([response, supplier]) => {
         return this._mapToTakeAwayAvailability({ response, supplier, branchId: branch.id, quantity, price });
       }),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -218,7 +218,7 @@ export class DomainAvailabilityService {
       map(([response, supplier, defaultBranch]) => {
         return this._mapToTakeAwayAvailability({ response, supplier, branchId: branchId ?? defaultBranch.id, quantity, price });
       }),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -228,7 +228,7 @@ export class DomainAvailabilityService {
       switchMap((s) => this._stockService.StockInStockByEAN({ eans: eansFiltered, stockId: s.id })),
       withLatestFrom(this.getTakeAwaySupplier(), this.getDefaultBranch()),
       map((response) => response[0].result),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -254,7 +254,7 @@ export class DomainAvailabilityService {
       ])
       .pipe(
         map((r) => this._mapToPickUpAvailability(r.result)?.find((_) => true)),
-        shareReplay(1)
+        shareReplay(1),
       );
   }
 
@@ -270,7 +270,7 @@ export class DomainAvailabilityService {
     ]).pipe(
       timeout(5000),
       map((r) => this._mapToShippingAvailability(r.result)?.find((_) => true)),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -305,7 +305,7 @@ export class DomainAvailabilityService {
           priceMaintained: preferred?.priceMaintained,
         };
       }),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -329,12 +329,12 @@ export class DomainAvailabilityService {
         this.getPickUpAvailability({ item, quantity, branch: branch ?? defaultBranch }).pipe(
           mergeMap((availability) =>
             logistician$.pipe(
-              map((logistician) => ({ ...(availability?.length > 0 ? availability[0] : []), logistician: { id: logistician.id } }))
-            )
+              map((logistician) => ({ ...(availability?.length > 0 ? availability[0] : []), logistician: { id: logistician.id } })),
+            ),
           ),
-          shareReplay(1)
-        )
-      )
+          shareReplay(1),
+        ),
+      ),
     );
   }
 
@@ -367,7 +367,7 @@ export class DomainAvailabilityService {
           priceMaintained: preferred?.priceMaintained,
         };
       }),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -378,7 +378,7 @@ export class DomainAvailabilityService {
       switchMap((stockId) =>
         stockId
           ? this._stockService.StockInStock({ articleIds: items.map((i) => i.id), stockId })
-          : of({ result: [] } as ResponseArgsOfIEnumerableOfStockInfoDTO)
+          : of({ result: [] } as ResponseArgsOfIEnumerableOfStockInfoDTO),
       ),
       timeout(20000),
       withLatestFrom(this.getTakeAwaySupplier()),
@@ -389,10 +389,10 @@ export class DomainAvailabilityService {
             supplier,
             quantity: 1,
             price: items?.find((i) => i.id === stockInfo.itemId)?.price,
-          })
+          }),
         );
       }),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -400,7 +400,7 @@ export class DomainAvailabilityService {
   getPickUpAvailabilities(payload: AvailabilityRequestDTO[], preferred?: boolean) {
     return this._availabilityService.AvailabilityStoreAvailability(payload).pipe(
       timeout(20000),
-      map((response) => (preferred ? this._mapToPickUpAvailability(response.result) : response.result))
+      map((response) => (preferred ? this._mapToPickUpAvailability(response.result) : response.result)),
     );
   }
 
@@ -408,7 +408,7 @@ export class DomainAvailabilityService {
   getDeliveryAvailabilities(payload: AvailabilityRequestDTO[]) {
     return this.memorizedAvailabilityShippingAvailability(payload).pipe(
       timeout(20000),
-      map((response) => this._mapToShippingAvailability(response.result))
+      map((response) => this._mapToShippingAvailability(response.result)),
     );
   }
 
@@ -416,7 +416,7 @@ export class DomainAvailabilityService {
   getDigDeliveryAvailabilities(payload: AvailabilityRequestDTO[]) {
     return this.memorizedAvailabilityShippingAvailability(payload).pipe(
       timeout(20000),
-      map((response) => this._mapToShippingAvailability(response.result))
+      map((response) => this._mapToShippingAvailability(response.result)),
     );
   }
 
@@ -427,16 +427,16 @@ export class DomainAvailabilityService {
     return this.getPickUpAvailabilities(payload, true).pipe(
       timeout(20000),
       switchMap((availability) =>
-        logistician$.pipe(map((logistician) => ({ availability: [...availability], logistician: { id: logistician.id } })))
+        logistician$.pipe(map((logistician) => ({ availability: [...availability], logistician: { id: logistician.id } }))),
       ),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
   getPriceForAvailability(
     purchasingOption: string,
     catalogAvailability: CatAvailabilityDTO | AvailabilityDTO,
-    availability: AvailabilityDTO
+    availability: AvailabilityDTO,
   ): PriceDTO {
     switch (purchasingOption) {
       case 'take-away':
@@ -567,12 +567,12 @@ export class DomainAvailabilityService {
     if (!params.branchId) {
       branchId$ = this.getDefaultBranch().pipe(
         first(),
-        map((b) => b.id)
+        map((b) => b.id),
       );
     }
 
     const stock$ = branchId$.pipe(
-      mergeMap((branchId) => this._stockService.StockGetStocksByBranch({ branchId }).pipe(map((response) => response.result?.[0])))
+      mergeMap((branchId) => this._stockService.StockGetStocksByBranch({ branchId }).pipe(map((response) => response.result?.[0]))),
     );
 
     return stock$.pipe(
@@ -589,17 +589,17 @@ export class DomainAvailabilityService {
               acc[stockInfo.ean] = stockInfo;
               return acc;
             }, {});
-          })
-        )
-      )
+          }),
+        ),
+      ),
     );
   }
 
   getInStock({ itemIds, branchId }: { itemIds: number[]; branchId: number }): Observable<StockInfoDTO[]> {
     return this.getStockByBranch(branchId).pipe(
       mergeMap((stock) =>
-        this._stockService.StockInStock({ articleIds: itemIds, stockId: stock.id }).pipe(map((response) => response.result))
-      )
+        this._stockService.StockInStock({ articleIds: itemIds, stockId: stock.id }).pipe(map((response) => response.result)),
+      ),
     );
   }
 }

apps/domain/catalog/src/lib/thumbnail-url.pipe.ts

@@ -11,7 +11,7 @@ export class ThumbnailUrlPipe implements PipeTransform, OnDestroy {
   private input$ = new BehaviorSubject<{ width?: number; height?: number; ean?: string }>(undefined);
   private result: string;
 
-  private onDestroy$ = new Subject();
+  private onDestroy$ = new Subject<void>();
 
   constructor(private domainCatalogThumbnailService: DomainCatalogThumbnailService, private cdr: ChangeDetectorRef) {}
 

apps/isa-app/src/app/app-routing.module.ts

@@ -1,4 +1,4 @@
-import { inject, isDevMode, NgModule } from '@angular/core';
+import { isDevMode, NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import {
   CanActivateCartGuard,
@@ -8,8 +8,6 @@ import {
   CanActivateCustomerOrdersWithProcessIdGuard,
   CanActivateCustomerWithProcessIdGuard,
   CanActivateGoodsInGuard,
-  CanActivateGoodsOutGuard,
-  CanActivateGoodsOutWithProcessIdGuard,
   CanActivateProductGuard,
   CanActivateProductWithProcessIdGuard,
   CanActivateRemissionGuard,
@@ -22,9 +20,9 @@ import { MainComponent } from './main.component';
 import { PreviewComponent } from './preview';
 import { BranchSectionResolver, CustomerSectionResolver, ProcessIdResolver } from './resolvers';
 import { TokenLoginComponent, TokenLoginModule } from './token-login';
-import { ApplicationService } from '@core/application';
 import { ProcessIdGuard } from './guards/process-id.guard';
 import { ActivateProcessIdGuard, ActivateProcessIdWithConfigKeyGuard } from './guards/activate-process-id.guard';
+import { MatomoRouteData } from 'ngx-matomo-client';
 
 const routes: Routes = [
   {
@@ -45,6 +43,11 @@ const routes: Routes = [
           {
             path: 'dashboard',
             loadChildren: () => import('@page/dashboard').then((m) => m.DashboardModule),
+            data: {
+              matomo: {
+                title: 'Dashboard',
+              } as MatomoRouteData,
+            },
           },
           {
             path: 'product',

apps/isa-app/src/app/app-store.module.ts

@@ -28,7 +28,7 @@ export const metaReducers: MetaReducer<RootState>[] = !environment.production ?
   imports: [
     StoreModule.forRoot(rootReducer, { metaReducers }),
     EffectsModule.forRoot([]),
-    StoreDevtoolsModule.instrument({ name: 'ISA Ngrx Application Store' }),
+    StoreDevtoolsModule.instrument({ name: 'ISA Ngrx Application Store', connectInZone: true }),
   ],
 })
 export class AppStoreModule {}

apps/isa-app/src/app/app.component.ts

@@ -1,18 +1,17 @@
 import { DOCUMENT } from '@angular/common';
 import { Component, HostListener, Inject, OnInit, Renderer2 } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import { SwUpdate, UpdateAvailableEvent } from '@angular/service-worker';
+import { SwUpdate } from '@angular/service-worker';
 import { ApplicationService } from '@core/application';
 import { Config } from '@core/config';
 import { NotificationsHub } from '@hub/notifications';
 import packageInfo from 'package';
-import { asapScheduler, interval, Observable, Subscription } from 'rxjs';
+import { asapScheduler, interval, Subscription } from 'rxjs';
 import { UserStateService } from '@swagger/isa';
 import { IsaLogProvider } from './providers';
 import { EnvironmentService } from '@core/environment';
 import { AuthService } from '@core/auth';
 import { UiMessageModalComponent, UiModalService } from '@ui/modal';
-import { tap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
@@ -21,7 +20,6 @@ import { tap } from 'rxjs/operators';
 })
 export class AppComponent implements OnInit {
   private _checkForUpdates: number = this._config.get('checkForUpdates');
-  updateAvailableObs: Observable<UpdateAvailableEvent>;
 
   get checkForUpdates(): number {
     return this._checkForUpdates;

apps/isa-app/src/app/app.module.ts

@@ -37,6 +37,8 @@ import { NativeContainerService } from 'native-container';
 import { ShellModule } from '@shared/shell';
 import { MainComponent } from './main.component';
 import { IconModule } from '@shared/components/icon';
+import { provideMatomo } from 'ngx-matomo-client';
+import { withRouter, withRouteData } from 'ngx-matomo-client';
 
 registerLocaleData(localeDe, localeDeExtra);
 registerLocaleData(localeDe, 'de', localeDeExtra);
@@ -46,7 +48,7 @@ export function _appInitializerFactory(
   auth: AuthService,
   injector: Injector,
   scanAdapter: ScanAdapterService,
-  nativeContainer: NativeContainerService
+  nativeContainer: NativeContainerService,
 ) {
   return async () => {
     const statusElement = document.querySelector('#init-status');
@@ -135,6 +137,7 @@ export function _notificationsHubOptionsFactory(config: Config, auth: AuthServic
       useClass: IsaErrorHandler,
     },
     { provide: LOCALE_ID, useValue: 'de-DE' },
+    provideMatomo({ trackerUrl: 'http://localhost:8080', siteId: '1' }, withRouter(), withRouteData()),
   ],
   bootstrap: [AppComponent],
 })

apps/isa-app/src/polyfills.ts

@@ -23,7 +23,7 @@
  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
  */
-import 'web-animations-js'; // Run `npm install --save web-animations-js`.
+// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
 
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
@@ -57,4 +57,3 @@ import 'zone.js'; // Included with Angular CLI.
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
-import 'hammerjs';

apps/isa/remission/src/lib/mock/mock-remission.service.ts

@@ -47,7 +47,7 @@ export class MockRemissionService extends RemissionService {
   >();
   private remissionSubjectIdRef = new Map<number, number>();
 
-  private reloadProductsSubject = new Subject();
+  private reloadProductsSubject = new Subject<void>();
   private productSubject = new BehaviorSubject<RemissionProduct[]>(
     remissionProducts
   );

apps/page/catalog/src/lib/article-details/article-details.component.html

@@ -9,9 +9,7 @@
               <ng-container *ngIf="isAvailable$ | async; else notAvailable">
                 Archivtitel. Wird nicht mehr gedruckt. Artikel ist bestellbar, weil lieferbar.
               </ng-container>
-              <ng-template #notAvailable>
-                Archivtitel. Wird nicht mehr gedruckt. Nicht bestellbar.
-              </ng-template>
+              <ng-template #notAvailable> Archivtitel. Wird nicht mehr gedruckt. Nicht bestellbar. </ng-template>
             </ui-tooltip>
           </button>
         </div>
@@ -44,7 +42,7 @@
             <img
               class="max-h-[19.6875rem] max-w-[12.1875rem] rounded"
               (load)="loadImage()"
-              [src]="item.imageId | productImage: 195:315:true"
+              [src]="item.imageId | productImage: 195 : 315 : true"
               alt="product image"
             />
             <ui-icon
@@ -107,7 +105,7 @@
 
       <div class="page-article-details__product-price-info flex flex-col mb-4 flex-nowrap self-end">
         <div class="page-article-details__product-price font-bold text-xl self-end" *ngIf="price$ | async; let price">
-          {{ price?.value?.value | currency: price?.value?.currency:'code' }}
+          {{ price?.value?.value | currency: price?.value?.currency : 'code' }}
         </div>
         <div *ngIf="price$ | async; let price" class="page-article-details__product-price-bound self-end">
           {{ price?.vat?.vatType | vat: (priceMaintained$ | async) }}
@@ -349,6 +347,9 @@
       *ngIf="store.item$ | async; let item"
       class="shadow-[#dce2e9_0px_-2px_18px_0px] mb-5 border-none outline-none flex items-center px-5 h-14 min-h-[3.5rem] bg-white w-full"
       (click)="showRecommendations = true"
+      matomoClickCategory="prodict-details"
+      matomoClickAction="click"
+      matomoClickName="recommendations"
     >
       <span class="uppercase text-[#0556B4] font-bold text-p3">Empfehlungen</span>
       <img class="absolute right-5 -top-[0.125rem] h-12" src="assets/images/recommendation_tag.png" alt="recommendation icon" />
@@ -364,6 +365,9 @@
     *ngIf="!(store.isDownload$ | async)"
     class="text-brand border-2 border-brand bg-white font-bold text-lg px-[1.375rem] py-4 rounded-full mr-[1.875rem]"
     (click)="showAvailabilities()"
+    matomoClickCategory="prodict-details"
+    matomoClickAction="click"
+    matomoClickName="bestaende-in-anderen-filialen"
   >
     Bestände in anderen Filialen
   </button>
@@ -371,6 +375,9 @@
     class="text-white bg-brand border-brand font-bold text-lg px-[1.375rem] py-4 rounded-full border-none no-underline"
     (click)="showPurchasingModal()"
     [disabled]="!(isAvailable$ | async) || (fetchingAvailabilities$ | async) || (item?.features && (item?.features)[0]?.key === 'PFO')"
+    matomoClickCategory="prodict-details"
+    matomoClickAction="click"
+    matomoClickName="in-den-Warenkorb"
   >
     In den Warenkorb
   </button>

apps/page/catalog/src/lib/article-details/article-details.component.ts

@@ -141,7 +141,7 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy {
     this.store.deliveryB2BAvailability$,
   ]).pipe(
     map((availabilities) => {
-      return availabilities?.some((availability) => availability?.priceMaintained) ?? false;
+      return availabilities?.some((availability) => (availability as any)?.priceMaintained) ?? false;
     })
   );
 

apps/page/catalog/src/lib/article-details/article-details.module.ts

@@ -14,6 +14,7 @@ import { OrderDeadlinePipeModule } from '@shared/pipes/order-deadline';
 import { IconModule } from '@shared/components/icon';
 import { ArticleDetailsTextComponent } from './article-details-text/article-details-text.component';
 import { IconBadgeComponent } from 'apps/shared/components/icon/src/lib/badge/icon-badge.component';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @NgModule({
   imports: [
@@ -30,6 +31,7 @@ import { IconBadgeComponent } from 'apps/shared/components/icon/src/lib/badge/ic
     OrderDeadlinePipeModule,
     ArticleDetailsTextComponent,
     IconBadgeComponent,
+    MatomoModule,
   ],
   exports: [ArticleDetailsComponent, ArticleRecommendationsComponent],
   declarations: [ArticleDetailsComponent, ArticleRecommendationsComponent],

apps/page/catalog/src/lib/article-search/article-search.component.ts

@@ -24,7 +24,7 @@ import { FilterAutocompleteProvider } from '@shared/components/filter';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ArticleSearchComponent implements OnInit, OnDestroy {
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
   private _processId$: Observable<number>;
 
   constructor(

apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.ts

@@ -58,7 +58,7 @@ export class ArticleSearchFilterComponent implements OnInit, OnDestroy {
     }
   }
 
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   constructor(
     private articleSearch: ArticleSearchService,

apps/page/catalog/src/lib/article-search/search-main/search-main.component.html

@@ -1,8 +1,6 @@
 <div class="bg-white rounded py-10 px-4 text-center shadow-[0_-2px_24px_0_#dce2e9] h-full">
   <h1 class="text-h3 text-[1.625rem] font-bold mb-[0.375rem]">Artikelsuche</h1>
-  <p class="text-lg mb-10">
-    Welchen Artikel suchen Sie?
-  </p>
+  <p class="text-lg mb-10">Welchen Artikel suchen Sie?</p>
   <ng-container *ngIf="filter$ | async; let filter">
     <shared-filter-filter-group-main
       class="mb-8 w-full"
@@ -38,6 +36,9 @@
           <button
             class="flex flex-row items-center outline-none border-none bg-white text-black text-p2 m-0 p-0"
             (click)="setQueryHistory(filter, recentQuery.friendlyName)"
+            matomoClickCategory="search"
+            matomoClickAction="click"
+            matomoClickName="recent-search"
           >
             <shared-icon
               class="flex w-8 h-8 justify-center items-center mr-3 rounded-full text-black bg-[#edeff0]"

apps/page/catalog/src/lib/article-search/search-main/search-main.module.ts

@@ -4,9 +4,10 @@ import { ArticleSearchMainComponent } from './search-main.component';
 import { FilterModule } from '@shared/components/filter';
 import { RouterModule } from '@angular/router';
 import { IconComponent, IconModule } from '@shared/components/icon';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @NgModule({
-  imports: [CommonModule, RouterModule, IconComponent, FilterModule, IconModule],
+  imports: [CommonModule, RouterModule, IconComponent, FilterModule, IconModule, MatomoModule],
   exports: [ArticleSearchMainComponent],
   declarations: [ArticleSearchMainComponent],
   providers: [],

apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.html

@@ -67,7 +67,7 @@
       class="page-search-result-item__item-price desktop-small:text-p3 font-bold justify-self-end"
       [class.page-search-result-item__item-price-primary]="primaryOutletActive"
     >
-      {{ item?.catalogAvailability?.price?.value?.value | currency: 'EUR':'code' }}
+      {{ item?.catalogAvailability?.price?.value?.value | currency: 'EUR' : 'code' }}
     </div>
 
     <div class="page-search-result-item__item-select-bullet justify-self-end">
@@ -75,9 +75,14 @@
         *ngIf="selectable"
         (click)="$event.stopPropagation()"
         [ngModel]="selected"
-        (ngModelChange)="setSelected()"
+        (ngModelChange)="
+          setSelected();
+          tracker.trackEvent({ category: 'Trefferliste', action: 'select', name: item.product.name, value: selected ? 1 : 0 })
+        "
         class="isa-select-bullet"
         type="checkbox"
+        matomoTracker
+        #tracker="matomo"
       />
     </div>
 

apps/page/catalog/src/lib/article-search/search-results/search-results.component.html

@@ -11,7 +11,7 @@
       [hint]="searchboxHint$ | async"
       [loading]="fetching$ | async"
       [inputGroup]="filter?.input | group: 'main'"
-      (search)="search({filter, clear: true})"
+      (search)="search({ filter, clear: true })"
       [showDescription]="false"
       [scanner]="true"
     ></shared-filter-input-group-main>
@@ -32,8 +32,7 @@
     class="page-search-results__items-count inline-flex flex-row items-center pr-5 text-p3"
     [class.mb-4]="primaryOutletActive$ | async"
   >
-    {{ hits ??
-      0 }}
+    {{ hits ?? 0 }}
     Titel
   </div>
 </div>
@@ -75,6 +74,9 @@
       *ngIf="(selectedItemIds$ | async)?.length > 0"
       class="cta-cart cta-action-primary"
       (click)="addToCart()"
+      matomoClickCategory="Trefferliste"
+      matomoClickAction="click"
+      matomoClickName="In den Warenkorb legen"
     >
       <ui-spinner [show]="loading$ | async">In den Warenkorb legen</ui-spinner>
     </button>

apps/page/catalog/src/lib/article-search/search-results/search-results.module.ts

@@ -19,6 +19,7 @@ import { FilterAutocompleteProvider, FilterModule, OrderByFilterModule } from '@
 import { FocusSearchboxEvent } from '../focus-searchbox.event';
 import { ArticleSearchMainAutocompleteProvider } from '../providers';
 import { IconComponent } from '@shared/components/icon';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @NgModule({
   imports: [
@@ -35,6 +36,7 @@ import { IconComponent } from '@shared/components/icon';
     UiTooltipModule,
     FilterModule,
     IconComponent,
+    MatomoModule,
   ],
   exports: [ArticleSearchResultsComponent, SearchResultItemComponent],
   declarations: [

apps/page/catalog/src/lib/page-catalog-routing.module.ts

@@ -6,24 +6,45 @@ import { ArticleSearchFilterComponent } from './article-search/search-filter/sea
 import { ArticleSearchMainComponent } from './article-search/search-main/search-main.component';
 import { ArticleSearchResultsComponent } from './article-search/search-results/search-results.component';
 import { PageCatalogComponent } from './page-catalog.component';
+import { MatomoRouteData } from 'ngx-matomo-client';
 
 const routes: Routes = [
   {
     path: '',
     component: PageCatalogComponent,
+    data: {
+      matomo: {
+        title: 'Artikelsuche',
+      } as MatomoRouteData,
+    },
     children: [
       {
         path: 'filter',
         component: ArticleSearchFilterComponent,
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Filter',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'filter/:id',
         component: ArticleSearchFilterComponent,
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Filter',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'search',
         component: ArticleSearchComponent,
         outlet: 'side',
+        data: {
+          matomo: {
+            title: 'Artikelsuche',
+          } as MatomoRouteData,
+        },
         children: [
           {
             path: '',
@@ -34,29 +55,59 @@ const routes: Routes = [
       {
         path: 'results',
         component: ArticleSearchResultsComponent,
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Trefferliste',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'results',
         component: ArticleSearchResultsComponent,
         outlet: 'side',
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Trefferliste',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'results/:id',
         component: ArticleSearchResultsComponent,
         outlet: 'side',
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Artikeldetails',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'results/:ean/ean',
         component: ArticleSearchResultsComponent,
         outlet: 'side',
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Artikeldetails (EAN)',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'details/:id',
         component: ArticleDetailsComponent,
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Artikeldetails (ID)',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'details/:ean/ean',
         component: ArticleDetailsComponent,
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Artikeldetails (EAN)',
+          } as MatomoRouteData,
+        },
       },
       {
         path: '',

apps/page/catalog/src/lib/page-catalog.component.ts

@@ -33,7 +33,7 @@ export class PageCatalogComponent implements OnInit, AfterViewInit, OnDestroy {
     return `${this.breadcrumbRef?.nativeElement?.clientWidth}px`;
   }
 
-  _onDestroy$ = new Subject<boolean>();
+  _onDestroy$ = new Subject<void>();
 
   get isTablet$() {
     return this._environmentService.matchTablet$;

apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.ts

@@ -33,7 +33,7 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
 
   private _toaster = inject(ToasterService);
 
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
   processId = Date.now();
   selectedDate = this.dateAdapter.today();
   minDateDatepicker = this.dateAdapter.addCalendarDays(this.dateAdapter.today(), -1);

apps/page/customer-order/src/lib/customer-order-details/customer-order-details-item/customer-order-details-item.component.ts

@@ -141,7 +141,7 @@ export class CustomerOrderDetailsItemComponent extends ComponentStore<CustomerOr
 
   more$ = this.select((s) => s.more);
 
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   get isNative() {
     return this._environment.isNative();

apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.ts

@@ -22,7 +22,7 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy {
 
   processId = Number(this._activatedRoute?.parent?.snapshot?.data?.processId);
 
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   @ViewChild(FilterComponent, { static: false })
   uiFilter: FilterComponent;

apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.ts

@@ -23,7 +23,7 @@ import { CustomerOrdersNavigationService } from '@shared/services';
   ],
 })
 export class CustomerOrderSearchComponent implements OnInit, OnDestroy {
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
   private _processId$: Observable<number>;
 
   get isTablet() {

apps/page/customer-order/src/lib/customer-order-search/customer-order-search.store.ts

@@ -201,8 +201,8 @@ export class CustomerOrderSearchStore extends ComponentStore<CustomerOrderSearch
 
   search = this.effect((options$: Observable<{ clear?: boolean; siletReload?: boolean }>) =>
     options$.pipe(
-      tap((_) => {
-        this.searchStarted.next();
+      tap((opt) => {
+        this.searchStarted.next(opt);
         this.patchState({ message: undefined });
       }),
       withLatestFrom(this.results$, this.filter$, this.selectedBranch$),

apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.ts

@@ -99,7 +99,7 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
 
   processId$ = this._activatedRoute.parent.data.pipe(map((data) => +data.processId));
 
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   trackByFn: TrackByFunction<OrderItemListItemDTO> = (index, item) => `${item.orderId}${item.orderItemId}${item.orderItemSubsetId}`;
 

apps/page/customer-order/src/lib/customer-order.component.ts

@@ -30,7 +30,7 @@ export class CustomerOrderComponent implements OnInit {
     return `${this.breadcrumbRef?.nativeElement?.clientWidth}px`;
   }
 
-  _onDestroy$ = new Subject<boolean>();
+  _onDestroy$ = new Subject<void>();
 
   get isTablet$() {
     return this._environmentService.matchTablet$;

apps/page/customer/src/lib/components/customer-type-selector/customer-type-selector.component.ts

@@ -197,7 +197,7 @@ export class CustomerTypeSelectorComponent extends ComponentStore<CustomerTypeSe
   setValue(value: { p4mUser?: boolean; customerType?: string } | string) {
     const initial = { p4mUser: this.p4mUser, customerType: this.customerType };
 
-    if (isString(value)) {
+    if (typeof value === 'string') {
       this.value = value;
     } else {
       if (isBoolean(value.p4mUser)) {

apps/page/customer/src/lib/create-customer/create-p4m-customer/create-p4m-customer.component.ts

@@ -72,7 +72,7 @@ export class CreateP4MCustomerComponent extends AbstractCreateCustomer implement
 
   birthDateValidatorFns = [];
 
-  existingCustomer$: Observable<CustomerInfoDTO | null>;
+  existingCustomer$: Observable<CustomerInfoDTO | CustomerDTO | null>;
 
   ngOnInit(): void {
     super.ngOnInit();

apps/page/customer/src/lib/customer-search/details-main-view/details-main-view.component.ts

@@ -29,7 +29,7 @@ export interface CustomerDetailsViewMainState {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CustomerDetailsViewMainComponent extends ComponentStore<CustomerDetailsViewMainState> implements OnInit, OnDestroy {
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   customerService = inject(CrmCustomerService);
 

apps/page/goods-in/src/lib/goods-in-cleanup-list/goods-in-cleanup-list.component.html

@@ -1,8 +1,6 @@
 <div class="header">
   <div class="cleanup-headline">
-    <h1 class="cleanup-title">
-      Abholfachbereinigung
-    </h1>
+    <h1 class="cleanup-title">Abholfachbereinigung</h1>
     <p class="cleanup-paragraph">
       Bitte nehmen Sie die<br />
       Artikel auf die Fläche.
@@ -30,12 +28,17 @@
             *ngFor="let item of compartmentCodeGroup.items; let firstItem = first"
             [item]="item"
             [showCompartmentCode]="firstItem"
-            (selectedChange)="setSelectedItem(item, $event)"
-            [selectable]="item | goodsInCleanupSelectable: selectionRules:selectedItems"
+            (selectedChange)="
+              setSelectedItem(item, $event);
+              tracker.trackEvent({ category: 'goods-in-cleanup', action: 'select', name: 'order-item', value: $event ? 1 : 0 })
+            "
+            [selectable]="item | goodsInCleanupSelectable: selectionRules : selectedItems"
             [selected]="item | goodsInCleanupSelected: selectedOrderItemSubsetIds"
             (click)="navigateToDetails(item)"
             [showSupplier]="true"
             [quantityEditable]="item.overallQuantity > 1 && (selectedOrderItemSubsetIds$ | async)?.includes(item.orderItemSubsetId)"
+            matomoTracker
+            #tracker="matomo"
           >
           </shared-goods-in-out-order-group-item>
           <div class="divider" *ngIf="!lastCompartmentCode"></div>
@@ -63,6 +66,9 @@
       [class.cta-action-primary]="action.selected"
       [class.cta-action-secondary]="!action.selected"
       (click)="handleAction(action)"
+      matomoClickCategory="goods-in-cleanup"
+      matomoClickAction="click"
+      [matomoClickName]="action.label"
     >
       <ui-spinner [show]="(changeActionLoader$ | async) || (loading$ | async)">{{ action.label }}</ui-spinner>
     </button>

apps/page/goods-in/src/lib/goods-in-cleanup-list/goods-in-cleanup-list.module.ts

@@ -8,9 +8,10 @@ import { UiSpinnerModule } from 'apps/ui/spinner/src/lib/ui-spinner.module';
 import { GoodsInCleanupListComponent } from './goods-in-cleanup-list.component';
 import { GoodsInCleanupSelectablePipe } from './goods-in-cleanup-selectable.pipe';
 import { GoodsInCleanupSelectedPipe } from './goods-in-cleanup-selected.pipe';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @NgModule({
-  imports: [CommonModule, UiCommonModule, GoodsInOutOrderGroupModule, UiSpinnerModule, UiScrollContainerModule, RouterModule],
+  imports: [CommonModule, UiCommonModule, GoodsInOutOrderGroupModule, UiSpinnerModule, UiScrollContainerModule, RouterModule, MatomoModule],
   exports: [GoodsInCleanupListComponent],
   declarations: [GoodsInCleanupListComponent, GoodsInCleanupSelectablePipe, GoodsInCleanupSelectedPipe],
   providers: [],

apps/page/goods-in/src/lib/goods-in-list/goods-in-list-item/goods-in-list-item.component.html

@@ -25,14 +25,16 @@
             type="text"
             [ngModel]="ssc"
             (ngModelChange)="sscChange($event)"
+            [matomoTracker]="['blur']"
+            matomoCategory="goods-in-list-item"
+            matomoAction="input"
+            matomoName="meldenummer"
           />
 
           <span class="ssc-text" [class.err]="sscInvalid$ | async">{{ sscText$ | async }}</span>
         </div>
 
-        <div class="err" *ngIf="supplierIdError$ | async">
-          Kein Lieferant vorhanden
-        </div>
+        <div class="err" *ngIf="supplierIdError$ | async">Kein Lieferant vorhanden</div>
       </ng-container>
     </div>
   </div>
@@ -74,7 +76,7 @@
       </div>
 
       <div class="price">
-        <strong>{{ orderItem.price | currency: 'EUR':'code' }}</strong>
+        <strong>{{ orderItem.price | currency: 'EUR' : 'code' }}</strong>
       </div>
       <div class="status spec">
         <span>Status</span>
@@ -99,7 +101,14 @@
   </div>
 
   <div class="footer">
-    <button class="cta-reorder" (click)="showReorderModal(); $event.stopPropagation()" [disabled]="editSsc$ | async">
+    <button
+      class="cta-reorder"
+      (click)="showReorderModal(); $event.stopPropagation()"
+      [disabled]="editSsc$ | async"
+      matomoClickCategory="goods-in-list-item"
+      matomoClickAction="click"
+      matomoClickName="nachbestellen"
+    >
       Nachbestellen
     </button>
   </div>

apps/page/goods-in/src/lib/goods-in-list/goods-in-list-item/goods-in-list-item.component.ts

@@ -123,7 +123,7 @@ export class GoodsInListItemComponent extends ComponentStore<GoodsInListItemComp
     shareReplay()
   );
 
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   constructor(
     private _omsService: DomainOmsService,

apps/page/goods-in/src/lib/goods-in-list/goods-in-list-item/goods-in-list-item.module.ts

@@ -6,9 +6,19 @@ import { UiInputModule } from '@ui/input';
 import { FormsModule } from '@angular/forms';
 import { GoodsInListItemComponent } from './goods-in-list-item.component';
 import { PipesModule } from 'apps/shared/components/goods-in-out/src/lib/pipes/pipes.module';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @NgModule({
-  imports: [CommonModule, PipesModule, UiIconModule, ProductImageModule, FormsModule, UiInputModule, NavigateOnClickDirective],
+  imports: [
+    CommonModule,
+    PipesModule,
+    UiIconModule,
+    ProductImageModule,
+    FormsModule,
+    UiInputModule,
+    NavigateOnClickDirective,
+    MatomoModule,
+  ],
   exports: [GoodsInListItemComponent],
   declarations: [GoodsInListItemComponent],
   providers: [],

apps/page/goods-in/src/lib/goods-in-list/goods-in-list.component.html

@@ -1,7 +1,5 @@
 <div class="goods-in-list-headline">
-  <h1 class="goods-in-list-title">
-    Wareneingangsliste
-  </h1>
+  <h1 class="goods-in-list-title">Wareneingangsliste</h1>
   <p class="goods-in-list-paragraph">
     Vergeben Sie Meldenummern oder<br />
     bestellen Sie Artikel nach
@@ -45,18 +43,36 @@
 </ng-template>
 
 <div *ngIf="!(listEmpty$ | async)" class="actions">
-  <button *ngIf="!editSsc" class="cta-edit-ssc cta-action-primary" (click)="editSsc = true">
+  <button
+    *ngIf="!editSsc"
+    class="cta-edit-ssc cta-action-primary"
+    (click)="editSsc = true"
+    matomoClickCategory="goods-in-list"
+    matomoClickAction="click"
+    matomoClickName="meldenummer-vergeben"
+  >
     Meldenummern vergeben
   </button>
 
   <ng-container *ngIf="editSsc">
-    <button class="cta-cancel-ssc cta-action-secondary" (click)="cancelSsc()">
+    <button
+      class="cta-cancel-ssc cta-action-secondary"
+      (click)="cancelSsc()"
+      matomoClickCategory="goods-in-list"
+      matomoClickAction="click"
+      matomoClickName="meldenummer-vergeben-abbrechen"
+    >
       Abbrechen
     </button>
-    <button class="cta-save-ssc cta-action-primary" (click)="saveSsc()" [disabled]="editSscDisabled$ | async">
-      <ui-spinner [show]="showSaveSscSpinner$ | async">
-        Meldenummern speichern
-      </ui-spinner>
+    <button
+      class="cta-save-ssc cta-action-primary"
+      (click)="saveSsc()"
+      [disabled]="editSscDisabled$ | async"
+      matomoClickCategory="goods-in-list"
+      matomoClickAction="click"
+      matomoClickName="meldenummer-vergeben-speichern"
+    >
+      <ui-spinner [show]="showSaveSscSpinner$ | async"> Meldenummern speichern </ui-spinner>
     </button>
   </ng-container>
 </div>

apps/page/goods-in/src/lib/goods-in-list/goods-in-list.component.ts

@@ -59,7 +59,7 @@ export class GoodsInListComponent implements OnInit, AfterViewInit, OnDestroy {
 
   showSaveSscSpinner$ = new BehaviorSubject<boolean>(false);
 
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   private readonly SCROLL_POSITION_TOKEN = 'GOODS_IN_LIST_SCROLL_POSITION';
 

apps/page/goods-in/src/lib/goods-in-list/goods-in-list.module.ts

@@ -8,6 +8,7 @@ import { UiSpinnerModule } from 'apps/ui/spinner/src/lib/ui-spinner.module';
 import { GoodsInListItemModule } from './goods-in-list-item/goods-in-list-item.module';
 
 import { GoodsInListComponent } from './goods-in-list.component';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @NgModule({
   imports: [
@@ -18,6 +19,7 @@ import { GoodsInListComponent } from './goods-in-list.component';
     UiScrollContainerModule,
     UiOrderByFilterModule,
     UiSpinnerModule,
+    MatomoModule,
   ],
   exports: [],
   declarations: [GoodsInListComponent],

apps/page/goods-in/src/lib/goods-in-reservation/goods-in-reservation.component.html

@@ -1,8 +1,6 @@
 <div class="header">
   <div class="reservations-headline">
-    <h1 class="reservations-title">
-      Reservierungsliste
-    </h1>
+    <h1 class="reservations-title">Reservierungsliste</h1>
     <p class="reservations-paragraph">
       Hier sehen Sie alle zu<br />
       reservierenden Bestellposten.
@@ -31,12 +29,17 @@
             *ngFor="let item of compartmentCodeGroup.items; let firstItem = first"
             [item]="item"
             [showCompartmentCode]="firstItem"
-            (selectedChange)="setSelectedItem(item, $event)"
-            [selectable]="item | goodsInReservationSelectable: selectionRules:selectedItems"
+            (selectedChange)="
+              setSelectedItem(item, $event);
+              tracker.trackEvent({ category: 'goods-in-reservation', action: 'select', name: 'order-item', value: $event ? 1 : 0 })
+            "
+            [selectable]="item | goodsInReservationSelectable: selectionRules : selectedItems"
             [selected]="item | goodsInReservationSelected: selectedOrderItemSubsetIds"
             [showInStock]="takeAwayAvailabilities$ | async"
             (click)="navigateToDetails(item)"
             [quantityEditable]="item.overallQuantity > 1 && (selectedOrderItemSubsetIds$ | async)?.includes(item.orderItemSubsetId)"
+            matomoTracker
+            #tracker="matomo"
           >
           </shared-goods-in-out-order-group-item>
           <div class="divider" *ngIf="!lastCompartmentCode"></div>
@@ -49,9 +52,7 @@
 </ui-scroll-container>
 
 <ng-template #emptyMessage>
-  <div class="empty-message">
-    Es sind derzeit keine Reservierungen offen.
-  </div>
+  <div class="empty-message">Es sind derzeit keine Reservierungen offen.</div>
 </ng-template>
 
 <div class="actions" *ngIf="actions$ | async; let actions">
@@ -62,6 +63,9 @@
     [class.cta-action-primary]="action.selected"
     [class.cta-action-secondary]="!action.selected"
     (click)="handleAction(action)"
+    matomoClickCategory="goods-in-reservation"
+    matomoClickAction="click"
+    [matomoClickName]="action.label"
   >
     <ui-spinner [show]="(changeActionLoader$ | async) || (loading$ | async)">{{ action.label }}</ui-spinner>
   </button>

apps/page/goods-in/src/lib/goods-in-reservation/goods-in-reservation.module.ts

@@ -8,9 +8,10 @@ import { GoodsInReservationSelectablePipe } from './goods-in-reservation-selecta
 import { GoodsInReservationSelectedPipe } from './goods-in-reservation-selected.pipe';
 
 import { GoodsInReservationComponent } from './goods-in-reservation.component';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @NgModule({
-  imports: [CommonModule, UiCommonModule, UiScrollContainerModule, GoodsInOutOrderGroupModule, UiSpinnerModule],
+  imports: [CommonModule, UiCommonModule, UiScrollContainerModule, GoodsInOutOrderGroupModule, UiSpinnerModule, MatomoModule],
   exports: [GoodsInReservationComponent],
   declarations: [GoodsInReservationComponent, GoodsInReservationSelectablePipe, GoodsInReservationSelectedPipe],
 })

apps/page/goods-out/src/lib/goods-out-details/goods-out-details.component.ts

@@ -59,7 +59,7 @@ export class GoodsOutDetailsComponent extends ComponentStore<GoodsOutDetailsComp
 
   processId$ = this._activatedRoute.parent.data.pipe(map((params) => +params.processId));
 
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   constructor(
     private _activatedRoute: ActivatedRoute,

apps/page/goods-out/src/lib/goods-out-search/goods-out-search-filter/goods-out-search-filter.component.ts

@@ -37,7 +37,7 @@ export class GoodsOutSearchFilterComponent implements OnInit, OnDestroy {
   @Input()
   processId: number;
 
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   @ViewChild(UiFilterComponent, { static: false })
   uiFilter: UiFilterComponent;

apps/page/goods-out/src/lib/goods-out-search/goods-out-search.component.ts

@@ -30,7 +30,7 @@ import { GoodsOutSearchMainAutocompleteProvider } from './providers/goods-out-se
   ],
 })
 export class GoodsOutSearchComponent implements OnInit, OnDestroy {
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   hasFilter$ = combineLatest([this._goodsOutSearchStore.filter$, this._goodsOutSearchStore.defaultSettings$]).pipe(
     map(([filter, defaultFilter]) => !isEqual(filter?.getQueryParams(), UiFilter.create(defaultFilter).getQueryParams()))

apps/page/goods-out/src/lib/goods-out-search/search-results/goods-out-search-results.component.ts

@@ -70,7 +70,7 @@ export class GoodsOutSearchResultsComponent extends ComponentStore<GoodsOutSearc
 
   processId$ = this._activatedRoute.parent.data.pipe(map((data) => +data.processId));
 
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   trackByFn: TrackByFunction<OrderItemListItemDTO> = (index, item) => `${item.orderId}${item.orderItemId}${item.orderItemSubsetId}`;
 

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

@@ -61,7 +61,10 @@
         [class.cta-action-primary]="action.selected"
         [class.cta-action-secondary]="!action.selected"
         *ngFor="let action of mainActions$ | async"
-        (click)="handleAction({action})"
+        (click)="handleAction({ action })"
+        matomoClickCategory="pickup-shelf-in-details"
+        matomoClickAction="click"
+        [matomoClickName]="action.label"
       >
         <ui-spinner [show]="(changeActionLoader$ | async) === action.command">{{ action.label }}</ui-spinner>
       </button>
@@ -73,7 +76,13 @@
           class="cta-action shadow-action"
           [class.cta-action-primary]="action.selected"
           [class.cta-action-secondary]="!action.selected"
-          (click)="handleAction({action, latestCompartmentCode: latestCompartmentInfos?.latestCompartmentCode, latestCompartmentInfo: latestCompartmentInfos?.latestCompartmentInfo })"
+          (click)="
+            handleAction({
+              action,
+              latestCompartmentCode: latestCompartmentInfos?.latestCompartmentCode,
+              latestCompartmentInfo: latestCompartmentInfos?.latestCompartmentInfo,
+            })
+          "
         >
           <ui-spinner [show]="(changeActionLoader$ | async) === action.command"
             >{{ latestDisplayedCompartmentInfos$ | async | addToPreviousCompartmentCodeLabelPipe }} zubuchen</ui-spinner

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

@@ -19,6 +19,7 @@ import { RunCheckTrigger } from '../../trigger';
 import { PickUpShelfDetailsItemsGroupComponent } from '../../shared/pickup-shelf-details-items-group/pickup-shelf-details-items-group.component';
 import { isEqual } from 'lodash';
 import { SkeletonLoaderComponent } from '@shared/components/loader';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @Component({
   selector: 'page-pickup-shelf-in-details',
@@ -40,6 +41,7 @@ import { SkeletonLoaderComponent } from '@shared/components/loader';
     UiSpinnerModule,
     OnInitDirective,
     SkeletonLoaderComponent,
+    MatomoModule,
   ],
 })
 export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseComponent implements OnInit, AfterViewInit {
@@ -61,7 +63,7 @@ export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseCompone
   fetchingCoverItems$ = this.store.fetchingCoverOrderItems$;
 
   viewFetching$ = combineLatest([this.fetchingItems$, this.orderItems$]).pipe(
-    map(([fetchingItems, orderItems]) => fetchingItems && orderItems.length === 0)
+    map(([fetchingItems, orderItems]) => fetchingItems && orderItems.length === 0),
   );
 
   selectedCompartmentInfo = this.store.selectedCompartmentInfo;
@@ -93,14 +95,17 @@ export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseCompone
         return `${latestCompartmentInfos?.latestCompartmentCode}_${latestCompartmentInfos?.latestCompartmentInfo}`;
       }
       return latestCompartmentInfos?.latestCompartmentCode;
-    })
+    }),
   );
 
   addToPreviousCompartmentActionDisabled$ = combineLatest([this.displayedCompartmentInfo$, this.changeActionDisabled$]).pipe(
-    map(([compartmentInfo, changeActionDisabled]) => !!compartmentInfo || changeActionDisabled)
+    map(([compartmentInfo, changeActionDisabled]) => !!compartmentInfo || changeActionDisabled),
   );
 
-  constructor(private _uiModal: UiModalService, private _activatedRoute: ActivatedRoute) {
+  constructor(
+    private _uiModal: UiModalService,
+    private _activatedRoute: ActivatedRoute,
+  ) {
     super();
   }
 
@@ -110,7 +115,7 @@ export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseCompone
       .subscribe(([params, items]) => {
         const orderItemSubsetId = +params?.orderItemSubsetId;
         const selectedItem: DBHOrderItemListItemDTO = items?.find(
-          (item: DBHOrderItemListItemDTO) => item?.orderItemSubsetId === orderItemSubsetId
+          (item: DBHOrderItemListItemDTO) => item?.orderItemSubsetId === orderItemSubsetId,
         );
 
         // Trigger functions only if a new item gets selected
@@ -176,7 +181,7 @@ export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseCompone
                 },
                 side: false,
               }).path,
-              { queryParamsHandling: 'preserve' }
+              { queryParamsHandling: 'preserve' },
             );
             this.listStore.patchOrderItem({
               orderItemSubsetId: item.orderItemSubsetId,
@@ -220,20 +225,21 @@ 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) =>
-          this.store.patchOrderItemSubset({ item, changes: { estimatedShippingDate: date.toISOString() } })
+          this.store.patchOrderItemSubset({ item, changes: { estimatedShippingDate: date.toISOString() } }),
         );
         break;
       case 'pickup':
         this.store.selectedOrderItems.forEach((item) =>
-          this.store.patchOrderItemSubset({ item, changes: { compartmentStop: date.toISOString() } })
+          this.store.patchOrderItemSubset({ item, changes: { compartmentStop: date.toISOString() } }),
         );
         break;
       case 'preferred':
         this.store.selectedOrderItems.forEach((item) =>
-          this.store.patchOrderItemSubset({ item, changes: { preferredPickUpDate: date.toISOString() } })
+          this.store.patchOrderItemSubset({ item, changes: { preferredPickUpDate: date.toISOString() } }),
         );
         break;
       default:
@@ -257,9 +263,9 @@ export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseCompone
           orderItemSubsetId: orderItem.orderItemSubsetId,
           compartmentInfo: orderItem.compartmentInfo,
         },
-        { side: this.side }
+        { side: this.side },
       ).path,
-      { queryParams: { buyerNumber: orderItem?.buyerNumber }, queryParamsHandling: 'merge' }
+      { queryParams: { buyerNumber: orderItem?.buyerNumber }, queryParamsHandling: 'merge' },
     );
   }
 
@@ -274,9 +280,9 @@ export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseCompone
           orderItemSubsetId: orderItem.orderItemSubsetId,
           compartmentInfo: orderItem.compartmentInfo,
         },
-        { side: this.side }
+        { side: this.side },
       ).path,
-      { queryParams: { orderItemSubsetId: orderItem.orderItemSubsetId }, queryParamsHandling: 'merge' }
+      { queryParams: { orderItemSubsetId: orderItem.orderItemSubsetId }, queryParamsHandling: 'merge' },
     );
   }
 
@@ -300,7 +306,7 @@ export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseCompone
           },
           side: this.side,
         }).path,
-        { queryParamsHandling: 'preserve' }
+        { queryParamsHandling: 'preserve' },
       );
     } else {
       if (orderItems.every((item) => item.processingStatus === 128)) {

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

@@ -50,7 +50,7 @@ export class PickupShelfInEditComponent extends PickupShelfDetailsBaseComponent
         },
         side: this.side,
       }).path,
-      { queryParamsHandling: 'preserve' }
+      { queryParamsHandling: 'preserve' },
     );
   }
 }

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

@@ -28,6 +28,7 @@ import { CacheService } from '@core/cache';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { PickupShelfListItemLoaderComponent } from '../../shared/pickup-shelf-list-item/pickup-shelf-list-item-loader.component';
 import { ScrollContainerDirective } from '@shared/directives/scroll-container';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @Component({
   selector: 'page-pickup-shelf-in-list',
@@ -76,7 +77,7 @@ export class PickUpShelfInListComponent implements OnInit, AfterViewInit {
     map(([filter, defaultFilter]) => {
       const filterQueryParams = filter?.getQueryParams();
       return !isEqual(filterQueryParams, Filter.create(defaultFilter).getQueryParams());
-    })
+    }),
   );
 
   fetching$: Observable<boolean> = this.store.fetchingList$;
@@ -117,7 +118,7 @@ export class PickUpShelfInListComponent implements OnInit, AfterViewInit {
     private _activatedRoute: ActivatedRoute,
     private _pickUpShelfInNavigation: PickupShelfInNavigationService,
     private _cache: CacheService,
-    private _router: Router
+    private _router: Router,
   ) {}
 
   ngOnInit() {

apps/page/pickup-shelf/src/lib/pickup-shelf-in/pickup-shelf-in-main-side-view/pickup-shelf-in-main-side-view.component.html

@@ -26,6 +26,8 @@
         (click)="showFilter.emit()"
         class="page-pickup-shelf-in-main__filter w-[6.75rem] h-14 rounded font-bold px-5 mb-4 text-lg bg-[#AEB7C1] flex flex-row flex-nowrap items-center justify-center"
         [class.active]="hasFilter$ | async"
+        matomoClickAction="open"
+        matomoClickCategory="filter"
       >
         <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
         Filter

apps/page/pickup-shelf/src/lib/pickup-shelf-in/pickup-shelf-in-main-side-view/pickup-shelf-in-main-side-view.component.ts

@@ -7,6 +7,7 @@ import { isEqual } from 'lodash';
 import { Observable, combineLatest } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { PickupShelfStore } from '../../store';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @Component({
   selector: 'page-pickup-shelf-in-main-side-view',
@@ -15,7 +16,7 @@ import { PickupShelfStore } from '../../store';
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page-pickup-shelf-in-main-side-view' },
-  imports: [FilterModule, AsyncPipe, NgIf, IconModule],
+  imports: [FilterModule, AsyncPipe, NgIf, IconModule, MatomoModule],
 })
 export class PickUpShelfInMainSideViewComponent implements OnInit {
   @Output() showFilter = new EventEmitter<void>();
@@ -35,7 +36,7 @@ export class PickUpShelfInMainSideViewComponent implements OnInit {
     map(([filter, defaultFilter]) => {
       const filterQueryParams = filter?.getQueryParams();
       return !isEqual(filterQueryParams, Filter.create(defaultFilter).getQueryParams());
-    })
+    }),
   );
 
   fetching$: Observable<boolean> = this.store.fetchingList$;

apps/page/pickup-shelf/src/lib/pickup-shelf-in/routes.ts

@@ -8,6 +8,7 @@ import { PickUpShelfInMainSideViewComponent } from './pickup-shelf-in-main-side-
 import { PickUpShelfInMainComponent } from './pickup-shelf-in-main/pickup-shelf-in-main.component';
 import { PickUpShelfInListComponent } from './pickup-shelf-in-list/pickup-shelf-in-list.component';
 import { PickupShelfInEditComponent } from './pickup-shelf-in-edit/pickup-shelf-in-edit.component';
+import { MatomoRouteData } from 'ngx-matomo-client';
 
 export const routes: Routes = [
   {
@@ -18,53 +19,125 @@ export const routes: Routes = [
     },
     runGuardsAndResolvers: 'always',
     children: [
-      { path: 'main', component: PickUpShelfInMainComponent, data: { view: 'main' } },
-      { path: 'list', component: PickUpShelfInListComponent, data: { view: 'list' } },
-      { path: 'list/filter', component: PickupShelfFilterComponent, data: { view: 'filter' } },
+      {
+        path: 'main',
+        component: PickUpShelfInMainComponent,
+        data: {
+          view: 'main',
+          matomo: {
+            title: 'Abholfach',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'list',
+        component: PickUpShelfInListComponent,
+        data: {
+          view: 'list',
+          matomo: {
+            title: 'Abholfach - Trefferliste',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'list/filter',
+        component: PickupShelfFilterComponent,
+        data: {
+          view: 'filter',
+          matomo: {
+            title: 'Abholfach - Filter',
+          } as MatomoRouteData,
+        },
+      },
       {
         path: 'order/:orderId/:orderNumber/item/status/:orderItemProcessingStatus/:orderItemSubsetId/edit',
         component: PickupShelfInEditComponent,
-        data: { view: 'edit' },
+        data: {
+          view: 'edit',
+          matomo: {
+            title: 'Abholfach - Bearbeiten',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'order/:orderId/compartment/:compartmentCode/:orderItemSubsetId/edit',
         component: PickupShelfInEditComponent,
-        data: { view: 'edit' },
+        data: {
+          view: 'edit',
+          matomo: {
+            title: 'Abholfach - Bearbeiten',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'order/:orderId/compartment/:compartmentCode/:compartmentInfo/:orderItemSubsetId/edit',
         component: PickupShelfInEditComponent,
-        data: { view: 'edit' },
+        data: {
+          view: 'edit',
+          matomo: {
+            title: 'Abholfach - Bearbeiten',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'order/:orderId/:orderNumber/item/status/:orderItemProcessingStatus/:orderItemSubsetId/history',
         component: PickUpShelfHistoryComponent,
-        data: { view: 'history' },
+        data: {
+          view: 'history',
+          matomo: {
+            title: 'Abholfach - Historie',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'order/:orderId/compartment/:compartmentCode/:orderItemSubsetId/history',
         component: PickUpShelfHistoryComponent,
-        data: { view: 'history' },
+        data: {
+          view: 'history',
+          matomo: {
+            title: 'Abholfach - Historie',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'order/:orderId/compartment/:compartmentCode/:compartmentInfo/:orderItemSubsetId/history',
         component: PickUpShelfHistoryComponent,
-        data: { view: 'history' },
+        data: {
+          view: 'history',
+          matomo: {
+            title: 'Abholfach - Historie',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'order/:orderId/:orderNumber/item/status/:orderItemProcessingStatus/:orderItemSubsetId',
         component: PickupShelfInDetailsComponent,
-        data: { view: 'details' },
+        data: {
+          view: 'details',
+          matomo: {
+            title: 'Abholfach - Details',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'order/:orderId/compartment/:compartmentCode/:orderItemSubsetId',
         component: PickupShelfInDetailsComponent,
-        data: { view: 'details' },
+        data: {
+          view: 'details',
+          matomo: {
+            title: 'Abholfach - Details',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'order/:orderId/compartment/:compartmentCode/:compartmentInfo/:orderItemSubsetId',
         component: PickupShelfInDetailsComponent,
-        data: { view: 'details' },
+        data: {
+          view: 'details',
+          matomo: {
+            title: 'Abholfach - Details',
+          } as MatomoRouteData,
+        },
       },
       { path: 'search', component: PickUpShelfInMainSideViewComponent, outlet: 'side' },
       { path: 'list', component: PickUpShelfInListComponent, data: { view: 'list' }, outlet: 'side' },

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

@@ -47,6 +47,9 @@
         [class.cta-action-secondary]="!action.selected"
         *ngFor="let action of mainActions$ | async"
         (click)="handleAction(action)"
+        matomoClickCategory="pickup-shelf-out-details"
+        matomoClickAction="click"
+        [matomoClickName]="action.label"
       >
         <ui-spinner [show]="(changeActionLoader$ | async) === action.command">{{ action.label }}</ui-spinner>
       </button>

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

@@ -14,6 +14,7 @@ import { OnInitDirective } from '@shared/directives/element-lifecycle';
 import { FormsModule } from '@angular/forms';
 import { RunCheckTrigger } from '../../trigger';
 import { PickUpShelfDetailsItemsGroupComponent } from '../../shared/pickup-shelf-details-items-group/pickup-shelf-details-items-group.component';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @Component({
   selector: 'page-pickup-shelf-out-details',
@@ -33,6 +34,7 @@ import { PickUpShelfDetailsItemsGroupComponent } from '../../shared/pickup-shelf
     UiSpinnerModule,
     OnInitDirective,
     FormsModule,
+    MatomoModule,
   ],
   providers: [],
 })
@@ -65,14 +67,14 @@ export class PickupShelfOutDetailsComponent extends PickupShelfDetailsBaseCompon
       }
 
       return groups;
-    })
+    }),
   );
 
   fetchingOrder$ = this.store.fetchingOrder$;
   fetchingItems$ = this.store.fetchingOrderItems$;
 
   viewFetching$ = combineLatest([this.orderItems$, this.fetchingItems$]).pipe(
-    map(([orderItems, fetchingItems]) => orderItems?.length === 0 && fetchingItems)
+    map(([orderItems, fetchingItems]) => orderItems?.length === 0 && fetchingItems),
   );
 
   selectedCompartmentInfo = this.store.selectedCompartmentInfo;
@@ -129,7 +131,7 @@ export class PickupShelfOutDetailsComponent extends PickupShelfDetailsBaseCompon
                 compartmentInfo: item.compartmentInfo,
               },
             }).path,
-            { queryParamsHandling: 'preserve' }
+            { queryParamsHandling: 'preserve' },
           );
         }
       }
@@ -152,20 +154,21 @@ 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) =>
-          this.store.patchOrderItemSubset({ item, changes: { estimatedShippingDate: date.toISOString() } })
+          this.store.patchOrderItemSubset({ item, changes: { estimatedShippingDate: date.toISOString() } }),
         );
         break;
       case 'pickup': // Abholfrist
         this.store.orderItems.forEach((item) =>
-          this.store.patchOrderItemSubset({ item, changes: { compartmentStop: date.toISOString() } })
+          this.store.patchOrderItemSubset({ item, changes: { compartmentStop: date.toISOString() } }),
         );
         break;
       case 'preferred': // Zurücklegen bis
         this.store.orderItems.forEach((item) =>
-          this.store.patchOrderItemSubset({ item, changes: { preferredPickUpDate: date.toISOString() } })
+          this.store.patchOrderItemSubset({ item, changes: { preferredPickUpDate: date.toISOString() } }),
         );
         break;
       default:
@@ -190,7 +193,7 @@ export class PickupShelfOutDetailsComponent extends PickupShelfDetailsBaseCompon
           compartmentInfo: orderItem.compartmentInfo,
         },
       }).path,
-      { queryParams: { buyerNumber: orderItem?.buyerNumber }, queryParamsHandling: 'merge' }
+      { queryParams: { buyerNumber: orderItem?.buyerNumber }, queryParamsHandling: 'merge' },
     );
   }
 
@@ -206,7 +209,7 @@ export class PickupShelfOutDetailsComponent extends PickupShelfDetailsBaseCompon
           compartmentInfo: orderItem.compartmentInfo,
         },
       }).path,
-      { queryParams: { orderItemSubsetId: orderItem.orderItemSubsetId }, queryParamsHandling: 'merge' }
+      { queryParams: { orderItemSubsetId: orderItem.orderItemSubsetId }, queryParamsHandling: 'merge' },
     );
   }
 

apps/page/pickup-shelf/src/lib/pickup-shelf-out/pickup-shelf-out-list/pickup-shelf-out-list.component.html

@@ -34,8 +34,7 @@
     class="page-pickup-shelf-out-list__items-count inline-flex flex-row items-center pr-5 text-p3"
     [class.mb-4]="primaryOutletActive$ | async"
   >
-    {{ hits ??
-      0 }}
+    {{ hits ?? 0 }}
     Titel
   </div>
 </div>
@@ -89,6 +88,9 @@
       [class.cta-action-primary]="action.selected"
       [class.cta-action-secondary]="!action.selected"
       (click)="handleAction(action)"
+      matomoClickCategory="pickup-shelf-out-list"
+      matomoClickAction="click"
+      [matomoClickName]="action.label"
     >
       <ui-spinner [show]="(loadingFetchedActionButton$ | async) || (fetching$ | async)">{{ action.label }}</ui-spinner>
     </button>

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

@@ -30,6 +30,7 @@ import { ActionHandlerService } from '../../services/action-handler.service';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CacheService } from '@core/cache';
 import { ScrollContainerDirective } from '@shared/directives/scroll-container';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @Component({
   selector: 'page-pcikup-shelf-out-list',
@@ -50,6 +51,7 @@ import { ScrollContainerDirective } from '@shared/directives/scroll-container';
     GroupByPipe,
     UiSpinnerModule,
     PickupShelfListItemLoaderComponent,
+    MatomoModule,
   ],
 })
 export class PickupShelfOutListComponent implements OnInit, AfterViewInit {
@@ -80,7 +82,7 @@ export class PickupShelfOutListComponent implements OnInit, AfterViewInit {
     map(([filter, defaultFilter]) => {
       const filterQueryParams = filter?.getQueryParams();
       return !isEqual(filterQueryParams, Filter.create(defaultFilter).getQueryParams());
-    })
+    }),
   );
 
   fetching$: Observable<boolean> = this.store.fetchingList$;
@@ -120,9 +122,9 @@ export class PickupShelfOutListComponent implements OnInit, AfterViewInit {
 
   actions$ = combineLatest([this.list$, this.selectedIds$]).pipe(
     map(([items, selectedIds]) =>
-      items?.find((item) => selectedIds.find((orderItemSubsetId) => item.orderItemSubsetId === orderItemSubsetId))
+      items?.find((item) => selectedIds.find((orderItemSubsetId) => item.orderItemSubsetId === orderItemSubsetId)),
     ),
-    map((item) => item?.actions?.filter((action) => this.selectionRules(action)))
+    map((item) => item?.actions?.filter((action) => this.selectionRules(action))),
   );
 
   loadingFetchedActionButton$ = new BehaviorSubject<boolean>(false);
@@ -135,7 +137,7 @@ export class PickupShelfOutListComponent implements OnInit, AfterViewInit {
     private _uiModal: UiModalService,
     private _pickUpShelfOutNavigation: PickUpShelfOutNavigationService,
     private _cache: CacheService,
-    private _router: Router
+    private _router: Router,
   ) {}
 
   ngOnInit() {
@@ -190,7 +192,7 @@ export class PickupShelfOutListComponent implements OnInit, AfterViewInit {
 
   getSelectedItem$(item: DBHOrderItemListItemDTO) {
     return this.store.selectedListItems$.pipe(
-      map((selectedListItems) => selectedListItems?.find((i) => i?.orderItemSubsetId === item?.orderItemSubsetId))
+      map((selectedListItems) => selectedListItems?.find((i) => i?.orderItemSubsetId === item?.orderItemSubsetId)),
     );
   }
 
@@ -204,7 +206,7 @@ export class PickupShelfOutListComponent implements OnInit, AfterViewInit {
         } else {
           return item?.actions?.some((action) => this.selectionRules(action));
         }
-      })
+      }),
     );
   }
 

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

@@ -19,6 +19,9 @@
         [routerLink]="customerDetailsRoute.path"
         [queryParams]="customerDetailsRoute.queryParams"
         [queryParamsHandling]="'merge'"
+        matomoClickCategory="pickup-shelf-details-header-nav-menu"
+        matomoClickAction="click"
+        matomoClickName="customer-details"
         >Kundendetails</a
       >
       <a
@@ -27,6 +30,9 @@
         [routerLink]="ordersRoute.path"
         [queryParams]="ordersRoute.queryParams"
         [queryParamsHandling]="'merge'"
+        matomoClickCategory="pickup-shelf-details-header-nav-menu"
+        matomoClickAction="click"
+        matomoClickName="customer-orders"
         >Bestellungen</a
       >
     </shared-menu>

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

@@ -8,6 +8,7 @@ import { IconComponent } from '@shared/components/icon';
 import { SharedMenuModule } from '@shared/components/menu';
 import { CustomerSearchNavigation } from '@shared/services';
 import { CustomerInfoDTO } from '@swagger/crm';
+import { MatomoModule } from 'ngx-matomo-client';
 import { combineLatest } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -23,7 +24,7 @@ export interface PickUpShelfDetailsHeaderNavMenuComponentState {
   standalone: true,
   host: { class: 'page-pickup-shelf-details-header-nav-menu' },
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CdkMenuModule, SharedMenuModule, IconComponent, RouterLink, NgIf, AsyncPipe],
+  imports: [CdkMenuModule, SharedMenuModule, IconComponent, RouterLink, NgIf, AsyncPipe, MatomoModule],
 })
 export class PickUpShelfDetailsHeaderNavMenuComponent extends ComponentStore<PickUpShelfDetailsHeaderNavMenuComponentState> {
   @Input() set customer(value: CustomerInfoDTO) {
@@ -39,14 +40,14 @@ export class PickUpShelfDetailsHeaderNavMenuComponent extends ComponentStore<Pic
   readonly showCustomerDetails$ = this.select((state) => state.showCustomerDetails);
 
   ordersRoute$ = this.customer$.pipe(
-    map((customer) => !!customer && this._navigation.ordersRoute({ processId: Date.now(), customerId: customer?.id, customer }))
+    map((customer) => !!customer && this._navigation.ordersRoute({ processId: Date.now(), customerId: customer?.id, customer })),
   );
 
   customerDetailsRoute$ = combineLatest([this.showCustomerDetails$, this.customer$]).pipe(
     map(
       ([showCustomerDetails, customer]) =>
-        showCustomerDetails && !!customer && this._navigation.detailsRoute({ processId: Date.now(), customerId: customer?.id, customer })
-    )
+        showCustomerDetails && !!customer && this._navigation.detailsRoute({ processId: Date.now(), customerId: customer?.id, customer }),
+    ),
   );
 
   constructor(private _navigation: CustomerSearchNavigation) {

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

@@ -15,15 +15,14 @@
         class="page-pickup-shelf-details-header__edit-cta bg-transparent text-brand font-bold border-none text-p1"
         *ngIf="editClick.observers.length"
         (click)="editClick.emit(orderItem)"
+        matomoClickCategory="pickup-shelf-details-header"
+        matomoClickAction="click"
+        matomoClickName="edit"
       >
         Bearbeiten
       </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>
@@ -80,6 +79,9 @@
                 [uiOverlayTrigger]="statusDropdown"
                 [disabled]="changeStatusDisabled$ | async"
                 #dropdown="uiOverlayTrigger"
+                matomoClickCategory="pickup-shelf-details-header"
+                matomoClickAction="click"
+                matomoClickName="status-dropdown"
               >
                 <div class="mr-[0.375rem]">
                   {{ orderItem?.processingStatus | processingStatus }}
@@ -92,7 +94,14 @@
                 ></shared-icon>
               </button>
               <ui-dropdown #statusDropdown yPosition="below" xPosition="after" [xOffset]="8">
-                <button uiDropdownItem *ngFor="let action of statusActions$ | async" (click)="handleActionClick(action)">
+                <button
+                  uiDropdownItem
+                  *ngFor="let action of statusActions$ | async"
+                  (click)="handleActionClick(action)"
+                  matomoClickCategory="pickup-shelf-details-header"
+                  matomoClickAction="select"
+                  [matomoClickName]="action.label"
+                >
                   {{ action.label }}
                 </button>
               </ui-dropdown>
@@ -162,12 +171,15 @@
 
   <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"
         [disabled]="!isKulturpass && (!!orderItem?.features?.paid || (changeDateDisabled$ | async))"
         class="cta-pickup-deadline"
+        matomoClickCategory="pickup-shelf-details-header"
+        matomoClickAction="click"
+        matomoClickName="pickup-deadline"
       >
         <strong class="border-r border-[#AEB7C1] pr-4">
           {{ orderItem?.pickUpDeadline | date: 'dd.MM.yy' }}
@@ -186,17 +198,19 @@
       >
       </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"
         [disabled]="(!isKulturpass && !!orderItem?.features?.paid) || (changeDateDisabled$ | async)"
         class="cta-pickup-preferred"
+        matomoClickCategory="pickup-shelf-details-header"
+        matomoClickAction="click"
+        matomoClickName="pickup-preferred"
       >
         <strong class="border-r border-[#AEB7C1] pr-4" *ngIf="findLatestPreferredPickUpDate$ | async; let pickUpDate; else: selectTemplate">
           {{ pickUpDate | date: 'dd.MM.yy' }}
@@ -218,17 +232,19 @@
       >
       </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"
         [uiOverlayTrigger]="uiDatepicker"
         #datepicker="uiOverlayTrigger"
+        matomoClickCategory="pickup-shelf-details-header"
+        matomoClickAction="click"
+        matomoClickName="vsl-lieferdatum"
       >
         <span class="border-r border-[#AEB7C1] pr-4">
           {{ orderItem?.estimatedShippingDate | date: 'dd.MM.yy' }}
@@ -247,6 +263,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

@@ -14,6 +14,7 @@ import { UiDatepickerModule } from '@ui/datepicker';
 import { PickUpShelfDetailsHeaderNavMenuComponent } from '../pickup-shelf-details-header-nav-menu/pickup-shelf-details-header-nav-menu.component';
 import { SkeletonLoaderComponent } from '@shared/components/loader';
 import { toSignal } from '@angular/core/rxjs-interop';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @Component({
   selector: 'page-pickup-shelf-details-header',
@@ -39,6 +40,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
     UiDatepickerModule,
     PickUpShelfDetailsHeaderNavMenuComponent,
     SkeletonLoaderComponent,
+    MatomoModule,
   ],
 })
 export class PickUpShelfDetailsHeaderComponent {
@@ -53,6 +55,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$;
@@ -73,12 +77,12 @@ export class PickUpShelfDetailsHeaderComponent {
         latestDate = new Date(
           subsetItems?.reduce((a, b) => {
             return new Date(a.data.preferredPickUpDate) > new Date(b.data.preferredPickUpDate) ? a : b;
-          })?.data?.preferredPickUpDate
+          })?.data?.preferredPickUpDate,
         );
       }
 
       return latestDate;
-    })
+    }),
   );
 
   notificationsChannel$: Observable<NotificationChannel> = this.order$.pipe(map((order) => order?.notificationChannels ?? 0));
@@ -113,7 +117,7 @@ export class PickUpShelfDetailsHeaderComponent {
   features$ = this.customer$.pipe(
     map((customer) => customer?.features || []),
     map((features) => features.filter((f) => f.enabled && !!f.description)),
-    shareReplay()
+    shareReplay(),
   );
 
   statusActions$ = this.orderItem$.pipe(map((orderItem) => orderItem?.actions?.filter((action) => action.enabled === false)));
@@ -121,14 +125,17 @@ export class PickUpShelfDetailsHeaderComponent {
   crudaUpdate$ = this.orderItem$.pipe(map((orederItem) => !!(orederItem?.cruda & 4)));
 
   editButtonDisabled$ = combineLatest([this.changeStatusLoader$, this.crudaUpdate$]).pipe(
-    map(([changeStatusLoader, crudaUpdate]) => changeStatusLoader || !crudaUpdate)
+    map(([changeStatusLoader, crudaUpdate]) => changeStatusLoader || !crudaUpdate),
   );
 
   canEditStatus$ = combineLatest([this.statusActions$, this.crudaUpdate$]).pipe(
-    map(([statusActions, crudaUpdate]) => statusActions?.length > 0 && crudaUpdate)
+    map(([statusActions, crudaUpdate]) => statusActions?.length > 0 && crudaUpdate),
   );
 
-  constructor(private dateAdapter: DateAdapter, private cdr: ChangeDetectorRef) {}
+  constructor(
+    private dateAdapter: DateAdapter,
+    private cdr: ChangeDetectorRef,
+  ) {}
 
   async handleActionClick(action?: KeyValueDTOOfStringAndString) {
     this.changeStatusLoader$.next(true);

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

@@ -50,16 +50,24 @@
           <div>{{ orderItem.product?.name }}</div>
         </h3>
         <div class="history-wrapper flex flex-col items-end justify-center">
-          <button class="cta-history text-p1" (click)="historyClick.emit(orderItem)">
-            Historie
-          </button>
+          <button class="cta-history text-p1" (click)="historyClick.emit(orderItem)">Historie</button>
 
           <input
             *ngIf="selectable$ | async"
             [ngModel]="selected$ | async"
-            (ngModelChange)="setSelected($event)"
+            (ngModelChange)="
+              setSelected($event);
+              tracker.trackEvent({
+                category: 'pickup-shelf-list-item',
+                action: 'select',
+                name: orderItem?.product?.name,
+                value: $event ? 1 : 0,
+              })
+            "
             class="isa-select-bullet mt-4"
             type="checkbox"
+            matomoTracker
+            #tracker="matomo"
           />
         </div>
       </div>
@@ -72,7 +80,12 @@
             [showTrash]="false"
             [range]="orderItem?.quantity"
             [(ngModel)]="quantity"
+            (ngModelChange)="
+              tracker.trackEvent({ category: 'pickup-shelf-list-item', action: 'quantity', name: orderItem?.product?.name, value: $event })
+            "
             [showSpinner]="false"
+            matomoTracker
+            #tracker="matomo"
           >
           </ui-quantity-dropdown>
           <span class="overall-quantity">(von {{ orderItem?.overallQuantity }})</span>
@@ -257,6 +270,9 @@
               type="submit"
               *ngIf="specialCommentControl?.enabled && specialCommentControl.dirty"
               (click)="saveSpecialComment()"
+              matomoClickCategory="pickup-shelf-details-item"
+              matomoClickAction="save"
+              matomoClickName="special-comment"
             >
               Speichern
             </button>

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

@@ -25,6 +25,7 @@ import { Subject, combineLatest } from 'rxjs';
 import { PickupShelfDetailsStore } from '../../store';
 import { UiQuantityDropdownModule } from '@ui/quantity-dropdown';
 import { NotificationTypePipe } from './notification-type.pipe';
+import { MatomoModule } from 'ngx-matomo-client';
 
 export interface PickUpShelfDetailsItemComponentState {
   orderItem?: DBHOrderItemListItemDTO;
@@ -58,6 +59,7 @@ export interface PickUpShelfDetailsItemComponentState {
     UiQuantityDropdownModule,
     NotificationTypePipe,
     NavigateOnClickDirective,
+    MatomoModule,
   ],
 })
 export class PickUpShelfDetailsItemComponent extends ComponentStore<PickUpShelfDetailsItemComponentState> implements OnInit {
@@ -104,7 +106,7 @@ export class PickUpShelfDetailsItemComponent extends ComponentStore<PickUpShelfD
   readonly orderItem$ = this.select((s) => s.orderItem);
 
   emailNotificationDates$ = this.orderItem$.pipe(
-    switchMap((orderItem) => this._store.getEmailNotificationDate$(orderItem?.orderItemSubsetId))
+    switchMap((orderItem) => this._store.getEmailNotificationDate$(orderItem?.orderItemSubsetId)),
   );
 
   hasEmailNotification$ = this.emailNotificationDates$.pipe(map((dates) => dates?.length > 0));
@@ -114,7 +116,7 @@ export class PickUpShelfDetailsItemComponent extends ComponentStore<PickUpShelfD
   hasSmsNotification$ = this.smsNotificationDates$.pipe(map((dates) => dates?.length > 0));
 
   canChangeQuantity$ = combineLatest([this.orderItem$, this._store.fetchPartial$]).pipe(
-    map(([item, partialPickup]) => ([16, 8192].includes(item?.processingStatus) || partialPickup) && item.quantity > 1)
+    map(([item, partialPickup]) => ([16, 8192].includes(item?.processingStatus) || partialPickup) && item.quantity > 1),
   );
 
   get quantity() {
@@ -141,7 +143,7 @@ export class PickUpShelfDetailsItemComponent extends ComponentStore<PickUpShelfD
   }
 
   readonly selected$ = combineLatest([this.orderItem$, this._store.selectedOrderItemIds$]).pipe(
-    map(([orderItem, selectedItems]) => selectedItems.includes(orderItem?.orderItemSubsetId))
+    map(([orderItem, selectedItems]) => selectedItems.includes(orderItem?.orderItemSubsetId)),
   );
 
   @Output()
@@ -156,7 +158,7 @@ export class PickUpShelfDetailsItemComponent extends ComponentStore<PickUpShelfD
   }
 
   readonly selectable$ = combineLatest([this._store.orderItems$, this._store.fetchPartial$]).pipe(
-    map(([orderItems, fetchPartial]) => orderItems.length > 1 && this.isItemSelectable && fetchPartial)
+    map(([orderItems, fetchPartial]) => orderItems.length > 1 && this.isItemSelectable && fetchPartial),
   );
 
   get receipts() {
@@ -175,7 +177,7 @@ export class PickUpShelfDetailsItemComponent extends ComponentStore<PickUpShelfD
 
   more$ = this.select((s) => s.more);
 
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   expanded: boolean = false;
 

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

@@ -5,6 +5,10 @@
     [class.selected]="tag === (selected$ | async) && !inputFocus.focused"
     *ngFor="let tag of defaultTags"
     (click)="setCompartmentInfo(tag)"
+    matomoClickCategory="pickup-shelf-details-tags"
+    matomoClickAction="click"
+    [matomoClickName]="tag"
+    [matomoClickValue]="(selected$ | async) === tag ? 0 : 1"
   >
     {{ tag }}
   </button>
@@ -23,6 +27,10 @@
       placeholder="..."
       [size]="controlSize$ | async"
       maxlength="15"
+      [matomoTracker]="['blur']"
+      matomoCategory="pickup-shelf-details-tags"
+      matomoAction="blur"
+      matomoName="tag-input"
     />
   </button>
 </div>

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

@@ -2,6 +2,7 @@ import { AsyncPipe, NgFor } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, forwardRef } from '@angular/core';
 import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { UiCommonModule } from '@ui/common';
+import { MatomoModule } from 'ngx-matomo-client';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { first, map } from 'rxjs/operators';
 
@@ -12,7 +13,7 @@ import { first, map } from 'rxjs/operators';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page-pickup-shelf-details-tags' },
   standalone: true,
-  imports: [NgFor, UiCommonModule, FormsModule, AsyncPipe],
+  imports: [NgFor, UiCommonModule, FormsModule, AsyncPipe, MatomoModule],
   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => PickUpShelfDetailsTagsComponent), multi: true }],
 })
 export class PickUpShelfDetailsTagsComponent implements OnInit, OnDestroy, ControlValueAccessor {
@@ -59,7 +60,7 @@ export class PickUpShelfDetailsTagsComponent implements OnInit, OnDestroy, Contr
 
   ngOnInit() {
     this.subscription.add(
-      this.selected$.pipe(map((selected) => (this.defaultTags.includes(selected) ? '' : selected))).subscribe(this.inputValueSubject)
+      this.selected$.pipe(map((selected) => (this.defaultTags.includes(selected) ? '' : selected))).subscribe(this.inputValueSubject),
     );
   }
 

apps/page/pickup-shelf/src/lib/shared/pickup-shelf-list-item/pickup-shelf-list-item.component.html

@@ -104,9 +104,14 @@
       <input
         (click)="$event.stopPropagation()"
         [ngModel]="selectedItem"
-        (ngModelChange)="setSelected()"
+        (ngModelChange)="
+          setSelected();
+          tracker.trackEvent({ category: 'pickup-shelf-list-item', action: 'select', name: item?.product?.name, value: $event ? 1 : 0 })
+        "
         class="isa-select-bullet"
         type="checkbox"
+        matomoTracker
+        #tracker="matomo"
       />
     </div>
 

apps/page/pickup-shelf/src/lib/shared/pickup-shelf-list-item/pickup-shelf-list-item.component.ts

@@ -11,6 +11,7 @@ import { FormsModule } from '@angular/forms';
 import { PickupShelfStore } from '../../store';
 import { map } from 'rxjs/operators';
 import { CacheService } from '@core/cache';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @Component({
   selector: 'page-pickup-shelf-list-item',
@@ -32,6 +33,7 @@ import { CacheService } from '@core/cache';
     UiCommonModule,
     PickupShelfProcessingStatusPipe,
     NavigateOnClickDirective,
+    MatomoModule,
   ],
   providers: [PickupShelfProcessingStatusPipe],
 })
@@ -80,13 +82,13 @@ export class PickUpShelfListItemComponent {
   }
 
   selected$ = this.store.selectedListItems$.pipe(
-    map((selectedListItems) => selectedListItems?.find((item) => item?.orderItemSubsetId === this.item?.orderItemSubsetId))
+    map((selectedListItems) => selectedListItems?.find((item) => item?.orderItemSubsetId === this.item?.orderItemSubsetId)),
   );
 
   constructor(
     private _elRef: ElementRef,
     private _environment: EnvironmentService,
-    private _processingStatusPipe: PickupShelfProcessingStatusPipe
+    private _processingStatusPipe: PickupShelfProcessingStatusPipe,
   ) {}
 
   onDetailsClick() {
@@ -124,7 +126,7 @@ export class PickUpShelfListItemComponent {
         store: 'PickupShelfDetailsStore',
       },
       [this.item],
-      { persist: false, ttl: 1000 }
+      { persist: false, ttl: 1000 },
     );
   }
 

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 });
   };

apps/page/remission/src/lib/modals/add-product-modal/add-product-modal.component.ts

@@ -16,7 +16,7 @@ import { AddProductModalData } from './add-product-modal.data';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AddProductModalComponent implements OnInit, OnDestroy {
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   get processId() {
     return this._config.get('process.ids.remission');

apps/page/remission/src/lib/remission-list/remission-filter/remission-filter.component.ts

@@ -16,7 +16,7 @@ export class RemissionFilterComponent implements OnDestroy {
 
   filter$ = this.store.filter$.pipe(map((filter) => UiFilter.create(filter)));
 
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   constructor(public store: RemissionListComponentStore) {}
 

apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.component.html

@@ -30,9 +30,15 @@
   </div>
 
   <div class="grid grid-flow-row gap-1 w-48">
-    <div class="overflow-hidden overflow-ellipsis whitespace-nowrap" *ngIf="checkFormatAvailable()">
-      <img *ngIf="iconExists()" class="inline" [src]="formatIconUrl" [alt]="item.formatDetail" />
-      <span class="ml-1 font-bold format-detail">{{ item.formatDetail }}</span>
+    <div class="overflow-hidden overflow-ellipsis whitespace-nowrap" *ngIf="formatAvailable">
+      <img
+        *ngIf="formatIconAvailable"
+        class="inline mr-1"
+        [src]="formatIconUrl"
+        [alt]="item.formatDetail"
+        (error)="formatIconAvailable = false"
+      />
+      <span class="font-bold format-detail">{{ item.formatDetail }}</span>
     </div>
     <div class="font-bold ean">
       {{ item.ean }}

apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.component.ts

@@ -15,7 +15,6 @@ import { first, takeUntil } from 'rxjs/operators';
 import { AddProductToShippingDocumentModalComponent } from '../../modals/add-product-to-shipping-document-modal/add-product-to-shipping-document-modal.component';
 import { RemissionListComponentStore } from '../remission-list.component-store';
 import { RemissionListComponent } from '../remission-list.component';
-import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'page-remission-list-item',
@@ -24,7 +23,7 @@ import { HttpClient } from '@angular/common/http';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RemissionListItemComponent implements OnDestroy {
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   @Input()
   item: RemissionListItem;
@@ -60,11 +59,16 @@ export class RemissionListItemComponent implements OnDestroy {
     return `/assets/images/Icon_${this.item.dto.product.format}.svg`;
   }
 
+  get formatAvailable() {
+    return !!this.item.format && !!this.item.formatDetail && this.item.format !== 'UNKNOWN';
+  }
+
+  formatIconAvailable: boolean = true;
+
   constructor(
     private _modal: UiModalService,
     private _remissionService: DomainRemissionService,
     private _store: RemissionListComponentStore,
-    private readonly _http: HttpClient,
     @Host() private _listComponent: RemissionListComponent
   ) {}
 
@@ -73,19 +77,6 @@ export class RemissionListItemComponent implements OnDestroy {
     this._onDestroy$.complete();
   }
 
-  checkFormatAvailable() {
-    return !!this.item.format && !!this.item.formatDetail && this.item.format !== 'UNKNOWN';
-  }
-
-  async iconExists(): Promise<boolean> {
-    try {
-      const response = await this._http.head(this.formatIconUrl, { observe: 'response' }).pipe(first()).toPromise();
-      return response?.status === 200;
-    } catch {
-      return false;
-    }
-  }
-
   addProductToShippingDocument() {
     const modal = this._modal.open({
       content: AddProductToShippingDocumentModalComponent,

apps/page/remission/src/lib/remission-list/remission-list.component.ts

@@ -37,7 +37,7 @@ export class RemissionListComponent implements OnInit, OnDestroy {
   @ViewChild('scrollContainer', { static: true })
   scrollContainer: CdkVirtualScrollViewport;
 
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   get processId() {
     return this._config.get('process.ids.remission');

apps/page/remission/src/lib/remission.component.ts

@@ -16,7 +16,7 @@ import { ToasterService } from '@shared/shell';
   providers: [RemissionListComponentStore],
 })
 export class RemissionComponent implements OnInit, OnDestroy {
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   get processId() {
     return this._config.get('process.ids.remission');

apps/page/task-calendar/src/lib/components/task-info/task-info.component.ts

@@ -111,7 +111,7 @@ export class TaskInfoComponent implements OnChanges {
 
   indicatorColor$ = this.info$.pipe(map((info) => this.domainTaskCalendarService.getProcessingStatusColorCode(info)));
 
-  private noteAdded$ = new Subject();
+  private noteAdded$ = new Subject<void>();
 
   notes$ = combineLatest([this.info$, this.noteAdded$.pipe(startWith([undefined]))]).pipe(
     switchMap(([info]) => this.domainTaskCalendarService.getComments({ infoId: info.id })),

apps/page/task-calendar/src/lib/components/task-searchbar/task-searchbar.component.ts

@@ -17,7 +17,7 @@ import { TaskCalendarStore } from '../../task-calendar.store';
   exportAs: 'taskSearchbar',
 })
 export class TaskSearchbarComponent implements OnInit, OnDestroy {
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   control = new UntypedFormControl('', [Validators.minLength(3)]);
 

apps/page/task-calendar/src/lib/containers/task-calendar-filter/task-calendar-filter.component.ts

@@ -15,7 +15,7 @@ import { TaskCalendarStore } from '../../task-calendar.store';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TaskCalendarFilterComponent implements OnInit, OnDestroy {
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
   @Output() exitFilter = new EventEmitter<void>();
 
   filter$ = new BehaviorSubject<UiFilter>(undefined);

apps/page/task-calendar/src/lib/page-task-calendar.component.ts

@@ -16,7 +16,7 @@ import { ApplicationService } from '@core/application';
   providers: [TaskCalendarStore],
 })
 export class PageTaskCalendarComponent implements OnInit, OnDestroy {
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   @ViewChild('searchInput', { static: true })
   searchInput: ElementRef;

apps/page/task-calendar/src/lib/pages/task-search/task-search.component.ts

@@ -18,7 +18,7 @@ import { TaskCalendarStore } from '../../task-calendar.store';
   providers: [DatePipe],
 })
 export class TaskSearchComponent implements OnInit, OnDestroy, AfterViewInit {
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
   private _taskCalendarKey = this._config.get('process.ids.taskCalendar');
 
   today = this.dateAdapter.today();

apps/shared/components/branch-selector/src/lib/branch-selector.component.ts

@@ -95,7 +95,7 @@ export class BranchSelectorComponent implements OnInit, OnDestroy, AfterViewInit
   }
   private _value: BranchDTO;
 
-  private _onDestroy$ = new Subject<boolean>();
+  private _onDestroy$ = new Subject<void>();
 
   @Output() valueChange = new EventEmitter<BranchDTO>();
 

apps/shared/components/filter/src/lib/filter-group/filter-input-group-main/filter-input-group-main.component.html

@@ -11,15 +11,19 @@
   [scanner]="scanner"
 >
   <ui-autocomplete *ngIf="autocompleteProvider">
-    <button *ngFor="let item of autocompleteResults$ | async" [uiAutocompleteItem]="item.query">
+    <button
+      *ngFor="let item of autocompleteResults$ | async"
+      [uiAutocompleteItem]="item.query"
+      matomoClickAction="select"
+      matomoClickCategory="autocomplete"
+      [matomoClickName]="item.display"
+    >
       {{ item.display }}
     </button>
   </ui-autocomplete>
 </shared-searchbox>
 <ng-container *ngIf="showDescription && uiInput?.description">
-  <button [uiOverlayTrigger]="tooltipContent" #tooltip="uiOverlayTrigger" class="info-tooltip-button" type="button">
-    i
-  </button>
+  <button [uiOverlayTrigger]="tooltipContent" #tooltip="uiOverlayTrigger" class="info-tooltip-button" type="button">i</button>
   <ui-tooltip #tooltipContent yPosition="above" xPosition="after" [yOffset]="-16">
     {{ uiInput.description }}
   </ui-tooltip>

apps/shared/components/filter/src/lib/filter-group/filter-input-group-main/filter-input-group-main.module.ts

@@ -6,9 +6,10 @@ import { UiAutocompleteModule } from '@ui/autocomplete';
 import { UiTooltipModule } from 'apps/ui/tooltip/src/public-api';
 import { UiCommonModule } from '@ui/common';
 import { SearchboxModule } from '@shared/components/searchbox';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @NgModule({
-  imports: [CommonModule, UiCommonModule, SearchboxModule, UiAutocompleteModule, UiTooltipModule],
+  imports: [CommonModule, UiCommonModule, SearchboxModule, UiAutocompleteModule, UiTooltipModule, MatomoModule],
   exports: [FilterInputGroupMainComponent],
   declarations: [FilterInputGroupMainComponent],
 })

apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.html

@@ -5,7 +5,9 @@
       [attr.data-label]="label"
       class="order-by-filter-button"
       type="button"
-      (click)="setActive(label)"
+      (click)="setActive(label); tracker.trackEvent({ category: 'order-by-filter', action: 'click', name: label })"
+      matomoTracker
+      #tracker="matomo"
     >
       <span>
         {{ label }}

apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.module.ts

@@ -3,9 +3,10 @@ import { NgModule } from '@angular/core';
 import { UiIconModule } from '@ui/icon';
 
 import { OrderByFilterComponent } from './order-by-filter.component';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @NgModule({
-  imports: [CommonModule, UiIconModule],
+  imports: [CommonModule, UiIconModule, MatomoModule],
   exports: [OrderByFilterComponent],
   declarations: [OrderByFilterComponent],
   providers: [],

apps/shared/components/filter/src/lib/shared/filter-input-chip/filter-input-chip.component.html

@@ -9,6 +9,10 @@
   [attr.data-key]="uiInput?.key"
   [attr.data-type]="uiInput?.type"
   [attr.data-selected]="uiInput?.selected"
+  matomoClickCategory="filter-chip"
+  matomoClickAction="click"
+  [matomoClickName]="uiInput?.label"
+  [matomoClickValue]="uiInput?.selected ? 0 : 1"
 >
   {{ uiInput?.label }}
 </button>
@@ -24,6 +28,10 @@
     [attr.data-key]="uiInput?.key"
     [attr.data-type]="uiInput?.type"
     [attr.data-selected]="uiInput?.selected"
+    matomoClickCategory="filter-chip"
+    matomoClickAction="click"
+    [matomoClickName]="uiInput?.label"
+    [matomoClickValue]="uiInput?.selected ? 0 : 1"
   >
     {{ option?.label }}
   </button>

apps/shared/components/filter/src/lib/shared/filter-input-chip/filter-input-chip.module.ts

@@ -2,9 +2,10 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { FilterInputChipComponent } from './filter-input-chip.component';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, MatomoModule],
   exports: [FilterInputChipComponent],
   declarations: [FilterInputChipComponent],
 })

apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.html

@@ -6,7 +6,16 @@
   [attr.data-selected]="uiOption?.selected"
   [attr.data-target]="uiOption?.expanded"
 >
-  <ui-checkbox [ngModel]="uiOption?.selected" (ngModelChange)="uiOption?.setSelected($event)" [indeterminate]="hasPartiallyCheckedChildren">
+  <ui-checkbox
+    [ngModel]="uiOption?.selected"
+    (ngModelChange)="
+      uiOption?.setSelected($event);
+      tracker.trackEvent({ category: 'filter-option-checkbox', action: 'click', name: uiOption?.label, value: $event ? 1 : 0 })
+    "
+    [indeterminate]="hasPartiallyCheckedChildren"
+    matomoTracker
+    #tracker="matomo"
+  >
     {{ uiOption?.label }}
   </ui-checkbox>
   <button

apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.module.ts

@@ -5,9 +5,10 @@ import { FilterInputOptionBoolComponent } from './filter-input-option-bool.compo
 import { UiCheckboxModule } from '@ui/checkbox';
 import { FormsModule } from '@angular/forms';
 import { UiIconModule } from '@ui/icon';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @NgModule({
-  imports: [CommonModule, FormsModule, UiCheckboxModule, UiIconModule],
+  imports: [CommonModule, FormsModule, UiCheckboxModule, UiIconModule, MatomoModule],
   exports: [FilterInputOptionBoolComponent],
   declarations: [FilterInputOptionBoolComponent],
 })

apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-date-range/filter-input-option-date-range.component.html

@@ -20,6 +20,9 @@
           class="grid items-center justify-center h-10 w-14 my-2 border-l solid border-[#AEB7C1] text-[#596470]"
           [uiOverlayTrigger]="dpStart"
           #dpStartTrigger="uiOverlayTrigger"
+          matomoClickCategory="filter-option-date-range"
+          matomoClickAction="open-datepicker"
+          matomoClickName="start"
         >
           <shared-icon icon="calendar-today"></shared-icon>
         </button>
@@ -48,6 +51,9 @@
           class="grid items-center justify-center h-10 w-14 my-2 border-l solid border-[#AEB7C1] text-[#596470]"
           [uiOverlayTrigger]="dpStop"
           #dpStartTrigger="uiOverlayTrigger"
+          matomoClickCategory="filter-option-date-range"
+          matomoClickAction="open-datepicker"
+          matomoClickName="stop"
         >
           <shared-icon icon="calendar-today"></shared-icon>
         </button>

apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-date-range/filter-input-option-date-range.module.ts

@@ -11,6 +11,7 @@ import { IconComponent } from '@shared/components/icon';
 import { InputControlModule } from '@shared/components/input-control';
 import { UiDateInputDirective } from '@ui/input';
 import { DateInputDirective } from '@shared/forms';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @NgModule({
   imports: [
@@ -24,6 +25,7 @@ import { DateInputDirective } from '@shared/forms';
     IconComponent,
     UiDateInputDirective,
     DateInputDirective,
+    MatomoModule,
   ],
   exports: [FilterInputOptionDateRangeComponent],
   declarations: [FilterInputOptionDateRangeComponent],

apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-number-range/filter-input-option-number-range.component.html

@@ -9,7 +9,16 @@
   >
     <div class="option-wrapper">
       <ui-form-control [label]="uiStartOption?.label">
-        <input type="text" [ngModel]="uiStartOption?.value" (ngModelChange)="uiStartOption?.setValue($event)" />
+        <input
+          type="text"
+          [ngModel]="uiStartOption?.value"
+          (ngModelChange)="uiStartOption?.setValue($event)"
+          #startModel="ngModel"
+          [matomoTracker]="['blur']"
+          matomoCategory="filter-option-date-rage"
+          matomoName="start"
+          [matomoValue]="startModel.value"
+        />
       </ui-form-control>
     </div>
   </div>
@@ -23,7 +32,16 @@
   >
     <div class="option-wrapper">
       <ui-form-control [label]="uiStopOption?.label">
-        <input type="text" [ngModel]="uiStopOption?.value" (ngModelChange)="uiStopOption?.setValue($event)" />
+        <input
+          type="text"
+          [ngModel]="uiStopOption?.value"
+          (ngModelChange)="uiStopOption?.setValue($event)"
+          #stopModel="ngModel"
+          [matomoTracker]="['blur']"
+          matomoCategory="filter-option-date-rage"
+          matomoName="stop"
+          [matomoValue]="stopModel.value"
+        />
       </ui-form-control>
     </div>
   </div>

apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-number-range/filter-input-option-number-range.module.ts

@@ -4,9 +4,10 @@ import { CommonModule } from '@angular/common';
 import { InputOptionNumberRangeComponent } from './filter-input-option-number-range.component';
 import { UiFormControlModule } from '@ui/form-control';
 import { FormsModule } from '@angular/forms';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @NgModule({
-  imports: [CommonModule, UiFormControlModule, FormsModule],
+  imports: [CommonModule, UiFormControlModule, FormsModule, MatomoModule],
   exports: [InputOptionNumberRangeComponent],
   declarations: [InputOptionNumberRangeComponent],
 })

apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-tri-state/filter-input-option-tri-state.component.html

@@ -6,7 +6,23 @@
   [attr.data-selected]="uiOption?.selected"
 >
   <div>
-    <ui-switch [ngModel]="uiOption?.selected" (ngModelChange)="uiOption?.setSelected($event)" labelOn="mit" labelOff="ohne"> </ui-switch>
+    <ui-switch
+      [ngModel]="uiOption?.selected"
+      (ngModelChange)="
+        uiOption?.setSelected($event);
+        tracker.trackEvent({
+          category: 'filter-option-tri-state',
+          action: 'click',
+          name: uiOption?.label,
+          value: $event === true ? 1 : $event === false ? -1 : 0,
+        })
+      "
+      labelOn="mit"
+      labelOff="ohne"
+      matomoTracker
+      #tracker="matomo"
+    >
+    </ui-switch>
     {{ uiOption?.label }}
   </div>
   <button

apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-tri-state/filter-input-option-tri-state.module.ts

@@ -5,9 +5,10 @@ import { InputOptionTriStateComponent } from './filter-input-option-tri-state.co
 import { FormsModule } from '@angular/forms';
 import { UiIconModule } from '@ui/icon';
 import { UiSwitchModule } from '@ui/switch';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @NgModule({
-  imports: [CommonModule, UiSwitchModule, FormsModule, UiIconModule],
+  imports: [CommonModule, UiSwitchModule, FormsModule, UiIconModule, MatomoModule],
   exports: [InputOptionTriStateComponent],
   declarations: [InputOptionTriStateComponent],
 })

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

@@ -144,7 +144,7 @@ export class SharedGoodsInOutOrderDetailsItemComponent extends ComponentStore<Sh
   showMore$ = this.more$.pipe(map((more) => more || this._auth.hasRole('CallCenter')));
 
   fetchHistory$ = new BehaviorSubject<boolean>(false);
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   constructor(
     private _host: SharedGoodsInOutOrderDetailsStore,

apps/shared/components/searchbox/src/lib/searchbox.component.html

@@ -12,6 +12,10 @@
       (focus)="clearHint(); focused.emit(true)"
       (blur)="focused.emit(false)"
       (keyup)="onKeyup($event)"
+      (keyup.enter)="tracker.trackEvent({ action: 'keyup enter', name: 'search' })"
+      matomoTracker
+      #tracker="matomo"
+      matomoCategory="searchbox"
     />
     <div *ngIf="showHint" class="searchbox-hint" (click)="focus()">{{ hint }}</div>
   </div>
@@ -26,10 +30,22 @@
       *ngIf="!canScan"
       (click)="emitSearch()"
       [disabled]="completeValue !== query"
+      matomoClickAction="click"
+      matomoClickCategory="searchbox"
+      matomoClickName="search"
     >
       <ui-icon icon="search" size="1.5rem"></ui-icon>
     </button>
-    <button tabindex="0" class="searchbox-scan-btn" type="button" *ngIf="canScan" (click)="startScan()">
+    <button
+      tabindex="0"
+      class="searchbox-scan-btn"
+      type="button"
+      *ngIf="canScan"
+      (click)="startScan()"
+      matomoClickAction="open"
+      matomoClickCategory="searchbox"
+      matomoClickName="scanner"
+    >
       <shared-icon icon="barcode-scan" [size]="32"></shared-icon>
     </button>
   </ng-container>