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