489 lines
14 KiB
JavaScript
489 lines
14 KiB
JavaScript
import { Modal } from 'bootstrap'; // ohne Pfadangabe (Modul auslesen aus node_modules) funktioniert nur mit JS-Bundler (esbuild, rollup & co.)
|
|
import Toast from './Toast';
|
|
|
|
// import * as bootstrap from 'bootstrap';
|
|
// import 'bootstrap';
|
|
|
|
// import 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js'; // würde auch ohne Bundler funktionieren
|
|
// import '../../../node_modules/bootstrap/dist/js/bootstrap.esm.js'; // würde auch ohne Bundler funktionieren
|
|
|
|
// Factory Function
|
|
const ProductManager = (el = null) => {
|
|
// === DOM & VARS =======
|
|
|
|
const BASE_URL = 'http://127.0.0.1:8000';
|
|
|
|
const module = el || document.querySelector('.product-manager') || console.error('Product Manager not found');
|
|
|
|
if (!module) return;
|
|
|
|
const DOM = {
|
|
module,
|
|
table: module.querySelector('.table-products'),
|
|
tBody: module.querySelector('tbody'),
|
|
inputName: module.querySelector('.input-product-name'),
|
|
inputPrice: module.querySelector('.input-product-price'),
|
|
btnAdd: module.querySelector('.button-product-add'),
|
|
templateRow: module.querySelector('.template-row'),
|
|
|
|
// Modal Edit
|
|
modalEdit: module.querySelector('.modal-edit'),
|
|
formEdit: module.querySelector('.form-product-edit'),
|
|
inputEditName: module.querySelector('.input-edit-name'),
|
|
inputEditPrice: module.querySelector('.input-edit-price'),
|
|
inputEditId: module.querySelector('.input-edit-id'),
|
|
inputEditPosition: module.querySelector('.input-edit-position'),
|
|
btnUpdate: module.querySelector('.button-product-update'),
|
|
|
|
// Modal Delete
|
|
modalDelete: module.querySelector('.modal-delete'),
|
|
productName: module.querySelector('strong.product-name'),
|
|
btnConfirmDelete: module.querySelector('.button-confirm-delete'),
|
|
};
|
|
|
|
console.log(DOM);
|
|
const bsModalEdit = new Modal(DOM.modalEdit, {
|
|
backdrop: 'static', // true
|
|
keyboard: true,
|
|
});
|
|
|
|
const bsModalDelete = new Modal(DOM.modalDelete, {
|
|
backdrop: 'static', // true
|
|
keyboard: true,
|
|
});
|
|
|
|
// === INIT =============
|
|
const init = () => {
|
|
console.log('init');
|
|
// Funktionaufrufe zu beginn der Anwendung
|
|
initProducts();
|
|
|
|
// Event-Lauscher zu beginn der Anwendung
|
|
DOM.btnAdd.addEventListener('click', onClickAdd);
|
|
DOM.btnAdd.disabled = true;
|
|
DOM.btnConfirmDelete.addEventListener('click', onClickConfirmDelete);
|
|
DOM.formEdit.addEventListener('submit', onSubmitEdit);
|
|
window.addEventListener('keyup', onKeyUp);
|
|
};
|
|
|
|
// === EVENTHANDLER =====
|
|
const onKeyUp = (e) => {
|
|
// if (DOM.inputName.value === '' && DOM.inputPrice.value === '') {
|
|
// DOM.btnAdd.disabled = true;
|
|
// } else {
|
|
// DOM.btnAdd.disabled = false;
|
|
// }
|
|
DOM.btnAdd.disabled = (DOM.inputName.value === '' || DOM.inputPrice.value === ''); // prettier-ignore
|
|
};
|
|
|
|
const onSubmitEdit = (e) => {
|
|
e.preventDefault(); // Standardverhalten unterbinden (Formular nicht an action versenden)
|
|
|
|
// console.log(Object.entries(new FormData(DOM.formEdit)));
|
|
|
|
const product = {
|
|
name: DOM.inputEditName.value,
|
|
price: Number(DOM.inputEditPrice.value),
|
|
_id: DOM.inputEditId.value,
|
|
position: DOM.inputEditPosition.value,
|
|
};
|
|
|
|
// update async process
|
|
DOM.btnUpdate.querySelector('i').classList.add('fa-spin');
|
|
updateProduct(product).then((data) => {
|
|
console.log(data);
|
|
if (data.success) {
|
|
Toast(data.msg, 'success').show();
|
|
DOM.btnUpdate.querySelector('i').classList.remove('fa-spin');
|
|
loadProducts(); // All Produkte auslesen
|
|
resetFields();
|
|
bsModalEdit.hide();
|
|
} else {
|
|
Toast(data.msg, 'error').show();
|
|
}
|
|
});
|
|
};
|
|
|
|
const onClickAdd = (e) => {
|
|
console.log('click');
|
|
|
|
const product = {
|
|
name: DOM.inputName.value,
|
|
price: Number(DOM.inputPrice.value),
|
|
};
|
|
|
|
createProduct(product).then((data) => {
|
|
console.log(data);
|
|
if (data.success) {
|
|
console.log('add');
|
|
Toast(data.msg, 'success').show();
|
|
loadProducts();
|
|
resetFields();
|
|
}
|
|
});
|
|
|
|
// addProduct(product);
|
|
|
|
disableNonFunctionalButtons();
|
|
};
|
|
|
|
const onClickEdit = (e) => {
|
|
const btnEl = e.currentTarget;
|
|
const currentRow = parents(btnEl, 'tr')[0];
|
|
const id = currentRow.dataset.id;
|
|
|
|
// async fetch
|
|
getProduct(id).then((data) => {
|
|
// console.log(data);
|
|
showModalEdit(data);
|
|
});
|
|
};
|
|
|
|
const onClickRemove = (e) => {
|
|
const btnEl = e.currentTarget;
|
|
const currentRow = parents(btnEl, 'tr')[0];
|
|
const id = currentRow.dataset.id;
|
|
|
|
const productName = currentRow.querySelector('.td-name').textContent.trim();
|
|
|
|
DOM.btnConfirmDelete.dataset.id = id;
|
|
DOM.productName.textContent = productName;
|
|
|
|
// async fetch
|
|
// deleteProduct(id).then((data) => {
|
|
// if (data.success) {
|
|
// Toast(data.msg, 'success').show();
|
|
// console.log('delete: success', data);
|
|
// loadProducts();
|
|
// } else {
|
|
// Toast(data.msg, 'error').show();
|
|
// console.error(data);
|
|
// }
|
|
// });
|
|
};
|
|
|
|
const onClickConfirmDelete = (e) => {
|
|
const btnEl = e.currentTarget;
|
|
const id = btnEl.dataset.id;
|
|
|
|
// async fetch
|
|
deleteProduct(id).then((data) => {
|
|
if (data.success) {
|
|
Toast(data.msg, 'success').show();
|
|
bsModalDelete.hide();
|
|
loadProducts();
|
|
} else {
|
|
Toast(data.msg, 'error').show();
|
|
console.error(data);
|
|
}
|
|
});
|
|
};
|
|
|
|
const onClickMoveUp = (e) => {
|
|
const btnEl = e.currentTarget;
|
|
// const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button
|
|
const currentRowEl = parents(btnEl, 'tr')[0];
|
|
|
|
// ParentNode.insertBefore(referenceElement, targetElement)
|
|
// DOM.tBody.insertBefore(currentRowEl, currentRowEl.previousElementSibling);
|
|
|
|
// targetElement.before(referenceElement)
|
|
currentRowEl.previousElementSibling.before(currentRowEl);
|
|
|
|
console.log('move up');
|
|
disableNonFunctionalButtons();
|
|
};
|
|
|
|
const onClickMoveDown = (e) => {
|
|
const btnEl = e.currentTarget;
|
|
// const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button
|
|
const currentRowEl = parents(btnEl, 'tr')[0];
|
|
|
|
// ParentNode.insertBefore(referenceElement, targetElement)
|
|
// DOM.tBody.insertBefore(currentRowEl, currentRowEl.nextElementSibling.nextElementSibling);
|
|
|
|
// targetElement.after(referenceElement)
|
|
currentRowEl.nextElementSibling.after(currentRowEl);
|
|
|
|
console.log('move down');
|
|
disableNonFunctionalButtons();
|
|
};
|
|
|
|
// Drag 'n Drop EventHandler
|
|
const onMouseDownDrag = (e) => {
|
|
const btnEl = e.currentTarget;
|
|
const currentRowEl = parents(btnEl, 'tr')[0];
|
|
currentRowEl.draggable = true;
|
|
};
|
|
|
|
const onMouseUpDrag = (e) => {
|
|
const btnEl = e.currentTarget;
|
|
const currentRowEl = parents(btnEl, 'tr')[0];
|
|
currentRowEl.draggable = false;
|
|
};
|
|
|
|
const onDragStart = (e) => {
|
|
console.log('DragEvent: ', e);
|
|
const currentRowEl = e.currentTarget; // tr <- aktuelle Zeie, die bewegt wird
|
|
const idx = [...currentRowEl.parentNode.children].indexOf(currentRowEl);
|
|
|
|
e.dataTransfer.setData('text/plain', idx);
|
|
// e.dataTransfer.setData('application/json', JSON.stringify({idx, name: sourceElement}));
|
|
console.log('tr index:', idx);
|
|
};
|
|
|
|
const onDragOver = (e) => {
|
|
e.preventDefault(); // WICHTIG! Sonst funktioniert drop EventHandler nicht.
|
|
};
|
|
|
|
const onDrop = (e) => {
|
|
const currentRowEl = e.currentTarget; // tr <- Zielzeile, auf die gedroppt wird.
|
|
const targetIdx = [...currentRowEl.parentNode.children].indexOf(currentRowEl);
|
|
const sourceIdx = parseInt(e.dataTransfer.getData('text/plain'));
|
|
// const { sourceIdx } = JSON.parse(e.dataTransfer.getData('application/json'));
|
|
|
|
console.log({ targetIdx, sourceIdx });
|
|
|
|
// Guard wenn Element auf sich selbst losgelassen wurde, abbruch
|
|
if (sourceIdx === targetIdx) {
|
|
return;
|
|
}
|
|
|
|
const draggedEl = DOM.tBody.querySelector(`tr:nth-child(${sourceIdx + 1})`);
|
|
// const draggedEl = DOM.tBody.children[sourceIdx]
|
|
|
|
// Verschiebe das Element im DOM
|
|
if (sourceIdx > targetIdx) {
|
|
currentRowEl.before(draggedEl);
|
|
} else {
|
|
currentRowEl.after(draggedEl);
|
|
}
|
|
|
|
disableNonFunctionalButtons();
|
|
};
|
|
|
|
// === XHR/FETCH ========
|
|
|
|
// HTTP - Methode - POST
|
|
// (C)RUD - create
|
|
// BRE(A)D - add - neues Produkt hinzufügen
|
|
const createProduct = async (product) => {
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/api/products`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(product),
|
|
}); // HTTP Request URL
|
|
if (!response.ok) {
|
|
throw new Error('Fetch went wrong.');
|
|
}
|
|
const data = await response.json(); // HTTP-Response
|
|
|
|
return data;
|
|
} catch (error) {
|
|
Toast(error, 'error').show();
|
|
|
|
console.error(error);
|
|
return error;
|
|
}
|
|
};
|
|
|
|
// HTTP - Methode - GET
|
|
// C(R)UD - Read
|
|
// (B)READ - Browse - auslesen aller Produkte
|
|
const getProducts = async () => {
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/api/products`); // HTTP Request URL
|
|
if (!response.ok) {
|
|
throw new Error('Fetch went wrong.');
|
|
}
|
|
const data = await response.json(); // HTTP-Response
|
|
|
|
return data;
|
|
} catch (error) {
|
|
console.error(error);
|
|
return error;
|
|
}
|
|
};
|
|
|
|
// HTTP - Methode - GET
|
|
// C(R)UD - Read
|
|
// B(R)EAD - Read - auslesen eines Produkts
|
|
const getProduct = async (id) => {
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/api/products/${id}`); // HTTP Request URL
|
|
if (!response.ok) {
|
|
throw new Error('Fetch went wrong.');
|
|
}
|
|
const data = await response.json(); // HTTP-Response
|
|
|
|
return data;
|
|
} catch (error) {
|
|
console.error(error);
|
|
return error;
|
|
}
|
|
};
|
|
|
|
// HTTP - Methode - PUT
|
|
// CR(U)D - update
|
|
// BR(E)AD - edit - Produkt aktualisieren
|
|
const updateProduct = async (product) => {
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/api/products`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(product),
|
|
}); // HTTP Request URL
|
|
if (!response.ok) {
|
|
throw new Error('Fetch went wrong.');
|
|
}
|
|
const data = await response.json(); // HTTP-Response
|
|
|
|
return data;
|
|
} catch (error) {
|
|
console.error(error);
|
|
return error;
|
|
}
|
|
};
|
|
|
|
// HTTP - Methode - DELETE
|
|
// CRU(D) - delete
|
|
// BREA(D) - delete - Produkt löschen
|
|
const deleteProduct = async (id) => {
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/api/products/${id}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
}); // HTTP Request URL
|
|
if (!response.ok) {
|
|
throw new Error('Fetch went wrong.');
|
|
}
|
|
|
|
const data = await response.json();
|
|
return data;
|
|
} catch (error) {
|
|
console.error(error);
|
|
return error;
|
|
}
|
|
};
|
|
|
|
// === FUNCTIONS ========
|
|
|
|
const initProducts = () => {
|
|
getProducts().then((products) => {
|
|
products.forEach((product) => {
|
|
addProduct(product);
|
|
});
|
|
Toast('Init products').show();
|
|
disableNonFunctionalButtons();
|
|
});
|
|
|
|
// PRODUCTS.forEach((product) => {
|
|
// addProduct(product);
|
|
// });
|
|
//disableNonFunctionalButtons();
|
|
// PRODUCTS.forEach(addProduct);
|
|
};
|
|
|
|
const loadProducts = () => {
|
|
DOM.tBody.innerHTML = '';
|
|
getProducts().then((data) => {
|
|
data.forEach((product) => {
|
|
addProduct(product);
|
|
});
|
|
disableNonFunctionalButtons();
|
|
});
|
|
};
|
|
|
|
const addProduct = (product) => {
|
|
const { name, price, _id: id, position } = product;
|
|
|
|
// https://developer.mozilla.org/de/docs/Web/API/HTMLTemplateElement/content
|
|
const trEl = DOM.templateRow.content.firstElementChild.cloneNode(true);
|
|
|
|
const tdNameEl = trEl.querySelector('.td-name');
|
|
const tdPriceEl = trEl.querySelector('.td-price');
|
|
const btnRemoveEl = trEl.querySelector('.button-product-remove');
|
|
const btnMoveUpEl = trEl.querySelector('.button-product-move-up');
|
|
const btnMoveDownEl = trEl.querySelector('.button-product-move-down');
|
|
|
|
const btnDragEl = trEl.querySelector('.button-drag');
|
|
const btnEditEl = trEl.querySelector('.button-product-edit');
|
|
|
|
tdNameEl.textContent = name;
|
|
tdPriceEl.textContent = price;
|
|
|
|
btnEditEl.addEventListener('click', onClickEdit);
|
|
btnRemoveEl.addEventListener('click', onClickRemove);
|
|
btnMoveUpEl.addEventListener('click', onClickMoveUp);
|
|
btnMoveDownEl.addEventListener('click', onClickMoveDown);
|
|
|
|
// Drag 'n Drop Events
|
|
btnDragEl.addEventListener('mousedown', onMouseDownDrag);
|
|
btnDragEl.addEventListener('mouseup', onMouseUpDrag);
|
|
|
|
trEl.addEventListener('dragstart', onDragStart);
|
|
trEl.addEventListener('dragover', onDragOver);
|
|
trEl.addEventListener('drop', onDrop);
|
|
|
|
trEl.dataset.id = id; // <tr data-id="..." >...</tr>
|
|
trEl.dataset.position = position; // <tr data-position="..." >...</tr>
|
|
|
|
DOM.tBody.appendChild(trEl); // Im DOM hinzufügen
|
|
};
|
|
|
|
const showModalEdit = (product) => {
|
|
const { name = '', price = 0, _id: id, position } = product;
|
|
|
|
DOM.inputEditName.value = name;
|
|
DOM.inputEditPrice.value = price;
|
|
|
|
DOM.inputEditId.value = id;
|
|
DOM.inputEditPosition.value = position;
|
|
};
|
|
|
|
const resetFields = () => {
|
|
DOM.btnAdd.disabled = true;
|
|
DOM.inputPrice.value = '';
|
|
DOM.inputName.value = '';
|
|
|
|
DOM.formEdit.reset();
|
|
};
|
|
|
|
const disableNonFunctionalButtons = () => {
|
|
Array.from(DOM.tBody.querySelectorAll('tr')).forEach((tr) => {
|
|
const btnMoveUp = tr.querySelector('.button-product-move-up');
|
|
const btnMoveDown = tr.querySelector('.button-product-move-down');
|
|
|
|
btnMoveUp.disabled = !tr.previousElementSibling;
|
|
btnMoveDown.disabled = !tr.nextElementSibling;
|
|
});
|
|
};
|
|
|
|
// Helferfunktion aus jQuery (youmightnotjquery)
|
|
const parents = (el, selector) => {
|
|
const parents = [];
|
|
while ((el = el.parentNode) && el !== document) {
|
|
if (!selector || el.matches(selector)) parents.push(el);
|
|
}
|
|
return parents;
|
|
};
|
|
|
|
init();
|
|
|
|
return {
|
|
init,
|
|
initProducts,
|
|
resetFields,
|
|
};
|
|
};
|
|
|
|
// Freigabe für import
|
|
export default ProductManager;
|