refactor: album users modal (#18266)

This commit is contained in:
Daniel Dietzler 2025-05-13 19:20:44 +02:00 committed by GitHub
parent 3fdc1df89c
commit 668288ca20
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 16 additions and 20 deletions

View File

@ -369,7 +369,6 @@ export enum SettingInputFieldType {
export const AlbumPageViewMode = {
SELECT_THUMBNAIL: 'select-thumbnail',
SELECT_ASSETS: 'select-assets',
VIEW_USERS: 'view-users',
VIEW: 'view',
OPTIONS: 'options',
};
@ -377,7 +376,6 @@ export const AlbumPageViewMode = {
export type AlbumPageViewMode =
| typeof AlbumPageViewMode.SELECT_THUMBNAIL
| typeof AlbumPageViewMode.SELECT_ASSETS
| typeof AlbumPageViewMode.VIEW_USERS
| typeof AlbumPageViewMode.VIEW
| typeof AlbumPageViewMode.OPTIONS;

View File

@ -23,12 +23,10 @@
interface Props {
album: AlbumResponseDto;
onClose: () => void;
onRemove: (userId: string) => void;
onRefreshAlbum: () => void;
onClose: (changed?: boolean) => void;
}
let { album, onClose, onRemove, onRefreshAlbum }: Props = $props();
let { album, onClose }: Props = $props();
let currentUser: UserResponseDto | undefined = $state();
@ -71,12 +69,12 @@
try {
await removeUserFromAlbum({ id: album.id, userId });
onRemove(userId);
const message =
userId === 'me'
? $t('album_user_left', { values: { album: album.albumName } })
: $t('album_user_removed', { values: { user: user.name } });
notificationController.show({ type: NotificationType.Info, message });
onClose(true);
} catch (error) {
handleError(error, $t('errors.unable_to_remove_album_users'));
}
@ -88,8 +86,9 @@
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 });
onClose(true);
} catch (error) {
handleError(error, $t('errors.unable_to_change_album_user_role'));
}

View File

@ -441,6 +441,14 @@
await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink.key) });
}
};
const handleEditUsers = async () => {
const changed = await modalManager.show(AlbumUsersModal, { album });
if (changed) {
album = await getAlbumInfo({ id: album.id, withoutAssets: true });
}
};
</script>
<div class="flex overflow-hidden" use:scrollMemoryClearer={{ routeStartsWith: AppRoute.ALBUMS }}>
@ -631,13 +639,13 @@
{/if}
<!-- owner -->
<button type="button" onclick={() => (viewMode = AlbumPageViewMode.VIEW_USERS)}>
<button type="button" onclick={handleEditUsers}>
<UserAvatar user={album.owner} size="md" />
</button>
<!-- users with write access (collaborators) -->
{#each album.albumUsers.filter(({ role }) => role === AlbumUserRole.Editor) as { user } (user.id)}
<button type="button" onclick={() => (viewMode = AlbumPageViewMode.VIEW_USERS)}>
<button type="button" onclick={handleEditUsers}>
<UserAvatar {user} size="md" />
</button>
{/each}
@ -649,7 +657,7 @@
color="gray"
size="20"
icon={mdiDotsVertical}
onclick={() => (viewMode = AlbumPageViewMode.VIEW_USERS)}
onclick={handleEditUsers}
/>
{/if}
@ -722,15 +730,6 @@
{/if}
</div>
{#if viewMode === AlbumPageViewMode.VIEW_USERS}
<AlbumUsersModal
onClose={() => (viewMode = AlbumPageViewMode.VIEW)}
{album}
onRemove={(userId) => handleRemoveUser(userId, AlbumPageViewMode.VIEW_USERS)}
onRefreshAlbum={refreshAlbum}
/>
{/if}
{#if viewMode === AlbumPageViewMode.OPTIONS && $user}
<AlbumOptions
{album}