feat: add members settings page

Author: Slartibartfass2

src/lib/components/composites/project-components/settings/members/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 { getName } 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 sm:flex-row items-center justify-between px-4 gap-4">
+    <div class="flex flex-col">
+        <h3>
+            {getName(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/components/composites/project-components/settings/members/ProjectMemberListEntrySkeleton.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { Skeleton } from "$lib/components/primitives/skeleton";
+</script>
+
+<div class="flex flex-col sm:flex-row items-center justify-between px-4 gap-4">
+    <div class="flex flex-col gap-1">
+        <Skeleton class="h-6 w-40 rounded-full" />
+        <Skeleton class="h-5 w-52 rounded-full" />
+    </div>
+    <Skeleton class="h-7 w-40 rounded-full" />
+</div>

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

@@ -1,8 +1,13 @@
 <script lang="ts">
+    import ProjectMemberListEntry from "$lib/components/composites/project-components/settings/members/ProjectMemberListEntry.svelte";
+    import ProjectMemberListEntrySkeleton from "$lib/components/composites/project-components/settings/members/ProjectMemberListEntrySkeleton.svelte";
     import ProjectSettingsLayout from "$lib/components/composites/project-components/settings/ProjectSettingsLayout.svelte";
+    import Separator from "$lib/components/primitives/separator/separator.svelte";
+    import Button from "$lib/components/primitives/button/button.svelte";
 
     let { data } = $props();
-    const { projectId, loadingProject } = data;
+    const { user, projectId, loadingProject, loadingMembers } = data;
+    const numberOfSkeletons = 7;
 </script>
 
 <svelte:head>
@@ -15,4 +20,47 @@
     {/await}
 </svelte:head>
 
-<ProjectSettingsLayout {projectId} selectedTab="members">Members content</ProjectSettingsLayout>
+<ProjectSettingsLayout {projectId} selectedTab="members">
+    {#if user.isAdmin}
+        <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}
+            {#each { length: numberOfSkeletons }, i}
+                <ProjectMemberListEntrySkeleton />
+                {#if i < numberOfSkeletons - 1}
+                    <Separator />
+                {/if}
+            {/each}
+        {:then members}
+            {#each members as member, i}
+                <!-- TODO: Replace isInvitationPending with actual value -->
+                <ProjectMemberListEntry
+                    {member}
+                    isCurrentUser={member.id === user.id}
+                    isInvitationPending={i === 2}
+                    isAdminView={user.isAdmin}
+                />
+                {#if i < members.length - 1}
+                    <Separator />
+                {/if}
+            {/each}
+            {#if members.length === 0}
+                <div class="m-auto py-1">
+                    <span class="text-hint">No members found</span>
+                </div>
+            {/if}
+        {:catch error}
+            <div class="m-auto py-4">
+                <span class="text-error">
+                    Loading Project Members failed{error ? `: ${error.message}` : "."}
+                </span>
+            </div>
+        {/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,
+    };
+};

tests/integration/project-components/settings/members/project-members-list-entry-skeleton.test.ts

@@ -0,0 +1,12 @@
+import ProjectMemberListEntrySkeleton from "$lib/components/composites/project-components/settings/members/ProjectMemberListEntrySkeleton.svelte";
+import { render, screen } from "@testing-library/svelte";
+import { describe, expect, test } from "vitest";
+
+describe("ProjectMembersListEntrySkeleton", () => {
+    test("When all props are provided, then component is rendered correctly", () => {
+        render(ProjectMemberListEntrySkeleton);
+
+        const skeletons = screen.queryAllByTestId("skeleton");
+        expect(skeletons).toHaveLength(3);
+    });
+});

tests/integration/project-components/settings/members/project-members-list-entry.test.ts

@@ -0,0 +1,5 @@
+import { describe, test } from "vitest";
+
+describe("ProjectMembersListEntry", () => {
+    test("When all props are provided, then component is rendered correctly", () => {});
+});