49 lines
1.5 KiB
Svelte
49 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
|
|
import { authManager } from '$lib/managers/auth-manager.svelte';
|
|
import { handleError } from '$lib/utils/handle-error';
|
|
import { deleteProfileImage, updateMyUser, UserAvatarColor } from '@immich/sdk';
|
|
import { Modal, ModalBody, toastManager } from '@immich/ui';
|
|
import { t } from 'svelte-i18n';
|
|
|
|
interface Props {
|
|
onClose: () => void;
|
|
}
|
|
|
|
let { onClose }: Props = $props();
|
|
|
|
const colors: UserAvatarColor[] = Object.values(UserAvatarColor);
|
|
|
|
const onSave = async (color: UserAvatarColor) => {
|
|
try {
|
|
if (authManager.user.profileImagePath !== '') {
|
|
await deleteProfileImage();
|
|
}
|
|
|
|
toastManager.primary($t('saved_profile'));
|
|
|
|
const response = await updateMyUser({ userUpdateMeDto: { avatarColor: color } });
|
|
authManager.setUser(response);
|
|
onClose();
|
|
} catch (error) {
|
|
handleError(error, $t('errors.unable_to_save_profile'));
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<Modal title={$t('select_avatar_color')} size="small" {onClose}>
|
|
<ModalBody>
|
|
<div class="grid grid-cols-2 sm:grid-cols-5 gap-4 place-items-center">
|
|
{#each colors as color (color)}
|
|
<button type="button" onclick={() => onSave(color)}>
|
|
<UserAvatar
|
|
label={color}
|
|
user={{ ...authManager.user, profileImagePath: '', avatarColor: color }}
|
|
size="xl"
|
|
/>
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</ModalBody>
|
|
</Modal>
|