Merge pull request #182 from LD-Reborn/181-bug-inventory-asset-edit-page-has-no-location-and-owner-dropdowns

181 bug inventory asset edit page has no location and owner dropdowns

src/Resources/Views.Home.Inventory.de.resx

@@ -138,4 +138,10 @@
     <data name="Asset updated successfully" xml:space="preserve">
         <value>Asset wurde erfolgreich angepasst</value>
     </data>
+    <data name="Select user" xml:space="preserve">
+        <value>Benutzer auswählen</value>
+    </data>
+    <data name="Select location" xml:space="preserve">
+        <value>Ort auswählen</value>
+    </data>
 </root>

src/Resources/Views.Shared._Layout.de.resx

@@ -43,4 +43,7 @@
     <data name="Error loading locations" xml:space="preserve">
         <value>Fehler beim Laden der Orte</value>
     </data>
+    <data name="Select user" xml:space="preserve">
+        <value>Benutzer auswählen</value>
+    </data>
 </root>

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

@@ -5,6 +5,8 @@
 @{
     ViewData["Title"] = T["Inventory"];
 }
+<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"/>
 
@@ -309,11 +311,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">
@@ -416,7 +422,14 @@ document.addEventListener('DOMContentLoaded', () => {
             const response = await fetch(`/Assets/Get?cn=${assetId}`);
             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 +531,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"/>