From 4b39d721f36da5463a082f96738a3c259d330ed6 Mon Sep 17 00:00:00 2001
From: LD-Reborn <lucretia.dietz@gmx.de>
Date: Sat, 25 Oct 2025 23:24:20 +0200
Subject: [PATCH] Implemented user view modal in frontend

---
 src/Views/Home/Users.cshtml | 139 +++++++++++++++++++++++++++++++++++-
 1 file changed, 137 insertions(+), 2 deletions(-)

diff --git a/src/Views/Home/Users.cshtml b/src/Views/Home/Users.cshtml
index c6aead0..7a70841 100644
--- a/src/Views/Home/Users.cshtml
+++ b/src/Views/Home/Users.cshtml
@@ -38,7 +38,7 @@
             @{
                 foreach (UserTableViewModel userTableViewModel in Model.UserTableViewModels)
                 {
-                <tr>
+                <tr class="user-row">
                     <td>
                     <img class="rounded-circle user-icon" src="data:image/jpeg;base64,@userTableViewModel.JpegPhoto" alt="Photo" style="max-width:300px;" />
                     </td>
@@ -647,4 +647,139 @@
             }
         }
     });
-</script>
\ No newline at end of file
+</script>
+
+
+<!-- User Detail Modal -->
+<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content">
+            <div class="modal-header bg-info text-white">
+                <h5 class="modal-title" id="detailModalLabel">User Details</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <div class="row g-3">
+                    <div class="col-md-4 text-center">
+                    <img id="detailPhoto" class="img-thumbnail rounded-circle" style="max-height:150px;" />
+                    </div>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["User ID"]</label>
+                        <input type="text" class="form-control" id="detailUid" value="" disabled />
+                    </div>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Title"]</label>
+                        <input type="text" class="form-control" id="detailTitle" value="" disabled />
+                    </div>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Name"]</label>
+                        <input type="text" class="form-control" id="detailName" value="" disabled />
+                    </div>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Surname"]</label>
+                        <input type="text" class="form-control" id="detailSurname" value="" disabled />
+                    </div>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Birth Date"]</label>
+                        <input type="text" class="form-control" id="detailBirthdate" value="" disabled />
+                    </div>
+                    <hr class="my-3">
+                    <h6 class="fw-bold">Address</h6>
+                    <div class="col-md-4">
+                        <label class="form-label">@T["City"]</label>
+                        <input type="text" class="form-control" id="detailCity" value="" disabled />
+                    </div>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Street"]</label>
+                        <input type="text" class="form-control" id="detailStreet" value="" disabled />
+                    </div>
+                    <div class="col-md-2">
+                        <label class="form-label">@T["Street Nr"]</label>
+                        <input type="text" class="form-control" id="detailStreetNr" value="" disabled />
+                    </div>
+                    <hr class="my-3">
+                    <h6 class="fw-bold">Workplace & account</h6>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Workplace"]</label>
+                        <input type="text" class="form-control" id="detailWorkplace" value="" disabled />
+                    </div>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Groups"]</label>
+                        <input type="text" class="form-control" id="detailGroups" value="" disabled />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const rows = document.querySelectorAll('table tbody tr');
+        const detailModalEl = document.getElementById('detailModal');
+        const detailModal = new bootstrap.Modal(detailModalEl);
+
+        rows.forEach(row => {
+            row.addEventListener('click', (e) => {
+                // Don’t trigger when clicking inside the action buttons
+                if (e.target.closest('button')) return;
+
+                const updateBtn = row.querySelector('.btn-warning[data-user-id]');
+                if (!updateBtn) return;
+
+                // Extract data from update button
+                const data = {
+                    uid: updateBtn.dataset.userId,
+                    title: updateBtn.dataset.userTitle,
+                    name: updateBtn.dataset.userName,
+                    surname: updateBtn.dataset.userSurname,
+                    workplace: updateBtn.dataset.userWorkplace,
+                    birthdate: updateBtn.dataset.userBirthdate,
+                    city: updateBtn.dataset.userAddressCity,
+                    street: updateBtn.dataset.userAddressStreet,
+                    streetNr: updateBtn.dataset.userAddressStreetnr,
+                    groups: JSON.parse(updateBtn.dataset.userGroups || '[]'),
+                };
+
+                console.log(data);
+
+                // Fill modal fields
+                document.getElementById('detailUid').value = data.uid || '';
+                document.getElementById('detailTitle').value = data.title || '';
+                document.getElementById('detailName').value = data.name || '';
+                document.getElementById('detailSurname').value = data.surname || '';
+                document.getElementById('detailBirthdate').value = data.birthdate || '';
+                document.getElementById('detailCity').value = data.city || '';
+                document.getElementById('detailStreet').value = data.street || '';
+                document.getElementById('detailStreetNr').value = data.streetNr || '';
+                document.getElementById('detailWorkplace').value = data.workplace || '';
+                document.getElementById('detailGroups').value = data.groups.join(', ') || '';
+
+                // Photo
+                const imgEl = row.querySelector('td:first-child img');
+                const detailPhoto = document.getElementById('detailPhoto');
+                if (imgEl && imgEl.src.startsWith('data:image')) {
+                    detailPhoto.src = imgEl.src;
+                    detailPhoto.style.display = 'block';
+                } else {
+                    detailPhoto.style.display = 'none';
+                }
+
+                detailModal.show();
+            });
+        });
+    });
+</script>
+
+<style>
+    .user-row > td:not(:last-child) {
+        cursor: pointer;
+    }
+    .user-row > td {    
+        transition: 0.1s ease;
+    }
+    .user-row:has(td:not(:last-child):hover) > td {
+        background-color: #17a2b8;
+    }
+</style>
\ No newline at end of file