Implemented Groups edit buttons

This commit is contained in:
2025-10-12 16:13:41 +02:00
parent 4b6fb74a76
commit 164831c903
5 changed files with 237 additions and 27 deletions

View File

@@ -45,7 +45,12 @@
<td style="text-align: center">@(groupTableViewModel.CanManageGroups ? "☑️" : "❌")</td>
<td style="text-align: center">
<div class="d-flex gap-2 justify-content-center">
<button class="btn btn-sm btn-primary">Update</button>
<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"
@@ -297,3 +302,157 @@
});
});
</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">
<h5 class="modal-title" id="updateGroupModalLabel">@T["Update Group"]</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="updateGroupForm">
<div class="modal-body">
<div class="row g-3 justify-content-center">
<!-- Basic Info -->
<div class="col-md-6">
<label class="form-label">@T["Group ID"] *</label>
<input type="text" class="form-control" name="Cn" required />
</div>
<div class="col-md-6">
<label class="form-label">@T["Display name"] *</label>
<input type="text" class="form-control" name="DisplayName" />
</div>
<div class="col-md-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" name="Description.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="Description.Permissions.CanManageAssets" id="canManageAssets" />
<label class="form-check-label" for="canManageAssets">@T["Can manage assets"]</label>
</div>
</div>
<div class="col-md-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" name="Description.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="Description.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">
<input type="checkbox" class="form-check-input" name="Description.Permissions.CanManageLocations" id="canManageLocations" />
<label class="form-check-label" for="canManageLocations">@T["Can manage locations"]</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');
updateModal.addEventListener('show.bs.modal', async event => {
const button = event.relatedTarget;
const 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('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));
}
}
jsonData.Description.Permissions = permissions;
jsonData.Description.DisplayName = jsonData.DisplayName;
jsonData.DisplayName = null;
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('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].textContent = jsonData.Description.Permissions.includes("CanInventorize") ? "☑️" : "❌" || '';
row.children[2].textContent = jsonData.Description.Permissions.includes("CanManageUsers") ? "☑️" : "❌" || '';
row.children[3].textContent = jsonData.Description.Permissions.includes("CanManageLocations") ? "☑️" : "❌" || '';
row.children[4].textContent = jsonData.Description.Permissions.includes("CanManageAssets") ? "☑️" : "❌" || '';
row.children[5].textContent = jsonData.Description.Permissions.includes("CanManageGroups") ? "☑️" : "❌" || '';
}
} else {
showToast(result.reason || 'Error updating group', 'danger');
}
} catch (err) {
console.error(err);
showToast('Error contacting server', 'danger');
}
});
});
</script>