From 9b5a13fdca9512de65073fa352844938f6409be1 Mon Sep 17 00:00:00 2001
From: Albert <Albert.Bruns@mgm-tp.com>
Date: Tue, 25 Feb 2025 15:44:20 +0100
Subject: [PATCH] OZG-7507-7788 ui/ux
---
.../user-form-delete-button.component.html | 3 +++
.../user-form-delete-button.component.spec.ts | 23 +++++++++++++++++
.../user-form-delete-button.component.ts | 11 ++++++++
.../user-delete-dialog.component.html | 25 +++++++++++--------
.../lib/user-form/user-form.component.html | 2 +-
.../src/lib/user-form/user-form.component.ts | 5 ++--
.../open-dialog-button.component.ts | 13 +++++++---
.../src/lib/button/button.component.ts | 2 ++
8 files changed, 66 insertions(+), 18 deletions(-)
create mode 100644 alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.html
create mode 100644 alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.spec.ts
create mode 100644 alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.ts
diff --git a/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.html b/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.html
new file mode 100644
index 0000000000..eeee4c0950
--- /dev/null
+++ b/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.html
@@ -0,0 +1,3 @@
+<ods-open-dialog-button variant='outline_error' label="Löschen" dataTestId="delete-user" data-test-id="delete-user-button-host" >
+ <ods-delete-icon icon />
+</ods-open-dialog-button>
\ No newline at end of file
diff --git a/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.spec.ts b/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.spec.ts
new file mode 100644
index 0000000000..665f8a81d4
--- /dev/null
+++ b/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserFormDeleteButtonComponent } from './user-form-delete-button.component';
+
+describe('UserFormDeleteButtonComponent', () => {
+ let component: UserFormDeleteButtonComponent;
+ let fixture: ComponentFixture<UserFormDeleteButtonComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [UserFormDeleteButtonComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(UserFormDeleteButtonComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.ts b/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.ts
new file mode 100644
index 0000000000..57b7014486
--- /dev/null
+++ b/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { OpenDialogButtonComponent } from '@ods/component';
+import { DeleteIconComponent } from '@ods/system';
+
+@Component({
+ selector: 'admin-user-form-delete-button',
+ standalone: true,
+ imports: [DeleteIconComponent, OpenDialogButtonComponent],
+ templateUrl: './user-form-delete-button.component.html',
+})
+export class UserFormDeleteButtonComponent {}
diff --git a/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-dialog-container/user-delete-dialog/user-delete-dialog.component.html b/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-dialog-container/user-delete-dialog/user-delete-dialog.component.html
index 33e600ca06..4f866f2631 100644
--- a/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-dialog-container/user-delete-dialog/user-delete-dialog.component.html
+++ b/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-dialog-container/user-delete-dialog/user-delete-dialog.component.html
@@ -1,13 +1,16 @@
-<p>Sind Sie sicher, dass sie {{ username }} löschen möchten? Hinweis: Die zugewiesenen Vorgänge bleiben bestehen.</p>
+<div class="block bg-background-100 flex flex-col gap-4 p-8">
+ <p>Sind Sie sicher, dass sie {{ username }} löschen möchten?</p>
+ <p>Hinweis: Die zugewiesenen Vorgänge bleiben bestehen.</p>
-<div class="flex justify-between">
- <ods-cancel-dialog-button data-test-id="dialog-cancel-button-host" />
- <ods-button-with-spinner
- [stateResource]="deleteUserStateResource"
- (clickEmitter)="delete.emit()"
- variant="outline"
- text="Löschen"
- dataTestId="dialog-delete"
- data-test-id="dialog-delete-button-host"
- />
+ <div class="flex justify-between">
+ <ods-cancel-dialog-button data-test-id="dialog-cancel-button-host" />
+ <ods-button-with-spinner
+ [stateResource]="deleteUserStateResource"
+ (clickEmitter)="delete.emit()"
+ variant="outline"
+ text="Löschen"
+ dataTestId="dialog-delete"
+ data-test-id="dialog-delete-button-host"
+ />
+ </div>
</div>
diff --git a/alfa-client/libs/admin/user/src/lib/user-form/user-form.component.html b/alfa-client/libs/admin/user/src/lib/user-form/user-form.component.html
index 2dd292b267..cce0e1ce49 100644
--- a/alfa-client/libs/admin/user/src/lib/user-form/user-form.component.html
+++ b/alfa-client/libs/admin/user/src/lib/user-form/user-form.component.html
@@ -35,7 +35,7 @@
<div class="flex justify-between">
<admin-user-form-save-button />
@if (formService.isPatch()) {
- <ods-open-dialog-button label="Löschen" dataTestId="delete-user" data-test-id="delete-user-button-host" />
+ <admin-user-form-delete-button />
}
</div>
</div>
diff --git a/alfa-client/libs/admin/user/src/lib/user-form/user-form.component.ts b/alfa-client/libs/admin/user/src/lib/user-form/user-form.component.ts
index 84b983e7b7..fb16e82fa9 100644
--- a/alfa-client/libs/admin/user/src/lib/user-form/user-form.component.ts
+++ b/alfa-client/libs/admin/user/src/lib/user-form/user-form.component.ts
@@ -27,9 +27,10 @@ import { DIALOG_COMPONENT } from '@alfa-client/ui';
import { AsyncPipe } from '@angular/common';
import { Component, inject, OnInit } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { OpenDialogButtonComponent, SpinnerComponent } from '@ods/component';
+import { SpinnerComponent } from '@ods/component';
import { Observable } from 'rxjs';
import { UserFormDataComponent } from './user-form-data/user-form-data.component';
+import { UserFormDeleteButtonComponent } from './user-form-delete-button/user-form-delete-button.component';
import { UserDeleteDialogContainerComponent } from './user-form-delete-dialog-container/user-delete-dialog-container.component';
import { UserFormHeadlineComponent } from './user-form-headline/user-form-headline.component';
import { UserFormOrganisationsEinheitListComponent } from './user-form-organisations-einheit-list/user-form-organisations-einheit-list.component';
@@ -52,7 +53,7 @@ import { UserFormService } from './user.formservice';
UserFormOrganisationsEinheitListComponent,
UserFormHeadlineComponent,
UserFormSaveButtonComponent,
- OpenDialogButtonComponent,
+ UserFormDeleteButtonComponent,
],
})
export class UserFormComponent implements OnInit {
diff --git a/alfa-client/libs/design-component/src/lib/open-dialog-button/open-dialog-button.component.ts b/alfa-client/libs/design-component/src/lib/open-dialog-button/open-dialog-button.component.ts
index 8d5df99f45..9d303e9829 100644
--- a/alfa-client/libs/design-component/src/lib/open-dialog-button/open-dialog-button.component.ts
+++ b/alfa-client/libs/design-component/src/lib/open-dialog-button/open-dialog-button.component.ts
@@ -2,7 +2,7 @@ import { OzgCloudComponentFactory } from '@alfa-client/tech-shared';
import { DIALOG_COMPONENT, OzgcloudDialogService } from '@alfa-client/ui';
import { ComponentType } from '@angular/cdk/portal';
import { Component, ComponentRef, EventEmitter, inject, Injector, Input, Output, ViewContainerRef } from '@angular/core';
-import { ButtonComponent } from '@ods/system';
+import { ButtonComponent, ButtonVariants } from '@ods/system';
import { first } from 'rxjs';
@Component({
@@ -11,11 +11,15 @@ import { first } from 'rxjs';
imports: [ButtonComponent],
template: `<ods-button
(clickEmitter)="open()"
- variant="outline"
- text="{{ label }}"
+ [variant]="variant"
+ [text]="label"
[dataTestId]="dataTestId"
data-test-id="open-dialog"
- />`,
+ >
+ <ng-container icon>
+ <ng-content select="[icon]" />
+ </ng-container>
+ </ods-button>`,
})
export class OpenDialogButtonComponent {
private readonly component: ComponentType<any> = inject(DIALOG_COMPONENT);
@@ -28,6 +32,7 @@ export class OpenDialogButtonComponent {
@Input() label: string;
@Input() dataTestId: string;
+ @Input() variant: ButtonVariants['variant'] = 'primary';
@Output() close: EventEmitter<void> = new EventEmitter();
diff --git a/alfa-client/libs/design-system/src/lib/button/button.component.ts b/alfa-client/libs/design-system/src/lib/button/button.component.ts
index 15a9b7efdc..6b43d3959f 100644
--- a/alfa-client/libs/design-system/src/lib/button/button.component.ts
+++ b/alfa-client/libs/design-system/src/lib/button/button.component.ts
@@ -39,6 +39,8 @@ export const buttonVariants = cva(
primary: 'bg-primary text-whitetext shadow-md hover:enabled:bg-primary-hover focus-visible:bg-primary-hover',
outline:
'border border-primary bg-background-50 text-primary shadow-md hover:enabled:bg-ghost-hover focus-visible:bg-ghost-hover focus-visible:border-background-200',
+ outline_error:
+ 'border border-error bg-background-50 text-error shadow-md hover:enabled:bg-ghost-hover focus-visible:bg-ghost-hover focus-visible:border-background-200',
ghost:
'border border-transparent hover:enabled:bg-ghost-hover text-primary focus-visible:border-background-200 focus-visible:bg-ghost-hover font-semibold [&]:focus-visible:outline-offset-1',
},
--
GitLab