feat: extended default mobile listing view type environment configura…

…tion (#1268) * refactor default product listing type handling to be usable for mobile|tablet|desktop * new format: `defaultProductListingViewType: { mobile: 'list', tablet: 'grid', desktop: 'list' }`
intershop · Sep 13, 2022 · 713675e · 713675e
1 parent e4ec8e7
commit 713675e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 30 deletions.
diff --git a/src/app/core/configurations/injection-keys.ts b/src/app/core/configurations/injection-keys.ts
@@ -2,7 +2,6 @@ import { InjectionToken } from '@angular/core';
 
 import { CookieConsentOptions } from 'ish-core/models/cookies/cookies.model';
 import { PriceUpdateType } from 'ish-core/models/price/price.model';
-import { ViewType } from 'ish-core/models/viewtype/viewtype.types';
 import { DataRetentionPolicy } from 'ish-core/utils/meta-reducers';
 
 import { environment } from '../../../environments/environment';
@@ -41,14 +40,10 @@ export const PRODUCT_LISTING_ITEMS_PER_PAGE = new InjectionToken<Environment['pr
 /**
  * default definition of the product listing view type
  */
-export const DEFAULT_PRODUCT_LISTING_VIEW_TYPE = new InjectionToken<ViewType>('defaultProductListingViewType', {
-  factory: () => environment.defaultProductListingViewType,
-});
-
-export const DEFAULT_PRODUCT_LISTING_VIEW_TYPE_MOBILE = new InjectionToken<ViewType>(
-  'defaultProductListingViewTypeMobile',
+export const DEFAULT_PRODUCT_LISTING_VIEW_TYPE = new InjectionToken<Environment['defaultProductListingViewType']>(
+  'defaultProductListingViewType',
   {
-    factory: () => environment.defaultProductListingViewTypeMobile,
+    factory: () => environment.defaultProductListingViewType,
   }
 );
 

diff --git a/src/app/core/store/shopping/product-listing/product-listing.effects.ts b/src/app/core/store/shopping/product-listing/product-listing.effects.ts
@@ -2,14 +2,13 @@ import { Inject, Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Store, select } from '@ngrx/store';
 import { isEqual } from 'lodash-es';
-import { distinctUntilChanged, filter, map, switchMap, take, withLatestFrom } from 'rxjs/operators';
+import { distinctUntilChanged, map, switchMap, take, withLatestFrom } from 'rxjs/operators';
 
 import {
   DEFAULT_PRODUCT_LISTING_VIEW_TYPE,
-  DEFAULT_PRODUCT_LISTING_VIEW_TYPE_MOBILE,
   PRODUCT_LISTING_ITEMS_PER_PAGE,
 } from 'ish-core/configurations/injection-keys';
-import { ViewType } from 'ish-core/models/viewtype/viewtype.types';
+import { DeviceType, ViewType } from 'ish-core/models/viewtype/viewtype.types';
 import { getDeviceType } from 'ish-core/store/core/configuration';
 import { selectQueryParam, selectQueryParams } from 'ish-core/store/core/router';
 import {
@@ -36,8 +35,8 @@ import { getProductListingViewType } from './product-listing.selectors';
 export class ProductListingEffects {
   constructor(
     @Inject(PRODUCT_LISTING_ITEMS_PER_PAGE) private itemsPerPage: number,
-    @Inject(DEFAULT_PRODUCT_LISTING_VIEW_TYPE) private defaultViewType: ViewType,
-    @Inject(DEFAULT_PRODUCT_LISTING_VIEW_TYPE_MOBILE) private defaultViewTypeMobile: ViewType,
+    @Inject(DEFAULT_PRODUCT_LISTING_VIEW_TYPE)
+    private defaultViewType: ViewType | Partial<Record<DeviceType, ViewType>>,
     private actions$: Actions,
     private store: Store
   ) {}
@@ -49,19 +48,19 @@ export class ProductListingEffects {
     )
   );
 
-  initializeDefaultViewType$ = createEffect(() =>
-    this.store.pipe(
-      filter(() => !SSR),
-      select(getProductListingViewType),
-      whenFalsy(),
-      withLatestFrom(this.store.pipe(select(getDeviceType))),
-      map(([, deviceType]) =>
-        setViewType(
-          deviceType === 'mobile' ? { viewType: this.defaultViewTypeMobile } : { viewType: this.defaultViewType }
-        )
+  initializeDefaultViewType$ =
+    !SSR &&
+    createEffect(() =>
+      this.store.pipe(
+        select(getProductListingViewType),
+        whenFalsy(),
+        withLatestFrom(this.store.pipe(select(getDeviceType))),
+        map(([, deviceType]) =>
+          typeof this.defaultViewType === 'object' ? this.defaultViewType[deviceType] : this.defaultViewType
+        ),
+        map(viewType => setViewType({ viewType }))
       )
-    )
-  );
+    );
 
   setViewTypeFromQueryParam$ = createEffect(() =>
     this.store.pipe(

diff --git a/src/environments/environment.model.ts b/src/environments/environment.model.ts
@@ -79,9 +79,15 @@ export interface Environment {
         master: number;
       };
 
-  // default viewType used for product listings
-  defaultProductListingViewType: ViewType;
-  defaultProductListingViewTypeMobile: ViewType;
+  /**
+   * default viewType used for product listings
+   *
+   * default value is 'grid'
+   *
+   * - to override it for all device types use `defaultProductListingViewType: 'list'`
+   * - to override it for mobile and tablet use `defaultProductListingViewType: { mobile: 'list', tablet: 'list' }`
+   */
+  defaultProductListingViewType?: ViewType | Partial<Record<DeviceType, ViewType>>;
 
   // default device type used for initial page responses
   defaultDeviceType: DeviceType;
@@ -148,8 +154,6 @@ export const ENVIRONMENT_DEFAULTS: Omit<Environment, 'icmChannel'> = {
     search: 12,
     master: 6,
   },
-  defaultProductListingViewType: 'grid',
-  defaultProductListingViewTypeMobile: 'grid',
   defaultDeviceType: 'mobile',
   fallbackLocales: ['en_US', 'de_DE', 'fr_FR'],
   multiSiteLocaleMap: {