schon/storefront/app/composables/user/useAvatarUpload.ts
Alexandr SaVBaD Waltz 8d7685ef67 feat(notification): integrate global notification plugin using ElNotification
Added a global `notify` method via Nuxt plugin to replace `useNotification`. Improved messaging structure by embedding progress bars and handled dynamic durations. Updated usage across composables and components for consistency.

- Replaced `useNotification` with `$notify` in all applicable files.
- Updated `app.config.ts` to support customizable notification positions.
- Refactored affected composables for simplified notification calls.
- Enhanced progress indicator display within notifications.

Breaking Changes:
`useNotification` is removed, requiring migration to the new `$notify` API.
2026-03-01 15:30:47 +03:00

56 lines
1.1 KiB
TypeScript

import { UPLOAD_AVATAR } from '@graphql/mutations/user';
import type { IAvatarUploadResponse } from '@types';
export function useAvatarUpload() {
const { t } = useI18n();
const { $notify } = useNuxtApp();
const userStore = useUserStore();
const { mutate, onDone, error } = useMutation<IAvatarUploadResponse>(UPLOAD_AVATAR);
async function uploadAvatar(event: Event) {
const file = (event.target as HTMLInputElement).files?.[0];
if (!file) return;
await mutate(
{
file,
},
{
context: {
hasUpload: true,
},
},
);
}
onDone(({ data }) => {
const user = data?.uploadAvatar.user;
if (user) {
userStore.setUser(user);
$notify({
message: t('popup.success.avatarUpload'),
type: 'success',
});
}
});
watch(error, (err) => {
if (!err) return;
console.error('useAvatarUpload error:', err);
let message = t('popup.errors.defaultError');
if (isGraphQLError(err)) {
message = err.graphQLErrors?.[0]?.message || message;
} else {
message = err.message;
}
$notify({
message,
type: 'error',
title: t('popup.errors.main'),
});
});
return {
uploadAvatar,
};
}