Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-03-04 02:11:44 -05:00
Code Issues Activity

redesign user selection modal editor selector

Browse source
This commit is contained in:
mgabor 2024-04-24 13:00:06 +02:00
parent 303394a466
commit e6f344856c
1 changed files with 31 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
web/src/lib/components/album-page/user-selection-modal.svelte
View file

@ -21,7 +21,8 @@
export let album: AlbumResponseDto; export let album: AlbumResponseDto;
export let onClose: () => void; export let onClose: () => void;
let users: UserResponseDto[] = []; let users: UserResponseDto[] = [];
let selectedUsers: Record<string, { user: UserResponseDto; role: AlbumUserRole }> = {}; let selectedUsers: UserResponseDto[] = [];
let role = AlbumUserRole.Editor
const dispatch = createEventDispatcher<{ const dispatch = createEventDispatcher<{
select: AddUserDto[]; select: AddUserDto[];
@ -46,29 +47,26 @@
sharedLinks = data.filter((link) => link.album?.id === album.id); sharedLinks = data.filter((link) => link.album?.id === album.id);
}; };
const handleToggle = (user: UserResponseDto) => { const handleSelect = (user: UserResponseDto) => {
if (Object.keys(selectedUsers).includes(user.id)) { selectedUsers = selectedUsers.includes(user)
delete selectedUsers[user.id]; ? selectedUsers.filter((selectedUser) => selectedUser.id !== user.id)
selectedUsers = selectedUsers; : [...selectedUsers, user];
} else {
selectedUsers[user.id] = { user, role: AlbumUserRole.Editor };
}
}; };
const handleChangeRole = (user: UserResponseDto, role: AlbumUserRole) => { const handleUnselect = (user: UserResponseDto) => {
selectedUsers[user.id].role = role; selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
}; };
</script> </script>
<FullScreenModal id="user-selection-modal" title="Invite to album" showLogo {onClose}> <FullScreenModal id="user-selection-modal" title="Invite to album" showLogo {onClose}>
{#if Object.keys(selectedUsers).length > 0} {#if selectedUsers.length > 0}
<div class="mb-2 flex flex-wrap place-items-center gap-4 overflow-x-auto px-5 py-2 sticky"> <div class="mb-2 flex flex-wrap place-items-center gap-4 overflow-x-auto px-5 py-2 sticky">
<p class="font-medium">To</p> <p class="font-medium">To</p>
{#each Object.values(selectedUsers) as { user }} {#each selectedUsers as user}
{#key user.id} {#key user.id}
<button <button
on:click={() => handleToggle(user)} on:click={() => handleUnselect(user)}
class="flex place-items-center gap-1 rounded-full border border-gray-500 p-2 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700" class="flex place-items-center gap-1 rounded-full border border-gray-500 p-2 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700"
> >
<UserAvatar {user} size="sm" /> <UserAvatar {user} size="sm" />
@ -86,10 +84,10 @@
<div class="my-4"> <div class="my-4">
{#each users as user} {#each users as user}
<button <button
on:click={() => handleToggle(user)} on:click={() => handleSelect(user)}
class="flex w-full place-items-center gap-4 px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl" class="flex w-full place-items-center gap-4 px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
> >
{#if Object.keys(selectedUsers).includes(user.id)} {#if selectedUsers.includes(user)}
<div <div
class="flex h-10 w-10 items-center justify-center rounded-full border bg-immich-primary text-3xl text-white dark:border-immich-dark-gray dark:bg-immich-dark-primary dark:text-immich-dark-bg" class="flex h-10 w-10 items-center justify-center rounded-full border bg-immich-primary text-3xl text-white dark:border-immich-dark-gray dark:bg-immich-dark-primary dark:text-immich-dark-bg"
> >
@ -99,7 +97,7 @@
<UserAvatar {user} size="md" /> <UserAvatar {user} size="md" />
{/if} {/if}
<div class="text-left flex-grow"> <div class="text-left">
<p class="text-immich-fg dark:text-immich-dark-fg"> <p class="text-immich-fg dark:text-immich-dark-fg">
{user.name} {user.name}
</p> </p>
@ -107,21 +105,6 @@
{user.email} {user.email}
</p> </p>
</div> </div>
{#if Object.keys(selectedUsers).includes(user.id)}
<div on:click={(e) => e.stopPropagation()}>
<Dropdown
title="Role"
options={[
{ title: 'Editor', value: AlbumUserRole.Editor },
{ title: 'Viewer', value: AlbumUserRole.Viewer },
]}
selectedOption={{ title: 'Editor', value: AlbumUserRole.Editor }}
render={({ title }) => title}
on:select={({ detail: { value } }) => handleChangeRole(user, value)}
/>
</div>
{/if}
</button> </button>
{/each} {/each}
</div> </div>
@ -133,19 +116,33 @@
</div> </div>
{#if users.length > 0} {#if users.length > 0}
<div class="py-3"> <div class="flex items-center gap-2 py-3">
Add users as:
<Dropdown
class="flex-grow"
title="Role"
options={[
{ title: 'Editor', value: AlbumUserRole.Editor },
{ title: 'Viewer', value: AlbumUserRole.Viewer },
]}
selectedOption={{ title: 'Editor', value: AlbumUserRole.Editor }}
render={({ title }) => title}
on:select={({ detail: { value } }) => role = value}
/>
<div class="flex-grow">
<Button <Button
size="sm" size="sm"
fullwidth fullwidth
rounded="full" rounded="full"
disabled={Object.keys(selectedUsers).length === 0} disabled={selectedUsers.length === 0}
on:click={() => on:click={() =>
dispatch( dispatch(
'select', 'select',
Object.values(selectedUsers).map(({ user, ...rest }) => ({ userId: user.id, ...rest })), Object.values(selectedUsers).map((user) => ({ userId: user.id, role })),
)}>Add</Button )}>Add</Button
> >
</div> </div>
</div>
{/if} {/if}
<hr /> <hr />