diff --git a/alfa-client/libs/admin/settings/src/lib/admin-settings.module.ts b/alfa-client/libs/admin/settings/src/lib/admin-settings.module.ts
index 321e7c04c5850b85027d827f2bc43e971cdef1b1..547ed3eb703a152778d7bb53bd6658a5abfe7d3d 100644
--- a/alfa-client/libs/admin/settings/src/lib/admin-settings.module.ts
+++ b/alfa-client/libs/admin/settings/src/lib/admin-settings.module.ts
@@ -7,7 +7,7 @@ import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import KcAdminClient from '@keycloak/keycloak-admin-client';
import { ButtonWithSpinnerComponent, TextareaEditorComponent } from '@ods/component';
-import { MailboxIconComponent, PersonIconComponent, TextInputComponent } from '@ods/system';
+import { ListComponent, ListItemComponent, MailboxIconComponent, PersonIconComponent, TextInputComponent } from '@ods/system';
import { createSettingListResourceService, SettingListResourceService } from './admin-settings-resource.service';
import { SettingsService } from './admin-settings.service';
import { ConfigurationResourceService, createConfigurationResourceService } from './configuration/configuration-resource.service';
@@ -58,6 +58,8 @@ import { UsersRolesComponent } from './users-roles/users-roles.component';
MailboxIconComponent,
PersonIconComponent,
ToUserNamePipe,
+ ListComponent,
+ ListItemComponent,
],
exports: [PostfachContainerComponent, OrganisationseinheitContainerComponent, NavigationItemComponent, UsersRolesComponent],
providers: [
diff --git a/alfa-client/libs/admin/settings/src/lib/users-roles/users-roles.component.html b/alfa-client/libs/admin/settings/src/lib/users-roles/users-roles.component.html
index 38c6cab182bd292ea1d60227a3d03eef8a7d621e..e22ebee9686297df2df289a14d42508c0d008ad7 100644
--- a/alfa-client/libs/admin/settings/src/lib/users-roles/users-roles.component.html
+++ b/alfa-client/libs/admin/settings/src/lib/users-roles/users-roles.component.html
@@ -1,61 +1,51 @@
<h1 class="heading-1">Benutzer & Rollen</h1>
<ods-button-with-spinner text="Benutzer hinzufügen" class="py-8" dataTestId="add-user-button" />
-<ng-container *ngIf="users$ | async as users">
- <ul class="divide-y divide-gray-300 rounded-md bg-background-50 text-text shadow-sm ring-1 ring-gray-300 empty:hidden">
- <li *ngFor="let user of users.resource">
- <a
- href="#"
- (click)="(false)"
- class="flex flex-col items-start justify-between gap-6 border-primary-600/50 px-6 py-4 hover:bg-background-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus lg:flex-row"
- >
- <div class="flex-1 basis-1/2">
- <div class="mb-2 flex flex-wrap items-center gap-3">
- <h3 class="text-md font-semibold">{{ user | toUserName }}</h3>
- <dl class="flex flex-wrap gap-2">
- <dt class="sr-only">Rollen:</dt>
- <dd
- *ngFor="let role of user.roles"
- class="inline-flex flex-shrink-0 items-center rounded-full bg-green-50 px-1.5 py-0.5 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20"
- >
- {{ role }}
- </dd>
- </dl>
- </div>
+<ods-list *ngIf="users$ | async as users">
+ <ods-list-item *ngFor="let user of users.resource" [routerLink]="user.username">
+ <div class="flex-1 basis-1/2">
+ <div class="mb-2 flex flex-wrap items-center gap-3">
+ <h3 class="text-md font-semibold">{{ user | toUserName }}</h3>
+ <dl class="flex flex-wrap gap-2">
+ <dt class="sr-only">Rollen:</dt>
+ <dd
+ *ngFor="let role of user.roles"
+ class="inline-flex flex-shrink-0 items-center rounded-full bg-green-50 px-1.5 py-0.5 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20"
+ >
+ {{ role }}
+ </dd>
+ </dl>
+ </div>
- <dl>
- <div *ngIf="user.email" class="flex items-center gap-2">
- <dt>
- <span class="sr-only">E-Mail:</span>
- <ods-mailbox-icon size="small" class="stroke-gray-600" />
- </dt>
- <dd>{{ user.email }}</dd>
- </div>
- <div class="flex items-center gap-2">
- <dt>
- <span class="sr-only">Benutzername:</span>
- <ods-person-icon />
- </dt>
- <dd>{{ user.username }}</dd>
- </div>
- </dl>
+ <dl>
+ <div *ngIf="user.email" class="flex items-center gap-2">
+ <dt>
+ <span class="sr-only">E-Mail:</span>
+ <ods-mailbox-icon size="small" class="stroke-gray-600" />
+ </dt>
+ <dd>{{ user.email }}</dd>
</div>
+ <div class="flex items-center gap-2">
+ <dt>
+ <span class="sr-only">Benutzername:</span>
+ <ods-person-icon />
+ </dt>
+ <dd>{{ user.username }}</dd>
+ </div>
+ </dl>
+ </div>
- <div class="flex-1 basis-1/2">
- <h4 class="sr-only">Zuständige Stellen</h4>
+ <div class="flex-1 basis-1/2">
+ <h4 class="sr-only">Zuständige Stellen</h4>
- <ng-container *ngIf="user.groups.length > 0; else noGroups">
- <ul class="list-outside list-disc pl-4">
- <ng-container *ngFor="let group of user.groups | slice: 0 : GROUPS_TO_DISPLAY">
- <li>{{ group }}</li>
- </ng-container>
- </ul>
- <p *ngIf="user.groups.length > GROUPS_TO_DISPLAY" class="pl-4 text-gray-500">
- und {{ user.groups.length - 3 }} weitere
- </p>
+ <ng-container *ngIf="user.groups.length > 0; else noGroups">
+ <ul class="list-outside list-disc pl-4">
+ <ng-container *ngFor="let group of user.groups | slice: 0 : GROUPS_TO_DISPLAY">
+ <li>{{ group }}</li>
</ng-container>
- <ng-template #noGroups>keine zuständige Stelle zugewiesen</ng-template>
- </div>
- </a>
- </li>
- </ul>
-</ng-container>
+ </ul>
+ <p *ngIf="user.groups.length > GROUPS_TO_DISPLAY" class="pl-4 text-gray-500">und {{ user.groups.length - 3 }} weitere</p>
+ </ng-container>
+ <ng-template #noGroups>keine zuständige Stelle zugewiesen</ng-template>
+ </div>
+ </ods-list-item>
+</ods-list>
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index 9a450a885bbe052655354f1410a730ad501ea22e..56c5707d5f5902b8ed9b58688fb606adc6eb8b0d 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -35,6 +35,8 @@ export * from './lib/icons/stamp-icon/stamp-icon.component';
export * from './lib/icons/users-icon/users-icon.component';
export * from './lib/instant-search/instant-search/instant-search.component';
export * from './lib/instant-search/instant-search/instant-search.model';
+export * from './lib/list/list-item/list-item.component';
+export * from './lib/list/list.component';
export * from './lib/navbar/nav-item/nav-item.component';
export * from './lib/navbar/navbar/navbar.component';
export * from './lib/testbtn/testbtn.component';
diff --git a/alfa-client/libs/design-system/src/lib/list/list-item/list-item.component.spec.ts b/alfa-client/libs/design-system/src/lib/list/list-item/list-item.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ecec5321cbfbc0feb43f59e6523a67612db186a3
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/list/list-item/list-item.component.spec.ts
@@ -0,0 +1,40 @@
+import { getElementFromFixture } from '@alfa-client/test-utils';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import faker from '@faker-js/faker';
+import { getDataTestClassOf } from 'libs/tech-shared/test/data-test';
+import { ListItemComponent } from './list-item.component';
+
+describe('ListItemComponent', () => {
+ let component: ListItemComponent;
+ let fixture: ComponentFixture<ListItemComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ListItemComponent],
+ providers: [provideRouter([])],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(ListItemComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ describe('input', () => {
+ describe('routerLink', () => {
+ it('should set href attribute', () => {
+ component.routerLink = faker.system.filePath();
+ const resultingLink: string = 'http://localhost' + component.routerLink;
+ const linkElement: HTMLLinkElement = getElementFromFixture(fixture, getDataTestClassOf('list-item-link'));
+
+ fixture.detectChanges();
+
+ expect(linkElement.href).toBe(resultingLink);
+ });
+ });
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/list/list-item/list-item.component.ts b/alfa-client/libs/design-system/src/lib/list/list-item/list-item.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..89e51332eda0375bfd8cfc77a383dca0a3f70175
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/list/list-item/list-item.component.ts
@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+ selector: 'ods-list-item',
+ standalone: true,
+ imports: [CommonModule, RouterLink],
+ template: `<li>
+ <a
+ [routerLink]="routerLink"
+ data-test-class="list-item-link"
+ class="flex flex-col items-start justify-between gap-6 border-primary-600/50 px-6 py-4 hover:bg-background-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus lg:flex-row"
+ ><ng-content
+ /></a>
+ </li>`,
+ styles: [':host { @apply block w-full }'],
+})
+export class ListItemComponent {
+ @Input() routerLink: string;
+}
diff --git a/alfa-client/libs/design-system/src/lib/list/list.component.spec.ts b/alfa-client/libs/design-system/src/lib/list/list.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..35076e4e0ed34c166da97e496571c43c642f14a0
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/list/list.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ListComponent } from './list.component';
+
+describe('ListComponent', () => {
+ let component: ListComponent;
+ let fixture: ComponentFixture<ListComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ListComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(ListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/list/list.component.ts b/alfa-client/libs/design-system/src/lib/list/list.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c4e903c1990ebc67a3bcb51f7e3596d0391c011e
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/list/list.component.ts
@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { ListItemComponent } from './list-item/list-item.component';
+
+@Component({
+ selector: 'ods-list',
+ standalone: true,
+ imports: [CommonModule, ListItemComponent],
+ template: `
+ <ul class="divide-y divide-gray-300 rounded-md bg-background-50 text-text shadow-sm ring-1 ring-gray-300 empty:hidden">
+ <ng-content />
+ </ul>
+ `,
+})
+export class ListComponent {}