From 8b0c853f29b27ca63bbb7fd1aaa1df1d2c11aa61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=98=D0=B3=D0=BE=D1=80=D1=8C=20=D0=9D=D0=B0=D0=B4=D0=B5?=
 =?UTF-8?q?=D0=B8=D0=BD?= <igor_26reg@mail.ru>
Date: Mon, 8 Dec 2025 11:07:45 +0300
Subject: [PATCH] feat: add avatar zoom modal on click

- Added Bootstrap modal for enlarged avatar view
- Made avatar image clickable with cursor pointer
- Added modal trigger to both static and dynamically loaded avatars
- Modal displays full-size avatar centered with dark backdrop
- Close button positioned in top-right corner
---
 .../static/js/components/employeeProfile.js   |  6 +++++-
 .../components/employee_detail_scripts.html   | 15 ++++++++++++++
 .../templates/employees/employee_detail.html  | 20 ++++++++++++++++++-
 3 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/backend/static/js/components/employeeProfile.js b/backend/static/js/components/employeeProfile.js
index fe49e92c..87376bf7 100644
--- a/backend/static/js/components/employeeProfile.js
+++ b/backend/static/js/components/employeeProfile.js
@@ -64,7 +64,11 @@ export class EmployeeProfile {
       return `
         <img src="${employee.avatar}"
              alt="Аватар ${employee.last_name} ${employee.first_name}"
-             class="ios-ava" style="object-fit:cover;">
+             class="ios-ava" 
+             style="object-fit:cover; cursor: pointer;"
+             data-bs-toggle="modal"
+             data-bs-target="#avatarModal"
+             data-avatar-url="${employee.avatar}">
       `;
     } else {
       const initial = (employee.first_name || employee.last_name || '?').charAt(0).toUpperCase();
diff --git a/backend/templates/employees/components/employee_detail_scripts.html b/backend/templates/employees/components/employee_detail_scripts.html
index 13c7d4f3..5cf37193 100644
--- a/backend/templates/employees/components/employee_detail_scripts.html
+++ b/backend/templates/employees/components/employee_detail_scripts.html
@@ -64,5 +64,20 @@
     if (employeeForm) window.employeeForm = employeeForm;
     if (skillsManager) window.skillsManager = skillsManager;
     if (deptRoleEditor) window.deptRoleEditor = deptRoleEditor;
+
+    // 4. Обработчик клика на аватар для просмотра увеличенной версии
+    const avatarModal = document.getElementById('avatarModal');
+    if (avatarModal) {
+      avatarModal.addEventListener('show.bs.modal', (event) => {
+        // Получаем элемент, который вызвал модалку
+        const button = event.relatedTarget;
+        if (button && button.dataset.avatarUrl) {
+          const modalImage = avatarModal.querySelector('#avatarModalImage');
+          if (modalImage) {
+            modalImage.src = button.dataset.avatarUrl;
+          }
+        }
+      });
+    }
   });
 </script>
diff --git a/backend/templates/employees/employee_detail.html b/backend/templates/employees/employee_detail.html
index 1cdfbc0e..19349ea4 100644
--- a/backend/templates/employees/employee_detail.html
+++ b/backend/templates/employees/employee_detail.html
@@ -32,7 +32,11 @@
               {% if emp.avatar %}
                 <img src="{{ emp.avatar }}"
                      alt="Аватар {{ emp.last_name }} {{ emp.first_name }}"
-                     class="ios-ava" style="object-fit:cover;">
+                     class="ios-ava" 
+                     style="object-fit:cover; cursor: pointer;"
+                     data-bs-toggle="modal"
+                     data-bs-target="#avatarModal"
+                     data-avatar-url="{{ emp.avatar }}">
               {% else %}
                 <div class="ios-ava--ph">
                   {% firstof emp.first_name emp.last_name "?" as initial %}
@@ -428,6 +432,20 @@
 
 <!-- Модальное окно для просмотра публикации -->
 {% include "feed/components/modal_post_detail.html" %}
+
+<!-- Модальное окно для увеличенного просмотра аватара -->
+<div class="modal fade" id="avatarModal" tabindex="-1" aria-labelledby="avatarModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered modal-lg">
+    <div class="modal-content bg-transparent border-0">
+      <div class="modal-header border-0 pb-0">
+        <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="modal" aria-label="Закрыть"></button>
+      </div>
+      <div class="modal-body text-center p-0">
+        <img id="avatarModalImage" src="" alt="Аватар" class="img-fluid rounded" style="max-height: 80vh; object-fit: contain;">
+      </div>
+    </div>
+  </div>
+</div>
 {% endblock %}
 
 {% block extra_js %}