Implemented owner dropdown with Tomselect in Assets view

This commit is contained in:
2025-10-26 11:17:52 +01:00
parent 1ea286cf9c
commit 6a6e641621
3 changed files with 87 additions and 32 deletions

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>