Files
Berufsschule_HAM/src/Views/Home/Groups.cshtml

518 lines
30 KiB
Plaintext

@using Microsoft.AspNetCore.Mvc.Localization
@using Berufsschule_HAM.Models
@using System.Buffers.Text
@model GroupsIndexViewModel
@inject IViewLocalizer T
@{
ViewData["Title"] = T["Groups"];
}
<div class="container py-4">
<h2 class="mb-3">@T["Groups"]</h2>
<div class="mb-4 d-flex flex-wrap gap-2">
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createGroupModal">
@T["Create group"]
</button>
</div>
<div class="table-responsive">
<table class="table table-striped align-middle">
<thead>
<tr>
<th class="text-center">Group</th>
<th class="text-center">@T["Can"]:<br/>@T["inventorize"]</th>
<th class="text-center">@T["Can"]:<br/>@T["manage users"]</th>
<th class="text-center">@T["Can"]:<br/>@T["manage locations"]</th>
<th class="text-center">@T["Can"]:<br/>@T["manage assets"]</th>
<th class="text-center">@T["Can"]:<br/>@T["manage groups"]</th>
<th class="text-center">@T["Can"]:<br/>@T["manage settings"]</th>
<th class="text-center">@T["Action"]</th>
</tr>
</thead>
<tbody>
@{
foreach (GroupsTableViewModel groupTableViewModel in Model.GroupsTableViewModels)
{
<tr>
<td class="text-center" tabindex="0">@groupTableViewModel.Group</td>
<td class="text-center @(groupTableViewModel.CanInventorize ? "text-success" : "text-danger")"><span class="visually-hidden">@T["inventorize"]</span>@(groupTableViewModel.CanInventorize ? Html.Raw($"<span aria-hidden=\"true\">✓</span><span class=\"visually-hidden\">{@T["Yes"].Value}</span>") : Html.Raw($"<span aria-hidden=\"true\">✗</span><span class=\"visually-hidden\">{@T["No"].Value}</span>"))</td>
<td class="text-center @(groupTableViewModel.CanManageUsers ? "text-success" : "text-danger")"><span class="visually-hidden">@T["manage users"]</span>@(groupTableViewModel.CanManageUsers ? Html.Raw($"<span aria-hidden=\"true\">✓</span><span class=\"visually-hidden\">{@T["Yes"].Value}</span>") : Html.Raw($"<span aria-hidden=\"true\">✗</span><span class=\"visually-hidden\">{@T["No"].Value}</span>"))</td>
<td class="text-center @(groupTableViewModel.CanManageLocations ? "text-success" : "text-danger")"><span class="visually-hidden">@T["manage locations"]</span>@(groupTableViewModel.CanManageLocations ? Html.Raw($"<span aria-hidden=\"true\">✓</span><span class=\"visually-hidden\">{@T["Yes"].Value}</span>") : Html.Raw($"<span aria-hidden=\"true\">✗</span><span class=\"visually-hidden\">{@T["No"].Value}</span>"))</td>
<td class="text-center @(groupTableViewModel.CanManageAssets ? "text-success" : "text-danger")"><span class="visually-hidden">@T["manage assets"]</span>@(groupTableViewModel.CanManageAssets ? Html.Raw($"<span aria-hidden=\"true\">✓</span><span class=\"visually-hidden\">{@T["Yes"].Value}</span>") : Html.Raw($"<span aria-hidden=\"true\">✗</span><span class=\"visually-hidden\">{@T["No"].Value}</span>"))</td>
<td class="text-center @(groupTableViewModel.CanManageGroups ? "text-success" : "text-danger")"><span class="visually-hidden">@T["manage groups"]</span>@(groupTableViewModel.CanManageGroups ? Html.Raw($"<span aria-hidden=\"true\">✓</span><span class=\"visually-hidden\">{@T["Yes"].Value}</span>") : Html.Raw($"<span aria-hidden=\"true\">✗</span><span class=\"visually-hidden\">{@T["No"].Value}</span>"))</td>
<td class="text-center @(groupTableViewModel.CanManageSettings ? "text-success" : "text-danger")"><span class="visually-hidden">@T["manage settings"]</span>@(groupTableViewModel.CanManageSettings ? Html.Raw($"<span aria-hidden=\"true\">✓</span><span class=\"visually-hidden\">{@T["Yes"].Value}</span>") : Html.Raw($"<span aria-hidden=\"true\">✗</span><span class=\"visually-hidden\">{@T["No"].Value}</span>"))</td>
<td class="text-center">
<div class="d-flex gap-2 justify-content-center">
<button class="btn btn-sm btn-warning btn-update"
data-group-id="@groupTableViewModel.Cn"
data-bs-toggle="modal"
data-bs-target="#updateGroupModal">
@T["Update"]
</button>
<button class="btn btn-sm btn-danger btn-delete"
data-group-id="@groupTableViewModel.Cn"
data-bs-toggle="modal"
data-bs-target="#deleteModal">
@T["Delete"]
</button>
</div>
</td>
</tr>
}
}
</tbody>
</table>
</div>
</div>
<!-- Group Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header bg-danger text-white">
<h3 class="modal-title" id="deleteModalLabel">@T["Confirm Delete"]</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>@T["GroupDeleteConfirmation1"] <strong id="deleteGroupName"></strong> (ID: <span id="deleteGroupId"></span>)@T["GroupDeleteConfirmation2"]</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@T["Cancel"]</button>
<form id="deleteForm" method="post" action="">
<button type="submit" class="btn btn-danger">@T["Yes, Delete"]</button>
</form>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const deleteModal = document.getElementById('deleteModal');
let currentButton = null; // The delete button that opened the modal
deleteModal.addEventListener('show.bs.modal', event => {
currentButton = event.relatedTarget; // Button that triggered the modal
const groupId = currentButton.getAttribute('data-group-id');
const groupName = currentButton.getAttribute('data-group-name');
deleteModal.querySelector('#deleteGroupId').textContent = groupId;
deleteModal.querySelector('#deleteGroupName').textContent = groupName;
// Store the delete URL for later use
deleteModal.querySelector('#deleteForm').dataset.url = `/Groups/Delete?uid=${groupId}`;
});
// Handle submit of deleteForm via fetch()
const deleteForm = document.getElementById('deleteForm');
deleteForm.addEventListener('submit', async e => {
e.preventDefault();
const url = deleteForm.dataset.url;
const groupId = deleteModal.querySelector('#deleteGroupId').textContent;
try {
const response = await fetch(url, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}//,
//body: JSON.stringify({ id: groupId }) // Use this for Post requests with [FromBody] parameters like in /Groups/Update
});
const result = await response.json();
if (result.success) {
// Close the modal
const modal = bootstrap.Modal.getInstance(deleteModal);
modal.hide();
// Remove the row from the table
const row = currentButton.closest('tr');
row.classList.add('table-danger');
setTimeout(() => row.remove(), 300);
showToast('@T["Group deleted successfully"]', 'success');
} else {
let exception = result.exception;
switch (exception) {
case "None":
exception = "@T["Unknown error"]";
default:
break;
}
showToast(`${@T["Error"] + ": " + exception}`, 'danger');
}
} catch (error) {
console.error(error);
showToast('@T["Error contacting server"]', 'danger');
}
});
});
</script>
<!-- Groups Create Modal -->
<div class="modal fade" id="createGroupModal" tabindex="-1" aria-labelledby="createGroupModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h3 class="modal-title" id="createGroupModalLabel">@T["Create group"]</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="createGroupForm">
<div class="modal-body">
<div class="row g-3 justify-content-center">
<!-- Basic Info -->
<div class="col-md-6">
<label class="form-label" for="cn">@T["Group ID"] <span class="text-danger" aria-hidden="true">*</span></label>
<input type="text" id="cn" class="form-control" name="Cn" aria-required="true" required />
</div>
<div class="col-md-6">
<label class="form-label" for="displayname">@T["Display Name"] <span class="text-danger" aria-hidden="true">*</span></label>
<input type="text" id="displayname" class="form-control" name="DisplayName" aria-required="true" required />
</div>
<div class="col-md-4">
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" name="Permissions.CanInventorize" id="canInventorize" />
<label class="form-check-label" for="canInventorize">@T["Can inventorize"]</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="Permissions.CanManageAssets" id="canManageAssets" />
<label class="form-check-label" for="canManageAssets">@T["Can manage assets"]</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" name="Permissions.CanManageUsers" id="canManageUsers" />
<label class="form-check-label" for="canManageUsers">@T["Can manage users"]</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="Permissions.CanManageGroups" id="canManageGroups" />
<label class="form-check-label" for="canManageGroups">@T["Can manage groups"]</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" name="Permissions.CanManageLocations" id="canManageLocations" />
<label class="form-check-label" for="canManageLocations">@T["Can manage locations"]</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="Permissions.CanManageSettings" id="canManageSettings" />
<label class="form-check-label" for="canManageSettings">@T["Can manage settings"]</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@T["Cancel"]</button>
<button type="submit" class="btn btn-primary">@T["Create"]</button>
</div>
</form>
</div>
</div>
</div>
<script>
const contentYes = `<span aria-hidden=\"true\">✓</span><span class=\"visually-hidden\">@T["Yes"].Value</span>`;
const contentNo = `<span aria-hidden=\"true\">✗</span><span class=\"visually-hidden\">@T["No"].Value</span>`;
document.addEventListener('DOMContentLoaded', () => {
const createForm = document.getElementById('createGroupForm');
createForm.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(createForm);
const jsonData = {};
// Basic fields
jsonData.Cn = formData.get('Cn');
jsonData.DisplayName = formData.get('DisplayName');
// Permissions
jsonData.Permissions = [];
if (createForm.querySelector('[name="Permissions.CanInventorize"]').checked) jsonData.Permissions.push("CanInventorize");
if (createForm.querySelector('[name="Permissions.CanManageAssets"]').checked) jsonData.Permissions.push("CanManageAssets");
if (createForm.querySelector('[name="Permissions.CanManageUsers"]').checked) jsonData.Permissions.push("CanManageUsers");
if (createForm.querySelector('[name="Permissions.CanManageGroups"]').checked) jsonData.Permissions.push("CanManageGroups");
if (createForm.querySelector('[name="Permissions.CanManageSettings"]').checked) jsonData.Permissions.push("CanManageSettings");
if (createForm.querySelector('[name="Permissions.CanManageLocations"]').checked) jsonData.Permissions.push("CanManageLocations");
try {
const response = await fetch('/Groups/Create', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(jsonData)
});
const result = await response.json();
const createModalEl = document.getElementById('createGroupModal');
if (result.success) {
bootstrap.Modal.getInstance(createModalEl).hide();
createForm.reset();
// Add the new group to the table
const tableBody = document.querySelector('tbody');
const newRow = document.createElement('tr');
newRow.innerHTML = `
<td class="text-center" tabindex="0">${jsonData.DisplayName}</td>
<td class="text-center ${jsonData.Permissions.includes("CanInventorize") ? "text-success" : "text-danger"}"><span class="visually-hidden">@T["inventorize"]</span>${jsonData.Permissions.includes("CanInventorize") ? contentYes : contentNo}</td>
<td class="text-center ${jsonData.Permissions.includes("CanManageUsers") ? "text-success" : "text-danger"}"><span class="visually-hidden">@T["manage users"]</span>${jsonData.Permissions.includes("CanManageUsers") ? contentYes : contentNo}</td>
<td class="text-center ${jsonData.Permissions.includes("CanManageLocations") ? "text-success" : "text-danger"}"><span class="visually-hidden">@T["manage locations"]</span>${jsonData.Permissions.includes("CanManageLocations") ? contentYes : contentNo}</td>
<td class="text-center ${jsonData.Permissions.includes("CanManageAssets") ? "text-success" : "text-danger"}"><span class="visually-hidden">@T["manage assets"]</span>${jsonData.Permissions.includes("CanManageAssets") ? contentYes : contentNo}</td>
<td class="text-center ${jsonData.Permissions.includes("CanManageGroups") ? "text-success" : "text-danger"}"><span class="visually-hidden">@T["manage groups"]</span>${jsonData.Permissions.includes("CanManageGroups") ? contentYes : contentNo}</td>
<td class="text-center ${jsonData.Permissions.includes("CanManageSettings") ? "text-success" : "text-danger"}"><span class="visually-hidden">@T["manage settings"]</span>${jsonData.Permissions.includes("CanManageSettings") ? contentYes : contentNo}</td>
<td class="text-center">
<div class="d-flex gap-2 justify-content-center">
<button class="btn btn-sm btn-warning btn-update"
data-group-id="${jsonData.Cn}"
data-bs-toggle="modal"
data-bs-target="#updateGroupModal">
@T["Update"]
</button>
<button class="btn btn-sm btn-danger btn-delete"
data-group-id="${jsonData.Cn}"
data-bs-toggle="modal"
data-bs-target="#deleteModal">
@T["Delete"]
</button>
</div>
</td>
`;
tableBody.appendChild(newRow);
showToast('@T["Group created successfully"]', 'success');
} else {
let exception = result.exception;
switch (exception) {
case "Entry Already Exists":
exception = "@T["Entry Already Exists"]";
break;
case "None":
exception = "@T["Unknown error"]";
default:
break;
}
showToast("@T["Error"]: " + exception || '@T["Error creating group"]', 'danger');
}
} catch (err) {
console.error(err);
showToast('@T["Error contacting server"]', 'danger');
}
});
});
</script>
<!-- Groups Update Modal -->
<div class="modal fade" id="updateGroupModal" tabindex="-1" aria-labelledby="updateGroupModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header bg-warning text-dark">
<h3 class="modal-title" id="updateGroupModalLabel">@T["Update Group"]</h3>
<button type="button" class="btn-close" style="filter: invert(0);" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="updateGroupForm">
<div class="modal-body">
<div class="row g-3 mb-2 justify-content-center">
<!-- Basic Info -->
<div class="col-md-6">
<label class="form-label" for="groupId">@T["Group ID"] <span class="text-danger" aria-hidden="true">*</span></label>
<input type="text" id="groupId" class="form-control" name="Cn" aria-required="true" required />
</div>
<div class="col-md-6">
<label class="form-label" for="dn">@T["Display Name"] <span class="text-danger" aria-hidden="true">*</span></label>
<input type="text" id="dn" class="form-control" name="DisplayName" aria-required="true" required />
</div>
<div class="col-md-4">
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" name="Description.Permissions.CanInventorize" id="updateCanInventorize" />
<label class="form-check-label" for="updateCanInventorize">@T["Can inventorize"]</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="Description.Permissions.CanManageAssets" id="updateCanManageAssets" />
<label class="form-check-label" for="updateCanManageAssets">@T["Can manage assets"]</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" name="Description.Permissions.CanManageUsers" id="updateCanManageUsers" />
<label class="form-check-label" for="updateCanManageUsers">@T["Can manage users"]</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="Description.Permissions.CanManageGroups" id="updateCanManageGroups" />
<label class="form-check-label" for="updateCanManageGroups">@T["Can manage groups"]</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" name="Description.Permissions.CanManageLocations" id="updateCanManageLocations" />
<label class="form-check-label" for="updateCanManageLocations">@T["Can manage locations"]</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="Description.Permissions.CanManageSettings" id="updateCanManageSettings" />
<label class="form-check-label" for="updateCanManageSettings">@T["Can manage settings"]</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@T["Cancel"]</button>
<button type="submit" class="btn btn-warning">@T["Save Changes"]</button>
</div>
</form>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const updateButtons = document.querySelectorAll('.btn-update');
const updateModal = document.getElementById('updateGroupModal');
const updateForm = document.getElementById('updateGroupForm');
var groupId;
updateModal.addEventListener('show.bs.modal', async event => {
const button = event.relatedTarget;
groupId = button.getAttribute('data-group-id');
updateForm.reset();
try {
const response = await fetch(`/Groups/Get?cn=${groupId}`);
const responseJson = await response.json();
const groups = responseJson.GroupModels[0];
for (const [key, value] of Object.entries(groups)) {
const input = updateForm.querySelector(`[name="${key}"]`);
if (input) input.value = value;
}
if (groups.Permissions) {
for (const permission of groups.Permissions)
{
updateForm.querySelector(`[name="Description.Permissions.${permission}"]`).checked = true;
}
}
} catch (err) {
console.error(err);
showToast('@T["Error loading group data"]', 'danger');
}
});
updateForm.addEventListener('submit', async e => {
e.preventDefault();
const formData = new FormData(updateForm);
const jsonData = {};
for (const [key, value] of formData.entries()) {
if (!value) continue;
const keys = key.split('.');
let target = jsonData;
for (let i = 0; i < keys.length - 1; i++) {
target[keys[i]] = target[keys[i]] || {};
target = target[keys[i]];
}
target[keys[keys.length - 1]] = value;
}
let permissions = [];
const elements = document.querySelectorAll('[name^="Description.Permissions"]');
for (const element of elements)
{
if (element.checked)
{
permissions.push(element.name.substr(element.name.lastIndexOf(".") + 1));
}
}
if (!jsonData.Description) { // Necessary for when no permissions are selected.
jsonData.Description = {};
}
jsonData.Description.Permissions = permissions;
jsonData.Description.DisplayName = jsonData.DisplayName;
jsonData.DisplayName = null;
jsonData.NewCn = jsonData.Cn;
jsonData.Cn = groupId;
buttons = $(`button[data-group-id=\"${jsonData.Cn}\"]`);
buttons.each(i => buttons[i].setAttribute("data-group-id", jsonData.NewCn));
try {
const response = await fetch('/Groups/Update', {
method: 'PATCH',
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
body: JSON.stringify(jsonData)
});
const result = await response.json();
if (result.success) {
bootstrap.Modal.getInstance(updateModal).hide();
showToast('@T["Group updated successfully"]', 'success');
// Optionally refresh the row
const row = [...document.querySelectorAll('tr')]
.find(r => r.querySelector(`[data-group-id="${jsonData.Cn}"]`));
if (row) {
row.children[0].textContent = jsonData.Description.DisplayName || '';
row.children[1].innerHTML = `<span class="visually-hidden">@T["inventorize"]</span>` + (jsonData.Description.Permissions.includes("CanInventorize") ? contentYes : contentNo || '');
row.children[2].innerHTML = `<span class="visually-hidden">@T["manage users"]</span>` + (jsonData.Description.Permissions.includes("CanManageUsers") ? contentYes : contentNo || '');
row.children[3].innerHTML = `<span class="visually-hidden">@T["manage locations"]</span>` + (jsonData.Description.Permissions.includes("CanManageLocations") ? contentYes : contentNo || '');
row.children[4].innerHTML = `<span class="visually-hidden">@T["manage assets"]</span>` + (jsonData.Description.Permissions.includes("CanManageAssets") ? contentYes : contentNo || '');
row.children[5].innerHTML = `<span class="visually-hidden">@T["manage groups"]</span>` + (jsonData.Description.Permissions.includes("CanManageGroups") ? contentYes : contentNo || '');
row.children[6].innerHTML = `<span class="visually-hidden">@T["manage settings"]</span>` + (jsonData.Description.Permissions.includes("CanManageSettings") ? contentYes : contentNo || '');
if (jsonData.Description.Permissions.includes("CanInventorize")) {
row.children[1].className = "text-center text-success";
} else {
row.children[1].className = "text-center text-danger";
}
if (jsonData.Description.Permissions.includes("CanManageUsers")) {
row.children[2].className = "text-center text-success";
} else {
row.children[2].className = "text-center text-danger";
}
if (jsonData.Description.Permissions.includes("CanManageLocations")) {
row.children[3].className = "text-center text-success";
} else {
row.children[3].className = "text-center text-danger";
}
if (jsonData.Description.Permissions.includes("CanManageAssets")) {
row.children[4].className = "text-center text-success";
} else {
row.children[4].className = "text-center text-danger";
}
if (jsonData.Description.Permissions.includes("CanManageGroups")) {
row.children[5].className = "text-center text-success";
} else {
row.children[5].className = "text-center text-danger";
}
if (jsonData.Description.Permissions.includes("CanManageSettings")) {
row.children[6].className = "text-center text-success";
} else {
row.children[6].className = "text-center text-danger";
}
}
} else {
showToast(result.reason || '@T["Error updating group"]', 'danger');
}
} catch (err) {
console.error(err);
showToast('@T["Error contacting server"]', 'danger');
}
});
});
</script>