OZG-4995 OZG-5229 Add more-menu item component to oeid-list

alfa-client/apps/admin/src/assets/more.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
+</svg>

alfa-client/libs/admin-settings/src/lib/admin-settings.module.ts

@@ -20,6 +20,8 @@ import { NavigationComponent } from './navigation/navigation.component';
 import { OrganisationseinheitNavigationItemComponent } from './organisationseinheit/organisationseinheit-navigation-item/organisationseinheit-navigation-item.component';
 import KcAdminClient from '@keycloak/keycloak-admin-client';
 import { Environment, ENVIRONMENT_CONFIG } from '@alfa-client/environment-shared';
+import { MoreMenuComponent } from './shared/more-menu/more-menu.component';
+import { MoreItemButtonComponent } from './shared/more-menu/menu-item-button/more-item-button.component';
 
 @NgModule({
   declarations: [
@@ -35,6 +37,8 @@ import { Environment, ENVIRONMENT_CONFIG } from '@alfa-client/environment-shared
     SecondaryButtonComponent,
     OrganisationseinheitNavigationItemComponent,
     OrganisationseinheitListComponent,
+    MoreMenuComponent,
+    MoreItemButtonComponent,
   ],
   imports: [CommonModule, TechSharedModule, RouterModule, ReactiveFormsModule],
   exports: [

alfa-client/libs/admin-settings/src/lib/organisationseinheit/organisationseinheit-container/organisationseinheit-list/organisationseinheit-list.component.html

@@ -11,18 +11,24 @@
   <tr *ngFor="let group of groups" [id]="group.id">
     <td
       [attr.data-test-id]="'organisationseinheit-name-' + group.id | convertForDataTest"
-      class="w-96 border font-bold p-2 border-slate-500"
+      class="w-96 border border-slate-500 p-2 font-bold"
     >
       {{ group.name }}
     </td>
     <td
       [attr.data-test-id]="'organisationseinheit-attr-' + group.id | convertForDataTest"
-      class="w-96 border p-2 border-slate-500"
+      class="w-96 border border-slate-500 p-2"
     >
       OrganisationseinheitID: {{ group.organisationseinheitIds.join(', ') }}
+      <admin-more-menu class="float-right">
+        <admin-menu-item-button more-menu-item label="Bearbeiten"></admin-menu-item-button>
+        <admin-menu-item-button more-menu-item label="Löschen"></admin-menu-item-button>
+      </admin-more-menu>
     </td>
   </tr>
 </table>
 <ng-template #emptyMessage
-  ><span data-test-id="organisationseinheit-empty-message" class="mb-2 mt-2 block italic">Keine OrganisationseinheitIDs sind konfiguriert.</span>
+  ><span data-test-id="organisationseinheit-empty-message" class="mb-2 mt-2 block italic"
+    >Keine OrganisationseinheitIDs sind konfiguriert.</span
+  >
 </ng-template>

alfa-client/libs/admin-settings/src/lib/shared/more-menu/menu-item-button/more-item-button.component.html

+<button
+  (click)="clickEmitter.emit($event)"
+  [disabled]="disabled"
+  class="w-full bg-white px-3 py-2 text-sm font-semibold shadow-sm hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ozgblue-800 active:bg-ozgblue-600/90"
+>
+  {{ label }}
+</button>

alfa-client/libs/admin-settings/src/lib/shared/more-menu/menu-item-button/more-item-button.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MoreItemButtonComponent } from './more-item-button.component';
+
+describe('FlatButtonComponent', () => {
+  let component: MoreItemButtonComponent;
+  let fixture: ComponentFixture<MoreItemButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MoreItemButtonComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MoreItemButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

alfa-client/libs/admin-settings/src/lib/shared/more-menu/menu-item-button/more-item-button.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'admin-menu-item-button',
+  templateUrl: './more-item-button.component.html',
+  styles: [],
+})
+export class MoreItemButtonComponent {
+  @Output()
+  clickEmitter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+  @Input()
+  disabled: boolean;
+
+  @Input()
+  label: string;
+}

alfa-client/libs/admin-settings/src/lib/shared/more-menu/more-menu.component.html

+<div class="group relative inline-block text-[0px]">
+  <button class="rounded-full bg-gray-50 text-base hover:bg-gray-100 active:bg-gray-100/50">
+    <img src="/assets/more.svg" alt="More" class="w-6" />
+  </button>
+  <div class="absolute z-20 hidden text-base drop-shadow-lg group-focus-within:flex flex-col items-stretch">
+    <ng-content select="[more-menu-item]" />
+  </div>
+</div>

alfa-client/libs/admin-settings/src/lib/shared/more-menu/more-menu.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MoreMenuComponent } from './more-menu.component';
+
+describe('MoreMenuComponent', () => {
+  let component: MoreMenuComponent;
+  let fixture: ComponentFixture<MoreMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MoreMenuComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MoreMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

alfa-client/libs/admin-settings/src/lib/shared/more-menu/more-menu.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'admin-more-menu',
+  templateUrl: './more-menu.component.html',
+  styles: [],
+})
+export class MoreMenuComponent {}