Added dropdown users and locations to inventory, Improved edit modal loading for Assets

src/Views/Home/Assets.cshtml

@@ -495,9 +495,11 @@ document.addEventListener('DOMContentLoaded', () => {
             const asset = responseJson.assetsModel;
             
             const locationSelect = updateForm.querySelector('#updateLocationSelect');
-            await loadLocationsIntoSelect(locationSelect, asset.Location);
             const usersSelect = updateForm.querySelector('#updateUsersSelect');
-            await loadUsersIntoSelect(usersSelect, asset.Owner);
+            await Promise.all([
+                loadLocationsIntoSelect(locationSelect, asset.Location),
+                loadUsersIntoSelect(usersSelect, asset.Owner)
+            ]);
 
             for (const [key, value] of Object.entries(asset)) {
                 const input = updateForm.querySelector(`[name="${key}"]`);

src/Views/Home/Inventory.cshtml

@@ -309,11 +309,15 @@
 
                         <div class="col-md-6">
                             <label class="form-label">@T["Location"]</label>
-                            <input type="text" class="form-control" name="Location" />
+                            <select class="form-select" name="Location" id="updateLocationSelect">
+                                <option value="">@T["Select location"]</option>
+                            </select>
                         </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">
@@ -417,6 +421,13 @@ document.addEventListener('DOMContentLoaded', () => {
             const responseJson = await response.json();
             const asset = responseJson.assetsModel;
 
+            const locationSelect = updateForm.querySelector('#updateLocationSelect');
+            const usersSelect = updateForm.querySelector('#updateUsersSelect');
+            await Promise.all([
+                loadLocationsIntoSelect(locationSelect, asset.Location),
+                loadUsersIntoSelect(usersSelect, asset.Owner)
+            ]);
+
             for (const [key, value] of Object.entries(asset)) {
                 const input = updateForm.querySelector(`[name="${key}"]`);
                 if (input) input.value = value;
@@ -518,5 +529,56 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 </script>
 
+<!-- TomSelect dropdowns -->
+<script>
+    // Locations dropdowns
+    document.addEventListener('DOMContentLoaded', () => {
+        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>`;
+                    }
+                }
+            });
+        }
+
+        initLocationSelect(updateLocationSelect);
+        
+        // Users dropdowns
+        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(updateUsersSelect);
+    });
+
+</script>
+
+
 
 <partial name="_Batch"/>