Landing page designs

src/app/app.config.ts

@@ -6,8 +6,6 @@ import { ApiModule } from './core/api';
 import { HttpClientModule } from '@angular/common/http';
 import { environment } from './environments/environment';
 
-console.log({ environment });
-
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes, withComponentInputBinding()),

src/app/core/helper/scroll-to-element.ts

@@ -0,0 +1,17 @@
+export const scrollToElement = (
+  element: HTMLElement,
+  offsetY = 0,
+  container: HTMLElement | undefined,
+) => {
+  if (!container) {
+    const elementPosition = element.getBoundingClientRect().top;
+    const offsetPosition = elementPosition + window.scrollY - offsetY;
+    window.scrollTo({ top: offsetPosition });
+    return;
+  }
+  const containerRect = container.getBoundingClientRect();
+  const elementRect = element.getBoundingClientRect();
+  const offsetPosition =
+    elementRect.top - containerRect.top + container.scrollTop - offsetY;
+  container.scrollTo({ top: offsetPosition });
+};

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

@@ -1,43 +1,54 @@
-<div class="relative overflow-x-auto">
-  <table
-    class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
-  >
-    <thead class="text-xs text-gray-700 uppercase bg-gray-50">
-      <tr>
-        <th scope="col" class="px-6 py-3">Segmentname</th>
-        <th scope="col" class="px-6 py-3">Segmentgruppe</th>
-        <th scope="col" class="px-6 py-3">Segment</th>
-        <th scope="col" class="px-6 py-3">Datenelement</th>
-        <th scope="col" class="px-6 py-3">Name</th>
-        <th scope="col" class="px-6 py-3">Bedingung</th>
+<table class="table-auto w-full text-sm text-gray-500">
+  <thead class="text-xs text-gray-700 uppercase bg-gray-50" #header>
+    <tr>
+      <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3 text-left">
+        Segmentname
+      </th>
+      <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3 text-left">
+        Segmentgruppe
+      </th>
+      <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3 text-left">
+        Segment
+      </th>
+      <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3 text-left">
+        Datenelement
+      </th>
+      <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3 text-left">
+        Name
+      </th>
+      <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3 text-left">
+        Bedingung
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    @for (line of lines(); track line.index) {
+      <tr class="border-b">
+        <td
+          class="px-6 py-4"
+          [innerHTML]="line.section_name | highlight: highlight()"
+        ></td>
+        <td
+          class="px-6 py-4"
+          [innerHTML]="line.segment_group_key | highlight: highlight()"
+        ></td>
+        <td
+          class="px-6 py-4"
+          [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.name | highlight: highlight()"
+        ></td>
+        <td
+          class="px-6 py-4"
+          [innerHTML]="line.ahb_expression | highlight: highlight()"
+        ></td>
       </tr>
-    </thead>
-    <tbody>
-      @for (line of lines; track line.index) {
-        <tr class="bg-white border-b">
-          <th
-            scope="row"
-            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
-          >
-            {{ line.section_name }}
-          </th>
-          <td class="px-6 py-4">
-            {{ line.segment_group_key }}
-          </td>
-          <td class="px-6 py-4">
-            {{ line.segment_code }}
-          </td>
-          <td class="px-6 py-4">
-            {{ line.data_element }}
-          </td>
-          <td class="px-6 py-4">
-            {{ line.name }}
-          </td>
-          <td class="px-6 py-4">
-            {{ line.ahb_expression }}
-          </td>
-        </tr>
-      }
-    </tbody>
-  </table>
-</div>
+    }
+  </tbody>
+</table>

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

@@ -1,22 +1,13 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { AhbTableComponent } from './ahb-table.component';
+import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
 
 describe('AhbTableComponent', () => {
-  let component: AhbTableComponent;
-  let fixture: ComponentFixture<AhbTableComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AhbTableComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(AhbTableComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+  beforeEach(async () => MockBuilder(AhbTableComponent));
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('should render', () => {
+    const fixture = MockRender(AhbTableComponent, {
+      lines: [],
+    });
+    ngMocks.formatHtml(fixture);
   });
 });

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

@@ -1,14 +1,99 @@
-import { Component, Input } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  computed,
+  effect,
+  input,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
 import { Ahb } from '../../../../core/api';
 import { JsonPipe } from '@angular/common';
+import { HighlightPipe } from '../../../../shared/pipes/highlight.pipe';
 
 @Component({
   selector: 'app-ahb-table',
   standalone: true,
-  imports: [JsonPipe],
+  imports: [JsonPipe, HighlightPipe],
   templateUrl: './ahb-table.component.html',
   styleUrl: './ahb-table.component.scss',
 })
 export class AhbTableComponent {
-  @Input({ required: true }) lines!: Ahb['lines'];
+  header = viewChild<ElementRef>('header');
+
+  lines = input.required<Ahb['lines']>();
+  highlight = input<string | undefined>();
+
+  selectElement = output<{ element: HTMLElement; offsetY: number }>();
+
+  markIndex = signal(0);
+
+  markElements = computed<HTMLElement[]>(() => {
+    const highlight = this.highlight();
+    const nativeElement = this.elementRef.nativeElement;
+    if (!highlight || !nativeElement) {
+      return [];
+    }
+    return nativeElement.querySelectorAll('mark');
+  });
+
+  selectedMarkElement = computed(() => {
+    const markIndex = this.markIndex();
+    const markElements = this.markElements();
+    if (markElements.length === 0 || markElements.length < markIndex + 1) {
+      return null;
+    }
+    return markElements[this.markIndex()];
+  });
+
+  constructor(private readonly elementRef: ElementRef) {
+    // reset index on highlight change
+    effect(
+      () => {
+        this.highlight();
+        this.markIndex.set(0);
+      },
+      {
+        allowSignalWrites: true,
+      },
+    );
+    effect(() => {
+      const selectedMarkElement = this.selectedMarkElement();
+      if (selectedMarkElement === null) {
+        return;
+      }
+      // make selected element orange
+      const markElements = this.markElements();
+      markElements.forEach((el) => el.classList.remove('bg-orange-500'));
+      selectedMarkElement.classList.add('bg-orange-500');
+      // notify outer scroll container
+      const header = this.header();
+      const headerHeight =
+        header?.nativeElement.getBoundingClientRect().height ?? 0;
+      this.selectElement.emit({
+        element: selectedMarkElement,
+        offsetY: headerHeight,
+      });
+    });
+  }
+
+  nextResult() {
+    const markIndex = this.markIndex() + 1;
+    const markElements = this.markElements();
+    if (markIndex < markElements.length) {
+      this.markIndex.set(markIndex);
+      return;
+    }
+    this.markIndex.set(0);
+  }
+
+  previousResult() {
+    const markIndex = this.markIndex() - 1;
+    if (markIndex >= 0) {
+      this.markIndex.set(markIndex);
+      return;
+    }
+    this.markIndex.set(this.markElements().length - 1);
+  }
 }

src/app/features/ahbs/components/format-version-select/format-version-select.component.html

@@ -2,17 +2,18 @@
   <div class="flex flex-col items-start mt-2 h-auto w-full">
     <select
       id="format-version-select"
-      class="inline-block border-2 border-white rounded bg-[#F6ECED] py-3 ps-3 pe-24 focus:outline-0 w-full"
+      class="inline-block border-2 border-white rounded bg-tint py-3 ps-3 pe-24 focus:outline-0 w-full"
       [formControl]="control"
       (change)="onChange ? onChange(control.value) : null"
     >
+      <option value="">Bitte auswählen</option>
       @for (formatVersion of formatVersions; track formatVersion) {
         <option [value]="formatVersion">{{ formatVersion }}</option>
       }
     </select>
     <label
       for="format-version-select"
-      class="ml-3 -mt-14 text-xs text-blue-600 inline-block text-[#737373] text-[12px] bg-white px-1"
+      class="ml-3 -mt-14 text-xs inline-block text-slate-500 text-[12px] bg-white px-1"
     >
       Formatversion
     </label>

src/app/features/ahbs/components/pruefi-input/pruefi-input.component.html

@@ -1,6 +1,6 @@
 <div class="flex flex-col items-start mt-2 w-full">
   <input
-    class="rounded border-2 border-white bg-[#F6ECED] py-2.5 px-2 focus:outline-0 w-full"
+    class="rounded border-2 border-white bg-tint py-2.5 px-2 focus:outline-0 w-full"
     type="text"
     list="pruefi-list"
     [formControl]="control"
@@ -9,7 +9,7 @@
   />
   <label
     for="format-version-select"
-    class="ml-3 -mt-14 text-xs text-blue-600 inline-block text-[#737373] text-[12px] bg-white px-1"
+    class="ml-3 -mt-14 text-xs inline-block text-slate-500 text-[12px] bg-white px-1"
   >
     Prüfidentifikator
   </label>