HAM/Berufsschule_HAM
1
0
Fork 1
mirror of https://github.com/LD-Reborn/Berufsschule_HAM.git synced 2025-12-20 06:51:55 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Implemented user view modal in frontend

Browse Source
This commit is contained in:
LD-Reborn
2025-10-25 23:24:20 +02:00
parent 85cb68a6c2
commit 4b39d721f3
1 changed files with 137 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/Views/Home/Users.cshtml
View File

@@ -38,7 +38,7 @@
@{ @{
foreach (UserTableViewModel userTableViewModel in Model.UserTableViewModels) foreach (UserTableViewModel userTableViewModel in Model.UserTableViewModels)
{ {
<tr> <tr class="user-row">
<td> <td>
<img class="rounded-circle user-icon" src="data:image/jpeg;base64,@userTableViewModel.JpegPhoto" alt="Photo" style="max-width:300px;" /> <img class="rounded-circle user-icon" src="data:image/jpeg;base64,@userTableViewModel.JpegPhoto" alt="Photo" style="max-width:300px;" />
</td> </td>
@@ -648,3 +648,138 @@
} }
}); });
</script> </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>