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 owner dropdown with Tomselect in Assets view

Browse Source
This commit is contained in:
LD-Reborn
2025-10-26 11:17:52 +01:00
parent 1ea286cf9c
commit 6a6e641621
3 changed files with 87 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/Views/Home/Assets.cshtml
View File

@@ -5,7 +5,7 @@
@{
ViewData["Title"] = T["Assets"];
}
<link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.bootstrap5.min.css" rel="preload" as="style" />
<link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.bootstrap5.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js" defer></script>
<partial name="_BatchButton"/>
@@ -179,9 +179,10 @@
</div>
<div class="col-md-6">
<label class="form-label">@T["Owner"]</label>
<input type="text" class="form-control" name="Owner" />
<select class="form-select" name="Owner" id="createUsersSelect">
<option value="">@T["Select owner"]</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label">@T["Serial Number"]</label>
<input type="text" class="form-control" name="SerialNumber" />
@@ -390,9 +391,10 @@
</div>
<div class="col-md-6">
<label class="form-label">@T["Owner"]</label>
<input type="text" class="form-control" name="Owner" />
<select class="form-select" name="Owner" id="updateUsersSelect">
<option value="">@T["Select owner"]</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label">@T["Serial Number"]</label>
<input type="text" class="form-control" name="SerialNumber" />
@@ -764,38 +766,66 @@ document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('DOMContentLoaded', () => {
const createModal = document.getElementById('createAssetModal');
createModal.addEventListener('show.bs.modal', async () => {
const select = createModal.querySelector('#createLocationSelect');
await loadLocationsIntoSelect(select);
const selectLocations = createModal.querySelector('#createLocationSelect');
await loadLocationsIntoSelect(selectLocations);
const selectUsers = createModal.querySelector('#createUsersSelect');
await loadUsersIntoSelect(selectUsers);
});
});
</script>
<!-- TomSelect locations dropdowns -->
<!-- TomSelect dropdowns -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const createSelect = document.getElementById('createLocationSelect');
const updateSelect = document.getElementById('updateLocationSelect');
// Locations dropdowns
document.addEventListener('DOMContentLoaded', () => {
const createLocationSelect = document.getElementById('createLocationSelect');
const updateLocationSelect = document.getElementById('updateLocationSelect');
async function initLocationSelect(selectElement) {
if (!selectElement) return;
await loadLocationsIntoSelect(selectElement);
new TomSelect(selectElement, {
plugins: ['clear_button'],
create: false,
sortField: { field: 'text', direction: 'asc' },
placeholder: '@T["Select location"]',
maxOptions: 500, // avoid performance hit if there are many
render: {
no_results: function(data, escape) {
return `<div class="no-results">@T["No locations found"]</div>`;
async function initLocationSelect(selectElement) {
if (!selectElement) return;
await loadLocationsIntoSelect(selectElement);
new TomSelect(selectElement, {
plugins: ['clear_button'],
create: false,
sortField: { field: 'text', direction: 'asc' },
placeholder: '@T["Select location"]',
maxOptions: 500, // avoid performance hit if there are many
render: {
no_results: function(data, escape) {
return `<div class="no-results">@T["No locations found"]</div>`;
}
}
}
});
}
});
}
initLocationSelect(createLocationSelect);
initLocationSelect(updateLocationSelect);
// Users dropdowns
const createUsersSelect = document.getElementById('createUsersSelect');
const updateUsersSelect = document.getElementById('updateUsersSelect');
async function initUsersSelect(selectElement) {
if (!selectElement) return;
await loadUsersIntoSelect(selectElement);
new TomSelect(selectElement, {
plugins: ['clear_button'],
create: false,
sortField: { field: 'text', direction: 'asc' },
placeholder: '@T["Select user"]',
maxOptions: 500, // avoid performance hit if there are many
render: {
no_results: function(data, escape) {
return `<div class="no-results">@T["No users found"]</div>`;
}
}
});
}
initUsersSelect(createUsersSelect);
initUsersSelect(updateUsersSelect);
});
initLocationSelect(createSelect);
initLocationSelect(updateSelect);
});
</script>

4
src/Views/Shared/_Layout.cshtml
View File

@@ -20,7 +20,9 @@
<script>
window.appTranslations = {
selectLocation: '@T["Select location"]',
errorLoading: '@T["Error loading locations"]'
errorLoadingLocations: '@T["Error loading locations"]',
selectUser: '@T["Select user"]',
errorLoadingUsers: '@T["Error loading users"]'
};
</script>
</head>

25
src/wwwroot/js/site.js
View File

@@ -137,6 +137,29 @@ async function loadLocationsIntoSelect(selectElement, selectedValue = null) {
});
} catch (err) {
console.error('Error loading locations:', err);
showToast(appTranslations.errorLoading, 'danger');
showToast(appTranslations.errorLoadingLocations, 'danger');
}
}
async function loadUsersIntoSelect(selectElement, selectedValue = null) {
try {
const response = await fetch('/Users/Index?Cn=false&Sn=false&Title=false&Description=false&JpegPhoto=false&UserPassword=false');
const users = await response.json();
selectElement.innerHTML = `<option value="">${appTranslations.selectUser}</option>`;
users.forEach(usr => {
const text = usr.uid;
const option = document.createElement('option');
option.value = usr.uid;
option.textContent = text;
if (selectedValue && selectedValue === usr.uid) {
option.selected = true;
}
selectElement.appendChild(option);
});
} catch (err) {
console.error('Error loading users:', err);
showToast(appTranslations.errorLoadingUsers, 'danger');
}
}