feat: add ProjectMemberListEntry

This is a component that displays information about a project member an offers actions to change their role or to remove them from the project

Author: Slartibartfass2

src/lib/components/composites/project-components/settings/ProjectMemberListEntry.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    import Button from "$lib/components/primitives/button/button.svelte";
+    import type { User } from "$lib/model/backend";
+    import { getNameAsString } from "$lib/utils/common-helper";
+    import { cn } from "$lib/utils/shadcn-helper";
+    import Trash from "lucide-svelte/icons/trash";
+
+    interface Props {
+        member: User;
+        isCurrentUser: boolean;
+        isInvitationPending: boolean;
+        isAdminView: boolean;
+    }
+
+    let { member, isCurrentUser, isInvitationPending, isAdminView }: Props = $props();
+    const role = member.isAdmin ? "Admin" : "Member";
+    const isRoleReadonly = isCurrentUser || !isAdminView;
+</script>
+
+<div class="flex flex-col md:flex-row items-center justify-between px-4 gap-4">
+    <div class="flex flex-col">
+        <h3>
+            {getNameAsString(member)}
+            {#if isCurrentUser}
+                <span class="text-gray-400"> - You</span>
+            {/if}
+        </h3>
+        <span class="text-hint text-primary">{member.email}</span>
+    </div>
+    <div class="flex flex-row gap-2.5 items-center">
+        {#if isInvitationPending}
+            <span class="text-hint">Invitation Pending ...</span>
+        {/if}
+        <Button
+            class={cn(
+                "w-[7.7rem]",
+                isRoleReadonly
+                    ? "hover:bg-transparent hover:cursor-default"
+                    : "bg-gray-100 border border-gray-300 hover:bg-gray-200",
+            )}
+            variant={isRoleReadonly ? "ghost" : "secondary"}
+        >
+            <!-- Take maximum space so that text is left aligned -->
+            <span class="flex w-full">Role: {role}</span>
+        </Button>
+        {#if isAdminView}
+            <Button
+                class="bg-gray-100 border border-gray-300 hover:bg-gray-200 size-10"
+                disabled={isCurrentUser}
+            >
+                <Trash class=" text-red-500 !size-6" />
+            </Button>
+        {/if}
+    </div>
+</div>

src/lib/utils/common-helper.ts

@@ -43,4 +43,4 @@ function doesPaperNeedReview(paper: Paper, numberOfRequiredReviews: number): boo
     );
 }
 
-export { getNames, isPaperUndecided, doesPaperNeedReview };
+export { getNameAsString, getNames, isPaperUndecided, doesPaperNeedReview };