OZG-6719 OZG-6961 add ods-list / ods-list-item

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: [

alfa-client/libs/admin/settings/src/lib/users-roles/users-roles.component.html

 <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"
-      >
+<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>
@@ -49,13 +43,9 @@
             <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>
+        <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>
-      </a>
-    </li>
-  </ul>
-</ng-container>
+  </ods-list-item>
+</ods-list>

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';

alfa-client/libs/design-system/src/lib/list/list-item/list-item.component.spec.ts

+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);
+      });
+    });
+  });
+});

alfa-client/libs/design-system/src/lib/list/list-item/list-item.component.ts

+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;
+}

alfa-client/libs/design-system/src/lib/list/list.component.spec.ts

+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();
+  });
+});

alfa-client/libs/design-system/src/lib/list/list.component.ts

+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 {}