Merge pull request #106 from LD-Reborn/105-feauture-implement-asset-update-frontend

105 feauture implement asset update frontend

src/Controllers/AssetsController.cs

@@ -20,18 +20,35 @@ public class AssetsController : Controller
         _logger = logger;
     }
 
-    [HttpGet("GetAll")]
-    public async Task<AssetsIndexResponseModel> GetAllAssetModelAsync()
+    [HttpGet("Get")]
+    public async Task<AssetsGetResponseModel> GetAllAssetModelAsync(string Cn)
     {
-        AssetsIndexResponseModel result;
+        AssetsGetResponseModel result;
         try
         {
-            var assetList = await _ldap.ListDeviceAsync();
-            result = new AssetsIndexResponseModel(successful: true, assetsModel: assetList);
+            var assetList = await _ldap.ListDeviceAsync(Cn);
+            result = new AssetsGetResponseModel(successful: true, assetModel: assetList);
         }
         catch (Exception e)
         {
-            result = new AssetsIndexResponseModel(successful: false, exception: e.Message);
+            result = new AssetsGetResponseModel(successful: false, exception: e.Message);
+        }
+        
+        return result;
+    }
+
+    [HttpGet("GetAll")]
+    public async Task<AssetsGetAllResponseModel> GetAllAssetModelAsync()
+    {
+        AssetsGetAllResponseModel result;
+        try
+        {
+            var assetList = await _ldap.ListDeviceAsync();
+            result = new AssetsGetAllResponseModel(successful: true, assetsModel: assetList);
+        }
+        catch (Exception e)
+        {
+            result = new AssetsGetAllResponseModel(successful: false, exception: e.Message);
         }
         
         return result;
@@ -121,7 +138,7 @@ public class AssetsController : Controller
     }
 
     [HttpPatch("Update")]
-    public async Task<AssetsUpdateResponseModel> Update(AssetsModifyRequestModel requestModel)
+    public async Task<AssetsUpdateResponseModel> Update([FromBody]AssetsModifyRequestModel requestModel)
     {
         AssetsUpdateResponseModel result;
         if (requestModel is null)
@@ -161,6 +178,10 @@ public class AssetsController : Controller
             {
                 AssetModel? asset = null;
                 asset = await _ldap.GetAssetByCnAsync(cn);
+                if (asset.Description is null)
+                {
+                    asset.Description = new();
+                }
                 AttributesHelper.UpdateNonNullProperties(requestModel.Description, asset.Description);
                 await _ldap.UpdateAsset(cn, "description", JsonSerializer.Serialize(requestModel.Description));
             }

src/Models/AssetsModel.cs

@@ -1,15 +1,22 @@
 namespace Berufsschule_HAM.Models;
 
 using System.Text.Json;
+using System.Text.Json.Serialization;
 using Berufsschule_HAM.Exceptions;
 
 public class AssetModel
 {
+    [JsonPropertyName("Cn")]
     public required string Cn { get; set; }
+    [JsonPropertyName("SerialNumber")]
     public string? SerialNumber { get; set; }
+    [JsonPropertyName("Description")]
     public AssetDescription? Description { get; set; }
+    [JsonPropertyName("Location")]
     public string? Location { get; set; }
+    [JsonPropertyName("Owner")]
     public string? Owner { get; set; }
+    [JsonPropertyName("Name")]
     public string? Name { get; set; }
 
     public AssetModel(Dictionary<string, string> ldapData)
@@ -33,18 +40,27 @@ public class AssetModel
 
 public class AssetDescription
 {
+    [JsonPropertyName("Type")]
     public string? Type { get; set; }
+    [JsonPropertyName("Make")]
     public string? Make { get; set; }
+    [JsonPropertyName("Model")]
     public string? Model { get; set; }
+    [JsonPropertyName("Attributes")]
     public Dictionary<string, string>? Attributes { get; set; }
+    [JsonPropertyName("Purchase")]
     public AssetPurchase? Purchase { get; set; }
 }
 
 public class AssetPurchase
 {
+    [JsonPropertyName("PurchaseDate")]
     public string? PurchaseDate { get; set; }
+    [JsonPropertyName("PurchaseValue")]
     public string? PurchaseValue { get; set; }
+    [JsonPropertyName("PurchaseAt")]
     public string? PurchasedAt { get; set; }
+    [JsonPropertyName("PurchaseBy")]
     public string? PurchasedBy { get; set; }
 }
 

src/Models/AssetsResponseModel.cs

@@ -21,7 +21,7 @@ public class AssetsDeleteResponseModel(bool successful, string exception = "None
     public string? Exception { get; set; } = exception;
 }
 
-public class AssetsIndexResponseModel(bool successful, IEnumerable<AssetModel>? assetsModel = null, string exception = "None")
+public class AssetsGetAllResponseModel(bool successful, IEnumerable<AssetModel>? assetsModel = null, string exception = "None")
 {
     public bool Success { get; set; } = successful;
 
@@ -30,3 +30,12 @@ public class AssetsIndexResponseModel(bool successful, IEnumerable<AssetModel>?
     public string? Exception { get; set; } = exception;
 }
 
+public class AssetsGetResponseModel(bool successful, AssetModel? assetModel = null, string exception = "None")
+{
+    public bool Success { get; set; } = successful;
+
+    public AssetModel? AssetsModel { get; set; } = assetModel;
+
+    public string? Exception { get; set; } = exception;
+}
+

src/Program.cs

@@ -45,6 +45,22 @@ builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationSc
         options.AccessDeniedPath = "/Home/AccessDenied";
     });
 
+builder.Services.AddResponseCompression(options =>
+{
+    options.EnableForHttps = true;
+    options.MimeTypes = new[]
+    {
+        "text/plain",
+        "text/css",
+        "application/javascript",
+        "text/html",
+        "application/xml",
+        "text/xml",
+        "application/json",
+        "image/svg+xml"
+    };
+});
+
 var app = builder.Build();
 
 if (!app.Environment.IsDevelopment())
@@ -76,6 +92,7 @@ if (app.Environment.IsDevelopment())
 app.UseStaticFiles();
 app.UseRouting();
 app.UseAuthorization();
+app.UseResponseCompression();
 
 string[] supportedCultures = ["de", "en"];
 var localizationOptions = new RequestLocalizationOptions()

src/Services/LdapService.cs

@@ -186,10 +186,19 @@ public partial class LdapService : IDisposable
     {
         IEnumerable<Dictionary<string, string>> devices = await ListObjectBy(AssetsBaseDn, "(objectClass=device)", AssetsAttributes);
         List<AssetModel> models = [];
-        devices.ToList().ForEach(x => models.Add(new AssetModel(x) {Cn = x["cn"]}));        
+        devices.ToList().ForEach(x => models.Add(new AssetModel(x) { Cn = x["cn"] }));
         return models;
     }
     
+    public async Task<AssetModel> ListDeviceAsync(string Cn)
+    {
+        IEnumerable<Dictionary<string, string>> devices = await ListObjectBy(AssetsBaseDn, $"(objectClass=device)", AssetsAttributes);
+        Dictionary<string, string> entry = devices.ToList().First(x => x.GetValueOrDefault("cn") != null && x["cn"] == Cn);
+        AssetModel model = new(entry) { Cn = entry["cn"] };
+        
+        return model;
+    }
+
     public async Task CreateUser(string uid, LdapAttributeSet attributeSet)
     {
         string dn = PrependRDN($"uid={uid}", UsersBaseDn);

src/Views/Home/Assets.cshtml

@@ -40,12 +40,17 @@
                     <td>@assetsTableViewModel.LocationName</td>
                     <td>
                         <div class="d-flex gap-2">
-                            <button class="btn btn-sm btn-primary">@T["Update"]</button>
+                            <button class="btn btn-sm btn-warning btn-update"
+                                data-asset-id="@assetsTableViewModel.AssetCn"
+                                data-bs-toggle="modal"
+                                data-bs-target="#updateAssetModal">
+                                @T["Update"]
+                            </button>
                             <button class="btn btn-sm btn-danger btn-delete" 
                                 data-asset-id="@assetsTableViewModel.AssetCn"
                                 data-bs-toggle="modal"
                                 data-bs-target="#deleteModal">
-                                🗑️ @T["Delete"]
+                                @T["Delete"]
                             </button>
                         </div>
                     </td>
@@ -344,3 +349,244 @@
         });
     });
 </script>
+
+
+<div class="modal fade" id="updateAssetModal" tabindex="-1" aria-labelledby="updateAssetModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header bg-warning text-dark">
+                <h5 class="modal-title" id="updateAssetModalLabel">@T["Update Asset"]</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+
+            <form id="updateAssetForm">
+                <div class="modal-body">
+                    <div class="row g-3">
+                        <!-- Same fields as in Create -->
+                        <div class="col-md-6">
+                            <label class="form-label">@T["Asset ID (Cn)"] *</label>
+                            <input type="text" class="form-control" name="Cn" readonly />
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label">@T["Name"]</label>
+                            <input type="text" class="form-control" name="Name" />
+                        </div>
+
+                        <div class="col-md-6">
+                            <label class="form-label">@T["Location"]</label>
+                            <input type="text" class="form-control" name="Location" />
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label">@T["Owner"]</label>
+                            <input type="text" class="form-control" name="Owner" />
+                        </div>
+
+                        <div class="col-md-6">
+                            <label class="form-label">@T["Serial Number"]</label>
+                            <input type="text" class="form-control" name="SerialNumber" />
+                        </div>
+
+                        <hr class="my-3" />
+
+                        <h6 class="fw-bold">@T["Description"]</h6>
+                        <div class="col-md-6">
+                            <label class="form-label">@T["Type"]</label>
+                            <input type="text" class="form-control" name="Description.Type" />
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label">@T["Make"]</label>
+                            <input type="text" class="form-control" name="Description.Make" />
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label">@T["Model"]</label>
+                            <input type="text" class="form-control" name="Description.Model" />
+                        </div>
+
+                        <div class="col-12 mt-3">
+                            <div class="d-flex justify-content-between align-items-center mb-2">
+                                <h6 class="fw-bold mb-0">@T["Attributes"]</h6>
+                            </div>
+                            <div id="updateAttributesContainer" class="d-flex flex-column gap-2"></div>
+                            <button type="button" class="btn btn-sm btn-outline-success mt-3" id="updateAddAttributeBtn">
+                                ➕ @T["Add Attribute"]
+                            </button>
+                        </div>
+
+                        <hr class="my-3" />
+
+                        <h6 class="fw-bold">@T["Purchase Information"]</h6>
+                        <div class="col-md-6">
+                            <label class="form-label">@T["Purchase Date"]</label>
+                            <input type="date" class="form-control" name="Description.Purchase.PurchaseDate" />
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label">@T["Purchase Value"]</label>
+                            <input type="text" class="form-control" name="Description.Purchase.PurchaseValue" />
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label">@T["Purchased At"]</label>
+                            <input type="text" class="form-control" name="Description.Purchase.PurchaseAt" />
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label">@T["Purchased By"]</label>
+                            <input type="text" class="form-control" name="Description.Purchase.PurchaseBy" />
+                        </div>
+                    </div>
+                </div>
+
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@T["Cancel"]</button>
+                    <button type="submit" class="btn btn-warning">@T["Save Changes"]</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    const updateButtons = document.querySelectorAll('.btn-update');
+    const updateModal = document.getElementById('updateAssetModal');
+    const updateForm = document.getElementById('updateAssetForm');
+    const updateAttributesContainer = document.getElementById('updateAttributesContainer');
+    const addAttrBtn = document.getElementById('updateAddAttributeBtn');
+
+    addAttrBtn.addEventListener('click', () => {
+        const row = document.createElement('div');
+        row.className = 'd-flex gap-2 align-items-center attribute-row';
+        row.innerHTML = `
+            <input type="text" class="form-control" placeholder="Attribute name" data-attr-name />
+            <input type="text" class="form-control" placeholder="Attribute value" data-attr-value />
+            <button type="button" class="btn btn-outline-danger btn-sm btn-remove-attribute">✖</button>
+        `;
+        updateAttributesContainer.appendChild(row);
+    });
+
+    updateAttributesContainer.addEventListener('click', e => {
+        if (e.target.classList.contains('btn-remove-attribute')) {
+            e.target.closest('.attribute-row').remove();
+        }
+    });
+
+    updateModal.addEventListener('show.bs.modal', async event => {
+        const button = event.relatedTarget;
+        const assetId = button.getAttribute('data-asset-id');
+
+        updateAttributesContainer.innerHTML = '';
+        updateForm.reset();
+
+        try {
+            const response = await fetch(`/Assets/Get?cn=${assetId}`);
+            const responseJson = await response.json();
+            const asset = responseJson.assetsModel;
+            
+            for (const [key, value] of Object.entries(asset)) {
+                const input = updateForm.querySelector(`[name="${key}"]`);
+                if (input) input.value = value;
+            }
+            console.log("responseJson:");
+            console.log(responseJson);
+            console.log("asset:");
+            console.log(asset);
+
+            // Handle nested description fields
+            if (asset.Description) {
+                for (const [descKey, descVal] of Object.entries(asset.Description)) {
+                    const field = updateForm.querySelector(`[name="Description.${descKey}"]`);
+                    if (field && typeof descVal === 'string') field.value = descVal;
+                }
+
+                // Attributes
+                if (asset.Description.Attributes) {
+                    for (const [attrName, attrValue] of Object.entries(asset.Description.Attributes)) {
+                        const row = document.createElement('div');
+                        row.className = 'd-flex gap-2 align-items-center attribute-row';
+                        row.innerHTML = `
+                            <input type="text" class="form-control" value="${attrName}" data-attr-name />
+                            <input type="text" class="form-control" value="${attrValue}" data-attr-value />
+                            <button type="button" class="btn btn-outline-danger btn-sm btn-remove-attribute">✖</button>
+                        `;
+                        updateAttributesContainer.appendChild(row);
+                    }
+                }
+
+                // Purchase info
+                if (asset.Description.Purchase) {
+                    for (const [pKey, pValue] of Object.entries(asset.Description.Purchase)) {
+                        const field = updateForm.querySelector(`[name="Description.Purchase.${pKey}"]`);
+                        if (field) field.value = pValue;
+                    }
+                }
+            }
+        } catch (err) {
+            console.error(err);
+            showToast('Error loading asset data', 'danger');
+        }
+    });
+
+    updateForm.addEventListener('submit', async e => {
+        e.preventDefault();
+
+        const formData = new FormData(updateForm);
+        const jsonData = {};
+        console.log("DEBUG@1");
+        console.log(jsonData);
+        for (const [key, value] of formData.entries()) {
+            console.log("DEBUG@1.1");
+            console.log(key);
+            console.log(value);
+            if (!value) continue;
+            const keys = key.split('.');
+            let target = jsonData;
+            for (let i = 0; i < keys.length - 1; i++) {
+                target[keys[i]] = target[keys[i]] || {};
+                target = target[keys[i]];
+            }
+            target[keys[keys.length - 1]] = value;
+        }
+        console.log("DEBUG@2");
+        console.log(jsonData);
+
+        const attributes = {};
+        document.querySelectorAll('#updateAttributesContainer .attribute-row').forEach(row => {
+            const name = row.querySelector('[data-attr-name]').value.trim();
+            const value = row.querySelector('[data-attr-value]').value.trim();
+            if (name) attributes[name] = value;
+        });
+
+        if (Object.keys(attributes).length > 0) {
+            jsonData.Description = jsonData.Description || {};
+            jsonData.Description.Attributes = attributes;
+        }
+
+        try {
+            const response = await fetch('/Assets/Update', {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+                body: JSON.stringify(jsonData)
+            });
+            const result = await response.json();
+
+            if (result.success) {
+                bootstrap.Modal.getInstance(updateModal).hide();
+                showToast('Asset updated successfully', 'success');
+
+                // Optionally refresh the row
+                const row = [...document.querySelectorAll('tr')]
+                    .find(r => r.querySelector(`[data-asset-id="${jsonData.Cn}"]`));
+                if (row) {
+                    row.children[0].textContent = jsonData.Owner || '';
+                    row.children[1].textContent = jsonData.Cn || '';
+                    row.children[2].textContent = jsonData.Name || '';
+                    row.children[3].textContent = jsonData.Location || '';
+                }
+            } else {
+                showToast(result.reason || 'Error updating asset', 'danger');
+            }
+        } catch (err) {
+            console.error(err);
+            showToast('Error contacting server', 'danger');
+        }
+    });
+});
+</script>

src/Views/Shared/_Layout.cshtml

@@ -7,8 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@ViewData["Title"] - Berufsschule_HAM</title>
     <script type="importmap"></script>
-    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
+    @* <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> *@
+    <link rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+      crossorigin="anonymous">
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
+    
     <link rel="stylesheet" href="~/Berufsschule_HAM.styles.css" asp-append-version="true" />
 </head>
 <body data-bs-theme="dark">
@@ -67,8 +71,12 @@
             &copy; 2025 - Berufsschule_HAM
         </div>
     </footer>
-    <script src="~/lib/jquery/dist/jquery.min.js"></script>
-    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    @* <script src="~/lib/jquery/dist/jquery.min.js"></script> *@
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
+        crossorigin="anonymous" defer></script>
+    @* <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> *@
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
+        crossorigin="anonymous" defer></script>
     <script src="~/js/site.js" asp-append-version="true"></script>
     @await RenderSectionAsync("Scripts", required: false)
 </body>