assetflow/static/js/editStorages.js

// 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', search: true, showRefresh: true, responseHandler: dataResponseHandlerUnit, sidePagination: 'server', serverSort: true, silentSort: false });
itemList.bootstrapTable({ url: '/api/v1/storageLocations', 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();