mirror of
https://github.com/immich-app/immich.git
synced 2025-01-27 22:22:45 +01:00
feat(web): allow changing shared user role in album options modal (#13654)
* enable user options suggestion as workaround in top option menu in shared album * PR Review changes: Function rename to handleUpdateSharedUserRole
This commit is contained in:
parent
13d2febc33
commit
45c86e95e8
2 changed files with 37 additions and 2 deletions
web/src
lib/components/album-page
routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]
|
@ -6,6 +6,8 @@
|
||||||
type AlbumResponseDto,
|
type AlbumResponseDto,
|
||||||
type UserResponseDto,
|
type UserResponseDto,
|
||||||
AssetOrder,
|
AssetOrder,
|
||||||
|
AlbumUserRole,
|
||||||
|
updateAlbumUser,
|
||||||
} from '@immich/sdk';
|
} from '@immich/sdk';
|
||||||
import { mdiArrowDownThin, mdiArrowUpThin, mdiPlus, mdiDotsVertical } from '@mdi/js';
|
import { mdiArrowDownThin, mdiArrowUpThin, mdiPlus, mdiDotsVertical } from '@mdi/js';
|
||||||
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
|
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
|
||||||
|
@ -29,6 +31,7 @@
|
||||||
export let onToggleEnabledActivity: () => void;
|
export let onToggleEnabledActivity: () => void;
|
||||||
export let onShowSelectSharedUser: () => void;
|
export let onShowSelectSharedUser: () => void;
|
||||||
export let onRemove: (userId: string) => void;
|
export let onRemove: (userId: string) => void;
|
||||||
|
export let onRefreshAlbum: () => void;
|
||||||
|
|
||||||
let selectedRemoveUser: UserResponseDto | null = null;
|
let selectedRemoveUser: UserResponseDto | null = null;
|
||||||
|
|
||||||
|
@ -80,6 +83,21 @@
|
||||||
selectedRemoveUser = null;
|
selectedRemoveUser = null;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleUpdateSharedUserRole = async (user: UserResponseDto, role: AlbumUserRole) => {
|
||||||
|
try {
|
||||||
|
await updateAlbumUser({ id: album.id, userId: user.id, updateAlbumUserDto: { role } });
|
||||||
|
const message = $t('user_role_set', {
|
||||||
|
values: { user: user.name, role: role == AlbumUserRole.Viewer ? $t('role_viewer') : $t('role_editor') },
|
||||||
|
});
|
||||||
|
onRefreshAlbum();
|
||||||
|
notificationController.show({ type: NotificationType.Info, message });
|
||||||
|
} catch (error) {
|
||||||
|
handleError(error, $t('errors.unable_to_change_album_user_role'));
|
||||||
|
} finally {
|
||||||
|
selectedRemoveUser = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if !selectedRemoveUser}
|
{#if !selectedRemoveUser}
|
||||||
|
@ -122,15 +140,31 @@
|
||||||
<div>{$t('owner')}</div>
|
<div>{$t('owner')}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#each album.albumUsers as { user } (user.id)}
|
{#each album.albumUsers as { user, role } (user.id)}
|
||||||
<div class="flex items-center gap-2 py-2">
|
<div class="flex items-center gap-2 py-2">
|
||||||
<div>
|
<div>
|
||||||
<UserAvatar {user} size="md" />
|
<UserAvatar {user} size="md" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full">{user.name}</div>
|
<div class="w-full">{user.name}</div>
|
||||||
|
{#if role === AlbumUserRole.Viewer}
|
||||||
|
{$t('role_viewer')}
|
||||||
|
{:else}
|
||||||
|
{$t('role_editor')}
|
||||||
|
{/if}
|
||||||
{#if user.id !== album.ownerId}
|
{#if user.id !== album.ownerId}
|
||||||
<!-- Allow deletion for non-owners -->
|
|
||||||
<ButtonContextMenu icon={mdiDotsVertical} size="20" title={$t('options')}>
|
<ButtonContextMenu icon={mdiDotsVertical} size="20" title={$t('options')}>
|
||||||
|
{#if role === AlbumUserRole.Viewer}
|
||||||
|
<MenuOption
|
||||||
|
onClick={() => handleUpdateSharedUserRole(user, AlbumUserRole.Editor)}
|
||||||
|
text={$t('allow_edits')}
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
<MenuOption
|
||||||
|
onClick={() => handleUpdateSharedUserRole(user, AlbumUserRole.Viewer)}
|
||||||
|
text={$t('disallow_edits')}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
<!-- Allow deletion for non-owners -->
|
||||||
<MenuOption onClick={() => handleMenuRemove(user)} text={$t('remove')} />
|
<MenuOption onClick={() => handleMenuRemove(user)} text={$t('remove')} />
|
||||||
</ButtonContextMenu>
|
</ButtonContextMenu>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -747,6 +747,7 @@
|
||||||
await setModeToView();
|
await setModeToView();
|
||||||
}}
|
}}
|
||||||
onRemove={(userId) => handleRemoveUser(userId, ViewMode.OPTIONS)}
|
onRemove={(userId) => handleRemoveUser(userId, ViewMode.OPTIONS)}
|
||||||
|
onRefreshAlbum={refreshAlbum}
|
||||||
onClose={() => (viewMode = ViewMode.VIEW)}
|
onClose={() => (viewMode = ViewMode.VIEW)}
|
||||||
onToggleEnabledActivity={handleToggleEnableActivity}
|
onToggleEnabledActivity={handleToggleEnableActivity}
|
||||||
onShowSelectSharedUser={() => (viewMode = ViewMode.SELECT_USERS)}
|
onShowSelectSharedUser={() => (viewMode = ViewMode.SELECT_USERS)}
|
||||||
|
|
Loading…
Reference in a new issue