Skip to content

Commit a6fa5ee

Browse files
TommyBomTommyBom
authored
UI improvements (#27)
1 parent 63c15dc commit a6fa5ee

15 files changed

+295
-121
lines changed

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"name": "ahbesser",
33
"version": "0.0.0",
44
"scripts": {
5+
"init": "npm run install-submodules",
56
"start": "concurrently \"npm run ng:start\" \"npm run server:watch\"",
67
"ng:start": "ng serve",
78
"ng:build": "ng build",
@@ -14,7 +15,8 @@
1415
"format:check": "prettier '**/*.{js,jsx,ts,tsx,html,css,scss,json,yml,md}' --check",
1516
"format": "prettier '**/*.{js,jsx,ts,tsx,html,css,scss,json,yml,md}' --write",
1617
"ng-openapi-gen": "ng-openapi-gen --input openapi.yml --output ./src/app/core/api --indexFile=true",
17-
"lint": "ng lint"
18+
"lint": "ng lint",
19+
"install-submodules": "git submodule update --init --recursive"
1820
},
1921
"watch": {
2022
"server:start": {

‎src/app/features/ahbs/components/ahb-search-form-header/ahb-search-form-header.component.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<form [formGroup]="headerSearchForm">
2+
<app-format-version-select
3+
class="inline-block me-3 h-16 w-64"
4+
formControlName="formatVersion"
5+
/>
6+
<app-pruefi-input
7+
class="inline-block h-16 w-64"
8+
formControlName="pruefi"
9+
[formatVersion]="headerSearchForm.controls.formatVersion.value"
10+
(ngModelChange)="onPruefiSelect()"
11+
/>
12+
</form>

‎src/app/features/ahbs/components/ahb-search-form-header/ahb-search-form-header.component.spec.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { AhbSearchFormHeaderComponent } from './ahb-search-form-header.component';
4+
5+
describe('AhbSearchFormHeaderComponent', () => {
6+
let component: AhbSearchFormHeaderComponent;
7+
let fixture: ComponentFixture<AhbSearchFormHeaderComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
imports: [AhbSearchFormHeaderComponent],
12+
}).compileComponents();
13+
14+
fixture = TestBed.createComponent(AhbSearchFormHeaderComponent);
15+
component = fixture.componentInstance;
16+
fixture.detectChanges();
17+
});
18+
19+
it('should create', () => {
20+
expect(component).toBeTruthy();
21+
});
22+
});

‎src/app/features/ahbs/components/ahb-search-form-header/ahb-search-form-header.component.ts

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Component, effect, input } from '@angular/core';
2+
import {
3+
FormControl,
4+
FormGroup,
5+
FormsModule,
6+
ReactiveFormsModule,
7+
Validators,
8+
} from '@angular/forms';
9+
import { Router } from '@angular/router';
10+
import { PruefiInputComponent } from '../pruefi-input/pruefi-input.component';
11+
import { FormatVersionSelectComponent } from '../format-version-select/format-version-select.component';
12+
13+
@Component({
14+
selector: 'app-ahb-search-form-header',
15+
standalone: true,
16+
imports: [
17+
FormsModule,
18+
ReactiveFormsModule,
19+
FormatVersionSelectComponent,
20+
PruefiInputComponent,
21+
],
22+
templateUrl: './ahb-search-form-header.component.html',
23+
})
24+
export class AhbSearchFormHeaderComponent {
25+
formatVersion = input.required<string>();
26+
pruefi = input.required<string>();
27+
28+
headerSearchForm = new FormGroup({
29+
formatVersion: new FormControl('', Validators.required),
30+
pruefi: new FormControl('', Validators.required),
31+
});
32+
33+
constructor(private readonly router: Router) {
34+
effect(() => {
35+
this.headerSearchForm.setValue({
36+
formatVersion: this.formatVersion(),
37+
pruefi: this.pruefi(),
38+
});
39+
});
40+
}
41+
42+
onPruefiSelect() {
43+
if (!this.headerSearchForm.valid) {
44+
this.headerSearchForm.markAllAsTouched();
45+
return;
46+
}
47+
this.router.navigate([
48+
'/ahb',
49+
this.headerSearchForm.value.formatVersion,
50+
this.headerSearchForm.value.pruefi,
51+
]);
52+
}
53+
}

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

+3-7
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
<table
33
class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
44
>
5-
<thead
6-
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
7-
>
5+
<thead class="text-xs text-gray-700 uppercase bg-gray-50">
86
<tr>
97
<th scope="col" class="px-6 py-3">Segmentname</th>
108
<th scope="col" class="px-6 py-3">Segmentgruppe</th>
@@ -16,10 +14,10 @@
1614
</thead>
1715
<tbody>
1816
@for (line of lines; track line.index) {
19-
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
17+
<tr class="bg-white border-b">
2018
<th
2119
scope="row"
22-
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
20+
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
2321
>
2422
{{ line.section_name }}
2523
</th>
@@ -43,5 +41,3 @@
4341
</tbody>
4442
</table>
4543
</div>
46-
47-
<pre>{{ lines | json }}</pre>

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

+18-9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
11
@if (formatVersions$ | async; as formatVersions) {
2-
<select
3-
[formControl]="control"
4-
(change)="onChange ? onChange(control.value) : null"
5-
>
6-
<option value="">Bitte auswählen</option>
7-
@for (formatVersion of formatVersions; track formatVersion) {
8-
<option [value]="formatVersion">{{ formatVersion }}</option>
9-
}
10-
</select>
2+
<div class="flex flex-col items-start mt-2 h-auto w-full">
3+
<select
4+
id="format-version-select"
5+
class="inline-block border-2 border-white rounded bg-[#F6ECED] py-3 ps-3 pe-24 focus:outline-0 w-full"
6+
[formControl]="control"
7+
(change)="onChange ? onChange(control.value) : null"
8+
>
9+
@for (formatVersion of formatVersions; track formatVersion) {
10+
<option [value]="formatVersion">{{ formatVersion }}</option>
11+
}
12+
</select>
13+
<label
14+
for="format-version-select"
15+
class="ml-3 -mt-14 text-xs text-blue-600 inline-block text-[#737373] text-[12px] bg-white px-1"
16+
>
17+
Formatversion
18+
</label>
19+
</div>
1120
}

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

+17-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
1-
<input
2-
type="text"
3-
list="pruefi-list"
4-
[formControl]="control"
5-
(change)="onChange ? onChange(control.value) : null"
6-
placeholder="Bitte auswählen"
7-
/>
1+
<div class="flex flex-col items-start mt-2 w-full">
2+
<input
3+
class="rounded border-2 border-white bg-[#F6ECED] py-2.5 px-2 focus:outline-0 w-full"
4+
type="text"
5+
list="pruefi-list"
6+
[formControl]="control"
7+
(change)="onChange ? onChange(control.value) : null"
8+
placeholder="Bitte auswählen"
9+
/>
10+
<label
11+
for="format-version-select"
12+
class="ml-3 -mt-14 text-xs text-blue-600 inline-block text-[#737373] text-[12px] bg-white px-1"
13+
>
14+
Prüfidentifikator
15+
</label>
16+
</div>
17+
818
<datalist id="pruefi-list">
919
@for (pruefi of pruefis$ | async; track pruefi) {
1020
<option [value]="pruefi">{{ pruefi }}</option>

‎src/app/features/ahbs/views/ahb-landing-page/ahb-landing-page.component.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,8 @@ <h4 class="mb-6 text-xl font-semibold">
2424
<div class="md:w-8/12 lg:ms-6 lg:w-5/12">
2525
<form [formGroup]="form">
2626
<div class="relative mb-6">
27-
<label for="format-version-input">Formatversion </label>
2827
<app-format-version-select
29-
id="format-version-input"
28+
class="inline-block h-16 w-full"
3029
formControlName="formatVersion"
3130
/>
3231
@if (
@@ -39,9 +38,8 @@ <h4 class="mb-6 text-xl font-semibold">
3938
</div>
4039

4140
<div class="relative mb-6">
42-
<label for="pruefi-input">Prüfidentifikator </label>
4341
<app-pruefi-input
44-
id="pruefi-input"
42+
class="inline-block h-16 w-full"
4543
formControlName="pruefi"
4644
[formatVersion]="form.controls.formatVersion.value"
4745
/>

‎src/app/features/ahbs/views/ahb-page/ahb-page.component.html

+34-39
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,42 @@
11
<app-header>
2-
<form [formGroup]="headerSearchForm">
3-
<app-format-version-select
4-
id="format-version-input"
5-
formControlName="formatVersion"
6-
/>
7-
@if (
8-
headerSearchForm.controls.formatVersion.errors?.["required"] &&
9-
(headerSearchForm.controls.formatVersion.dirty ||
10-
headerSearchForm.controls.formatVersion.touched)
11-
) {
12-
<p class="text-red-800">Dieses Feld ist ein Pflichtfeld</p>
13-
}
14-
<app-pruefi-input
15-
id="pruefi-input"
16-
formControlName="pruefi"
17-
[formatVersion]="headerSearchForm.controls.formatVersion.value"
18-
/>
19-
@if (
20-
headerSearchForm.controls.pruefi.errors?.["required"] &&
21-
(headerSearchForm.controls.pruefi.dirty ||
22-
headerSearchForm.controls.pruefi.touched)
23-
) {
24-
<p class="text-red-800">Dieses Feld ist ein Pflichtfeld</p>
25-
}
26-
27-
<!-- Submit button -->
28-
<button type="submit" (click)="onClickHeaderSearchSubmit()">
29-
Dokument öffnen
30-
</button>
31-
</form>
2+
<app-ahb-search-form-header
3+
class="flex-1 hidden md:inline"
4+
[formatVersion]="formatVersion()"
5+
[pruefi]="pruefi()"
6+
/>
327
</app-header>
338

349
@if (ahb$ | async; as ahb) {
10+
<div class="flex flex-col md:flex-row mb-10">
11+
<section class="pt-10 mx-5">
12+
<h2 class="border-b inline-block pb-[12px] mb-[20px] uppercase">
13+
Anwendungshandbücher für Menschen
14+
</h2>
15+
<h3 class="font-bold text-[20px]">
16+
Anwendungshandbuch {{ ahb.meta.pruefidentifikator }}
17+
</h3>
18+
<p class="text-[20px] mb-5">{{ ahb.meta.description }}</p>
19+
<p class="text-[14px]">
20+
<span class="font-bold"> Sender/Empfänger: </span>
21+
{{ ahb.meta.direction }}
22+
</p>
23+
</section>
24+
<section class="pt-10 mx-5 text-right flex-1">
25+
<div>
26+
<app-input-search-enhanced
27+
class="inline-block w-full md:w-96"
28+
(searchQueryChange)="onSearchQueryChange($event)"
29+
/>
30+
</div>
31+
<button
32+
class="rounded-full bg-[#EBBEC1] text-[16px] font-bold py-3 px-5 text-white mt-5"
33+
(click)="onClickExport()"
34+
>
35+
Export XML
36+
</button>
37+
</section>
38+
</div>
3539
<section>
36-
<pre>{{ ahb.meta | json }}</pre>
37-
</section>
38-
<section>
39-
<input
40-
type="search"
41-
(search)="onSearchQueryChange()"
42-
placeholder="Tabelle durchsuchen"
43-
[formControl]="searchQuery"
44-
/>
4540
@if (lines$ | async; as lines) {
4641
<app-ahb-table [lines]="lines" />
4742
}

‎src/app/features/ahbs/views/ahb-page/ahb-page.component.ts

+12-39
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,22 @@ import { HeaderComponent } from '../../../../shared/components/header/header.com
33
import { AhbTableComponent } from '../../components/ahb-table/ahb-table.component';
44
import { Ahb, AhbService } from '../../../../core/api';
55
import { CommonModule } from '@angular/common';
6-
import {
7-
FormControl,
8-
FormGroup,
9-
FormsModule,
10-
ReactiveFormsModule,
11-
Validators,
12-
} from '@angular/forms';
6+
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
137
import { Observable, map, shareReplay } from 'rxjs';
14-
import { Router } from '@angular/router';
15-
import { FormatVersionSelectComponent } from '../../components/format-version-select/format-version-select.component';
16-
import { PruefiInputComponent } from '../../components/pruefi-input/pruefi-input.component';
8+
import { AhbSearchFormHeaderComponent } from '../../components/ahb-search-form-header/ahb-search-form-header.component';
9+
import { InputSearchEnhancedComponent } from '../../../../shared/components/input-search-enhanced/input-search-enhanced.component';
1710

1811
@Component({
1912
selector: 'app-ahb-page',
2013
standalone: true,
2114
imports: [
15+
FormsModule,
16+
ReactiveFormsModule,
2217
HeaderComponent,
2318
AhbTableComponent,
2419
CommonModule,
25-
FormsModule,
26-
ReactiveFormsModule,
27-
FormatVersionSelectComponent,
28-
PruefiInputComponent,
20+
AhbSearchFormHeaderComponent,
21+
InputSearchEnhancedComponent,
2922
],
3023
templateUrl: './ahb-page.component.html',
3124
})
@@ -38,15 +31,7 @@ export class AhbPageComponent {
3831
ahb$?: Observable<Ahb>;
3932
lines$?: Observable<Ahb['lines']>;
4033

41-
headerSearchForm = new FormGroup({
42-
formatVersion: new FormControl('', Validators.required),
43-
pruefi: new FormControl('', Validators.required),
44-
});
45-
46-
constructor(
47-
private readonly ahbService: AhbService,
48-
private readonly router: Router,
49-
) {
34+
constructor(private readonly ahbService: AhbService) {
5035
effect(() => {
5136
this.ahb$ = this.ahbService
5237
.getAhb({
@@ -55,34 +40,22 @@ export class AhbPageComponent {
5540
})
5641
.pipe(shareReplay());
5742
this.lines$ = this.ahb$.pipe(map((ahb) => ahb.lines));
58-
this.headerSearchForm.setValue({
59-
formatVersion: this.formatVersion(),
60-
pruefi: this.pruefi(),
61-
});
6243
});
6344
}
6445

65-
onSearchQueryChange() {
46+
onSearchQueryChange(searchQuery: string | undefined) {
6647
this.lines$ = this.ahb$?.pipe(
6748
map((ahb) => ahb.lines),
6849
map(
6950
(lines) =>
7051
lines.filter((line) =>
71-
JSON.stringify(line).includes(this.searchQuery.value ?? ''),
52+
JSON.stringify(line).includes(searchQuery ?? ''),
7253
) ?? [],
7354
),
7455
);
7556
}
7657

77-
onClickHeaderSearchSubmit() {
78-
if (!this.headerSearchForm.valid) {
79-
this.headerSearchForm.markAllAsTouched();
80-
return;
81-
}
82-
this.router.navigate([
83-
'/ahb',
84-
this.headerSearchForm.value.formatVersion,
85-
this.headerSearchForm.value.pruefi,
86-
]);
58+
onClickExport() {
59+
alert('not implemented');
8760
}
8861
}

0 commit comments

Comments
 (0)