OZG-7405 revert ozgcloud menu for assign user

Assign user should not be implemented with drop down menu.

alfa-client/libs/ui/src/lib/ui/ozgcloud-menu/ozgcloud-menu.component.html

+<!--
+
+    Copyright (C) 2023 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.
+
+-->
+<mat-menu #menu="matMenu" class="menu">
+  <ng-content></ng-content>
+</mat-menu>

alfa-client/libs/ui/src/lib/ui/ozgcloud-menu/ozgcloud-menu.component.scss

+/**
+ * Copyright (C) 2023 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.
+ */

alfa-client/libs/ui/src/lib/ui/ozgcloud-menu/ozgcloud-menu.component.spec.ts

+/*
+ * Copyright (C) 2023 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.
+ */
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatMenuModule } from '@angular/material/menu';
+import { OzgcloudMenuComponent } from './ozgcloud-menu.component';
+
+describe('OzgcloudMenuComponent', () => {
+  let component: OzgcloudMenuComponent;
+  let fixture: ComponentFixture<OzgcloudMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [OzgcloudMenuComponent],
+      imports: [MatMenuModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(OzgcloudMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

alfa-client/libs/ui/src/lib/ui/ozgcloud-menu/ozgcloud-menu.component.ts

+/*
+ * Copyright (C) 2023 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.
+ */
+import { Component, ViewChild } from '@angular/core';
+import { MatMenu } from '@angular/material/menu';
+
+@Component({
+  selector: 'ozgcloud-menu',
+  templateUrl: './ozgcloud-menu.component.html',
+  styleUrls: ['./ozgcloud-menu.component.scss'],
+})
+export class OzgcloudMenuComponent {
+  @ViewChild('menu', { static: true }) matMenu: MatMenu;
+}

alfa-client/libs/ui/src/lib/ui/ui.module.ts

@@ -81,6 +81,7 @@ import { OzgcloudIconButtonPrimaryComponent } from './ozgcloud-button/ozgcloud-i
 import { OzgcloudStrokedButtonWithSpinnerComponent } from './ozgcloud-button/ozgcloud-stroked-button-with-spinner/ozgcloud-stroked-button-with-spinner.component';
 import { OzgcloudButtonContentComponent } from './ozgcloud-button/shared/ozgcloud-button-content/ozgcloud-button-content.component';
 import { OzgcloudIconComponent } from './ozgcloud-icon/ozgcloud-icon.component';
+import { OzgcloudMenuComponent } from './ozgcloud-menu/ozgcloud-menu.component';
 import { OzgcloudPasteTextButtonComponent } from './ozgcloud-paste-text-button/ozgcloud-paste-text-button.component';
 import { OzgcloudRoutingButtonComponent } from './ozgcloud-routing-button/ozgcloud-routing-button.component';
 import { OzgcloudSvgIconBigComponent } from './ozgcloud-svgicon-big/ozgcloud-svgicon-big.component';
@@ -132,6 +133,7 @@ import { ValidationErrorComponent } from './validation-error/validation-error.co
     OzgcloudButtonContentComponent,
     OzgcloudPasteTextButtonComponent,
     CheckboxEnumEditorComponent,
+    OzgcloudMenuComponent,
   ],
   imports: [
     MatButtonModule,
@@ -229,6 +231,7 @@ import { ValidationErrorComponent } from './validation-error/validation-error.co
     CheckboxEnumEditorComponent,
     FileUploadButtonComponent,
     OzgcloudButtonContentComponent,
+    OzgcloudMenuComponent,
   ],
   providers: [
     {

alfa-client/libs/user-profile/src/lib/user-profile-in-vorgang-container/user-profile-in-vorgang/user-profile-button-container/user-profile-button-container.component.html

@@ -23,16 +23,28 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<ods-dropdown-menu (opened)="showUserProfileSearch()">
+<button
+  #menuTrigger="matMenuTrigger"
+  [matMenuTriggerFor]="menu.matMenu"
+  (menuOpened)="showUserProfileSearch()"
+  (menuClosed)="hideUserProfileSearch()"
+  [attr.aria-label]="userButtonLabel"
+  class="user-profile-button"
+>
   <alfa-user-icon
-    button-content
     data-test-id="user-profile-icon"
     [userProfileStateResource]="userProfile"
     class="user-profile-icon"
   >
   </alfa-user-icon>
-  <ods-dropdown-menu-item *ngIf="userProfileSearchVisibility$ | async" (click)="$event.stopPropagation()">
-    <alfa-user-profile-search-container data-test-id="user-profile-search-container" (assigned)="hideUserProfileSearch()">
+</button>
+
+<ozgcloud-menu #menu>
+  <alfa-user-profile-search-container
+    *ngIf="showUserProfileSearch$ | async"
+    data-test-id="user-profile-search-container"
+    (click)="$event.stopPropagation()"
+    (assigned)="menuTrigger.closeMenu()"
+  >
   </alfa-user-profile-search-container>
-  </ods-dropdown-menu-item>
-</ods-dropdown-menu>
+</ozgcloud-menu>

alfa-client/libs/user-profile/src/lib/user-profile-in-vorgang-container/user-profile-in-vorgang/user-profile-button-container/user-profile-button-container.component.spec.ts

@@ -26,8 +26,9 @@ import { mock } from '@alfa-client/test-utils';
 import { UiModule } from '@alfa-client/ui';
 import { UserProfileResource, UserProfileService } from '@alfa-client/user-profile-shared';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DropdownMenuComponent, DropdownMenuItemComponent } from '@ods/system';
 import { MockComponent } from 'ng-mocks';
+import { BehaviorSubject } from 'rxjs';
+import { OzgcloudMenuComponent } from '../../../../../../ui/src/lib/ui/ozgcloud-menu/ozgcloud-menu.component';
 import { UserIconComponent } from '../../../user-icon/user-icon.component';
 import { UserProfileSearchContainerComponent } from '../../../user-profile-search-container/user-profile-search-container.component';
 import { UserProfileButtonContainerComponent } from './user-profile-button-container.component';
@@ -36,9 +37,10 @@ describe('UserProfileButtonContainerComponent', () => {
   let component: UserProfileButtonContainerComponent;
   let fixture: ComponentFixture<UserProfileButtonContainerComponent>;
 
+  const userProfileSearchVisbilitySubj: BehaviorSubject<boolean> = new BehaviorSubject(false);
   const userProfileService = {
     ...mock(UserProfileService),
-    getUserProfileSearchVisibility: jest.fn().mockResolvedValue(Promise.resolve()),
+    getUserProfileSearchVisibility: () => userProfileSearchVisbilitySubj,
   };
 
   beforeEach(async () => {
@@ -47,8 +49,7 @@ describe('UserProfileButtonContainerComponent', () => {
         UserProfileButtonContainerComponent,
         MockComponent(UserIconComponent),
         MockComponent(UserProfileSearchContainerComponent),
-        MockComponent(DropdownMenuComponent),
-        MockComponent(DropdownMenuItemComponent),
+        MockComponent(OzgcloudMenuComponent),
       ],
       providers: [
         {
@@ -72,9 +73,31 @@ describe('UserProfileButtonContainerComponent', () => {
 
   describe('ngOnInit', () => {
     it('should call getUserProfileSearchVisibility', () => {
+      component.getUserProfileSearchVisibility = jest.fn();
+
       component.ngOnInit();
 
-      expect(userProfileService.getUserProfileSearchVisibility).toHaveBeenCalled();
+      expect(component.getUserProfileSearchVisibility).toHaveBeenCalled();
+    });
+  });
+
+  describe('getUserProfileSearchVisibility', () => {
+    it('should call handleVisibilityChange', () => {
+      component.handleVisibilityChange = jest.fn();
+
+      component.getUserProfileSearchVisibility().subscribe();
+
+      expect(component.handleVisibilityChange).toHaveBeenCalled();
+    });
+  });
+
+  describe('handleVisibilityChange', () => {
+    it('should openMenu if changed to true', () => {
+      component.menuTrigger.openMenu = jest.fn();
+
+      component.handleVisibilityChange(true);
+
+      expect(component.menuTrigger.openMenu).toHaveBeenCalled();
     });
   });
 
@@ -92,14 +115,6 @@ describe('UserProfileButtonContainerComponent', () => {
 
       expect(userProfileService.hideUserProfileSearch).toHaveBeenCalled();
     });
-
-    it('should call menu.closeMenu', () => {
-      component.menu.closeMenu = jest.fn();
-
-      component.hideUserProfileSearch();
-
-      expect(component.menu.closeMenu).toHaveBeenCalled();
-    });
   });
 
   describe('getUserButtonLabel', () => {

alfa-client/libs/user-profile/src/lib/user-profile-in-vorgang-container/user-profile-in-vorgang/user-profile-button-container/user-profile-button-container.component.ts

@@ -22,10 +22,14 @@
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
 import { StateResource } from '@alfa-client/tech-shared';
-import { getUserName, UserProfileResource, UserProfileService } from '@alfa-client/user-profile-shared';
+import {
+  getUserName,
+  UserProfileResource,
+  UserProfileService,
+} from '@alfa-client/user-profile-shared';
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
-import { DropdownMenuComponent } from '@ods/system';
-import { Observable } from 'rxjs';
+import { MatMenuTrigger } from '@angular/material/menu';
+import { Observable, tap } from 'rxjs';
 
 @Component({
   selector: 'alfa-user-profile-button-container',
@@ -33,8 +37,6 @@ import { Observable } from 'rxjs';
   styleUrls: ['./user-profile-button-container.component.scss'],
 })
 export class UserProfileButtonContainerComponent implements OnInit {
-  @ViewChild(DropdownMenuComponent) menu: DropdownMenuComponent;
-
   @Input()
   set userProfile(value: StateResource<UserProfileResource>) {
     this._userProfile = value;
@@ -45,14 +47,28 @@ export class UserProfileButtonContainerComponent implements OnInit {
     return this._userProfile;
   }
 
-  userProfileSearchVisibility$: Observable<boolean>;
+  @ViewChild(MatMenuTrigger) menuTrigger: MatMenuTrigger;
+
+  showUserProfileSearch$: Observable<boolean>;
   private _userProfile: StateResource<UserProfileResource>;
   userButtonLabel: string;
 
   constructor(public userProfileService: UserProfileService) {}
 
   ngOnInit(): void {
-    this.userProfileSearchVisibility$ = this.userProfileService.getUserProfileSearchVisibility();
+    this.showUserProfileSearch$ = this.getUserProfileSearchVisibility();
+  }
+
+  getUserProfileSearchVisibility(): Observable<boolean> {
+    return this.userProfileService
+      .getUserProfileSearchVisibility()
+      .pipe(tap((visibility: boolean) => this.handleVisibilityChange(visibility)));
+  }
+
+  handleVisibilityChange(visibility: boolean): void {
+    if (visibility) {
+      this.menuTrigger.openMenu();
+    }
   }
 
   public showUserProfileSearch(): void {
@@ -61,7 +77,6 @@ export class UserProfileButtonContainerComponent implements OnInit {
 
   public hideUserProfileSearch(): void {
     this.userProfileService.hideUserProfileSearch();
-    this.menu.closeMenu();
   }
 
   public getUserButtonLabel(): string {

alfa-client/libs/user-profile/src/lib/user-profile-search-container/user-profile-search-container.component.scss

@@ -22,6 +22,7 @@
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
 :host {
+  padding: 8px 16px;
   display: block;
   background-color: inherit;
 }

alfa-client/libs/user-profile/src/lib/user-profile-search-container/user-profile-search/user-profile-search.component.html

@@ -27,7 +27,7 @@
   <ozgcloud-autocomplete-editor
     data-test-id="user-search"
     label="Bearbeiter"
-    [required]="false"
+    [required]="true"
     [formControlName]="formServiceClass.SEARCH_FIELD"
     [values]="searchedUserProfiles.resource"
     (onKeyUp)="onKeyUp()"