Merge pull request #198 from LD-Reborn/196-bug-toast-successfully-added-barcode-to-print-batch-not-localized

Fixed new assets not clickeable

src/Views/Home/Assets.cshtml

@@ -347,7 +347,10 @@
                             </td>
                         `;
 
+                        newRow.classList.add('asset-row');
                         newRow.classList.add('table-success');
+                        newRow.setAttribute("data-asset-id", result.assetId);
+                        registerRowDetailviewClick(newRow);
                         setTimeout(() => {
                             newRow.classList.toggle('table-success');
                         }, 500);
@@ -639,133 +642,134 @@ document.addEventListener('DOMContentLoaded', () => {
 <script>
 document.addEventListener('DOMContentLoaded', () => {
     const rows = document.querySelectorAll('.asset-row');
+    rows.forEach(row => registerRowDetailviewClick(row));
+});
+
+function registerRowDetailviewClick(row) {
     const viewModal = document.getElementById('viewAssetModal');
     const viewContent = document.getElementById('viewAssetContent');
+    row.addEventListener('click', async (e) => {
+        // Avoid clicks on buttons inside the row
+        if (e.target.closest('button')) return;
 
-    rows.forEach(row => {
-        row.addEventListener('click', async (e) => {
-            // Avoid clicks on buttons inside the row
-            if (e.target.closest('button')) return;
+        const assetId = row.getAttribute('data-asset-id');
+        viewContent.innerHTML = '<p class="text-center text-muted">@T["Loading..."]</p>';
 
-            const assetId = row.getAttribute('data-asset-id');
-            viewContent.innerHTML = '<p class="text-center text-muted">@T["Loading..."]</p>';
+        const modal = new bootstrap.Modal(viewModal);
+        modal.show();
 
-            const modal = new bootstrap.Modal(viewModal);
-            modal.show();
+        try {
+            const response = await fetch(`/Assets/Get?cn=${assetId}`);
+            const json = await response.json();
+            const asset = json.assetsModel;
 
-            try {
-                const response = await fetch(`/Assets/Get?cn=${assetId}`);
-                const json = await response.json();
-                const asset = json.assetsModel;
-
-                if (!asset) {
-                    viewContent.innerHTML = `<p class="text-danger text-center">@T["Asset not found."]</p>`;
-                    return;
-                }
-
-                const html = `
-                    <div class="row g-3">
-                        <h6 class="fw-bold">@T["Barcode"]</h6>
-                        <div class="col-md-6">
-                            <svg id="ean13" class="form-control" name="Barcode" />
-                        </div>
-                        <div class="col-md-6">
-                            <button id="downloadBtn" class="form-control my-2 btn btn-primary">@T["Download Barcode"]</button>
-                            <button id="printBtn" class="form-control my-2 btn btn-primary">@T["Add Barcode to print batch"]</button>
-                        </div>
-                    </div>
-                    <div class="row g-3">
-                        <div class="col-md-6">
-                            <label class="form-label">@T["Name"]</label>
-                            <input type="text" class="form-control" name="Name" value="${asset.Name || ''}" disabled />
-                        </div>
-                        <div class="col-md-6">
-                            <label class="form-label">@T["Location"]</label>
-                            <input type="text" class="form-control" name="Location" value="${asset.Location || ''}" disabled />
-                        </div>
-                        <div class="col-md-6">
-                            <label class="form-label">@T["Owner"]</label>
-                            <input type="text" class="form-control" name="Owner" value="${asset.Owner || ''}" disabled />
-                        </div>
-                        <div class="col-md-6">
-                            <label class="form-label">@T["Serial Number"]</label>
-                            <input type="text" class="form-control" name="SerialNumber" value="${asset.SerialNumber || ''}" disabled />
-                        </div>
-                    </div>
-                    <hr class="my-3" />
-                    <div class="row g-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" value="${asset.Description?.Type || ''}" disabled />
-                        </div>
-                        <div class="col-md-6">
-                            <label class="form-label">@T["Make"]</label>
-                            <input type="text" class="form-control" name="Description.Make" value="${asset.Description?.Make || ''}" disabled />
-                        </div>
-                        <div class="col-md-6">
-                            <label class="form-label">@T["Model"]</label>
-                            <input type="text" class="form-control" name="Description.Model" value="${asset.Description?.Model || ''}" disabled />
-                        </div>
-                    </div>
-                    ${asset.Description?.Attributes ? `
-                    <hr class="my-3" />
-                    <div class="row g-3">
-                        <h6 class="fw-bold">@T["Attributes"]</h6>
-                            ${Object.entries(asset.Description.Attributes)
-                                .map(([k,v]) => `
-                                <div class="d-flex gap-2 align-items-center attribute-row">
-                                    <input type="text" class="form-control w-50" placeholder="@T["Attribute name"]" data-attr-name disabled value="${k}" />:
-                                    <input type="text" class="form-control" placeholder="@T["Attribute value"]" data-attr-value disabled value="${v}" />
-                                </div>`)
-                                .join('')}
-                        </div>` : ''}
-                                
-                    ${asset.Description?.Purchase ? `
-                    <hr class="my-3" />
-                    <div class="row g-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" value="${asset.Description.Purchase.PurchaseDate || ''}" disabled />
-                        </div>
-                        <div class="col-md-6">
-                            <label class="form-label">@T["Purchase Value"]</label>
-                            <input type="text" class="form-control" name="Description.Purchase.PurchaseValue" value="${asset.Description.Purchase.PurchaseValue || ''}" disabled />
-                        </div>
-                        <div class="col-md-6">
-                            <label class="form-label">@T["Purchased At"]</label>
-                            <input type="text" class="form-control" name="Description.Purchase.PurchaseAt" value="${asset.Description.Purchase.PurchaseAt || ''}" disabled />
-                        </div>
-                        <div class="col-md-6">
-                            <label class="form-label">@T["Purchased By"]</label>
-                            <input type="text" class="form-control" name="Description.Purchase.PurchaseBy" value="${asset.Description.Purchase.PurchaseBy || ''}" disabled />
-                        </div>
-                    </div>` : ''}
-                </div>`;
-                viewContent.innerHTML = html;
-                JsBarcode("#ean13", idToEAN13(asset.Cn), {
-                    format: "EAN13",
-                    lineColor: "#000",
-                    width: 2,
-                    height: 80,
-                    displayValue: true
-                });
-                document.getElementById("downloadBtn").addEventListener("click", () => {
-                    downloadBarcode("ean13", idToEAN13(asset.Cn));                    
-                });
-                document.getElementById("printBtn").addEventListener("click", () => {
-                    addAssetIdToBatch(asset.Cn);
-                    showToast("@T["Successfully added barcode to print batch"]", "success");
-                    bootstrap.Modal.getInstance('#viewAssetModal').hide();
-                });
-            } catch (err) {
-                console.error(err);
-                viewContent.innerHTML = `<p class="text-danger text-center">@T["Error loading asset details"]</p>`;
+            if (!asset) {
+                viewContent.innerHTML = `<p class="text-danger text-center">@T["Asset not found."]</p>`;
+                return;
             }
-        });
+
+            const html = `
+                <div class="row g-3">
+                    <h6 class="fw-bold">@T["Barcode"]</h6>
+                    <div class="col-md-6">
+                        <svg id="ean13" class="form-control" name="Barcode" />
+                    </div>
+                    <div class="col-md-6">
+                        <button id="downloadBtn" class="form-control my-2 btn btn-primary">@T["Download Barcode"]</button>
+                        <button id="printBtn" class="form-control my-2 btn btn-primary">@T["Add Barcode to print batch"]</button>
+                    </div>
+                </div>
+                <div class="row g-3">
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Name"]</label>
+                        <input type="text" class="form-control" name="Name" value="${asset.Name || ''}" disabled />
+                    </div>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Location"]</label>
+                        <input type="text" class="form-control" name="Location" value="${asset.Location || ''}" disabled />
+                    </div>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Owner"]</label>
+                        <input type="text" class="form-control" name="Owner" value="${asset.Owner || ''}" disabled />
+                    </div>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Serial Number"]</label>
+                        <input type="text" class="form-control" name="SerialNumber" value="${asset.SerialNumber || ''}" disabled />
+                    </div>
+                </div>
+                <hr class="my-3" />
+                <div class="row g-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" value="${asset.Description?.Type || ''}" disabled />
+                    </div>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Make"]</label>
+                        <input type="text" class="form-control" name="Description.Make" value="${asset.Description?.Make || ''}" disabled />
+                    </div>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Model"]</label>
+                        <input type="text" class="form-control" name="Description.Model" value="${asset.Description?.Model || ''}" disabled />
+                    </div>
+                </div>
+                ${asset.Description?.Attributes ? `
+                <hr class="my-3" />
+                <div class="row g-3">
+                    <h6 class="fw-bold">@T["Attributes"]</h6>
+                        ${Object.entries(asset.Description.Attributes)
+                            .map(([k,v]) => `
+                            <div class="d-flex gap-2 align-items-center attribute-row">
+                                <input type="text" class="form-control w-50" placeholder="@T["Attribute name"]" data-attr-name disabled value="${k}" />:
+                                <input type="text" class="form-control" placeholder="@T["Attribute value"]" data-attr-value disabled value="${v}" />
+                            </div>`)
+                            .join('')}
+                    </div>` : ''}
+                            
+                ${asset.Description?.Purchase ? `
+                <hr class="my-3" />
+                <div class="row g-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" value="${asset.Description.Purchase.PurchaseDate || ''}" disabled />
+                    </div>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Purchase Value"]</label>
+                        <input type="text" class="form-control" name="Description.Purchase.PurchaseValue" value="${asset.Description.Purchase.PurchaseValue || ''}" disabled />
+                    </div>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Purchased At"]</label>
+                        <input type="text" class="form-control" name="Description.Purchase.PurchaseAt" value="${asset.Description.Purchase.PurchaseAt || ''}" disabled />
+                    </div>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Purchased By"]</label>
+                        <input type="text" class="form-control" name="Description.Purchase.PurchaseBy" value="${asset.Description.Purchase.PurchaseBy || ''}" disabled />
+                    </div>
+                </div>` : ''}
+            </div>`;
+            viewContent.innerHTML = html;
+            JsBarcode("#ean13", idToEAN13(asset.Cn), {
+                format: "EAN13",
+                lineColor: "#000",
+                width: 2,
+                height: 80,
+                displayValue: true
+            });
+            document.getElementById("downloadBtn").addEventListener("click", () => {
+                downloadBarcode("ean13", idToEAN13(asset.Cn));                    
+            });
+            document.getElementById("printBtn").addEventListener("click", () => {
+                addAssetIdToBatch(asset.Cn);
+                showToast("@T["Successfully added barcode to print batch"]", "success");
+                bootstrap.Modal.getInstance('#viewAssetModal').hide();
+            });
+        } catch (err) {
+            console.error(err);
+            viewContent.innerHTML = `<p class="text-danger text-center">@T["Error loading asset details"]</p>`;
+        }
     });
-});
+}
 
 document.addEventListener('DOMContentLoaded', () => {
     const createModal = document.getElementById('createAssetModal');