assetflow/static/js/editStorages.js

217 lines
8.2 KiB
JavaScript

// Javascript to enable link to tab
// This magic js codes enables anchor links to work with bootstrap tabs
// Taken from https://stackoverflow.com/a/9393768/11317151 (and edited, like a lot)
const FLAG_supports_new_data_loader = true;
// Also update on location change
window.addEventListener(
'hashchange',
function () {
var hash = location.hash.replace(/^#/, ''); // ^ means starting, meaning only match the first hash
if (hash) {
bootstrap.Tab.getOrCreateInstance(document.querySelector('#' + hash)).show();
}
},
false
);
var hash = location.hash.replace(/^#/, ''); // ^ means starting, meaning only match the first hash
if (hash) {
bootstrap.Tab.getOrCreateInstance(document.querySelector('#' + hash)).show();
}
// Change hash for page-reload
$('.nav-link').on('click', function (e) {
window.location.hash = e.target.id;
});
function primeCreateNew() {
// Clear the form
$('.form-control').val('');
const form = document.getElementById('storageUnitModalForm');
const form2 = document.getElementById('storageLocationModalForm');
document.getElementById('createNewLocationSelection').disabled = false;
document.getElementById('storageUnitModalLocationSelectText').innerText = 'Select or create a new location.';
document.getElementById('storageUnitModalLabel').innerText = 'Create new storage unit';
document.getElementById('storageLocationModalTitle').innerText = 'Create new storage location';
form.setAttribute('method', 'POST');
form2.setAttribute('method', 'POST');
return true;
}
function primeEdit() {
const form = document.getElementById('storageUnitModalForm');
const form2 = document.getElementById('storageLocationModalForm');
// Disable create new location
document.getElementById('createNewLocationSelection').disabled = true;
document.getElementById('storageUnitModalLocationSelectText').innerText = 'While editing you can only select already existing locations. Use the settings to create new ones.';
document.getElementById('storageUnitModalLabel').innerText = 'Edit a storage unit';
document.getElementById('storageLocationModalTitle').innerText = 'Edit a storage location';
document.getElementById('storageUnitModalLocationSelect').selectedIndex = 1;
handleSelector();
form.setAttribute('method', 'PATCH');
form2.setAttribute('method', 'PATCH');
return true;
}
function handleSelector() {
const selector = document.getElementById('storageUnitModalLocationSelect');
const value = selector.options[selector.selectedIndex].value;
if (value == 'META_CREATENEW') {
$('#storageUnitModalContactInfoCreator').removeClass('d-none');
$('.requireOnCreate').attr('required', true);
} else {
$('#storageUnitModalContactInfoCreator').addClass('d-none');
$('.requireOnCreate').attr('required', false);
}
}
function getDataForEdit(id) {
$.ajax({
type: 'get',
url: `/api/v1/storageUnits?id=${id}`,
success: function (result) {
// Get elements inside the editCategoryModal
const modal_unitName = document.getElementById('storageUnitModalName');
const modal_unitLocation = document.getElementById('storageUnitModalLocationSelect');
const modal_unitId = document.getElementById('storageUnitModalLocationSelectHidden');
// const modal_categoryid = document.getElementById('editCategoryModalId');
modal_unitName.value = result.name;
modal_unitId.value = result.id;
// Select the correct location from the select based on the value of the option
for (var i, j = 0; (i = modal_unitLocation.options[j]); j++) {
if (i.value == result.contactInfoId) {
console.log('Found it');
modal_unitLocation.selectedIndex = j;
break;
}
}
},
error: function (data) {
console.log('!!!! ERROR !!!!', data);
// Hide overlay with spinner
$('.loader-overlay').removeClass('active');
// Close the modal
$('.modal').modal('hide');
createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage unit does no longer exist.', 'text-bg-danger');
}
});
}
function getDataForEditLoc(id) {
$.ajax({
type: 'get',
url: `/api/v1/storageLocations?id=${id}`,
success: function (result) {
// Get elements inside the editCategoryModal
const modal_locationName = document.getElementById('storageLocationModalName');
const modal_locationUnitSel = document.getElementById('storageLocationModalUnit');
const modal_locationId = document.getElementById('storageLocationModalIdHidden');
// const modal_categoryid = document.getElementById('editCategoryModalId');
modal_locationName.value = result.name;
modal_locationId.value = result.id;
// Select the correct location from the select based on the value of the option
for (var i, j = 0; (i = modal_locationUnitSel.options[j]); j++) {
if (i.value == result.storageUnitId) {
console.log('Found it');
modal_locationUnitSel.selectedIndex = j;
break;
}
}
},
error: function (data) {
console.log('!!!! ERROR !!!!', data);
// Hide overlay with spinner
$('.loader-overlay').removeClass('active');
// Close the modal
$('.modal').modal('hide');
createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage unit does no longer exist.', 'text-bg-danger');
}
});
}
const itemList = $('#itemList');
const itemListUnit = $('#itemListUnit');
// itemList.empty();
itemListUnit.bootstrapTable({ url: '/api/v1/storageUnits?getAll=true', search: true, showRefresh: true, responseHandler: dataResponseHandlerUnit, sidePagination: 'server', serverSort: true, silentSort: false });
itemList.bootstrapTable({ url: '/api/v1/storageLocations?getAll=true', search: true, showRefresh: true, responseHandler: dataResponseHandler, sidePagination: 'server', serverSort: true, silentSort: false });
setTimeout(() => {
activateTooltips();
}, 1000);
function loadPageData() {
// itemList.empty();
itemList.bootstrapTable('refresh');
itemListUnit.bootstrapTable('refresh');
setTimeout(() => {
activateTooltips();
}, 1000);
}
function dataResponseHandler(json) {
// console.log(json)
totalNotFiltered = json.totalNotFiltered;
total = json.total;
json = json.items;
json.forEach((item) => {
colorStatus = '';
item.actions = `
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageLocationModal" onclick="primeEdit(); getDataForEditLoc('${item.id}')">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-danger" onclick="preFillDeleteModalNxt('${item.id}','storageLocations','Storage Location')" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
<i class="bi bi-trash"></i>
</button>`;
if (item.storageUnit == null) {
item.storageUnit = '<i>No storage unit assigned</i>';
} else {
item.storageUnit = item.storageUnit.name;
console.log(item.storageUnit);
}
// item.SKU = `<p data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="ID: ${item.id}">${item.SKU}</p>`
});
///// --------------------------------- /////
setTimeout(() => {
activateTooltips();
}, 200);
return { rows: json, total: total, totalNotFiltered: totalNotFiltered, totalRows: total };
}
function dataResponseHandlerUnit(json) {
// console.log(json)
totalNotFiltered = json.totalNotFiltered;
total = json.total;
json = json.items;
json.forEach((item) => {
colorStatus = '';
item.actions = `
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageUnitModal" onclick="primeEdit(); getDataForEdit('${item.id}')">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-danger" onclick="preFillDeleteModalNxt('${item.id}','storageUnits','Storage Unit')" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
<i class="bi bi-trash"></i>
</button>`;
if (item.contactInfo == null) {
item.address = '<i>No address assigned</i>';
} else {
item.address = `${item.contactInfo.street} ${item.contactInfo.houseNumber}, ${item.contactInfo.city} ${item.contactInfo.country}`;
}
// item.SKU = `<p data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="ID: ${item.id}">${item.SKU}</p>`
});
///// --------------------------------- /////
setTimeout(() => {
activateTooltips();
}, 200);
return { rows: json, total: total, totalNotFiltered: totalNotFiltered, totalRows: total };
}
handleSelector();