wip

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

@@ -0,0 +1,52 @@
+<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-row items-center justify-between px-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>Invitation Pending ...</span>
+        {/if}
+        <Button
+            class={cn(
+                "w-[7.6rem]",
+                isRoleReadonly
+                    ? "hover:bg-transparent hover:cursor-default"
+                    : "bg-gray-100 border border-gray-300 hover:bg-gray-200",
+            )}
+            variant={isRoleReadonly ? "ghost" : "secondary"}>Role: {role}</Button
+        >
+        {#if isAdminView}
+            <Button
+                class="bg-gray-100 border border-gray-300 hover:bg-gray-200 p-3"
+                disabled={isCurrentUser}
+            >
+                <Trash class="text-red-500" strokeWidth="3" />
+            </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 };

src/routes/project/[projectId]/settings/members/+page.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
+    import ProjectMemberListEntry from "$lib/components/composites/project-components/settings/ProjectMemberListEntry.svelte";
     import ProjectSettingsLayout from "$lib/components/composites/project-components/settings/ProjectSettingsLayout.svelte";
+    import Button from "$lib/components/primitives/button/button.svelte";
+    import Separator from "$lib/components/primitives/separator/separator.svelte";
+    import { getNameAsString, getNames } from "$lib/utils/common-helper.js";
 
     let { data } = $props();
-    const { projectId, loadingProject } = data;
+    const { user, projectId, loadingProject, loadingMembers } = data;
 </script>
 
 <svelte:head>
@@ -15,4 +19,32 @@
     {/await}
 </svelte:head>
 
-<ProjectSettingsLayout {projectId} selectedTab="members">Members content</ProjectSettingsLayout>
+<ProjectSettingsLayout {projectId} selectedTab="members">
+    {#if true}
+        <div class="flex flex-row items-center justify-between">
+            <h1>Manage Access</h1>
+            <Button>Add User</Button>
+        </div>
+    {:else}
+        <h1>Members</h1>
+    {/if}
+    <div class="flex flex-col w-full h-fit rounded-md border gap-3 py-2.5">
+        {#await loadingMembers}
+            <span>Loading...</span>
+        {:then members}
+            {#each members as member, i}
+                <ProjectMemberListEntry
+                    {member}
+                    isCurrentUser={i === 0}
+                    isInvitationPending={i === 2}
+                    isAdminView={false}
+                />
+                {#if i < members.length - 1}
+                    <Separator />
+                {/if}
+            {/each}
+        {:catch error}
+            <span>{error.message}</span>
+        {/await}
+    </div>
+</ProjectSettingsLayout>

src/routes/project/[projectId]/settings/members/+page.ts

@@ -0,0 +1,15 @@
+import { BackendController } from "$lib/controller/backend-controller";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = ({ params }) => {
+    const projectId = Number(params.projectId);
+    const projectController = BackendController.getInstance().project(projectId);
+    const loadingMembers = projectController.getMembers();
+
+    // attach noop-catch to handle promise rejection correctly (see https://svelte.dev/docs/kit/load#Streaming-with-promises)
+    loadingMembers.catch(() => {});
+
+    return {
+        loadingMembers,
+    };
+};