FE-#156: Mark left participants with a postfix in the name and a gray…

…scale filter for the profile picture

frontend/src/app/eventpage/participants-sidenav/participant-card/participant-card.component.html

@@ -4,10 +4,12 @@
     width="35"
     height="35"
     [ngSrc]="user.profilePictureUrl"
+    [class.left-participant-profile-picture]="user.hasLeft"
+    referrerpolicy="no-referrer"
     alt="Profilbild">
 
   <span class="participant-name">
-    {{ user.firstName }} {{ user.lastName }}
+    {{ getUserNameForParticipant(user) }}
     @if (isOwner) {
       <br>
       <span class="owner-hint">(Ersteller)</span>

frontend/src/app/eventpage/participants-sidenav/participant-card/participant-card.component.ts

@@ -1,5 +1,6 @@
 import {Component, Input} from '@angular/core';
-import {SimpleUser} from "../../../../model/user";
+import {EventParticipant} from "../../../../model/user";
+import {getUserNameForParticipant} from "../../../../utils/user.utils";
 
 @Component({
   selector: 'app-participant-card',
@@ -8,8 +9,9 @@ import {SimpleUser} from "../../../../model/user";
 })
 export class ParticipantCardComponent {
   @Input()
-  user!: SimpleUser
+  user!: EventParticipant
 
   @Input()
   isOwner!: boolean;
+  protected readonly getUserNameForParticipant = getUserNameForParticipant;
 }

frontend/src/app/eventpage/participants-sidenav/participants-sidenav.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {Event} from "../../../model/event";
-import {SimpleUser} from "../../../model/user";
+import {EventParticipant} from "../../../model/user";
 
 @Component({
   selector: 'app-participants-sidenav',
@@ -11,13 +11,13 @@ export class ParticipantsSidenavComponent implements OnInit {
   @Input()
   eventData!: Event;
 
-  owner: SimpleUser | undefined;
+  owner: EventParticipant | undefined;
 
   ngOnInit(): void {
     this.owner = this.eventData.participants.find((user) => user.id === this.eventData.creatorId)
   }
 
-  allParticipantsExceptOwner(): SimpleUser[] {
+  allParticipantsExceptOwner(): EventParticipant[] {
     return this.eventData.participants.filter((user) => user.id !== this.eventData.creatorId)
   }
 

frontend/src/app/widgets/expense-split-widget/create-edit-expense-entry-dialog/create-edit-expense-entry-dialog.component.html

@@ -16,11 +16,19 @@ <h2 mat-dialog-title>Ausgabe {{ isCreatingNewEntry ? 'erstellen' : 'bearbeiten'
         <span matTextSuffix>&nbsp;€</span>
       </mat-form-field>
 
-      @if (userService.user | async; as user) {
+      @if (creator | async; as creator) {
         <p class="label">Zahlungsempfänger</p>
         <div>
-          <img [ngSrc]="user.profilePictureUrl" width="32" height="32" alt="" class="user-profile-picture">
-          {{ user.firstName }} {{ user.lastName }}
+          <img
+            [ngSrc]="creator.profilePictureUrl"
+            [class.left-participant-profile-picture]="creator.hasLeft"
+            width="32"
+            height="32"
+            alt=""
+            referrerpolicy="no-referrer"
+            class="user-profile-picture"
+          >
+          {{ getUserNameForParticipant(creator) }}
         </div>
       }
 
@@ -29,8 +37,16 @@ <h2 mat-dialog-title>Ausgabe {{ isCreatingNewEntry ? 'erstellen' : 'bearbeiten'
         <mat-select formControlName="involvedUsers" multiple placeholder="Keine Personen ausgewählt">
           @for (user of users; track user.id) {
             <mat-option [value]="user.id">
-              <img [ngSrc]="user.profilePictureUrl" width="24" height="24" alt="" class="user-profile-picture">
-              {{ user.firstName }} {{ user.lastName }}
+              <img
+                [ngSrc]="user.profilePictureUrl"
+                [class.left-participant-profile-picture]="user.hasLeft"
+                width="24"
+                height="24"
+                alt=""
+                referrerpolicy="no-referrer"
+                class="user-profile-picture"
+              >
+              {{ getUserNameForParticipant(user) }}
             </mat-option>
           }
         </mat-select>

frontend/src/app/widgets/expense-split-widget/create-edit-expense-entry-dialog/create-edit-expense-entry-dialog.component.ts

@@ -1,9 +1,11 @@
 import {Component, Inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-import {SimpleUser} from "../../../../model/user";
+import {EventParticipant} from "../../../../model/user";
 import {ExpenseEntry, ExpenseEntryAddCommand, ExpenseEntryUpdateCommand} from "../../../../model/expense-split-widget";
 import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
 import {UserService} from "../../../../services/user.service";
+import {getUserNameForParticipant} from "../../../../utils/user.utils";
+import {filter, map, Observable, of} from "rxjs";
 
 @Component({
   selector: 'app-create-edit-expense-split-dialog',
@@ -12,13 +14,13 @@ import {UserService} from "../../../../services/user.service";
 })
 export class CreateEditExpenseEntryDialogComponent {
 
-  users: SimpleUser[];
+  users: EventParticipant[];
   entry: ExpenseEntry | undefined;
 
   formGroup: FormGroup;
 
   constructor(
-    @Inject(MAT_DIALOG_DATA) data: { users: SimpleUser[], entry: ExpenseEntry | undefined },
+    @Inject(MAT_DIALOG_DATA) data: { users: EventParticipant[], entry: ExpenseEntry | undefined },
     private dialogRef: MatDialogRef<CreateEditExpenseEntryDialogComponent>,
     public userService: UserService,
     fb: FormBuilder
@@ -51,8 +53,19 @@ export class CreateEditExpenseEntryDialogComponent {
     this.dialogRef.close(data);
   }
 
+  get creator(): Observable<EventParticipant | undefined> {
+    if (this.isCreatingNewEntry) {
+      return this.userService.user.asObservable().pipe(
+        filter(user => user != null),
+        map(user => this.users.find(p => p.id === user!.id))
+      );
+    }
+    return of(this.users.find(p => p.id === this.entry?.creatorId));
+  }
+
   get isCreatingNewEntry(): boolean {
     return !this.entry;
   }
 
+  protected readonly getUserNameForParticipant = getUserNameForParticipant;
 }

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

@@ -18,8 +18,16 @@
             }
           </span>
           <span>
-            <img [ngSrc]="debt.user.profilePictureUrl" width="24" height="24" alt="" class="user-profile-picture">
-            {{ debt.user.firstName }} {{ debt.user.lastName }}
+            <img
+              [ngSrc]="debt.user.profilePictureUrl"
+              [class.left-participant-profile-picture]="debt.user.hasLeft"
+              width="24"
+              height="24"
+              alt=""
+              referrerpolicy="no-referrer"
+              class="user-profile-picture"
+            >
+            {{ getUserNameForParticipant(debt.user)}}
           </span>
           <span class="debt-amount" [class.negative]="debt.debtAmount < 0">
             <strong>{{ Math.abs(debt.debtAmount) | currency: "EUR" }}</strong>

frontend/src/app/widgets/expense-split-widget/expense-debt-overview/expense-debt-overview.component.ts

@@ -1,5 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {Debt} from "../../../../model/expense-split-widget";
+import {getUserNameForParticipant} from "../../../../utils/user.utils";
 
 @Component({
   selector: 'app-expense-debt-overview',
@@ -16,4 +17,5 @@ export class ExpenseDebtOverviewComponent {
   }
 
   protected readonly Math = Math;
+  protected readonly getUserNameForParticipant = getUserNameForParticipant;
 }

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

@@ -42,8 +42,16 @@
 
       <div class="creator" matTooltip="Zahlungsempfänger">
         @if (creator) {
-          <img [ngSrc]="creator.profilePictureUrl" width="24" height="24" alt="" class="user-profile-picture">
-          {{ creator.firstName }} {{ creator.lastName }}
+          <img
+            [ngSrc]="creator.profilePictureUrl"
+            [class.left-participant-profile-picture]="creator.hasLeft"
+            width="24"
+            height="24"
+            alt=""
+            referrerpolicy="no-referrer"
+            class="user-profile-picture"
+          >
+          {{ getUserNameForParticipant(creator) }}
         } @else {
           <p>Zahlungsempfänger konnte nicht ermittelt werden.</p>
         }

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

@@ -1,7 +1,8 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {ExpenseEntry} from "../../../../model/expense-split-widget";
-import {SimpleUser} from "../../../../model/user";
+import {EventParticipant} from "../../../../model/user";
 import {Event} from "../../../../model/event";
+import {getUserNameForParticipant} from "../../../../utils/user.utils";
 
 @Component({
   selector: 'app-expense-entry-card',
@@ -23,7 +24,7 @@ export class ExpenseEntryCardComponent {
   onEdit = new EventEmitter();
 
   get getInvolvedUserNames(): string[] {
-    return this.entry.involvedUsers.map(u => [u.user.firstName, u.user.lastName].join(" "));
+    return this.entry.involvedUsers.map(u => getUserNameForParticipant(u.user));
   }
 
   get isEveryoneInvolved(): boolean {
@@ -33,8 +34,9 @@ export class ExpenseEntryCardComponent {
       eventParticipantIds.every(id => involvedUserIds.includes(id));
   }
 
-  get creator(): SimpleUser | undefined {
+  get creator(): EventParticipant | undefined {
     return this.eventData.participants.find(p => p.id === this.entry.creatorId);
   }
 
+  protected readonly getUserNameForParticipant = getUserNameForParticipant;
 }

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

@@ -37,7 +37,7 @@ export class ExpenseSplitWidgetComponent {
   createNewExpenseEntry() {
     const dialogRef = this.dialog.open(CreateEditExpenseEntryDialogComponent, {
       width: "600px",
-      data: {users: this.eventData.participants}
+      data: {users: this.eventData.participants.filter(p => !p.hasLeft)}
     });
 
     dialogRef.afterClosed().subscribe(addCommand => {

frontend/src/app/widgets/shopping-list-widget/shopping-list-entry-list-item/shopping-list-entry-list-item.component.html

@@ -5,7 +5,7 @@
     @if (item.buyerId) {
       <p class="einkaufliste-eintrag-card-content-buyerProfile" matTooltip="Käufer">
         <mat-icon>person</mat-icon>
-        {{ buyer?.firstName }} {{ buyer?.lastName }}
+        {{ buyer ? getUserName(buyer) : '?' }}
       </p>
     }
     <button mat-icon-button [matMenuTriggerFor]="menu">

frontend/src/app/widgets/shopping-list-widget/shopping-list-entry-list-item/shopping-list-entry-list-item.component.ts

@@ -1,7 +1,8 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {Entry} from "../../../../model/shoppinglist-widget";
 import {Event} from "../../../../model/event";
-import {SimpleUser} from "../../../../model/user";
+import {EventParticipant} from "../../../../model/user";
+import {getUserNameForParticipant} from "../../../../utils/user.utils";
 
 @Component({
   selector: 'app-einkaufliste-eintrag-list-item',
@@ -14,11 +15,12 @@ export class ShoppingListEntryListItemComponent {
   @Output() onEdit = new EventEmitter();
   @Output() onDelete = new EventEmitter();
 
-  get buyer(): SimpleUser | undefined {
+  get buyer(): EventParticipant | undefined {
     if (!this.item.buyerId) {
       return undefined;
     }
     return this.eventData.participants.find(p => p.id === this.item.buyerId);
   }
 
+  protected readonly getUserName = getUserNameForParticipant;
 }

frontend/src/model/event.ts

@@ -1,5 +1,5 @@
 import {BaseWidget} from "./common-widget";
-import {SimpleUser} from "./user";
+import {EventParticipant} from "./user";
 
 export type EventOverview = {
   id: string;
@@ -14,7 +14,7 @@ export type Event = EventOverview & {
   location: EventLocation;
   invitationLink: string | undefined;
   creatorId: string;
-  participants: SimpleUser[];
+  participants: EventParticipant[];
   widgets: BaseWidget[];
 }
 

frontend/src/model/expense-split-widget.ts

@@ -1,5 +1,5 @@
 import {BaseWidget, WidgetType} from "./common-widget";
-import {SimpleUser} from "./user";
+import {EventParticipant} from "./user";
 
 export type ExpenseSplitWidget = BaseWidget & {
   widgetType: WidgetType.EXPENSE_SPLIT;
@@ -18,12 +18,12 @@ export type ExpenseEntry = {
 }
 
 export type UsersWithPercentage = {
-  user: SimpleUser;
+  user: EventParticipant;
   percentage: number;
 }
 
 export type Debt = {
-  user: SimpleUser;
+  user: EventParticipant;
   debtAmount: number;
 }
 

frontend/src/model/user.ts

@@ -9,11 +9,12 @@ export type User = {
   guest: true | undefined;
 }
 
-export type SimpleUser = {
+export type EventParticipant = {
   id: string;
   firstName: string;
   lastName: string;
   profilePictureUrl: string;
+  hasLeft: boolean;
 }
 
 export type UserSettings = {

frontend/src/styles.scss

@@ -20,3 +20,7 @@ body {
   margin: 0;
   font-family: Mada, sans-serif;
 }
+
+.left-participant-profile-picture {
+  filter: grayscale(75%);
+}

frontend/src/utils/user.utils.ts

@@ -0,0 +1,9 @@
+import {EventParticipant} from "../model/user";
+
+export const getUserNameForParticipant = (participant: EventParticipant) => {
+  const userName = [participant.firstName, participant.lastName].join(" ");
+  if (participant.hasLeft) {
+    return userName + " (Verlassen)";
+  }
+  return userName;
+}