ds-galo/frontend/src/routes/albums/[id]/members/+page.svelte

<script lang="ts">
	import { page } from '$app/stores';
	import { api } from '$lib/api';
	import { auth } from '$lib/stores/auth.svelte';
	import type { Album, AlbumMember } from '$lib/types';

	const albumId = $derived($page.params.id);

	let members = $state<AlbumMember[]>([]);
	let role = $state('');
	let inviteRole = $state('member');
	let inviteUses = $state(1);
	let inviteExpires = $state('168h');
	let inviteUrl = $state('');
	let error = $state('');

	const assignableRoles = $derived(
		role === 'owner'
			? ['admin', 'editor', 'member', 'viewer']
			: role === 'admin'
				? ['editor', 'member', 'viewer']
				: []
	);
	const inviteRoles = $derived(role === 'owner' ? ['admin', 'editor', 'member', 'viewer'] : ['member', 'viewer']);

	async function load() {
		try {
			const [membersData, albumData] = await Promise.all([
				api<{ members: AlbumMember[] }>(`/albums/${albumId}/members`),
				api<{ album: Album; role: string }>(`/albums/${albumId}`)
			]);
			members = membersData.members;
			role = albumData.role;
		} catch (e) {
			error = (e as Error).message;
		}
	}

	$effect(() => {
		load();
	});

	async function invite(ev: Event) {
		ev.preventDefault();
		error = '';
		try {
			const data = await api<{ invite: { token: string } }>(`/albums/${albumId}/invites`, {
				method: 'POST',
				body: { role: inviteRole, expires_in: inviteExpires, max_uses: inviteUses }
			});
			inviteUrl = `${location.origin}/invites/${data.invite.token}`;
		} catch (e) {
			error = (e as Error).message;
		}
	}

	async function changeRole(userId: string, newRole: string) {
		try {
			await api(`/albums/${albumId}/members/${userId}`, {
				method: 'PATCH',
				body: { role: newRole }
			});
			await load();
		} catch (e) {
			error = (e as Error).message;
		}
	}

	async function removeMember(userId: string) {
		try {
			await api(`/albums/${albumId}/members/${userId}`, { method: 'DELETE' });
			await load();
		} catch (e) {
			error = (e as Error).message;
		}
	}
</script>

<div class="mb-6 flex items-center justify-between">
	<h1 class="text-2xl font-bold">Участники</h1>
	<a href="/albums/{albumId}" class="text-primary text-sm">← К альбому</a>
</div>

{#if error}<p class="text-danger mb-4 text-sm">{error}</p>{/if}

<ul class="mb-8 divide-y divide-border border-border rounded-xl border">
	<li class="bg-bg-muted flex items-center justify-between px-4 py-3">
		<span class="font-medium">Владелец</span>
	</li>
	{#each members as member (member.user_id)}
		<li class="flex items-center justify-between gap-4 px-4 py-3">
			<span class="text-text"
				>{member.user.name} <span class="text-text-muted text-sm">({member.user.email})</span></span
			>
			<div class="flex items-center gap-2">
				{#if assignableRoles.length > 0}
					<select
						value={member.role}
						onchange={(e) => changeRole(member.user_id, e.currentTarget.value)}
						class="border-border bg-bg-elevated text-text rounded-lg border px-2 py-1 text-sm"
					>
						{#each Array.from(new Set([member.role, ...assignableRoles])) as r}
							<option value={r}>{r}</option>
						{/each}
					</select>
					<button
						type="button"
						class="text-danger text-sm"
						onclick={() => removeMember(member.user_id)}>Удалить</button
					>
				{:else}
					<span class="text-text-muted text-sm">{member.role}</span>
				{/if}
			</div>
		</li>
	{/each}
</ul>

{#if assignableRoles.length > 0}
	<form class="border-border bg-bg-elevated space-y-3 rounded-xl border p-4" onsubmit={invite}>
		<h2 class="font-semibold">Пригласить</h2>
		<div class="flex flex-wrap gap-3">
			<label class="text-sm">
				<span class="text-text-muted mb-1 block">Роль</span>
				<select
					bind:value={inviteRole}
					class="border-border bg-bg text-text rounded-lg border px-2 py-1.5"
				>
					{#each inviteRoles as r}
						<option value={r}>{r}</option>
					{/each}
				</select>
			</label>
			<label class="text-sm">
				<span class="text-text-muted mb-1 block">Использований</span>
				<input
					type="number"
					min="1"
					bind:value={inviteUses}
					class="border-border bg-bg text-text w-24 rounded-lg border px-2 py-1.5"
				/>
			</label>
			<label class="text-sm">
				<span class="text-text-muted mb-1 block">Срок</span>
				<input
					bind:value={inviteExpires}
					class="border-border bg-bg text-text w-32 rounded-lg border px-2 py-1.5"
				/>
			</label>
		</div>
		<button class="bg-primary text-primary-fg rounded-lg px-4 py-2 text-sm" type="submit"
			>Создать ссылку</button
		>
		{#if inviteUrl}
			<p class="text-text-muted break-all text-sm">Ссылка: <a class="text-primary" href={inviteUrl}>{inviteUrl}</a></p>
		{/if}
	</form>
{/if}