Skip to content
Snippets Groups Projects
Commit 9b5a13fd authored by Albert Bruns's avatar Albert Bruns
Browse files

OZG-7507-7788 ui/ux

parent 22a00b59
No related branches found
No related tags found
1 merge request!72OZG-7620-user-delete
Showing
with 66 additions and 18 deletions
<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
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();
});
});
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 {}
<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"> <div class="flex justify-between">
<ods-cancel-dialog-button data-test-id="dialog-cancel-button-host" /> <ods-cancel-dialog-button data-test-id="dialog-cancel-button-host" />
...@@ -11,3 +13,4 @@ ...@@ -11,3 +13,4 @@
data-test-id="dialog-delete-button-host" data-test-id="dialog-delete-button-host"
/> />
</div> </div>
</div>
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<div class="flex justify-between"> <div class="flex justify-between">
<admin-user-form-save-button /> <admin-user-form-save-button />
@if (formService.isPatch()) { @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>
</div> </div>
......
...@@ -27,9 +27,10 @@ import { DIALOG_COMPONENT } from '@alfa-client/ui'; ...@@ -27,9 +27,10 @@ import { DIALOG_COMPONENT } from '@alfa-client/ui';
import { AsyncPipe } from '@angular/common'; import { AsyncPipe } from '@angular/common';
import { Component, inject, OnInit } from '@angular/core'; import { Component, inject, OnInit } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { OpenDialogButtonComponent, SpinnerComponent } from '@ods/component'; import { SpinnerComponent } from '@ods/component';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { UserFormDataComponent } from './user-form-data/user-form-data.component'; 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 { UserDeleteDialogContainerComponent } from './user-form-delete-dialog-container/user-delete-dialog-container.component';
import { UserFormHeadlineComponent } from './user-form-headline/user-form-headline.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'; import { UserFormOrganisationsEinheitListComponent } from './user-form-organisations-einheit-list/user-form-organisations-einheit-list.component';
...@@ -52,7 +53,7 @@ import { UserFormService } from './user.formservice'; ...@@ -52,7 +53,7 @@ import { UserFormService } from './user.formservice';
UserFormOrganisationsEinheitListComponent, UserFormOrganisationsEinheitListComponent,
UserFormHeadlineComponent, UserFormHeadlineComponent,
UserFormSaveButtonComponent, UserFormSaveButtonComponent,
OpenDialogButtonComponent, UserFormDeleteButtonComponent,
], ],
}) })
export class UserFormComponent implements OnInit { export class UserFormComponent implements OnInit {
......
...@@ -2,7 +2,7 @@ import { OzgCloudComponentFactory } from '@alfa-client/tech-shared'; ...@@ -2,7 +2,7 @@ import { OzgCloudComponentFactory } from '@alfa-client/tech-shared';
import { DIALOG_COMPONENT, OzgcloudDialogService } from '@alfa-client/ui'; import { DIALOG_COMPONENT, OzgcloudDialogService } from '@alfa-client/ui';
import { ComponentType } from '@angular/cdk/portal'; import { ComponentType } from '@angular/cdk/portal';
import { Component, ComponentRef, EventEmitter, inject, Injector, Input, Output, ViewContainerRef } from '@angular/core'; 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'; import { first } from 'rxjs';
@Component({ @Component({
...@@ -11,11 +11,15 @@ import { first } from 'rxjs'; ...@@ -11,11 +11,15 @@ import { first } from 'rxjs';
imports: [ButtonComponent], imports: [ButtonComponent],
template: `<ods-button template: `<ods-button
(clickEmitter)="open()" (clickEmitter)="open()"
variant="outline" [variant]="variant"
text="{{ label }}" [text]="label"
[dataTestId]="dataTestId" [dataTestId]="dataTestId"
data-test-id="open-dialog" data-test-id="open-dialog"
/>`, >
<ng-container icon>
<ng-content select="[icon]" />
</ng-container>
</ods-button>`,
}) })
export class OpenDialogButtonComponent { export class OpenDialogButtonComponent {
private readonly component: ComponentType<any> = inject(DIALOG_COMPONENT); private readonly component: ComponentType<any> = inject(DIALOG_COMPONENT);
...@@ -28,6 +32,7 @@ export class OpenDialogButtonComponent { ...@@ -28,6 +32,7 @@ export class OpenDialogButtonComponent {
@Input() label: string; @Input() label: string;
@Input() dataTestId: string; @Input() dataTestId: string;
@Input() variant: ButtonVariants['variant'] = 'primary';
@Output() close: EventEmitter<void> = new EventEmitter(); @Output() close: EventEmitter<void> = new EventEmitter();
......
...@@ -39,6 +39,8 @@ export const buttonVariants = cva( ...@@ -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', primary: 'bg-primary text-whitetext shadow-md hover:enabled:bg-primary-hover focus-visible:bg-primary-hover',
outline: 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', '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: 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', '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',
}, },
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment