Merged PR 1861: feat(product-router-link): add shared product router link directive and builder

feat(product-router-link): add shared product router link directive and builder

Ref: #5111 #5169

libs/oms/feature/return-details/src/lib/return-details-order-group-item/return-details-order-group-item.component.html

@@ -5,17 +5,16 @@
   [attr.data-which]="i.product.ean"
 >
   <div uiItemRowProdcutImage>
-    <a href="#">
+    <img
-      <img
+      sharedProductRouterLink
-        sharedProductImage
+      sharedProductImage
-        [ean]="i.product.ean"
+      [ean]="i.product.ean"
-        [imageWidth]="100"
+      [imageWidth]="100"
-        [imageHeight]="100"
+      [imageHeight]="100"
-        alt=""
+      alt=""
-        data-what="product-image"
+      data-what="product-image"
-        [attr.data-which]="i.product.ean"
+      [attr.data-which]="i.product.ean"
-      />
+    />
-    </a>
   </div>
   <div class="text-isa-neutral-900 flex flex-col gap-2" uiItemRowProdcutTitle>
     <h4 class="isa-text-body-2-bold">{{ i.product.contributors }}</h4>

libs/oms/feature/return-details/src/lib/return-details-order-group-item/return-details-order-group-item.component.ts

@@ -18,6 +18,7 @@ import { ProductImageDirective } from '@isa/shared/product-image';
 import { ItemRowComponent } from '@isa/ui/item-rows';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import { ReturnDetailsOrderGroupItemControlsComponent } from '../return-details-order-group-item-controls/return-details-order-group-item-controls.component';
+import { ProductRouterLinkDirective } from '@isa/shared/product-router-link';
 
 @Component({
   selector: 'oms-feature-return-details-order-group-item',
@@ -33,6 +34,7 @@ import { ReturnDetailsOrderGroupItemControlsComponent } from '../return-details-
     CurrencyPipe,
     LowerCasePipe,
     ReturnDetailsOrderGroupItemControlsComponent,
+    ProductRouterLinkDirective,
   ],
   providers: [provideIcons({ ...ProductFormatIconGroup, isaActionClose })],
 })

libs/oms/feature/return-process/src/lib/return-process-questions/return-process-product-question/return-process-product-question.component.html

@@ -56,6 +56,7 @@
     <div class="flex flex-row gap-4">
       <img
         class="w-[3.375rem]"
+        sharedProductRouterLink
         sharedProductImage
         [ean]="p.ean"
         [alt]="p.name"

libs/oms/feature/return-process/src/lib/return-process-questions/return-process-product-question/return-process-product-question.component.ts

@@ -35,6 +35,7 @@ import { ProductImageDirective } from '@isa/shared/product-image';
 import { provideIcons } from '@ng-icons/core';
 import { isaActionScanner } from '@isa/icons';
 import { ScannerButtonComponent } from '@isa/core/scanner';
+import { ProductRouterLinkDirective } from '@isa/shared/product-router-link';
 
 const eanValidator: ValidatorFn = (
   control: AbstractControl,
@@ -62,6 +63,7 @@ const eanValidator: ValidatorFn = (
     ProductImageDirective,
     IconButtonComponent,
     ScannerButtonComponent,
+    ProductRouterLinkDirective,
   ],
   providers: [provideIcons({ isaActionScanner })],
 })

libs/oms/shared/product-info/src/lib/return-product-info/return-product-info.component.html

@@ -4,6 +4,7 @@
   data-which="return-product"
 >
   <img
+    sharedProductRouterLink
     sharedProductImage
     [ean]="product().ean"
     [alt]="product().name"

libs/oms/shared/product-info/src/lib/return-product-info/return-product-info.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { ProductImageDirective } from '@isa/shared/product-image';
+import { ProductRouterLinkDirective } from '@isa/shared/product-router-link';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { Product } from '@isa/oms/data-access';
 import { LowerCasePipe } from '@angular/common';
@@ -23,7 +24,12 @@ import { ProductFormatIconGroup } from '@isa/icons';
   styleUrls: ['./return-product-info.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ProductImageDirective, NgIcon, LowerCasePipe],
+  imports: [
+    ProductImageDirective,
+    ProductRouterLinkDirective,
+    NgIcon,
+    LowerCasePipe,
+  ],
   providers: [provideIcons({ ...ProductFormatIconGroup })],
 })
 export class ReturnProductInfoComponent {

libs/shared/product-router-link/README.md

@@ -0,0 +1,7 @@
+# shared-product-router-link
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test shared-product-router-link` to execute the unit tests.

libs/shared/product-router-link/eslint.config.mjs

@@ -0,0 +1,34 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'shared',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'shared',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/shared/product-router-link/jest.config.ts

@@ -0,0 +1,21 @@
+export default {
+  displayName: 'shared-product-router-link',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/libs/shared/product-router-link',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

libs/shared/product-router-link/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "shared-product-router-link",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/shared/product-router-link/src",
+  "prefix": "shared",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/shared/product-router-link/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

libs/shared/product-router-link/src/index.ts

@@ -0,0 +1 @@
+export * from './lib';

libs/shared/product-router-link/src/lib/index.ts

@@ -0,0 +1,6 @@
+export { ProductRouterLinkDirective } from './product-router-link.directive';
+export { ProductRouterLinkBuilder } from './product-router-link.types';
+export {
+  PRODUCT_ROUTER_LINK_BUILDER,
+  provideProductRouterLinkBuilder,
+} from './product-router-link.providers';

libs/shared/product-router-link/src/lib/product-router-link.directive.ts

@@ -0,0 +1,24 @@
+import { Directive, effect, inject, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { PRODUCT_ROUTER_LINK_BUILDER } from './product-router-link.providers';
+
+@Directive({
+  selector: '[sharedProductRouterLink]',
+  host: {
+    class: 'cursor-pointer',
+  },
+})
+export class ProductRouterLinkDirective extends RouterLink {
+  #builder = inject(PRODUCT_ROUTER_LINK_BUILDER);
+
+  ean = input.required<string>();
+
+  urlEffect = effect(async () => {
+    const ean = this.ean();
+    if (!ean) {
+      return;
+    }
+    const url = await this.#builder(ean);
+    this.routerLink = url;
+  });
+}

libs/shared/product-router-link/src/lib/product-router-link.providers.ts

@@ -0,0 +1,29 @@
+import { InjectionToken, Provider } from '@angular/core';
+import { ProductRouterLinkBuilder } from './product-router-link.types';
+
+/**
+ * Injection token for the product router link builder function.
+ * Provides a default implementation that builds a URL in the format:
+ * `/kunde/{timestamp}/product/details/{ean}/ean`
+ */
+export const PRODUCT_ROUTER_LINK_BUILDER =
+  new InjectionToken<ProductRouterLinkBuilder>('PRODUCT_ROUTER_LINK_BUILDER', {
+    factory: () => (ean: string) =>
+      `/kunde/${Date.now()}/product/details/${ean}/ean`,
+  });
+
+/**
+ * Provides a custom implementation of the product router link builder.
+ * @param builder Custom function to build product URLs from EANs
+ * @returns Provider array to be included in the application's providers
+ */
+export function provideProductRouterLinkBuilder(
+  builder: ProductRouterLinkBuilder,
+): Provider[] {
+  return [
+    {
+      provide: PRODUCT_ROUTER_LINK_BUILDER,
+      useValue: builder,
+    },
+  ];
+}

libs/shared/product-router-link/src/lib/product-router-link.types.ts

@@ -0,0 +1,7 @@
+/**
+ * Represents a function that builds a URL for a product based on its EAN.
+ * Can return either a Promise of a string or a string directly.
+ */
+export type ProductRouterLinkBuilder = (
+  ean: string,
+) => PromiseLike<string> | string;

libs/shared/product-router-link/src/test-setup.ts

@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+  errorOnUnknownElements: true,
+  errorOnUnknownProperties: true,
+});

libs/shared/product-router-link/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

libs/shared/product-router-link/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.ts"]
+}

libs/shared/product-router-link/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

tsconfig.base.json

@@ -72,6 +72,9 @@
       "@isa/oms/utils/translation": ["libs/oms/utils/translation/src/index.ts"],
       "@isa/shared/filter": ["libs/shared/filter/src/index.ts"],
       "@isa/shared/product-image": ["libs/shared/product-image/src/index.ts"],
+      "@isa/shared/product-router-link": [
+        "libs/shared/product-router-link/src/index.ts"
+      ],
       "@isa/ui/buttons": ["libs/ui/buttons/src/index.ts"],
       "@isa/ui/datepicker": ["libs/ui/datepicker/src/index.ts"],
       "@isa/ui/dialog": ["libs/ui/dialog/src/index.ts"],