фикс
This commit is contained in:
Professional
parent
0156b554e7
commit
c04306a871
@ -119,7 +119,13 @@ const getReportById = async (req, res, next) => {
|
||||
return next(error);
|
||||
}
|
||||
|
||||
res.json(report);
|
||||
// Преобразуем adminComment в adminNotes для фронтенда
|
||||
const reportResponse = report.toObject();
|
||||
if (reportResponse.adminComment) {
|
||||
reportResponse.adminNotes = reportResponse.adminComment;
|
||||
}
|
||||
|
||||
res.json(reportResponse);
|
||||
|
||||
} catch (error) {
|
||||
console.error('[REPORT_CTRL] Ошибка при получении деталей жалобы:', error.message);
|
||||
@ -133,7 +139,7 @@ const getReportById = async (req, res, next) => {
|
||||
const updateReportStatus = async (req, res, next) => {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const { status, adminComment, actionTaken } = req.body;
|
||||
const { status, adminNotes } = req.body;
|
||||
const adminId = req.user._id;
|
||||
|
||||
const report = await Report.findById(id);
|
||||
@ -146,43 +152,32 @@ const updateReportStatus = async (req, res, next) => {
|
||||
// Обновляем жалобу
|
||||
report.status = status;
|
||||
report.reviewedBy = adminId;
|
||||
report.reviewedAt = new Date();
|
||||
|
||||
if (adminComment) {
|
||||
report.adminComment = adminComment;
|
||||
if (status === 'resolved' || status === 'dismissed') {
|
||||
report.reviewedAt = new Date();
|
||||
}
|
||||
|
||||
if (actionTaken) {
|
||||
report.actionTaken = actionTaken;
|
||||
if (adminNotes) {
|
||||
report.adminComment = adminNotes; // В модели поле называется adminComment
|
||||
}
|
||||
|
||||
await report.save();
|
||||
|
||||
// Если было предпринято действие, применяем его к пользователю
|
||||
if (actionTaken && actionTaken !== 'none') {
|
||||
const reportedUser = await User.findById(report.reportedUser);
|
||||
if (reportedUser) {
|
||||
switch (actionTaken) {
|
||||
case 'temporary_ban':
|
||||
case 'permanent_ban':
|
||||
case 'profile_removal':
|
||||
reportedUser.isActive = false;
|
||||
await reportedUser.save();
|
||||
console.log(`[REPORT_CTRL] Пользователь ${reportedUser._id} заблокирован по жалобе ${id}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
console.log(`[REPORT_CTRL] Жалоба ${id} обновлена администратором ${adminId}, статус: ${status}`);
|
||||
|
||||
// Возвращаем обновленную жалобу с заполненными связями
|
||||
const updatedReport = await Report.findById(id)
|
||||
.populate('reporter', 'name email')
|
||||
.populate('reportedUser', 'name email isActive')
|
||||
.populate('reviewedBy', 'name email');
|
||||
|
||||
// Преобразуем adminComment в adminNotes для фронтенда
|
||||
const reportResponse = updatedReport.toObject();
|
||||
if (reportResponse.adminComment) {
|
||||
reportResponse.adminNotes = reportResponse.adminComment;
|
||||
}
|
||||
|
||||
console.log(`[REPORT_CTRL] Жалоба ${id} обновлена администратором ${adminId}`);
|
||||
|
||||
res.json({
|
||||
message: 'Жалоба успешно обновлена',
|
||||
report: await Report.findById(id)
|
||||
.populate('reporter', 'name email')
|
||||
.populate('reportedUser', 'name email isActive')
|
||||
.populate('reviewedBy', 'name email')
|
||||
});
|
||||
res.json(reportResponse);
|
||||
|
||||
} catch (error) {
|
||||
console.error('[REPORT_CTRL] Ошибка при обновлении жалобы:', error.message);
|
||||
|
||||
@ -96,6 +96,19 @@ const routes = [
|
||||
name: 'AdminStatistics',
|
||||
component: () => import('../views/admin/AdminStatistics.vue'),
|
||||
meta: { requiresAuth: true, requiresAdmin: true }
|
||||
},
|
||||
{
|
||||
path: 'reports',
|
||||
name: 'AdminReports',
|
||||
component: () => import('../views/admin/AdminReports.vue'),
|
||||
meta: { requiresAuth: true, requiresAdmin: true }
|
||||
},
|
||||
{
|
||||
path: 'reports/:id',
|
||||
name: 'AdminReportDetail',
|
||||
component: () => import('../views/admin/AdminReportDetail.vue'),
|
||||
meta: { requiresAuth: true, requiresAdmin: true },
|
||||
props: true
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -23,6 +23,9 @@
|
||||
<router-link :to="{ name: 'AdminConversations' }" active-class="active">
|
||||
<i class="bi-chat-dots"></i> Диалоги
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'AdminReports' }" active-class="active">
|
||||
<i class="bi-exclamation-triangle"></i> Жалобы
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'AdminStatistics' }" active-class="active">
|
||||
<i class="bi-graph-up"></i> Статистика
|
||||
</router-link>
|
||||
@ -48,6 +51,12 @@
|
||||
</div>
|
||||
<span class="nav-text">Диалоги</span>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'AdminReports' }" class="nav-item" active-class="active">
|
||||
<div class="nav-icon">
|
||||
<i class="bi-exclamation-triangle"></i>
|
||||
</div>
|
||||
<span class="nav-text">Жалобы</span>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'AdminStatistics' }" class="nav-item" active-class="active">
|
||||
<div class="nav-icon">
|
||||
<i class="bi-graph-up"></i>
|
||||
|
||||
627
src/views/admin/AdminReportDetail.vue
Normal file
627
src/views/admin/AdminReportDetail.vue
Normal file
@ -0,0 +1,627 @@
|
||||
<template>
|
||||
<div class="admin-report-detail">
|
||||
<div class="header-controls">
|
||||
<button @click="goBack" class="back-btn">
|
||||
« Назад к списку жалоб
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="loading-indicator">
|
||||
Загрузка информации о жалобе...
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<div v-if="report && !loading" class="report-container">
|
||||
<h2>Детали жалобы</h2>
|
||||
|
||||
<div class="report-card">
|
||||
<div class="report-header">
|
||||
<div class="report-info">
|
||||
<h3>Жалоба #{{ report._id.substring(0, 8) }}</h3>
|
||||
<span class="status-badge" :class="getStatusClass(report.status)">
|
||||
{{ getStatusText(report.status) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="report-date">
|
||||
Подана {{ formatDate(report.createdAt) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="report-content">
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<label>Причина жалобы:</label>
|
||||
<span class="reason-badge" :class="getReasonClass(report.reason)">
|
||||
{{ getReasonText(report.reason) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="info-item" v-if="report.description">
|
||||
<label>Описание:</label>
|
||||
<p class="description">{{ report.description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<label>Жалующийся:</label>
|
||||
<div class="user-info">
|
||||
<span>{{ report.reporter?.name || 'Пользователь удален' }}</span>
|
||||
<span class="email">{{ report.reporter?.email || '' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<label>На пользователя:</label>
|
||||
<div class="user-info">
|
||||
<span>{{ report.reportedUser?.name || 'Пользователь удален' }}</span>
|
||||
<span class="email">{{ report.reportedUser?.email || '' }}</span>
|
||||
<button
|
||||
v-if="report.reportedUser?._id"
|
||||
@click="viewUser(report.reportedUser._id)"
|
||||
class="btn view-user-btn"
|
||||
>
|
||||
Просмотр профиля
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-item" v-if="report.adminNotes">
|
||||
<label>Заметки администратора:</label>
|
||||
<p class="admin-notes">{{ report.adminNotes }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-item" v-if="report.resolvedAt">
|
||||
<label>Дата рассмотрения:</label>
|
||||
<span>{{ formatDate(report.resolvedAt) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="report-actions" v-if="report.status === 'pending'">
|
||||
<h4>Действия</h4>
|
||||
<div class="action-buttons">
|
||||
<button @click="showResolveModal = true" class="btn resolve-btn">
|
||||
<i class="bi-check-circle"></i>
|
||||
Рассмотреть
|
||||
</button>
|
||||
<button @click="showDismissModal = true" class="btn dismiss-btn">
|
||||
<i class="bi-x-circle"></i>
|
||||
Отклонить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Модальное окно для рассмотрения жалобы -->
|
||||
<div v-if="showResolveModal" class="modal-overlay" @click="showResolveModal = false">
|
||||
<div class="modal" @click.stop>
|
||||
<h3>Рассмотрение жалобы</h3>
|
||||
<p>Вы собираетесь отметить эту жалобу как рассмотренную.</p>
|
||||
<div class="form-group">
|
||||
<label>Заметки администратора (необязательно):</label>
|
||||
<textarea v-model="adminNotes" placeholder="Укажите принятые меры или комментарии..."></textarea>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button @click="updateReportStatus('resolved')" class="btn resolve-btn" :disabled="updating">
|
||||
{{ updating ? 'Обработка...' : 'Рассмотреть' }}
|
||||
</button>
|
||||
<button @click="showResolveModal = false" class="btn cancel-btn">Отмена</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Модальное окно для отклонения жалобы -->
|
||||
<div v-if="showDismissModal" class="modal-overlay" @click="showDismissModal = false">
|
||||
<div class="modal" @click.stop>
|
||||
<h3>Отклонение жалобы</h3>
|
||||
<p>Вы собираетесь отклонить эту жалобу.</p>
|
||||
<div class="form-group">
|
||||
<label>Заметки администратора (необязательно):</label>
|
||||
<textarea v-model="adminNotes" placeholder="Укажите причину отклонения..."></textarea>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button @click="updateReportStatus('dismissed')" class="btn dismiss-btn" :disabled="updating">
|
||||
{{ updating ? 'Обработка...' : 'Отклонить' }}
|
||||
</button>
|
||||
<button @click="showDismissModal = false" class="btn cancel-btn">Отмена</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
name: 'AdminReportDetail',
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const report = ref(null);
|
||||
const loading = ref(false);
|
||||
const error = ref(null);
|
||||
const updating = ref(false);
|
||||
const showResolveModal = ref(false);
|
||||
const showDismissModal = ref(false);
|
||||
const adminNotes = ref('');
|
||||
|
||||
// Загрузка информации о жалобе
|
||||
const loadReport = async () => {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('userToken');
|
||||
const response = await axios.get(`/api/admin/reports/${props.id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
report.value = response.data;
|
||||
} catch (err) {
|
||||
console.error('Ошибка при загрузке жалобы:', err);
|
||||
error.value = 'Ошибка при загрузке информации о жалобе.';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Обновление статуса жалобы
|
||||
const updateReportStatus = async (status) => {
|
||||
updating.value = true;
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('userToken');
|
||||
const response = await axios.put(`/api/admin/reports/${props.id}`, {
|
||||
status,
|
||||
adminNotes: adminNotes.value
|
||||
}, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
// Обновляем локальные данные
|
||||
report.value = response.data;
|
||||
|
||||
// Закрываем модальные окна
|
||||
showResolveModal.value = false;
|
||||
showDismissModal.value = false;
|
||||
adminNotes.value = '';
|
||||
|
||||
alert(`Жалоба успешно ${status === 'resolved' ? 'рассмотрена' : 'отклонена'}`);
|
||||
} catch (err) {
|
||||
console.error('Ошибка при обновлении статуса жалобы:', err);
|
||||
alert('Ошибка при обновлении статуса жалобы');
|
||||
} finally {
|
||||
updating.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Возврат к списку жалоб
|
||||
const goBack = () => {
|
||||
router.push({ name: 'AdminReports' });
|
||||
};
|
||||
|
||||
// Просмотр профиля пользователя
|
||||
const viewUser = (userId) => {
|
||||
router.push({ name: 'AdminUserDetail', params: { id: userId } });
|
||||
};
|
||||
|
||||
// Форматирование даты
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return '';
|
||||
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString('ru-RU', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
// Получение текста причины жалобы
|
||||
const getReasonText = (reason) => {
|
||||
const reasons = {
|
||||
inappropriate_content: 'Неподходящий контент',
|
||||
fake_profile: 'Фальшивый профиль',
|
||||
harassment: 'Домогательства',
|
||||
spam: 'Спам',
|
||||
underage: 'Несовершеннолетний',
|
||||
other: 'Другое'
|
||||
};
|
||||
return reasons[reason] || reason;
|
||||
};
|
||||
|
||||
// Получение CSS класса для причины
|
||||
const getReasonClass = (reason) => {
|
||||
const classes = {
|
||||
inappropriate_content: 'reason-inappropriate',
|
||||
fake_profile: 'reason-fake',
|
||||
harassment: 'reason-harassment',
|
||||
spam: 'reason-spam',
|
||||
underage: 'reason-underage',
|
||||
other: 'reason-other'
|
||||
};
|
||||
return classes[reason] || 'reason-other';
|
||||
};
|
||||
|
||||
// Получение текста статуса
|
||||
const getStatusText = (status) => {
|
||||
const statuses = {
|
||||
pending: 'На рассмотрении',
|
||||
resolved: 'Рассмотрена',
|
||||
dismissed: 'Отклонена'
|
||||
};
|
||||
return statuses[status] || status;
|
||||
};
|
||||
|
||||
// Получение CSS класса для статуса
|
||||
const getStatusClass = (status) => {
|
||||
const classes = {
|
||||
pending: 'status-pending',
|
||||
resolved: 'status-resolved',
|
||||
dismissed: 'status-dismissed'
|
||||
};
|
||||
return classes[status] || 'status-pending';
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadReport();
|
||||
});
|
||||
|
||||
return {
|
||||
report,
|
||||
loading,
|
||||
error,
|
||||
updating,
|
||||
showResolveModal,
|
||||
showDismissModal,
|
||||
adminNotes,
|
||||
loadReport,
|
||||
updateReportStatus,
|
||||
goBack,
|
||||
viewUser,
|
||||
formatDate,
|
||||
getReasonText,
|
||||
getReasonClass,
|
||||
getStatusText,
|
||||
getStatusClass
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-report-detail {
|
||||
padding-bottom: 2rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.6rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background: #545b62;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid #f5c6cb;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.report-card {
|
||||
background: white;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.report-header {
|
||||
padding: 1.5rem;
|
||||
background: linear-gradient(to right, #f8f9fa, #e9ecef);
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.report-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.report-info h3 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.report-date {
|
||||
color: #6c757d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.report-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.info-item label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.description,
|
||||
.admin-notes {
|
||||
background: #f8f9fa;
|
||||
padding: 1rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid #e9ecef;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.email {
|
||||
color: #6c757d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.view-user-btn {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.4rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
margin-top: 0.5rem;
|
||||
align-self: flex-start;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.view-user-btn:hover {
|
||||
background: #0056b3;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.reason-badge,
|
||||
.status-badge {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reason-inappropriate { background-color: #f8d7da; color: #721c24; }
|
||||
.reason-fake { background-color: #fff3cd; color: #856404; }
|
||||
.reason-harassment { background-color: #d1ecf1; color: #0c5460; }
|
||||
.reason-spam { background-color: #d4edda; color: #155724; }
|
||||
.reason-underage { background-color: #f8d7da; color: #721c24; }
|
||||
.reason-other { background-color: #e2e3e5; color: #383d41; }
|
||||
|
||||
.status-pending { background-color: #fff3cd; color: #856404; }
|
||||
.status-resolved { background-color: #d4edda; color: #155724; }
|
||||
.status-dismissed { background-color: #e2e3e5; color: #383d41; }
|
||||
|
||||
.report-actions {
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid #dee2e6;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.report-actions h4 {
|
||||
margin: 0 0 1rem 0;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 1rem;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.resolve-btn {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.resolve-btn:hover:not(:disabled) {
|
||||
background: #218838;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.dismiss-btn {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dismiss-btn:hover:not(:disabled) {
|
||||
background: #c82333;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cancel-btn:hover {
|
||||
background: #545b62;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* Модальные окна */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: white;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.375rem;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
/* Адаптивные стили */
|
||||
@media (max-width: 767px) {
|
||||
.report-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.admin-report-detail {
|
||||
padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
}
|
||||
|
||||
/* Устройства с вырезом (notch) */
|
||||
@supports (padding: env(safe-area-inset-bottom)) {
|
||||
.admin-report-detail {
|
||||
padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
}
|
||||
|
||||
/* Ландшафтная ориентация на мобильных */
|
||||
@media (max-height: 450px) and (orientation: landscape) {
|
||||
.admin-report-detail {
|
||||
padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
488
src/views/admin/AdminReports.vue
Normal file
488
src/views/admin/AdminReports.vue
Normal file
@ -0,0 +1,488 @@
|
||||
<template>
|
||||
<div class="admin-reports">
|
||||
<h2>Управление жалобами</h2>
|
||||
|
||||
<div class="search-bar">
|
||||
<div class="filter-options">
|
||||
<label>
|
||||
<input type="radio" v-model="statusFilter" value="all" @change="loadReports">
|
||||
Все
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" v-model="statusFilter" value="pending" @change="loadReports">
|
||||
На рассмотрении
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" v-model="statusFilter" value="resolved" @change="loadReports">
|
||||
Рассмотренные
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" v-model="statusFilter" value="dismissed" @change="loadReports">
|
||||
Отклоненные
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="loading-indicator">
|
||||
Загрузка жалоб...
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<div v-if="!loading && !error" class="reports-table-container">
|
||||
<table class="reports-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Причина</th>
|
||||
<th>Жалующийся</th>
|
||||
<th>На пользователя</th>
|
||||
<th class="hide-sm">Дата подачи</th>
|
||||
<th>Статус</th>
|
||||
<th>Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="report in reports" :key="report._id">
|
||||
<td>{{ shortenId(report._id) }}</td>
|
||||
<td>
|
||||
<span class="reason-badge" :class="getReasonClass(report.reason)">
|
||||
{{ getReasonText(report.reason) }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ report.reporter?.name || 'Удален' }}</td>
|
||||
<td>{{ report.reportedUser?.name || 'Удален' }}</td>
|
||||
<td class="hide-sm">{{ formatDate(report.createdAt) }}</td>
|
||||
<td>
|
||||
<span class="status-badge" :class="getStatusClass(report.status)">
|
||||
{{ getStatusText(report.status) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="actions">
|
||||
<button @click="viewReport(report._id)" class="btn view-btn">
|
||||
<span class="btn-text">Просмотр</span>
|
||||
<i class="bi-eye"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div v-if="reports.length === 0" class="no-results">
|
||||
Жалобы не найдены
|
||||
</div>
|
||||
|
||||
<div v-if="pagination.pages > 1" class="pagination">
|
||||
<button
|
||||
@click="changePage(currentPage - 1)"
|
||||
:disabled="currentPage === 1"
|
||||
class="pagination-btn"
|
||||
>
|
||||
Назад
|
||||
</button>
|
||||
|
||||
<span class="pagination-info">
|
||||
Страница {{ currentPage }} из {{ pagination.pages }}
|
||||
</span>
|
||||
|
||||
<button
|
||||
@click="changePage(currentPage + 1)"
|
||||
:disabled="currentPage === pagination.pages"
|
||||
class="pagination-btn"
|
||||
>
|
||||
Далее
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
name: 'AdminReports',
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const reports = ref([]);
|
||||
const loading = ref(false);
|
||||
const error = ref(null);
|
||||
const statusFilter = ref('all');
|
||||
const currentPage = ref(1);
|
||||
const pagination = ref({
|
||||
page: 1,
|
||||
pages: 1,
|
||||
total: 0,
|
||||
limit: 20
|
||||
});
|
||||
|
||||
// Загрузка списка жалоб
|
||||
const loadReports = async () => {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
const params = {
|
||||
page: currentPage.value,
|
||||
limit: pagination.value.limit
|
||||
};
|
||||
|
||||
if (statusFilter.value !== 'all') {
|
||||
params.status = statusFilter.value;
|
||||
}
|
||||
|
||||
const token = localStorage.getItem('userToken');
|
||||
const response = await axios.get(`/api/admin/reports`, {
|
||||
params,
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
reports.value = response.data.reports;
|
||||
pagination.value = response.data.pagination;
|
||||
} catch (err) {
|
||||
console.error('Ошибка при загрузке жалоб:', err);
|
||||
error.value = 'Ошибка при загрузке списка жалоб. Пожалуйста, попробуйте позже.';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Функция для сокращения ID
|
||||
const shortenId = (id) => {
|
||||
return id ? id.substring(0, 6) + '...' : '';
|
||||
};
|
||||
|
||||
// Форматирование даты
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return '';
|
||||
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString('ru-RU', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
// Получение текста причины жалобы
|
||||
const getReasonText = (reason) => {
|
||||
const reasons = {
|
||||
inappropriate_content: 'Неподходящий контент',
|
||||
fake_profile: 'Фальшивый профиль',
|
||||
harassment: 'Домогательства',
|
||||
spam: 'Спам',
|
||||
underage: 'Несовершеннолетний',
|
||||
other: 'Другое'
|
||||
};
|
||||
return reasons[reason] || reason;
|
||||
};
|
||||
|
||||
// Получение CSS класса для причины
|
||||
const getReasonClass = (reason) => {
|
||||
const classes = {
|
||||
inappropriate_content: 'reason-inappropriate',
|
||||
fake_profile: 'reason-fake',
|
||||
harassment: 'reason-harassment',
|
||||
spam: 'reason-spam',
|
||||
underage: 'reason-underage',
|
||||
other: 'reason-other'
|
||||
};
|
||||
return classes[reason] || 'reason-other';
|
||||
};
|
||||
|
||||
// Получение текста статуса
|
||||
const getStatusText = (status) => {
|
||||
const statuses = {
|
||||
pending: 'На рассмотрении',
|
||||
resolved: 'Рассмотрена',
|
||||
dismissed: 'Отклонена'
|
||||
};
|
||||
return statuses[status] || status;
|
||||
};
|
||||
|
||||
// Получение CSS класса для статуса
|
||||
const getStatusClass = (status) => {
|
||||
const classes = {
|
||||
pending: 'status-pending',
|
||||
resolved: 'status-resolved',
|
||||
dismissed: 'status-dismissed'
|
||||
};
|
||||
return classes[status] || 'status-pending';
|
||||
};
|
||||
|
||||
// Переход на детальную страницу жалобы
|
||||
const viewReport = (reportId) => {
|
||||
router.push({ name: 'AdminReportDetail', params: { id: reportId } });
|
||||
};
|
||||
|
||||
// Изменение страницы пагинации
|
||||
const changePage = (page) => {
|
||||
if (page < 1 || page > pagination.value.pages) return;
|
||||
|
||||
currentPage.value = page;
|
||||
loadReports();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadReports();
|
||||
});
|
||||
|
||||
return {
|
||||
reports,
|
||||
loading,
|
||||
error,
|
||||
statusFilter,
|
||||
currentPage,
|
||||
pagination,
|
||||
loadReports,
|
||||
shortenId,
|
||||
formatDate,
|
||||
getReasonText,
|
||||
getReasonClass,
|
||||
getStatusText,
|
||||
getStatusClass,
|
||||
viewReport,
|
||||
changePage
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-reports {
|
||||
padding-bottom: 2rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
padding-left: 0.5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
h2::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 3px;
|
||||
background: linear-gradient(to bottom, #ff3e68, #ff5252);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.filter-options {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-options label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.filter-options input[type="radio"] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid #f5c6cb;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.reports-table-container {
|
||||
background: white;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.reports-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.reports-table th,
|
||||
.reports-table td {
|
||||
padding: 0.85rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.reports-table th {
|
||||
background: linear-gradient(to right, #f8f9fa, #e9ecef);
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
border-bottom: 2px solid #dee2e6;
|
||||
}
|
||||
|
||||
.reports-table tbody tr:hover {
|
||||
background-color: rgba(255, 62, 104, 0.02);
|
||||
}
|
||||
|
||||
.reason-badge,
|
||||
.status-badge {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.reason-inappropriate { background-color: #f8d7da; color: #721c24; }
|
||||
.reason-fake { background-color: #fff3cd; color: #856404; }
|
||||
.reason-harassment { background-color: #d1ecf1; color: #0c5460; }
|
||||
.reason-spam { background-color: #d4edda; color: #155724; }
|
||||
.reason-underage { background-color: #f8d7da; color: #721c24; }
|
||||
.reason-other { background-color: #e2e3e5; color: #383d41; }
|
||||
|
||||
.status-pending { background-color: #fff3cd; color: #856404; }
|
||||
.status-resolved { background-color: #d4edda; color: #155724; }
|
||||
.status-dismissed { background-color: #e2e3e5; color: #383d41; }
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.view-btn:hover {
|
||||
background-color: #0056b3;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 1.5rem;
|
||||
background-color: #f8f9fa;
|
||||
border-top: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: white;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: #495057;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pagination-btn:hover:not(:disabled) {
|
||||
background-color: #f8f9fa;
|
||||
border-color: #ced4da;
|
||||
}
|
||||
|
||||
.pagination-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Адаптивные стили */
|
||||
@media (max-width: 767px) {
|
||||
.hide-sm {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reports-table th,
|
||||
.reports-table td {
|
||||
padding: 0.6rem 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-options {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.admin-reports {
|
||||
padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
}
|
||||
|
||||
/* Устройства с вырезом (notch) */
|
||||
@supports (padding: env(safe-area-inset-bottom)) {
|
||||
.admin-reports {
|
||||
padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
}
|
||||
|
||||
/* Ландшафтная ориентация на мобильных */
|
||||
@media (max-height: 450px) and (orientation: landscape) {
|
||||
.admin-reports {
|
||||
padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user