From ce1bab0e04811004197061d4eec0c4a24ed8dec3 Mon Sep 17 00:00:00 2001
From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com>
Date: Thu, 23 Jan 2025 13:24:29 +0100
Subject: [PATCH 1/6] OZG-6564 Use ods button for editing
---
.../aktenzeichen-editable.component.html | 17 ++++++-----
.../aktenzeichen-editable.component.scss | 29 -------------------
.../aktenzeichen-editable.component.ts | 5 ++--
.../src/lib/vorgang-detail.module.ts | 4 +++
4 files changed, 15 insertions(+), 40 deletions(-)
delete mode 100644 alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.scss
diff --git a/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.html b/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.html
index 3f94a6da45..b6df6cfefa 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.html
@@ -25,12 +25,13 @@
-->
<div class="flex flex-shrink" alfa-aktenzeichen [vorgang]="vorgang"></div>
<ng-container *ngIf="vorgang | hasLink: linkRel.SET_AKTENZEICHEN">
- <div class="relative w-12">
- <ozgcloud-icon-button-primary
- svgIcon="edit"
- tooltip="Aktenzeichen bearbeiten"
- data-test-id="aktenzeichen-editieren"
- (clickEmitter)="onEdit()"
- ></ozgcloud-icon-button-primary>
- </div>
+ <ods-button
+ variant="icon"
+ size="fit"
+ tooltip="Aktenzeichen bearbeiten"
+ data-test-id="aktenzeichen-editieren"
+ (clickEmitter)="onEdit()"
+ >
+ <ods-edit-icon icon />
+ </ods-button>
</ng-container>
diff --git a/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.scss b/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.scss
deleted file mode 100644
index dbb9218a33..0000000000
--- a/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright (C) 2024 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
-
-// Workaround Material's fixed 48px height
-:host ::ng-deep ozgcloud-icon-button-primary button {
- position: absolute;
- top: -14px;
-}
diff --git a/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.ts b/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.ts
index 0b7c225ce8..383891cf57 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.ts
@@ -21,15 +21,14 @@
* Die sprachspezifischen Genehmigungen und Beschränkungen
* unter der Lizenz sind dem Lizenztext zu entnehmen.
*/
-import { Component, Input } from '@angular/core';
-import { VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
import { DialogService } from '@alfa-client/ui';
+import { VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input } from '@angular/core';
import { AktenzeichenEditDialogComponent } from '../aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component';
@Component({
selector: 'alfa-aktenzeichen-editable',
templateUrl: './aktenzeichen-editable.component.html',
- styleUrls: ['./aktenzeichen-editable.component.scss'],
})
export class AktenzeichenEditableComponent {
@Input() vorgang: VorgangWithEingangResource;
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts
index 9c96835792..41a5873ace 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts
@@ -61,6 +61,7 @@ import {
CloseIconComponent,
DropdownMenuComponent,
DropdownMenuTextItemComponent,
+ EditIconComponent,
ErrorMessageComponent,
ExclamationIconComponent,
FileIconComponent,
@@ -70,6 +71,7 @@ import {
SendIconComponent,
SpinnerIconComponent,
StampIconComponent,
+ TooltipDirective,
} from '@ods/system';
import { AktenzeichenEditDialogComponent } from './aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component';
import { AktenzeichenEditableComponent } from './aktenzeichen-editable/aktenzeichen-editable.component';
@@ -155,6 +157,7 @@ const routes: Routes = [
ButtonComponent,
ButtonCardComponent,
CloseIconComponent,
+ EditIconComponent,
ExclamationIconComponent,
SaveIconComponent,
SendIconComponent,
@@ -178,6 +181,7 @@ const routes: Routes = [
DropdownMenuTextItemComponent,
MoreIconComponent,
FileIconComponent,
+ TooltipDirective,
],
declarations: [
VorgangDetailPageComponent,
--
GitLab
From 841c69600518174597fc19a68c612e2fe92c207e Mon Sep 17 00:00:00 2001
From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com>
Date: Fri, 24 Jan 2025 10:06:00 +0100
Subject: [PATCH 2/6] OZG-6564 Add flexbox styling
---
.../aktenzeichen-editable.component.html | 26 ++++++++++---------
.../vorgang-detail-header.component.html | 2 +-
2 files changed, 15 insertions(+), 13 deletions(-)
diff --git a/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.html b/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.html
index b6df6cfefa..5c3e3b11ed 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.html
@@ -23,15 +23,17 @@
unter der Lizenz sind dem Lizenztext zu entnehmen.
-->
-<div class="flex flex-shrink" alfa-aktenzeichen [vorgang]="vorgang"></div>
-<ng-container *ngIf="vorgang | hasLink: linkRel.SET_AKTENZEICHEN">
- <ods-button
- variant="icon"
- size="fit"
- tooltip="Aktenzeichen bearbeiten"
- data-test-id="aktenzeichen-editieren"
- (clickEmitter)="onEdit()"
- >
- <ods-edit-icon icon />
- </ods-button>
-</ng-container>
+<div class="flex items-center gap-1">
+ <div class="flex flex-shrink" alfa-aktenzeichen [vorgang]="vorgang"></div>
+ @if (vorgang | hasLink: linkRel.SET_AKTENZEICHEN) {
+ <ods-button
+ variant="icon"
+ size="fit"
+ tooltip="Aktenzeichen bearbeiten"
+ data-test-id="aktenzeichen-editieren"
+ (clickEmitter)="onEdit()"
+ >
+ <ods-edit-icon icon />
+ </ods-button>
+ }
+</div>
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html
index 86f3e7c9a0..06d40e9f4d 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html
@@ -48,7 +48,7 @@
{{ vorgang.name }}
</h2>
<alfa-vorgang-nummer class="vorgang-nummer" [vorgang]="vorgang"></alfa-vorgang-nummer>
- <div class="flex flex-1 flex-row gap-1">
+ <div class="flex flex-1 flex-row items-center gap-1">
<div class="flex flex-shrink-0" [class.text-gray-400]="!hasAktenzeichen">
<mat-icon svgIcon="az" style="width: 1.5rem; height: 1.5rem"></mat-icon>
</div>
--
GitLab
From be4177cfa8bee599496fca042d884b689d7faff3 Mon Sep 17 00:00:00 2001
From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com>
Date: Fri, 7 Feb 2025 16:29:36 +0100
Subject: [PATCH 3/6] OZG-6564 Use new ghost button
---
.../aktenzeichen-editable.component.html | 13 +++++++------
1 file changed, 7 insertions(+), 6 deletions(-)
diff --git a/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.html b/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.html
index 5c3e3b11ed..e56be799f1 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.html
@@ -23,11 +23,12 @@
unter der Lizenz sind dem Lizenztext zu entnehmen.
-->
-<div class="flex items-center gap-1">
- <div class="flex flex-shrink" alfa-aktenzeichen [vorgang]="vorgang"></div>
- @if (vorgang | hasLink: linkRel.SET_AKTENZEICHEN) {
+<div class="flex flex-shrink" alfa-aktenzeichen [vorgang]="vorgang"></div>
+@if (vorgang | hasLink: linkRel.SET_AKTENZEICHEN) {
+ <div class="relative">
<ods-button
- variant="icon"
+ class="absolute -top-2"
+ variant="ghost"
size="fit"
tooltip="Aktenzeichen bearbeiten"
data-test-id="aktenzeichen-editieren"
@@ -35,5 +36,5 @@
>
<ods-edit-icon icon />
</ods-button>
- }
-</div>
+ </div>
+}
--
GitLab
From 8a925c96a9ac88decb75f3f3ad5db40beefbe3c2 Mon Sep 17 00:00:00 2001
From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com>
Date: Fri, 7 Feb 2025 17:02:34 +0100
Subject: [PATCH 4/6] OZG-6564 Fix unit test
---
.../aktenzeichen-editable.component.spec.ts | 18 ++++++++++--------
1 file changed, 10 insertions(+), 8 deletions(-)
diff --git a/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.spec.ts b/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.spec.ts
index ff9fac80cc..a12eb4992e 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.spec.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.spec.ts
@@ -22,11 +22,13 @@
* unter der Lizenz sind dem Lizenztext zu entnehmen.
*/
import { HasLinkPipe } from '@alfa-client/tech-shared';
-import { mock } from '@alfa-client/test-utils';
-import { DialogService, OzgcloudIconButtonPrimaryComponent } from '@alfa-client/ui';
+import { existsAsHtmlElement, mock, notExistsAsHtmlElement } from '@alfa-client/test-utils';
+import { DialogService } from '@alfa-client/ui';
import { VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
import { AktenzeichenComponent } from '@alfa-client/vorgang-shared-ui';
import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonComponent, EditIconComponent } from '@ods/system';
+import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
import { MockComponent } from 'ng-mocks';
import { AktenzeichenEditDialogComponent } from '../aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component';
@@ -36,6 +38,8 @@ describe('AktenzeichenComponent', () => {
let component: AktenzeichenEditableComponent;
let fixture: ComponentFixture<AktenzeichenEditableComponent>;
+ const editButton: string = getDataTestIdOf('aktenzeichen-editieren');
+
const dialogService = mock(DialogService);
beforeEach(async () => {
@@ -43,7 +47,8 @@ describe('AktenzeichenComponent', () => {
declarations: [
HasLinkPipe,
AktenzeichenEditableComponent,
- MockComponent(OzgcloudIconButtonPrimaryComponent),
+ MockComponent(ButtonComponent),
+ MockComponent(EditIconComponent),
MockComponent(AktenzeichenComponent),
],
providers: [
@@ -80,11 +85,9 @@ describe('AktenzeichenComponent', () => {
describe('after render', () => {
it('should render edit button', () => {
- const editIcon = fixture.nativeElement.querySelector('ozgcloud-icon-button-primary');
-
fixture.detectChanges();
- expect(editIcon).not.toBeInstanceOf(HTMLElement);
+ notExistsAsHtmlElement(fixture, editButton);
});
it('should render edit button', () => {
@@ -94,8 +97,7 @@ describe('AktenzeichenComponent', () => {
fixture.detectChanges();
- const editIcon = fixture.nativeElement.querySelector('ozgcloud-icon-button-primary');
- expect(editIcon).toBeInstanceOf(HTMLElement);
+ existsAsHtmlElement(fixture, editButton);
});
});
});
--
GitLab
From 72ed903bb3440bde180f078d97b903ddf143948f Mon Sep 17 00:00:00 2001
From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com>
Date: Mon, 10 Feb 2025 11:11:45 +0100
Subject: [PATCH 5/6] OZG-6564 Improve unit test
---
.../aktenzeichen-editable.component.spec.ts | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
diff --git a/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.spec.ts b/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.spec.ts
index a12eb4992e..11982ed180 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.spec.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.spec.ts
@@ -84,9 +84,7 @@ describe('AktenzeichenComponent', () => {
});
describe('after render', () => {
- it('should render edit button', () => {
- fixture.detectChanges();
-
+ it('should NOT render edit button', () => {
notExistsAsHtmlElement(fixture, editButton);
});
--
GitLab
From 6b0a60917f442edee654fdfca98bd1a41b286c02 Mon Sep 17 00:00:00 2001
From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com>
Date: Mon, 10 Feb 2025 11:25:52 +0100
Subject: [PATCH 6/6] OZG-6564 Fix edit icon
---
.../src/lib/icons/edit-icon/edit-icon.component.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/alfa-client/libs/design-system/src/lib/icons/edit-icon/edit-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/edit-icon/edit-icon.component.ts
index c655b7df68..c5c54a6669 100644
--- a/alfa-client/libs/design-system/src/lib/icons/edit-icon/edit-icon.component.ts
+++ b/alfa-client/libs/design-system/src/lib/icons/edit-icon/edit-icon.component.ts
@@ -32,9 +32,9 @@ import { iconVariants, IconVariants } from '../iconVariants';
imports: [CommonModule],
template: `<svg
viewBox="0 0 24 24"
- fill="none"
xmlns="http://www.w3.org/2000/svg"
[ngClass]="twMerge(iconVariants({ size }), 'fill-primary', class)"
+ aria-hidden="true"
>
<path
d="M5 19H6.425L16.2 9.225L14.775 7.8L5 17.575V19ZM3 21V16.75L16.2 3.575C16.4 3.39167 16.6208 3.25 16.8625 3.15C17.1042 3.05 17.3583 3 17.625 3C17.8917 3 18.15 3.05 18.4 3.15C18.65 3.25 18.8667 3.4 19.05 3.6L20.425 5C20.625 5.18333 20.7708 5.4 20.8625 5.65C20.9542 5.9 21 6.15 21 6.4C21 6.66667 20.9542 6.92083 20.8625 7.1625C20.7708 7.40417 20.625 7.625 20.425 7.825L7.25 21H3ZM15.475 8.525L14.775 7.8L16.2 9.225L15.475 8.525Z"
--
GitLab