273 lines
13 KiB
Vue
273 lines
13 KiB
Vue
<template>
|
||
<div class="edit-profile-form mt-3">
|
||
<h4>Редактировать профиль</h4>
|
||
<form @submit.prevent="handleSubmit">
|
||
<div class="mb-3">
|
||
<label for="editName" class="form-label">Имя:</label>
|
||
<input type="text" class="form-control" id="editName" v-model="formData.name" :disabled="profileLoading" />
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="editBio" class="form-label">О себе:</label>
|
||
<textarea class="form-control" id="editBio" rows="3" v-model="formData.bio" :disabled="profileLoading"></textarea>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="editDateOfBirth" class="form-label">Дата рождения:</label>
|
||
<input type="date" class="form-control" id="editDateOfBirth" v-model="formData.dateOfBirth" :disabled="profileLoading" />
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="editGender" class="form-label">Пол:</label>
|
||
<select class="form-select" id="editGender" v-model="formData.gender" :disabled="profileLoading">
|
||
<option value="">Не выбрано</option>
|
||
<option value="male">Мужской</option>
|
||
<option value="female">Женский</option>
|
||
<option value="other">Другой</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div v-if="profileSuccessMessage" class="alert alert-success">{{ profileSuccessMessage }}</div>
|
||
<div v-if="profileErrorMessage" class="alert alert-danger">{{ profileErrorMessage }}</div>
|
||
|
||
<button type="submit" class="btn btn-primary" :disabled="profileLoading">
|
||
<span v-if="profileLoading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||
{{ profileLoading ? 'Сохранение...' : 'Сохранить изменения' }}
|
||
</button>
|
||
</form>
|
||
|
||
<hr class="my-4">
|
||
|
||
<h4>Загрузить фото профиля</h4>
|
||
<form @submit.prevent="handleMultiplePhotoUpload" class="mt-3">
|
||
<div class="mb-3">
|
||
<label for="profilePhotos" class="form-label">Выберите фото:</label>
|
||
<input type="file" class="form-control" id="profilePhotos" @change="onFilesSelected" accept="image/*" multiple :disabled="photoLoading">
|
||
</div>
|
||
|
||
<div v-if="previewUrl" class="mb-3">
|
||
<p>Предпросмотр:</p>
|
||
<img :src="previewUrl" alt="Предпросмотр фото" class="img-thumbnail" style="max-width: 200px; max-height: 200px;" />
|
||
</div>
|
||
|
||
<div v-if="photoUploadSuccessMessage" class="alert alert-success">{{ photoUploadSuccessMessage }}</div>
|
||
<div v-if="photoUploadErrorMessage" class="alert alert-danger">{{ photoUploadErrorMessage }}</div>
|
||
|
||
<div v-for="(file, index) in selectedFiles" :key="index" class="upload-message" :class="file.status">
|
||
{{ file.message }}
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-secondary" :disabled="photoLoading || selectedFiles.length === 0">
|
||
<span v-if="photoLoading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||
{{ photoLoading ? 'Загрузка...' : 'Загрузить фото' }}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, watch } from 'vue';
|
||
import { useAuth } from '@/auth';
|
||
import api from '@/services/api';
|
||
import imageCompression from 'browser-image-compression'; // Импортируем библиотеку
|
||
|
||
const { user, fetchUser } = useAuth();
|
||
|
||
const formData = ref({
|
||
name: '',
|
||
bio: '',
|
||
dateOfBirth: '',
|
||
gender: '',
|
||
});
|
||
|
||
const profileLoading = ref(false);
|
||
const profileErrorMessage = ref('');
|
||
const profileSuccessMessage = ref('');
|
||
|
||
const photoLoading = ref(false);
|
||
const photoUploadErrorMessage = ref('');
|
||
const photoUploadSuccessMessage = ref('');
|
||
const selectedFile = ref(null); // Это будет использоваться для одиночной загрузки, если мы решим ее оставить
|
||
const previewUrl = ref(null); // И это
|
||
|
||
// Новые refs для множественной загрузки
|
||
const selectedFiles = ref([]); // Массив выбранных файлов
|
||
const photoUploadMessages = ref([]); // Массив сообщений о статусе загрузки каждого файла
|
||
|
||
const initializeFormData = (currentUser) => {
|
||
console.log('[EditProfileForm] Инициализация формы с данными:', currentUser);
|
||
if (currentUser) {
|
||
formData.value.name = currentUser.name || '';
|
||
formData.value.bio = currentUser.bio || '';
|
||
formData.value.dateOfBirth = currentUser.dateOfBirth ? new Date(currentUser.dateOfBirth).toISOString().split('T')[0] : '';
|
||
formData.value.gender = currentUser.gender || '';
|
||
// Не очищаем photoUploadMessages здесь, чтобы пользователь видел результаты предыдущих загрузок в сессии
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
console.log('[EditProfileForm] Компонент смонтирован');
|
||
initializeFormData(user.value);
|
||
});
|
||
|
||
watch(user, (newUser) => {
|
||
console.log('[EditProfileForm] Пользователь изменился:', newUser);
|
||
initializeFormData(newUser);
|
||
}, { deep: true });
|
||
|
||
const handleSubmit = async () => {
|
||
console.log('[EditProfileForm] Отправка формы профиля...');
|
||
profileLoading.value = true;
|
||
profileErrorMessage.value = '';
|
||
profileSuccessMessage.value = '';
|
||
|
||
try {
|
||
const dataToUpdate = {
|
||
name: formData.value.name,
|
||
bio: formData.value.bio,
|
||
dateOfBirth: formData.value.dateOfBirth || null,
|
||
gender: formData.value.gender || null,
|
||
};
|
||
|
||
console.log('[EditProfileForm] Данные для обновления профиля:', dataToUpdate);
|
||
|
||
const response = await api.updateUserProfile(dataToUpdate);
|
||
console.log('[EditProfileForm] Ответ от сервера (профиль):', response.data);
|
||
|
||
profileSuccessMessage.value = response.data.message || 'Профиль успешно обновлен!';
|
||
|
||
await fetchUser();
|
||
console.log('[EditProfileForm] Данные пользователя обновлены (профиль)');
|
||
|
||
} catch (err) {
|
||
console.error('[EditProfileForm] Ошибка при обновлении профиля:', err);
|
||
profileErrorMessage.value = (err.response && err.response.data && err.response.data.message)
|
||
? err.response.data.message
|
||
: 'Ошибка при обновлении профиля.';
|
||
} finally {
|
||
profileLoading.value = false;
|
||
}
|
||
};
|
||
|
||
// Вместо onFileSelected для одного файла, создадим onFilesSelected для нескольких
|
||
const onFilesSelected = (event) => {
|
||
const files = event.target.files;
|
||
if (files && files.length > 0) {
|
||
selectedFiles.value = Array.from(files); // Сохраняем массив файлов
|
||
photoUploadMessages.value = selectedFiles.value.map(file => ({ // Инициализируем сообщения для каждого файла
|
||
name: file.name,
|
||
status: 'pending', // pending, uploading, success, error
|
||
message: 'Ожидает загрузки...'
|
||
}));
|
||
// Очищаем старые одиночные состояния, если они были
|
||
selectedFile.value = null;
|
||
previewUrl.value = null;
|
||
photoUploadErrorMessage.value = '';
|
||
photoUploadSuccessMessage.value = '';
|
||
} else {
|
||
selectedFiles.value = [];
|
||
photoUploadMessages.value = [];
|
||
}
|
||
};
|
||
|
||
// Обновляем handlePhotoUpload для загрузки нескольких файлов последовательно
|
||
const handleMultiplePhotoUpload = async () => {
|
||
if (selectedFiles.value.length === 0) {
|
||
photoUploadErrorMessage.value = 'Пожалуйста, выберите файлы для загрузки.';
|
||
// Очистим индивидуальные сообщения, если они были
|
||
photoUploadMessages.value.forEach(msg => {
|
||
if (msg.status === 'pending') msg.status = 'cancelled';
|
||
});
|
||
return;
|
||
}
|
||
|
||
photoLoading.value = true; // Общий индикатор загрузки
|
||
photoUploadErrorMessage.value = ''; // Сбрасываем общую ошибку
|
||
|
||
for (let i = 0; i < selectedFiles.value.length; i++) {
|
||
const originalFile = selectedFiles.value[i];
|
||
const fileMessageIndex = photoUploadMessages.value.findIndex(m => m.name === originalFile.name && m.status !== 'success');
|
||
|
||
if (fileMessageIndex === -1) continue;
|
||
|
||
photoUploadMessages.value[fileMessageIndex].status = 'uploading';
|
||
photoUploadMessages.value[fileMessageIndex].message = 'Сжатие и загрузка...';
|
||
|
||
try {
|
||
// Опции сжатия
|
||
const options = {
|
||
maxSizeMB: 1, // Максимальный размер файла в MB
|
||
maxWidthOrHeight: 1920, // Максимальная ширина или высота
|
||
useWebWorker: true, // Использовать Web Worker для лучшей производительности
|
||
// Дополнительные опции можно найти в документации библиотеки
|
||
// Например, initialQuality для JPEG
|
||
}
|
||
|
||
console.log(`[EditProfileForm] Сжатие файла ${originalFile.name}...`);
|
||
const compressedFile = await imageCompression(originalFile, options);
|
||
console.log(`[EditProfileForm] Файл ${originalFile.name} сжат. Оригинальный размер: ${(originalFile.size / 1024 / 1024).toFixed(2)} MB, Новый размер: ${(compressedFile.size / 1024 / 1024).toFixed(2)} MB`);
|
||
|
||
const fd = new FormData();
|
||
// Важно: сервер ожидает имя файла, поэтому передаем его как третий аргумент
|
||
fd.append('profilePhoto', compressedFile, originalFile.name);
|
||
|
||
console.log(`[EditProfileForm] Отправка файла ${originalFile.name} (сжатого) на сервер...`);
|
||
const response = await api.uploadUserProfilePhoto(fd);
|
||
console.log(`[EditProfileForm] Ответ от сервера (фото ${originalFile.name}):`, response.data);
|
||
|
||
photoUploadMessages.value[fileMessageIndex].status = 'success';
|
||
photoUploadMessages.value[fileMessageIndex].message = response.data.message || 'Фото успешно загружено!';
|
||
|
||
await fetchUser();
|
||
console.log(`[EditProfileForm] Данные пользователя обновлены (фото ${originalFile.name})`);
|
||
|
||
} catch (err) {
|
||
console.error(`[EditProfileForm] Ошибка при сжатии или загрузке фото ${originalFile.name}:`, err);
|
||
photoUploadMessages.value[fileMessageIndex].status = 'error';
|
||
// Проверяем, является ли ошибка ошибкой сжатия
|
||
if (err instanceof Error && err.message.includes('compression')) {
|
||
photoUploadMessages.value[fileMessageIndex].message = `Ошибка при сжатии фото ${originalFile.name}.`;
|
||
} else {
|
||
photoUploadMessages.value[fileMessageIndex].message = (err.response && err.response.data && err.response.data.message)
|
||
? err.response.data.message
|
||
: `Ошибка при загрузке фото ${originalFile.name}.`;
|
||
}
|
||
}
|
||
}
|
||
|
||
// После завершения всех загрузок
|
||
selectedFiles.value = []; // Очищаем выбранные файлы
|
||
// Не очищаем photoInput.value здесь, т.к. input type="file" multiple сам управляет списком
|
||
// Можно сбросить значение инпута, чтобы пользователь мог выбрать те же файлы снова, если захочет
|
||
const photoInput = document.getElementById('profilePhotos'); // Убедимся, что ID правильный
|
||
if (photoInput) {
|
||
photoInput.value = '';
|
||
}
|
||
photoLoading.value = false; // Выключаем общий индикатор
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.edit-profile-form {
|
||
background-color: #f8f9fa;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.img-thumbnail {
|
||
border: 1px solid #dee2e6;
|
||
padding: 0.25rem;
|
||
background-color: #fff;
|
||
border-radius: 0.25rem;
|
||
}
|
||
.upload-message {
|
||
font-size: 0.9em;
|
||
}
|
||
.upload-message.success {
|
||
color: green;
|
||
}
|
||
.upload-message.error {
|
||
color: red;
|
||
}
|
||
.upload-message.pending, .upload-message.uploading {
|
||
color: orange;
|
||
}
|
||
</style> |