mirror of
https://github.com/LD-Reborn/Berufsschule_HAM.git
synced 2025-12-20 06:51:55 +00:00
Implemented frontend Assets update button
This commit is contained in:
@@ -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>
|
||||
@@ -343,4 +348,245 @@
|
||||
});
|
||||
});
|
||||
});
|
||||
</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>
|
||||
Reference in New Issue
Block a user