OZG-7620-7748 dialog

alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.html

 <ods-button-with-spinner
-  (clickEmitter)="delete()"
+  (clickEmitter)="openDeleteDialog()"
   variant="outline"
   text="Löschen"
   dataTestId="delete-button"

alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.spec.ts

@@ -5,7 +5,7 @@ import { DialogService } from '@alfa-client/ui';
 import { ButtonWithSpinnerComponent } from '@ods/component';
 import { MockComponent } from 'ng-mocks';
 import { getDataTestIdAttributeOf } from '../../../../../../tech-shared/test/data-test';
-import { UserFormDeleteDialogComponent } from '../user-form-delete-dialog/user-form-delete-dialog.component';
+import { UserFormDeleteDialogContainerComponent } from '../user-form-delete-dialog-container/user-form-delete-dialog-container.component';
 import { UserFormDeleteButtonComponent } from './user-form-delete-button.component';
 
 describe('UserFormDeleteButtonComponent', () => {
@@ -37,9 +37,9 @@ describe('UserFormDeleteButtonComponent', () => {
   describe('component', () => {
     describe('delete', () => {
       it('should open dialog', () => {
-        component.delete();
+        component.openDeleteDialog();
 
-        expect(dialogService.open).toHaveBeenCalledWith(UserFormDeleteDialogComponent);
+        expect(dialogService.open).toHaveBeenCalledWith(UserFormDeleteDialogContainerComponent);
       });
     });
   });
@@ -50,12 +50,12 @@ describe('UserFormDeleteButtonComponent', () => {
         existsAsHtmlElement(fixture, deleteButton);
       });
 
-      it('should call delete on click', () => {
-        component.delete = jest.fn();
+      it('should open delete dialog on click', () => {
+        component.openDeleteDialog = jest.fn();
 
         dispatchEventFromFixture(fixture, deleteButton, 'clickEmitter');
 
-        expect(component.delete).toHaveBeenCalled();
+        expect(component.openDeleteDialog).toHaveBeenCalled();
       });
     });
   });

alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.ts

 import { DialogService } from '@alfa-client/ui';
 import { Component, inject } from '@angular/core';
 import { ButtonWithSpinnerComponent } from '@ods/component';
-import { UserFormDeleteDialogComponent } from '../user-form-delete-dialog/user-form-delete-dialog.component';
+import { UserFormDeleteDialogContainerComponent } from '../user-form-delete-dialog-container/user-form-delete-dialog-container.component';
 
 @Component({
   selector: 'admin-user-form-delete-button',
@@ -12,7 +12,7 @@ import { UserFormDeleteDialogComponent } from '../user-form-delete-dialog/user-f
 export class UserFormDeleteButtonComponent {
   private readonly dialogService = inject(DialogService);
 
-  public delete(): void {
-    this.dialogService.openWidely(UserFormDeleteDialogComponent);
+  public openDeleteDialog(): void {
+    this.dialogService.openWidely(UserFormDeleteDialogContainerComponent);
   }
 }

alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-dialog-container/user-form-delete-dialog-container.component.html

+<admin-user-form-delete-dialog
+  [username]="getUsername()"
+  [deleteUserStateResource]="deleteUserStateResource$ | async"
+  (cancel)="closeDeleteDialog()"
+  (delete)="deleteUser()"
+  data-test-id="delete-dialog"
+/>
\ No newline at end of file

alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-dialog-container/user-form-delete-dialog-container.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { createEmptyStateResource, StateResource } from '@alfa-client/tech-shared';
+import { dispatchEventFromFixture, getMockComponent, Mock, mock } from '@alfa-client/test-utils';
+import { FormControl } from '@angular/forms';
+import { faker } from '@faker-js/faker/locale/de';
+import { of } from 'rxjs';
+import { getDataTestIdOf } from '../../../../../../tech-shared/test/data-test';
+import { createUserFormGroup } from '../../../../test/form';
+import { UserFormService } from '../user.formservice';
+import { UserFormDeleteDialogContainerComponent } from './user-form-delete-dialog-container.component';
+import { UserFormDeleteDialogComponent } from './user-form-delete-dialog/user-form-delete-dialog.component';
+
+describe('UserFormDeleteDialogComponent', () => {
+  let component: UserFormDeleteDialogContainerComponent;
+  let fixture: ComponentFixture<UserFormDeleteDialogContainerComponent>;
+
+  const deletDialogLocator: string = getDataTestIdOf('delete-dialog');
+
+  let formService: Mock<UserFormService>;
+
+  beforeEach(async () => {
+    formService = mock(UserFormService);
+    formService = {
+      ...mock(UserFormService),
+      form: createUserFormGroup(),
+    } as any;
+
+    await TestBed.configureTestingModule({
+      imports: [UserFormDeleteDialogContainerComponent, UserFormDeleteDialogComponent],
+      providers: [{ provide: UserFormService, useValue: formService }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UserFormDeleteDialogContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('user form delete dialog', () => {
+    it('should exist', () => {
+      const username: string = faker.word.sample();
+      const state: StateResource<unknown> = createEmptyStateResource();
+      component.getUsername = jest.fn().mockReturnValue(username);
+      component.deleteUserStateResource$ = of(state);
+
+      fixture.detectChanges();
+
+      const deleteDialog: UserFormDeleteDialogComponent = getMockComponent(fixture, UserFormDeleteDialogComponent);
+      expect(deleteDialog).toBeTruthy();
+      expect(deleteDialog.username).toBe(username);
+      expect(deleteDialog.deleteUserStateResource).toBe(state);
+    });
+
+    it('should call closeDeteleDialog on emit cancel', () => {
+      component.closeDeleteDialog = jest.fn();
+
+      dispatchEventFromFixture(fixture, 'admin-user-form-delete-dialog', 'cancel');
+
+      expect(component.closeDeleteDialog).toHaveBeenCalled();
+    });
+
+    it('should call deleteUser on emit delete', () => {
+      component.deleteUser = jest.fn();
+
+      dispatchEventFromFixture(fixture, deletDialogLocator, 'delete');
+
+      expect(component.deleteUser).toHaveBeenCalled();
+    });
+  });
+
+  describe('component', () => {
+    describe('getUsername', () => {
+      it('should return username', () => {
+        const username: string = faker.word.sample();
+        jest.spyOn(formService.form as any, 'get').mockReturnValue(new FormControl(username));
+
+        const result: string = component.getUsername();
+
+        expect(result).toBe(username);
+      });
+    });
+
+    describe('closeDeleteDialog', () => {
+      it('should call dialogService closeAll', () => {
+        component.dialogService.closeAll = jest.fn();
+
+        component.closeDeleteDialog();
+
+        expect(component.dialogService.closeAll).toHaveBeenCalled();
+      });
+    });
+
+    describe('deleteUser', () => {
+      it('should call userFormService delete ', () => {
+        formService.delete = jest.fn();
+
+        component.deleteUser();
+
+        expect(formService.delete).toHaveBeenCalled();
+      });
+
+      it('should set deleteUserState', () => {
+        const state: StateResource<unknown> = createEmptyStateResource();
+        formService.delete = jest.fn().mockReturnValue(state);
+
+        component.deleteUser();
+
+        expect(component.deleteUserStateResource$).toBe(state);
+      });
+    });
+  });
+});

alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-dialog-container/user-form-delete-dialog-container.component.ts

+import { createEmptyStateResource, StateResource } from '@alfa-client/tech-shared';
+import { DialogService } from '@alfa-client/ui';
+import { AsyncPipe } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { UserFormService } from '../user.formservice';
+import { UserFormDeleteDialogComponent } from './user-form-delete-dialog/user-form-delete-dialog.component';
+
+@Component({
+  selector: 'admin-user-form-delete-dialog-container',
+  standalone: true,
+  imports: [UserFormDeleteDialogComponent, AsyncPipe],
+  templateUrl: './user-form-delete-dialog-container.component.html',
+  providers: [UserFormService],
+})
+export class UserFormDeleteDialogContainerComponent {
+  public readonly formService = inject(UserFormService);
+  public readonly dialogService = inject(DialogService);
+
+  public deleteUserStateResource$: Observable<StateResource<unknown>> = of(createEmptyStateResource());
+
+  protected readonly UserFormService = UserFormService;
+
+  getUsername(): string {
+    return this.formService.form.get(UserFormService.USERNAME).value;
+  }
+
+  public closeDeleteDialog(): void {
+    this.dialogService.closeAll();
+  }
+
+  public deleteUser(): void {
+    this.deleteUserStateResource$ = this.formService.delete();
+  }
+}

alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-dialog-container/user-form-delete-dialog/user-form-delete-dialog.component.html

+<p>Sind Sie sicher, dass sie {{username}} löschen möchten? Hinweis: Die zugewiesenen Vorgänge bleiben bestehen.</p>
+
+<div class="flex justify-between">
+  <ods-button-with-spinner
+    (clickEmitter)="cancel.emit()"
+    text="Abbrechen"
+    dataTestId="dialog-abbrechen-button"
+  />
+
+  <ods-button-with-spinner
+    [stateResource]="deleteUserStateResource"
+    (clickEmitter)="delete.emit()"
+    variant="outline"
+    text="Löschen"
+    dataTestId="dialog-delete-button"
+  />
+</div>
\ No newline at end of file

alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-dialog-container/user-form-delete-dialog/user-form-delete-dialog.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { createEmptyStateResource, StateResource } from '@alfa-client/tech-shared';
+import { dispatchEventFromFixture, existsAsHtmlElement, getDebugElementFromFixtureByCss } from '@alfa-client/test-utils';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { getDataTestIdAttributeOf } from '../../../../../../../tech-shared/test/data-test';
+import { UserFormDeleteDialogComponent } from './user-form-delete-dialog.component';
+
+describe('UserFormDeleteDialogComponent', () => {
+  let component: UserFormDeleteDialogComponent;
+  let fixture: ComponentFixture<UserFormDeleteDialogComponent>;
+
+  const deleteButton: string = getDataTestIdAttributeOf('dialog-delete-button');
+  const cancelButton: string = getDataTestIdAttributeOf('dialog-cancel-button');
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UserFormDeleteDialogComponent, ButtonWithSpinnerComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UserFormDeleteDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('template', () => {
+    describe('cancel button', () => {
+      it('should exist', () => {
+        existsAsHtmlElement(fixture, cancelButton);
+      });
+
+      it('should emit cancel on click', () => {
+        component.cancel.emit = jest.fn();
+
+        dispatchEventFromFixture(fixture, cancelButton, 'clickEmitter');
+
+        expect(component.cancel.emit).toHaveBeenCalled();
+      });
+    });
+
+    describe('delete button', () => {
+      it('should exist', () => {
+        const stateResource: StateResource<unknown> = createEmptyStateResource();
+        component.deleteUserStateResource = stateResource;
+
+        fixture.detectChanges();
+
+        const button: ButtonWithSpinnerComponent = getDebugElementFromFixtureByCss(fixture, deleteButton).componentInstance;
+        expect(button._stateResource).toBe(stateResource);
+      });
+
+      it('should emit delete on click', () => {
+        component.delete.emit = jest.fn();
+
+        dispatchEventFromFixture(fixture, deleteButton, 'clickEmitter');
+
+        expect(component.delete.emit).toHaveBeenCalled();
+      });
+    });
+  });
+});

alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-dialog-container/user-form-delete-dialog/user-form-delete-dialog.component.ts

+import { StateResource } from '@alfa-client/tech-shared';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+
+@Component({
+  selector: 'admin-user-form-delete-dialog',
+  standalone: true,
+  imports: [ButtonWithSpinnerComponent],
+  templateUrl: './user-form-delete-dialog.component.html',
+})
+export class UserFormDeleteDialogComponent {
+  @Input() username: string;
+  @Input() deleteUserStateResource: StateResource<unknown>;
+  @Output() cancel: EventEmitter<void> = new EventEmitter<void>();
+  @Output() delete: EventEmitter<void> = new EventEmitter<void>();
+}

alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-dialog/user-form-delete-dialog.component.html

-<p>user-form-delete-dialog works!</p>

alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-dialog/user-form-delete-dialog.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { UserFormDeleteDialogComponent } from './user-form-delete-dialog.component';
-
-describe('UserFormDeleteDialogComponent', () => {
-  let component: UserFormDeleteDialogComponent;
-  let fixture: ComponentFixture<UserFormDeleteDialogComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [UserFormDeleteDialogComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(UserFormDeleteDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-dialog/user-form-delete-dialog.component.ts

-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'admin-user-form-delete-dialog',
-  standalone: true,
-  imports: [],
-  templateUrl: './user-form-delete-dialog.component.html',
-})
-export class UserFormDeleteDialogComponent {}