620 lines
19 KiB
TypeScript
620 lines
19 KiB
TypeScript
import { Modal } from 'bootstrap'; // ohne Pfadangabe (Modul auslesen aus node_modules) funktioniert nur mit JS-Bundler (esbuild, rollup & co.)
|
|
import Toast from './Toast';
|
|
import { querySelectorTyped, parents } from '../utils/helpers';
|
|
|
|
// 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
|
|
|
|
interface DOM {
|
|
module: HTMLElement;
|
|
table: HTMLTableElement;
|
|
tBody: HTMLTableSectionElement;
|
|
inputName: HTMLInputElement;
|
|
inputPrice: HTMLInputElement;
|
|
btnAdd: HTMLButtonElement;
|
|
templateRow: HTMLTemplateElement;
|
|
btnSave: HTMLButtonElement;
|
|
btnReset: HTMLButtonElement;
|
|
modalEdit: HTMLDivElement;
|
|
formEdit: HTMLFormElement;
|
|
inputEditName: HTMLInputElement;
|
|
inputEditPrice: HTMLInputElement;
|
|
inputEditId: HTMLInputElement;
|
|
inputEditPosition: HTMLInputElement;
|
|
btnUpdate: HTMLButtonElement;
|
|
modalDelete: HTMLDivElement;
|
|
productName: HTMLDivElement;
|
|
btnConfirmDelete: HTMLButtonElement;
|
|
}
|
|
|
|
interface Product {
|
|
_id?: string;
|
|
name: string;
|
|
price: number;
|
|
position?: number;
|
|
}
|
|
|
|
// Factory Function
|
|
const ProductManager = (el?: HTMLElement) => {
|
|
// === DOM & VARS =======
|
|
|
|
const BASE_URL = 'http://127.0.0.1:8000';
|
|
|
|
const module = el || querySelectorTyped('.product-manager');
|
|
|
|
if (!module) return;
|
|
|
|
const DOM: DOM = {
|
|
module,
|
|
table: querySelectorTyped<HTMLTableElement>('.table-products', module),
|
|
tBody: querySelectorTyped<HTMLTableSectionElement>('tbody', module),
|
|
inputName: querySelectorTyped<HTMLInputElement>('.input-product-name', module),
|
|
inputPrice: querySelectorTyped<HTMLInputElement>('.input-product-price', module),
|
|
btnAdd: querySelectorTyped<HTMLButtonElement>('.button-product-add', module),
|
|
templateRow: querySelectorTyped<HTMLTemplateElement>('.template-row', module),
|
|
|
|
// Nav Actions
|
|
btnSave: querySelectorTyped<HTMLButtonElement>('.button-products-save', module),
|
|
btnReset: querySelectorTyped<HTMLButtonElement>('.button-products-reset', module),
|
|
|
|
// Modal Edit
|
|
modalEdit: querySelectorTyped<HTMLDivElement>('.modal-edit', module),
|
|
formEdit: querySelectorTyped<HTMLFormElement>('.form-product-edit', module),
|
|
inputEditName: querySelectorTyped<HTMLInputElement>('.input-edit-name', module),
|
|
inputEditPrice: querySelectorTyped<HTMLInputElement>('.input-edit-price', module),
|
|
inputEditId: querySelectorTyped<HTMLInputElement>('.input-edit-id', module),
|
|
inputEditPosition: querySelectorTyped<HTMLInputElement>('.input-edit-position', module),
|
|
btnUpdate: querySelectorTyped<HTMLButtonElement>('.button-product-update', module),
|
|
|
|
// Modal Delete
|
|
modalDelete: querySelectorTyped<HTMLDivElement>('.modal-delete', module),
|
|
productName: querySelectorTyped<HTMLDivElement>('strong.product-name', module),
|
|
btnConfirmDelete: querySelectorTyped<HTMLButtonElement>('.button-confirm-delete', module),
|
|
};
|
|
|
|
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.btnReset.addEventListener('click', onClickReset);
|
|
DOM.btnSave.addEventListener('click', onClickSave);
|
|
|
|
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 = () => {
|
|
// 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 onClickReset = (e: PointerEvent) => {
|
|
const btnEl = e.currentTarget;
|
|
|
|
// async process
|
|
resetProducts().then((data) => {
|
|
if (data.success) {
|
|
Toast(data.msg, 'success').show();
|
|
loadProducts();
|
|
}
|
|
});
|
|
};
|
|
|
|
const onClickSave = (e: PointerEvent) => {
|
|
const btnEl = e.currentTarget as HTMLButtonElement;
|
|
const icon = btnEl.querySelector('i') as HTMLElement;
|
|
|
|
icon.classList.add('fa-jello');
|
|
|
|
// async process
|
|
saveProducts().then((data) => {
|
|
if (data.success) {
|
|
setTimeout(() => {
|
|
icon.classList.remove('fa-jello');
|
|
}, 500);
|
|
Toast(data.msg, 'success').show();
|
|
}
|
|
});
|
|
};
|
|
|
|
const onSubmitEdit = (e: SubmitEvent) => {
|
|
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
|
|
querySelectorTyped('i', DOM.btnUpdate).classList.add('fa-spin');
|
|
updateProduct(product).then((data) => {
|
|
console.log(data);
|
|
if (data.success) {
|
|
Toast(data.msg, 'success').show();
|
|
querySelectorTyped('i', DOM.btnUpdate).classList.remove('fa-spin');
|
|
loadProducts(); // All Produkte auslesen
|
|
resetFields();
|
|
bsModalEdit.hide();
|
|
} else {
|
|
Toast(data.msg, 'error').show();
|
|
}
|
|
});
|
|
};
|
|
|
|
const onClickAdd = () => {
|
|
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: PointerEvent) => {
|
|
const btnEl = e.currentTarget as HTMLButtonElement;
|
|
const currentRow = parents(btnEl, 'tr')[0];
|
|
const id: string = String(currentRow.dataset.id);
|
|
|
|
// async fetch
|
|
getProduct(id).then((data) => {
|
|
// console.log(data);
|
|
showModalEdit(data);
|
|
});
|
|
};
|
|
|
|
const onClickRemove = (e: PointerEvent) => {
|
|
const btnEl = e.currentTarget as HTMLButtonElement;
|
|
const currentRow = parents(btnEl, 'tr')[0];
|
|
const id = currentRow.dataset.id;
|
|
|
|
const productName = querySelectorTyped<HTMLTableCellElement>('.td-name', currentRow).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: PointerEvent) => {
|
|
const btnEl = e.currentTarget as HTMLButtonElement;
|
|
const id: string = String(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: PointerEvent) => {
|
|
const btnEl = e.currentTarget as HTMLButtonElement;
|
|
// 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: PointerEvent) => {
|
|
const btnEl = e.currentTarget as HTMLButtonElement;
|
|
// 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: MouseEvent) => {
|
|
const btnEl = e.currentTarget as HTMLButtonElement;
|
|
const currentRowEl = parents(btnEl, 'tr')[0];
|
|
currentRowEl.draggable = true;
|
|
};
|
|
|
|
const onMouseUpDrag = (e: MouseEvent) => {
|
|
const btnEl = e.currentTarget as HTMLButtonElement;
|
|
const currentRowEl = parents(btnEl, 'tr')[0];
|
|
currentRowEl.draggable = false;
|
|
};
|
|
|
|
const onDragStart = (e: DragEvent) => {
|
|
console.log('DragEvent: ', e);
|
|
const currentRowEl = e.currentTarget as HTMLTableRowElement; // tr <- aktuelle Zeie, die bewegt wird
|
|
const idx: number = [...currentRowEl.parentNode!.children].indexOf(currentRowEl);
|
|
|
|
e.dataTransfer?.setData('text/plain', String(idx));
|
|
// e.dataTransfer.setData('application/json', JSON.stringify({idx, name: sourceElement}));
|
|
console.log('tr index:', idx);
|
|
};
|
|
|
|
const onDragOver = (e: DragEvent) => {
|
|
e.preventDefault(); // WICHTIG! Sonst funktioniert drop EventHandler nicht.
|
|
};
|
|
|
|
const onDrop = (e: DragEvent) => {
|
|
const currentRowEl = e.currentTarget as HTMLTableRowElement; // tr <- Zielzeile, auf die gedroppt wird.
|
|
const targetIdx = [...currentRowEl.parentNode!.children].indexOf(currentRowEl);
|
|
const sourceIdx: number = parseInt(e.dataTransfer?.getData('text/plain') || '0');
|
|
// 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})`) as HTMLTableRowElement;
|
|
// 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 - PATCH
|
|
// reset products
|
|
const resetProducts = async () => {
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/api/products/reset`, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ reset: true }),
|
|
}); // HTTP Request URL
|
|
if (!response.ok) {
|
|
throw new Error('Fetch went wrong.');
|
|
}
|
|
const data = await response.json(); // HTTP-Response
|
|
|
|
return data;
|
|
} catch (error: unknown) {
|
|
if (error instanceof Error) {
|
|
Toast(error.message, 'error').show();
|
|
} else {
|
|
Toast('An unknown error occurred.', 'error').show();
|
|
}
|
|
|
|
console.error(error);
|
|
return error;
|
|
}
|
|
};
|
|
|
|
// HTTP - Methode - PATCH
|
|
// save products
|
|
const saveProducts = async () => {
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/api/products/save`, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ save: true }),
|
|
}); // HTTP Request URL
|
|
if (!response.ok) {
|
|
throw new Error('Fetch went wrong.');
|
|
}
|
|
const data = await response.json(); // HTTP-Response
|
|
|
|
return data;
|
|
} catch (error: unknown) {
|
|
if (error instanceof Error) {
|
|
Toast(error.message, 'error').show();
|
|
} else {
|
|
Toast('An unknown error occurred.', 'error').show();
|
|
}
|
|
|
|
console.error(error);
|
|
return error;
|
|
}
|
|
};
|
|
|
|
// HTTP - Methode - POST
|
|
// (C)RUD - create
|
|
// BRE(A)D - add - neues Produkt hinzufügen
|
|
const createProduct = async (product: 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: unknown) {
|
|
if (error instanceof Error) {
|
|
Toast(error.message, 'error').show();
|
|
} else {
|
|
Toast('An unknown error occurred.', '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: unknown) {
|
|
if (error instanceof Error) {
|
|
console.error(error.message);
|
|
} else {
|
|
console.error('An unknown error occurred.');
|
|
}
|
|
return error;
|
|
}
|
|
};
|
|
|
|
// HTTP - Methode - GET
|
|
// C(R)UD - Read
|
|
// B(R)EAD - Read - auslesen eines Produkts
|
|
const getProduct = async (id: string) => {
|
|
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: unknown) {
|
|
if (error instanceof Error) {
|
|
console.error(error.message);
|
|
} else {
|
|
console.error('An unknown error occurred.');
|
|
}
|
|
return error;
|
|
}
|
|
};
|
|
|
|
// HTTP - Methode - PUT
|
|
// CR(U)D - update
|
|
// BR(E)AD - edit - Produkt aktualisieren
|
|
const updateProduct = async (product: any) => {
|
|
// TODO: Typisierung verbessern
|
|
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: unknown) {
|
|
if (error instanceof Error) {
|
|
console.error(error.message);
|
|
} else {
|
|
console.error('An unknown error occurred.');
|
|
}
|
|
return error;
|
|
}
|
|
};
|
|
|
|
// HTTP - Methode - DELETE
|
|
// CRU(D) - delete
|
|
// BREA(D) - delete - Produkt löschen
|
|
const deleteProduct = async (id: string) => {
|
|
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: Product[]) => {
|
|
products.forEach((product: 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: Product[]) => {
|
|
data.forEach((product: Product) => {
|
|
addProduct(product);
|
|
});
|
|
disableNonFunctionalButtons();
|
|
});
|
|
};
|
|
|
|
const addProduct = (product: 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) as HTMLTableRowElement;
|
|
|
|
const tdNameEl = querySelectorTyped<HTMLTableCellElement>('.td-name', trEl);
|
|
const tdPriceEl = querySelectorTyped<HTMLTableCellElement>('.td-price', trEl);
|
|
const btnRemoveEl = querySelectorTyped<HTMLButtonElement>('.button-product-remove', trEl);
|
|
const btnMoveUpEl = querySelectorTyped<HTMLButtonElement>('.button-product-move-up', trEl);
|
|
const btnMoveDownEl = querySelectorTyped<HTMLButtonElement>('.button-product-move-down', trEl);
|
|
|
|
const btnDragEl = querySelectorTyped<HTMLButtonElement>('.button-drag', trEl);
|
|
const btnEditEl = querySelectorTyped<HTMLButtonElement>('.button-product-edit', trEl);
|
|
|
|
tdNameEl.textContent = String(name);
|
|
tdPriceEl.textContent = String(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 = String(position); // <tr data-position="..." >...</tr>
|
|
|
|
DOM.tBody.appendChild(trEl); // Im DOM hinzufügen
|
|
};
|
|
|
|
const showModalEdit = (product: Product) => {
|
|
const { name = '', price = 0, _id: id, position } = product;
|
|
|
|
DOM.inputEditName.value = name;
|
|
DOM.inputEditPrice.value = String(price);
|
|
|
|
DOM.inputEditId.value = String(id);
|
|
DOM.inputEditPosition.value = String(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 = querySelectorTyped<HTMLButtonElement>('.button-product-move-up', tr);
|
|
const btnMoveDown = querySelectorTyped<HTMLButtonElement>('.button-product-move-down', tr);
|
|
|
|
btnMoveUp.disabled = !tr.previousElementSibling;
|
|
btnMoveDown.disabled = !tr.nextElementSibling;
|
|
});
|
|
};
|
|
|
|
init();
|
|
|
|
return {
|
|
init,
|
|
initProducts,
|
|
resetFields,
|
|
};
|
|
};
|
|
|
|
// Freigabe für import
|
|
export default ProductManager;
|