Implemented owner dropdown with Tomselect in Assets view

src/Views/Home/Assets.cshtml

@@ -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');
+        const selectLocations = createModal.querySelector('#createLocationSelect');
-        await loadLocationsIntoSelect(select);
+        await loadLocationsIntoSelect(selectLocations);
+        const selectUsers = createModal.querySelector('#createUsersSelect');
+        await loadUsersIntoSelect(selectUsers);
     });
 });
 
 </script>
-<!-- TomSelect locations dropdowns -->
+<!-- TomSelect dropdowns -->
 <script>
-document.addEventListener('DOMContentLoaded', () => {
+    // Locations dropdowns
-    const createSelect = document.getElementById('createLocationSelect');
+    document.addEventListener('DOMContentLoaded', () => {
-    const updateSelect = document.getElementById('updateLocationSelect');
+        const createLocationSelect = document.getElementById('createLocationSelect');
+        const updateLocationSelect = document.getElementById('updateLocationSelect');
 
-    async function initLocationSelect(selectElement) {
+        async function initLocationSelect(selectElement) {
-        if (!selectElement) return;
+            if (!selectElement) return;
-        await loadLocationsIntoSelect(selectElement);
+            await loadLocationsIntoSelect(selectElement);
-        new TomSelect(selectElement, {
+            new TomSelect(selectElement, {
-            plugins: ['clear_button'],
+                plugins: ['clear_button'],
-            create: false,
+                create: false,
-            sortField: { field: 'text', direction: 'asc' },
+                sortField: { field: 'text', direction: 'asc' },
-            placeholder: '@T["Select location"]',
+                placeholder: '@T["Select location"]',
-            maxOptions: 500, // avoid performance hit if there are many
+                maxOptions: 500, // avoid performance hit if there are many
-            render: {
+                render: {
-                no_results: function(data, escape) {
+                    no_results: function(data, escape) {
-                    return `<div class="no-results">@T["No locations found"]</div>`;
+                        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>
 
 

src/Views/Shared/_Layout.cshtml

@@ -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>

src/wwwroot/js/site.js

@@ -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');
     }
 }