diff --git a/src/views/admin/AdminReportDetail.vue b/src/views/admin/AdminReportDetail.vue index 4983c57..d1e71de 100644 --- a/src/views/admin/AdminReportDetail.vue +++ b/src/views/admin/AdminReportDetail.vue @@ -31,16 +31,22 @@
- +
-

Жалоба #{{ report._id.substring(0, 8) }}

- ID: {{ report._id }} +

Жалоба #{{ report._id.substring(0, 8) }}

+
+ ID: + {{ report._id }} +
- - Подана {{ formatDate(report.createdAt) }} + +
+ Подана + {{ formatDate(report.createdAt) }} +
@@ -142,11 +148,11 @@

Действия с жалобой

- - @@ -271,6 +277,7 @@ export default { // Обновление статуса жалобы const updateReportStatus = async (status) => { + console.log('updateReportStatus called with status:', status); updating.value = true; try { @@ -301,6 +308,20 @@ export default { } }; + // Функция для открытия модального окна рассмотрения + const openResolveModal = () => { + console.log('openResolveModal called, current showResolveModal:', showResolveModal.value); + showResolveModal.value = true; + console.log('showResolveModal set to:', showResolveModal.value); + }; + + // Функция для открытия модального окна отклонения + const openDismissModal = () => { + console.log('openDismissModal called, current showDismissModal:', showDismissModal.value); + showDismissModal.value = true; + console.log('showDismissModal set to:', showDismissModal.value); + }; + // Возврат к списку жалоб const goBack = () => { router.push({ name: 'AdminReports' }); @@ -375,6 +396,11 @@ export default { onMounted(() => { loadReport(); + + // Отладочная информация о состоянии модальных окон + console.log('Component mounted, initial modal states:'); + console.log('showResolveModal:', showResolveModal.value); + console.log('showDismissModal:', showDismissModal.value); }); return { @@ -387,6 +413,8 @@ export default { adminNotes, loadReport, updateReportStatus, + openResolveModal, + openDismissModal, goBack, viewUser, formatDate, @@ -518,47 +546,107 @@ h2 { align-items: flex-start; flex-wrap: wrap; gap: 1rem; + min-height: 80px; } .report-info { display: flex; - align-items: center; - gap: 1rem; + align-items: flex-start; + gap: 0.75rem; flex: 1; min-width: 0; } .report-id-section { display: flex; - align-items: center; - gap: 0.5rem; + align-items: flex-start; + gap: 0.75rem; min-width: 0; + flex: 1; +} + +.report-icon { + color: #007bff; + font-size: 1.5rem; + margin-top: 0.25rem; + flex-shrink: 0; } .id-info { min-width: 0; + flex: 1; } -.report-info h3 { - margin: 0; +.report-title { + margin: 0 0 0.5rem 0; color: #333; font-size: 1.25rem; + font-weight: 600; + line-height: 1.2; +} + +.full-id-container { + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + align-items: baseline; +} + +.id-label { + color: #6c757d; + font-size: 0.85rem; + font-weight: 500; + flex-shrink: 0; } .full-id { color: #6c757d; - font-size: 0.9rem; + font-size: 0.85rem; word-break: break-all; - max-width: 100%; - display: block; + font-family: 'Courier New', monospace; + background: rgba(108, 117, 125, 0.1); + padding: 0.125rem 0.25rem; + border-radius: 0.25rem; + flex: 1; + min-width: 0; } .report-date { color: #6c757d; font-size: 0.9rem; display: flex; - align-items: center; - gap: 0.25rem; + align-items: flex-start; + gap: 0.5rem; + flex-shrink: 0; + text-align: right; +} + +.date-icon { + color: #28a745; + font-size: 1.1rem; + margin-top: 0.125rem; + flex-shrink: 0; +} + +.date-info { + display: flex; + flex-direction: column; + gap: 0.125rem; + text-align: right; +} + +.date-label { + font-size: 0.8rem; + color: #6c757d; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.date-value { + font-size: 0.9rem; + color: #495057; + font-weight: 500; white-space: nowrap; } @@ -714,7 +802,6 @@ h2 { transition: all 0.2s ease; text-decoration: none; min-height: 40px; - font-size: 0.9rem; } .resolve-btn { @@ -963,114 +1050,71 @@ h2 { } .report-header { - padding: 1rem; + padding: 0.75rem; flex-direction: column; align-items: flex-start; gap: 0.75rem; + min-height: auto; } - .report-content, - .info-section, - .report-actions { - padding: 1rem; + .report-info { + width: 100%; + gap: 0.5rem; } - .back-btn .btn-text { - display: none; + .report-id-section { + gap: 0.5rem; } - .users-grid { - grid-template-columns: 1fr; - gap: 0.75rem; - position: relative; - padding: 0.5rem 0; + .report-icon { + font-size: 1.25rem; } - .arrow-divider { - position: absolute; - top: calc(50% - 1rem); - left: 50%; - transform: translate(-50%, -50%); - background-color: white; - border: 1px solid #e9ecef; - border-radius: 50%; - width: 2rem; - height: 2rem; - box-shadow: 0 2px 5px rgba(0,0,0,0.1); - z-index: 2; - margin: 0; - display: flex; - align-items: center; - justify-content: center; + .report-title { + font-size: 1.1rem; + margin-bottom: 0.25rem; } - .arrow-icon { - display: none; + .full-id-container { + flex-direction: column; + gap: 0.125rem; + align-items: flex-start; } - .vs-text { - display: block; - font-size: 0.75rem; - line-height: 1; - } - - .user-card { - padding: 0.75rem; - min-height: 100px; - } - - .user-header { - margin-bottom: 0.5rem; - } - - .user-role { - font-size: 0.8rem; - } - - .user-name { - font-size: 0.9rem; - } - - .user-email { + .id-label { font-size: 0.75rem; } - .view-user-btn { - padding: 0.3rem 0.5rem; + .full-id { + font-size: 0.75rem; + padding: 0.0625rem 0.125rem; + width: 100%; + word-break: break-all; + } + + .report-date { + width: 100%; + gap: 0.375rem; + text-align: left; + align-self: flex-start; + } + + .date-icon { + font-size: 1rem; + } + + .date-info { + text-align: left; + gap: 0.0625rem; + } + + .date-label { + font-size: 0.7rem; + } + + .date-value { font-size: 0.8rem; - } - - .view-user-btn span { - display: none; - } - - .reporter { - margin-bottom: 1.5rem; - } - - .reported { - margin-top: 1rem; - } - - .action-buttons { - flex-direction: column; - gap: 0.75rem; - } - - .btn { - width: 100%; - justify-content: center; - padding: 0.75rem 1rem; - } - - .modal-actions { - flex-direction: column; - gap: 0.75rem; - } - - .modal-actions .btn { - width: 100%; - justify-content: center; + white-space: normal; } } @@ -1080,57 +1124,34 @@ h2 { padding: 1rem 0.75rem calc(60px + env(safe-area-inset-bottom, 0px)) 0.75rem; } - .users-grid { - grid-template-columns: 1fr; - gap: 1rem; - position: relative; - padding: 0.75rem 0; - } - - .arrow-divider { - position: absolute; - top: calc(50% - 0.75rem); - left: 50%; - transform: translate(-50%, -50%); - background-color: white; - border: 1px solid #e9ecef; - border-radius: 50%; - width: 2.2rem; - height: 2.2rem; - box-shadow: 0 2px 5px rgba(0,0,0,0.1); - z-index: 2; - margin: 0; - display: flex; - align-items: center; - justify-content: center; - } - - .arrow-icon { - display: none; - } - - .vs-text { - display: block; - font-size: 0.85rem; - line-height: 1; - } - - .reporter { - margin-bottom: 2rem; - } - - .reported { - margin-top: 1rem; - } - - .action-buttons { + .report-header { + padding: 1rem; flex-direction: column; - gap: 0.75rem; + align-items: flex-start; + gap: 1rem; + min-height: auto; } - .btn { + .report-info { width: 100%; - justify-content: center; + } + + .report-date { + width: 100%; + text-align: left; + align-self: flex-start; + } + + .date-info { + text-align: left; + } + + .full-id { + font-size: 0.8rem; + } + + .date-value { + white-space: normal; } } @@ -1140,43 +1161,26 @@ h2 { padding: 1.25rem calc(60px + env(safe-area-inset-bottom, 0px)) 1.25rem; } - .users-grid { - grid-template-columns: 1fr; - gap: 1.5rem; - position: relative; + .report-header { + padding: 1.25rem; + flex-direction: row; + align-items: flex-start; + flex-wrap: wrap; + gap: 1rem; } - .arrow-divider { - position: absolute; - top: 50%; - left: -0.5rem; - transform: translateY(-50%); - z-index: 2; - width: 2rem; - height: 2rem; - background: #f8f9fa; - border-radius: 50%; - border: 1px solid #dee2e6; - box-shadow: 0 2px 5px rgba(0,0,0,0.1); - margin: 0; + .report-info { + flex: 1; + min-width: 250px; } - .arrow-icon { - transform: rotate(90deg); + .report-date { + flex-shrink: 0; + min-width: 150px; } - .user-card { - width: 100%; - margin-left: 1rem; - } - - .view-user-btn { - align-self: flex-start; - margin-top: 0.75rem; - } - - .action-buttons { - justify-content: center; + .date-value { + white-space: nowrap; } } @@ -1186,17 +1190,21 @@ h2 { padding: 1.5rem 1.25rem calc(60px + env(safe-area-inset-bottom, 0px)) 1.25rem; } - .users-grid { - grid-template-columns: 1fr auto 1fr; + .report-header { + padding: 1.5rem; + flex-direction: row; + align-items: flex-start; gap: 1.25rem; } - .arrow-icon { - display: block; + .report-info { + flex: 1; + max-width: calc(100% - 200px); } - .vs-text { - display: none; + .report-date { + flex-shrink: 0; + min-width: 180px; } } @@ -1206,10 +1214,18 @@ h2 { padding: 2rem 1.5rem calc(60px + env(safe-area-inset-bottom, 0px)) 1.5rem; } - .users-grid { - grid-template-columns: 1fr auto 1fr; + .report-header { + padding: 1.75rem; gap: 1.5rem; } + + .report-info { + max-width: calc(100% - 220px); + } + + .report-date { + min-width: 200px; + } } /* Десктопные экраны (1200px+) */ @@ -1220,30 +1236,29 @@ h2 { margin: 0 auto; } - .users-grid { - grid-template-columns: 1fr auto 1fr; + .report-header { + padding: 2rem; gap: 2rem; } - .user-card { - min-height: 140px; - } -} - -/* Планшеты в ландшафтной ориентации */ -@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { - .admin-report-detail { - padding: 1.5rem 1.25rem calc(60px + env(safe-area-inset-bottom, 0px)) 1.25rem; + .report-info { + max-width: calc(100% - 250px); } - .users-grid { - grid-template-columns: 1fr auto 1fr; - gap: 1.25rem; + .report-date { + min-width: 230px; } - .page-header { - flex-direction: row; - align-items: center; + .report-title { + font-size: 1.4rem; + } + + .full-id { + font-size: 0.9rem; + } + + .date-value { + font-size: 1rem; } } @@ -1325,4 +1340,247 @@ h2 { transform: none; } } + +/* Адаптивные стили для блока header жалобы на разных экранах */ + +/* Очень маленькие экраны (до 360px) - адаптация header */ +@media (max-width: 360px) { + .report-header { + padding: 0.75rem; + flex-direction: column; + align-items: flex-start; + gap: 0.75rem; + min-height: auto; + } + + .report-info { + width: 100%; + gap: 0.5rem; + } + + .report-id-section { + gap: 0.5rem; + } + + .report-icon { + font-size: 1.25rem; + } + + .report-title { + font-size: 1.1rem; + margin-bottom: 0.25rem; + } + + .full-id-container { + flex-direction: column; + gap: 0.125rem; + align-items: flex-start; + } + + .id-label { + font-size: 0.75rem; + } + + .full-id { + font-size: 0.75rem; + padding: 0.0625rem 0.125rem; + width: 100%; + word-break: break-all; + } + + .report-date { + width: 100%; + gap: 0.375rem; + text-align: left; + align-self: flex-start; + } + + .date-icon { + font-size: 1rem; + } + + .date-info { + text-align: left; + gap: 0.0625rem; + } + + .date-label { + font-size: 0.7rem; + } + + .date-value { + font-size: 0.8rem; + white-space: normal; + } +} + +/* Маленькие экраны (361px - 480px) - адаптация header */ +@media (min-width: 361px) and (max-width: 480px) { + .report-header { + padding: 1rem; + flex-direction: column; + align-items: flex-start; + gap: 1rem; + min-height: auto; + } + + .report-info { + width: 100%; + } + + .report-date { + width: 100%; + text-align: left; + align-self: flex-start; + } + + .date-info { + text-align: left; + } + + .full-id { + font-size: 0.8rem; + } + + .date-value { + white-space: normal; + } +} + +/* Средние экраны (481px - 767px) - адаптация header */ +@media (min-width: 481px) and (max-width: 767px) { + .report-header { + padding: 1.25rem; + flex-direction: row; + align-items: flex-start; + flex-wrap: wrap; + gap: 1rem; + } + + .report-info { + flex: 1; + min-width: 250px; + } + + .report-date { + flex-shrink: 0; + min-width: 150px; + } + + .date-value { + white-space: nowrap; + } +} + +/* Большие экраны (768px - 991px) - адаптация header */ +@media (min-width: 768px) and (max-width: 991px) { + .report-header { + padding: 1.5rem; + flex-direction: row; + align-items: flex-start; + gap: 1.25rem; + } + + .report-info { + flex: 1; + max-width: calc(100% - 200px); + } + + .report-date { + flex-shrink: 0; + min-width: 180px; + } +} + +/* Очень большие экраны (992px - 1199px) - адаптация header */ +@media (min-width: 992px) and (max-width: 1199px) { + .report-header { + padding: 1.75rem; + gap: 1.5rem; + } + + .report-info { + max-width: calc(100% - 220px); + } + + .report-date { + min-width: 200px; + } +} + +/* Десктопные экраны (1200px+) - адаптация header */ +@media (min-width: 1200px) { + .report-header { + padding: 2rem; + gap: 2rem; + } + + .report-info { + max-width: calc(100% - 250px); + } + + .report-date { + min-width: 230px; + } + + .report-title { + font-size: 1.4rem; + } + + .full-id { + font-size: 0.9rem; + } + + .date-value { + font-size: 1rem; + } +} + +/* Ландшафтная ориентация на мобильных - адаптация header */ +@media (max-height: 450px) and (orientation: landscape) { + .report-header { + padding: 0.75rem 1rem; + flex-direction: row; + align-items: center; + gap: 1rem; + min-height: auto; + } + + .report-info { + flex: 1; + } + + .report-title { + font-size: 1.1rem; + margin-bottom: 0.25rem; + } + + .full-id-container { + flex-direction: row; + flex-wrap: wrap; + gap: 0.25rem; + } + + .full-id { + font-size: 0.75rem; + max-width: 200px; + } + + .report-date { + flex-shrink: 0; + gap: 0.375rem; + } + + .date-info { + gap: 0.0625rem; + } + + .date-label { + font-size: 0.7rem; + } + + .date-value { + font-size: 0.8rem; + } +} \ No newline at end of file