feat: display EBD deep links if value_pool_entry contains EBD key (#396)

---------

Co-authored-by: Konstantin <konstantin.klein+github@hochfrequenz.de>
Co-authored-by: olli <info@oliverlahr.de>

src/app/features/ahbs/components/ahb-table/ahb-table.component.html

@@ -31,7 +31,18 @@
           [class.font-bold]="isNewSegment(i)"
           [innerHTML]="line.segment_code | highlight: highlight()"></td>
         <td class="px-6 py-4" [innerHTML]="line.data_element | highlight: highlight()"></td>
-        <td class="px-6 py-4" [innerHTML]="line.value_pool_entry | highlight: highlight()"></td>
+        <td class="px-6 py-4">
+          @if (generateEbdDeepLink(line.value_pool_entry) !== null) {
+            <a
+              [href]="generateEbdDeepLink(line.value_pool_entry)"
+              target="_blank"
+              class="hover:underline font-bold text-ebd_primary flex flex-row gap-1 items-center">
+              {{ line.value_pool_entry }} <app-icon-link />
+            </a>
+          } @else {
+            {{ line.value_pool_entry }}
+          }
+        </td>
         <td class="px-6 py-4" [innerHTML]="line.name | highlight: highlight()"></td>
         <td class="px-6 py-4">
           <a

src/app/features/ahbs/components/ahb-table/ahb-table.component.ts

@@ -11,6 +11,7 @@ import {
 import { Ahb } from '../../../../core/api';
 import { HighlightPipe } from '../../../../shared/pipes/highlight.pipe';
 import { environment } from '../../../../environments/environment';
+import { IconLinkComponent } from '../../../../shared/components/icon-link/icon-link.component';
 
 interface ExpandedState {
   [key: number]: boolean;
@@ -19,7 +20,7 @@ interface ExpandedState {
 @Component({
   selector: 'app-ahb-table',
   standalone: true,
-  imports: [HighlightPipe],
+  imports: [HighlightPipe, IconLinkComponent],
   templateUrl: './ahb-table.component.html',
   styleUrl: './ahb-table.component.scss',
 })
@@ -160,6 +161,20 @@ export class AhbTableComponent {
     return `${environment.bedingungsbaumBaseUrl}/tree/?format=${this.getFormat(this.pruefi())}&format_version=${this.formatVersion()}&expression=${encodedExpression}`;
   }
 
+  generateEbdDeepLink(value_pool_entry: string | null): string | null {
+    if (!value_pool_entry || value_pool_entry.trim().length === 0) {
+      return null;
+    }
+    const regex = /^.*\b(?<ebd_key>E_\d+)\b.*$/;
+    const match = value_pool_entry.match(regex);
+    if (!match?.groups) {
+      return null;
+    }
+    const ebdKey = match.groups['ebd_key']!;
+    // e.g. https://ebd.stage.hochfrequenz.de/ebd/?formatversion=FV2504&ebd=E_0004
+    return `${environment.ebdBaseUrl}/ebd/?format_version=${this.formatVersion()}&ebd=${ebdKey}`;
+  }
+
   private getFormat(pruefi: string): string {
     const mapping: { [key: string]: string } = {
       '99': 'APERAK',

src/app/shared/components/icon-link/icon-link.component.html

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="17"
+  height="17"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="">
+  <path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" />
+  <path d="m21 3-9 9" />
+  <path d="M15 3h6v6" />
+</svg>

src/app/shared/components/icon-link/icon-link.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconLinkComponent } from './icon-link.component';
+
+describe('IconLinkComponent', () => {
+  let component: IconLinkComponent;
+  let fixture: ComponentFixture<IconLinkComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IconLinkComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IconLinkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/icon-link/icon-link.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-link',
+  standalone: true,
+  imports: [],
+  templateUrl: './icon-link.component.html',
+})
+export class IconLinkComponent {}

tailwind.config.js

@@ -8,6 +8,7 @@ module.exports = {
         secondary: '#CCA9AB',
         tint: '#F6ECED',
         offwhite: '#E7E6E5',
+        ebd_primary: '#8ba2d7',
       },
       fontFamily: {
         sans: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],