Fixed assets create and update modal attributes not a table

This commit is contained in:
2025-11-24 18:19:07 +01:00
parent 72f0116cab
commit d662157885

View File

@@ -228,9 +228,17 @@
<div class="d-flex justify-content-between align-items-center mb-2"> <div class="d-flex justify-content-between align-items-center mb-2">
<h4 class="fw-bold mb-0">@T["Attributes"]</h4> <h4 class="fw-bold mb-0">@T["Attributes"]</h4>
</div> </div>
<div id="attributesContainer" class="d-flex flex-column gap-2"> <table class="w-100">
<!-- Dynamic attribute rows will appear here --> <thead>
</div> <tr>
<th class="visually-hidden">@T["Attribute name"]</th>
<th class="visually-hidden">@T["Attribute value"]</th>
<th class="visually-hidden">@T["Delete"]</th>
</tr>
</thead>
<tbody id="attributesContainer">
</tbody>
</table>
<button type="button" class="btn btn-sm btn-primary mt-3" id="addAttributeBtn"> <button type="button" class="btn btn-sm btn-primary mt-3" id="addAttributeBtn">
@T["Add Attribute"] @T["Add Attribute"]
</button> </button>
@@ -298,12 +306,19 @@ document.addEventListener('DOMContentLoaded', () => {
const addAttributeBtn = document.getElementById('addAttributeBtn'); const addAttributeBtn = document.getElementById('addAttributeBtn');
addAttributeBtn.addEventListener('click', () => { addAttributeBtn.addEventListener('click', () => {
const row = document.createElement('div'); const row = document.createElement('tr');
row.className = 'd-flex gap-2 align-items-center attribute-row'; row.className = 'attribute-row';
row.classList.add("mb-3");
row.innerHTML = ` row.innerHTML = `
<td class="col-md-5 p-1">
<input type="text" class="form-control" placeholder="@T["Attribute name"]" data-attr-name /> <input type="text" class="form-control" placeholder="@T["Attribute name"]" data-attr-name />
</td>
<td class="col-md-5 p-1">
<input type="text" class="form-control" placeholder="@T["Attribute value"]" data-attr-value /> <input type="text" class="form-control" placeholder="@T["Attribute value"]" data-attr-value />
</td>
<td class="col-md-2 p-1">
<button type="button" class="btn btn-danger btn-sm btn-remove-attribute">@T["Remove"]</button> <button type="button" class="btn btn-danger btn-sm btn-remove-attribute">@T["Remove"]</button>
</td>
`; `;
attributesContainer.appendChild(row); attributesContainer.appendChild(row);
}); });
@@ -463,7 +478,17 @@ document.addEventListener('DOMContentLoaded', () => {
<div class="d-flex justify-content-between align-items-center mb-2"> <div class="d-flex justify-content-between align-items-center mb-2">
<h4 class="fw-bold mb-0">@T["Attributes"]</h4> <h4 class="fw-bold mb-0">@T["Attributes"]</h4>
</div> </div>
<div id="updateAttributesContainer" class="d-flex flex-column gap-2"></div> <table class="w-100">
<thead>
<tr>
<th class="visually-hidden">@T["Attribute name"]</th>
<th class="visually-hidden">@T["Attribute value"]</th>
<th class="visually-hidden">@T["Delete"]</th>
</tr>
</thead>
<tbody id="updateAttributesContainer">
</tbody>
</table>
<button type="button" class="btn btn-sm btn-primary mt-3" id="updateAddAttributeBtn"> <button type="button" class="btn btn-sm btn-primary mt-3" id="updateAddAttributeBtn">
@T["Add Attribute"] @T["Add Attribute"]
</button> </button>
@@ -510,12 +535,18 @@ document.addEventListener('DOMContentLoaded', () => {
let assetId = null; let assetId = null;
addAttrBtn.addEventListener('click', () => { addAttrBtn.addEventListener('click', () => {
const row = document.createElement('div'); const row = document.createElement('tr');
row.className = 'd-flex gap-2 align-items-center attribute-row'; row.className = 'attribute-row mb-3';
row.innerHTML = ` row.innerHTML = `
<input type="text" class="form-control" placeholder="@T["Attribute name"]" aria-label="@T["Attribute name"]" data-attr-name /> <td class="col-md-5 p-1">
<input type="text" class="form-control" placeholder="@T["Attribute value"]" aria-label="@T["Attribute value"]" data-attr-value /> <input type="text" class="form-control" placeholder="@T["Attribute name"]" data-attr-name />
</td>
<td class="col-md-5 p-1">
<input type="text" class="form-control" placeholder="@T["Attribute value"]" data-attr-value />
</td>
<td class="col-md-2 p-1">
<button type="button" class="btn btn-danger btn-sm btn-remove-attribute">@T["Remove"]</button> <button type="button" class="btn btn-danger btn-sm btn-remove-attribute">@T["Remove"]</button>
</td>
`; `;
updateAttributesContainer.appendChild(row); updateAttributesContainer.appendChild(row);
}); });
@@ -559,12 +590,18 @@ document.addEventListener('DOMContentLoaded', () => {
// Attributes // Attributes
if (asset.Description.Attributes) { if (asset.Description.Attributes) {
for (const [attrName, attrValue] of Object.entries(asset.Description.Attributes)) { for (const [attrName, attrValue] of Object.entries(asset.Description.Attributes)) {
const row = document.createElement('div'); const row = document.createElement('tr');
row.className = 'd-flex gap-2 align-items-center attribute-row'; row.className = 'attribute-row mb-3';
row.innerHTML = ` row.innerHTML = `
<input type="text" class="form-control" value="${attrName}" aria-label="@T["Attribute name"]" data-attr-name /> <td class="col-md-5 p-1">
<input type="text" class="form-control" value="${attrValue}" aria-label="@T["Attribute value"]" data-attr-value /> <input type="text" class="form-control" value="${attrName}" placeholder="@T["Attribute name"]" data-attr-name />
</td>
<td class="col-md-5 p-1">
<input type="text" class="form-control" value="${attrValue}" placeholder="@T["Attribute value"]" data-attr-value />
</td>
<td class="col-md-2 p-1">
<button type="button" class="btn btn-danger btn-sm btn-remove-attribute">@T["Remove"]</button> <button type="button" class="btn btn-danger btn-sm btn-remove-attribute">@T["Remove"]</button>
</td>
`; `;
updateAttributesContainer.appendChild(row); updateAttributesContainer.appendChild(row);
} }
@@ -876,12 +913,18 @@ document.addEventListener('DOMContentLoaded', () => {
if (anyEquals) { if (anyEquals) {
anyEqualsElement.value = attributeValue; anyEqualsElement.value = attributeValue;
} else { } else {
const row = document.createElement('div'); const row = document.createElement('tr');
row.className = 'd-flex gap-2 align-items-center attribute-row'; row.className = 'attribute-row mb-3';
row.innerHTML = ` row.innerHTML = `
<td class="col-md-5 p-1">
<input type="text" class="form-control" placeholder="@T["Attribute name"]" data-attr-name value="${attributeKey}" /> <input type="text" class="form-control" placeholder="@T["Attribute name"]" data-attr-name value="${attributeKey}" />
</td>
<td class="col-md-5 p-1">
<input type="text" class="form-control" placeholder="@T["Attribute value"]" data-attr-value value="${attributeValue}" /> <input type="text" class="form-control" placeholder="@T["Attribute value"]" data-attr-value value="${attributeValue}" />
</td>
<td class="col-md-2 p-1">
<button type="button" class="btn btn-danger btn-sm btn-remove-attribute">@T["Remove"]</button> <button type="button" class="btn btn-danger btn-sm btn-remove-attribute">@T["Remove"]</button>
</td>
`; `;
attributesContainer.appendChild(row); attributesContainer.appendChild(row);
} }