BE-#93: Add expense entry card

frontend/src/app/app.module.ts

@@ -64,6 +64,7 @@ import {
 import { ExpenseSplitWidgetComponent } from './widgets/expense-split-widget/expense-split-widget.component';
 import { CreateEditExpenseEntryDialogComponent } from './widgets/expense-split-widget/create-edit-expense-entry-dialog/create-edit-expense-entry-dialog.component';
 import {MatSelectModule} from "@angular/material/select";
+import { ExpenseEntryCardComponent } from './widgets/expense-split-widget/expense-entry-card/expense-entry-card.component';
 
 registerLocaleData(localeDe);
 
@@ -114,6 +115,7 @@ function loadMapApi(httpClient: HttpClient) {
     ParticipantCardComponent,
     ExpenseSplitWidgetComponent,
     CreateEditExpenseEntryDialogComponent,
+    ExpenseEntryCardComponent,
   ],
   imports: [
     BrowserModule,

frontend/src/app/widgets/expense-split-widget/expense-entry-card/expense-entry-card.component.html

@@ -0,0 +1,34 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>{{ entry.description }}</mat-card-title>
+    <button mat-icon-button class="menu-button">
+      <mat-icon>more_horiz</mat-icon>
+    </button>
+  </mat-card-header>
+
+  <mat-card-content>
+    <div class="content-container">
+      <div class="involved-users">
+        <mat-icon>call_split</mat-icon>
+        @if (isEveryoneInvolved) {
+          jeder
+        } @else {
+          {{ getInvolvedUserNames.join(", ") }}
+        }
+      </div>
+
+      <div class="distribution">
+
+      </div>
+
+      <div class="creator">
+        @if (creator) {
+          <img [ngSrc]="creator.profilePictureUrl" width="32" height="32" alt="" class="user-profile-picture">
+          {{ creator.firstName }} {{ creator.lastName }}
+        } @else {
+          <p>Zahlungsempfänger konnte nicht ermittelt werden.</p>
+        }
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>

frontend/src/app/widgets/expense-split-widget/expense-entry-card/expense-entry-card.component.scss

@@ -0,0 +1,17 @@
+.menu-button {
+  margin-left: auto;
+}
+
+.content-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: var(--size-12);
+}
+
+.user-profile-picture {
+  border-radius: 50%;
+  vertical-align: middle;
+  margin-right: 5px;
+}

frontend/src/app/widgets/expense-split-widget/expense-entry-card/expense-entry-card.component.spec.ts

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

frontend/src/app/widgets/expense-split-widget/expense-entry-card/expense-entry-card.component.ts

@@ -0,0 +1,34 @@
+import {Component, Input} from '@angular/core';
+import {ExpenseEntry} from "../../../../model/expense-split-widget";
+import {SimpleUser} from "../../../../model/user";
+import {Event} from "../../../../model/event";
+
+@Component({
+  selector: 'app-expense-entry-card',
+  templateUrl: './expense-entry-card.component.html',
+  styleUrl: './expense-entry-card.component.scss'
+})
+export class ExpenseEntryCardComponent {
+
+  @Input()
+  entry!: ExpenseEntry;
+
+  @Input()
+  eventData!: Event;
+
+  get getInvolvedUserNames(): string[] {
+    return this.entry.involvedUsers.map(u => [u.user.firstName, u.user.firstName].join(" "));
+  }
+
+  get isEveryoneInvolved(): boolean {
+    const eventParticipantIds = this.eventData.participants.map(p => p.id);
+    const involvedUserIds = this.entry.involvedUsers.map(u => u.user.id);
+    return eventParticipantIds.length === involvedUserIds.length &&
+      eventParticipantIds.every(id => involvedUserIds.includes(id));
+  }
+
+  get creator(): SimpleUser | undefined {
+    return this.eventData.participants.find(p => p.id === this.entry.creatorId);
+  }
+
+}

frontend/src/app/widgets/expense-split-widget/expense-split-widget.component.html

@@ -4,6 +4,17 @@
       <mat-icon>add</mat-icon>
       Ausgabe erstellen
     </button>
+
+    <ul class="expense-entry-list">
+      @for (entry of widget.entries; track entry.id) {
+        <li>
+          <app-expense-entry-card
+            [entry]="entry"
+            [eventData]="eventData"
+          ></app-expense-entry-card>
+        </li>
+      }
+    </ul>
   } @else {
     <div class="no-entries-container">
       <img ngSrc="./assets/noExpenseSplits.svg" width="300" height="200" alt="">

frontend/src/app/widgets/expense-split-widget/expense-split-widget.component.scss

@@ -1,3 +1,9 @@
+.expense-entry-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 .no-entries-container {
   display: grid;
   place-items: center;