фикс

src/views/admin/AdminReportDetail.vue

@@ -31,16 +31,22 @@
         <div class="report-header">
           <div class="report-info">
             <div class="report-id-section">
-              <i class="bi-file-text"></i>
+              <i class="bi-file-text report-icon"></i>
               <div class="id-info">
-                <h3>Жалоба #{{ report._id.substring(0, 8) }}</h3>
+                <h3 class="report-title">Жалоба #{{ report._id.substring(0, 8) }}</h3>
-                <span class="full-id">ID: {{ report._id }}</span>
+                <div class="full-id-container">
+                  <span class="id-label">ID:</span>
+                  <span class="full-id">{{ report._id }}</span>
+                </div>
               </div>
             </div>
           </div>
           <div class="report-date">
-            <i class="bi-calendar3"></i>
+            <i class="bi-calendar3 date-icon"></i>
-            <span>Подана {{ formatDate(report.createdAt) }}</span>
+            <div class="date-info">
+              <span class="date-label">Подана</span>
+              <span class="date-value">{{ formatDate(report.createdAt) }}</span>
+            </div>
           </div>
         </div>
         
@@ -142,11 +148,11 @@
             <h4>Действия с жалобой</h4>
           </div>
           <div class="action-buttons">
-            <button @click="showResolveModal = true" class="btn resolve-btn">
+            <button @click="openResolveModal" class="btn resolve-btn">
               <i class="bi-check-circle"></i>
               <span>Рассмотреть</span>
             </button>
-            <button @click="showDismissModal = true" class="btn dismiss-btn">
+            <button @click="openDismissModal" class="btn dismiss-btn">
               <i class="bi-x-circle"></i>
               <span>Отклонить</span>
             </button>
@@ -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;
+  align-items: flex-start;
-  gap: 1rem;
+  gap: 0.75rem;
   flex: 1;
   min-width: 0;
 }
 
 .report-id-section {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
-  gap: 0.5rem;
+  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 {
+.report-title {
-  margin: 0;
+  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%;
+  font-family: 'Courier New', monospace;
-  display: block;
+  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;
+  align-items: flex-start;
-  gap: 0.25rem;
+  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,
+  .report-info {
-  .info-section,
+    width: 100%;
-  .report-actions {
+    gap: 0.5rem;
-    padding: 1rem;
   }
   
-  .back-btn .btn-text {
+  .report-id-section {
-    display: none;
+    gap: 0.5rem;
   }
   
-  .users-grid {
+  .report-icon {
-    grid-template-columns: 1fr;
+    font-size: 1.25rem;
-    gap: 0.75rem;
-    position: relative;
-    padding: 0.5rem 0;
   }
   
-  .arrow-divider {
+  .report-title {
-    position: absolute;
+    font-size: 1.1rem;
-    top: calc(50% - 1rem);
+    margin-bottom: 0.25rem;
-    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;
   }
   
-  .arrow-icon {
+  .full-id-container {
-    display: none;
+    flex-direction: column;
+    gap: 0.125rem;
+    align-items: flex-start;
   }
   
-  .vs-text {
+  .id-label {
-    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 {
     font-size: 0.75rem;
   }
   
-  .view-user-btn {
+  .full-id {
-    padding: 0.3rem 0.5rem;
+    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;
-  
-  .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;
   }
 }
 
@@ -1080,57 +1124,34 @@ h2 {
     padding: 1rem 0.75rem calc(60px + env(safe-area-inset-bottom, 0px)) 0.75rem;
   }
   
-  .users-grid {
+  .report-header {
-    grid-template-columns: 1fr;
+    padding: 1rem;
-    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 {
     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 {
+  .report-header {
-    grid-template-columns: 1fr;
+    padding: 1.25rem;
-    gap: 1.5rem;
+    flex-direction: row;
-    position: relative;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 1rem;
   }
   
-  .arrow-divider {
+  .report-info {
-    position: absolute;
+    flex: 1;
-    top: 50%;
+    min-width: 250px;
-    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;
   }
   
-  .arrow-icon {
+  .report-date {
-    transform: rotate(90deg);
+    flex-shrink: 0;
+    min-width: 150px;
   }
   
-  .user-card {
+  .date-value {
-    width: 100%;
+    white-space: nowrap;
-    margin-left: 1rem;
-  }
-  
-  .view-user-btn {
-    align-self: flex-start;
-    margin-top: 0.75rem;
-  }
-  
-  .action-buttons {
-    justify-content: center;
   }
 }
 
@@ -1186,17 +1190,21 @@ h2 {
     padding: 1.5rem 1.25rem calc(60px + env(safe-area-inset-bottom, 0px)) 1.25rem;
   }
   
-  .users-grid {
+  .report-header {
-    grid-template-columns: 1fr auto 1fr;
+    padding: 1.5rem;
+    flex-direction: row;
+    align-items: flex-start;
     gap: 1.25rem;
   }
   
-  .arrow-icon {
+  .report-info {
-    display: block;
+    flex: 1;
+    max-width: calc(100% - 200px);
   }
   
-  .vs-text {
+  .report-date {
-    display: none;
+    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 {
+  .report-header {
-    grid-template-columns: 1fr auto 1fr;
+    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 {
+  .report-header {
-    grid-template-columns: 1fr auto 1fr;
+    padding: 2rem;
     gap: 2rem;
   }
   
-  .user-card {
+  .report-info {
-    min-height: 140px;
+    max-width: calc(100% - 250px);
-  }
   }
   
-/* Планшеты в ландшафтной ориентации */
+  .report-date {
-@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
+    min-width: 230px;
-  .admin-report-detail {
-    padding: 1.5rem 1.25rem calc(60px + env(safe-area-inset-bottom, 0px)) 1.25rem;
   }
   
-  .users-grid {
+  .report-title {
-    grid-template-columns: 1fr auto 1fr;
+    font-size: 1.4rem;
-    gap: 1.25rem;
   }
   
-  .page-header {
+  .full-id {
-    flex-direction: row;
+    font-size: 0.9rem;
-    align-items: center;
+  }
+  
+  .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;
+  }
+}
 </style>