617 lines
19 KiB
TypeScript
617 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 type { ApiResponse, Product, ProductDraft } from '../types';
|
|
|
|
// 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
|
|
|
|
export interface ProductManagerApi {
|
|
init: () => void;
|
|
initProducts: () => void;
|
|
resetFields: () => void;
|
|
}
|
|
|
|
// Factory Function
|
|
const ProductManager = (el: HTMLElement | null = null): ProductManagerApi | null => {
|
|
// === DOM & VARS =======
|
|
|
|
const BASE_URL = 'http://127.0.0.1:8000';
|
|
|
|
const module = el ?? document.querySelector<HTMLElement>('.product-manager');
|
|
|
|
if (!module) {
|
|
console.error('Product Manager not found');
|
|
return null;
|
|
}
|
|
|
|
/** querySelector mit Typ-Angabe: wirft einen Fehler, wenn das Element fehlt. */
|
|
const query = <T extends HTMLElement>(root: ParentNode, selector: string): T => {
|
|
const found = root.querySelector<T>(selector);
|
|
if (!found) throw new Error(`ProductManager: Element "${selector}" nicht gefunden.`);
|
|
return found;
|
|
};
|
|
|
|
const DOM = {
|
|
module,
|
|
table: query<HTMLTableElement>(module, '.table-products'),
|
|
tBody: query<HTMLTableSectionElement>(module, 'tbody'),
|
|
inputName: query<HTMLInputElement>(module, '.input-product-name'),
|
|
inputPrice: query<HTMLInputElement>(module, '.input-product-price'),
|
|
btnAdd: query<HTMLButtonElement>(module, '.button-product-add'),
|
|
templateRow: query<HTMLTemplateElement>(module, '.template-row'),
|
|
|
|
// Nav Actions
|
|
btnSave: query<HTMLButtonElement>(module, '.button-products-save'),
|
|
btnReset: query<HTMLButtonElement>(module, '.button-products-reset'),
|
|
|
|
// Modal Edit
|
|
modalEdit: query<HTMLElement>(module, '.modal-edit'),
|
|
formEdit: query<HTMLFormElement>(module, '.form-product-edit'),
|
|
inputEditName: query<HTMLInputElement>(module, '.input-edit-name'),
|
|
inputEditPrice: query<HTMLInputElement>(module, '.input-edit-price'),
|
|
inputEditId: query<HTMLInputElement>(module, '.input-edit-id'),
|
|
inputEditPosition: query<HTMLInputElement>(module, '.input-edit-position'),
|
|
btnUpdate: query<HTMLButtonElement>(module, '.button-product-update'),
|
|
|
|
// Modal Delete
|
|
modalDelete: query<HTMLElement>(module, '.modal-delete'),
|
|
productName: query<HTMLElement>(module, 'strong.product-name'),
|
|
btnConfirmDelete: query<HTMLButtonElement>(module, '.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 = (): void => {
|
|
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 = (): void => {
|
|
// 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 = (): void => {
|
|
// async process
|
|
resetProducts().then((data) => {
|
|
if (data.success) {
|
|
Toast(data.msg, 'success').show();
|
|
loadProducts();
|
|
}
|
|
});
|
|
};
|
|
|
|
const onClickSave = (e: PointerEvent): void => {
|
|
const btnEl = e.currentTarget as HTMLButtonElement;
|
|
const icon = query<HTMLElement>(btnEl, 'i');
|
|
|
|
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): void => {
|
|
e.preventDefault(); // Standardverhalten unterbinden (Formular nicht an action versenden)
|
|
|
|
// console.log(Object.entries(new FormData(DOM.formEdit)));
|
|
|
|
const product: Product = {
|
|
name: DOM.inputEditName.value,
|
|
price: Number(DOM.inputEditPrice.value),
|
|
_id: DOM.inputEditId.value,
|
|
position: Number(DOM.inputEditPosition.value),
|
|
};
|
|
|
|
// update async process
|
|
const icon = query<HTMLElement>(DOM.btnUpdate, 'i');
|
|
icon.classList.add('fa-spin');
|
|
updateProduct(product).then((data) => {
|
|
console.log(data);
|
|
if (data.success) {
|
|
Toast(data.msg, 'success').show();
|
|
icon.classList.remove('fa-spin');
|
|
loadProducts(); // All Produkte auslesen
|
|
resetFields();
|
|
bsModalEdit.hide();
|
|
} else {
|
|
Toast(data.msg, 'error').show();
|
|
}
|
|
});
|
|
};
|
|
|
|
const onClickAdd = (e: MouseEvent): void => {
|
|
console.log('click');
|
|
|
|
const product: ProductDraft = {
|
|
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: MouseEvent): void => {
|
|
const btnEl = e.currentTarget as HTMLButtonElement;
|
|
const currentRow = parents(btnEl, 'tr')[0] as HTMLTableRowElement;
|
|
const id = currentRow.dataset.id ?? '';
|
|
|
|
// async fetch
|
|
getProduct(id).then((product) => {
|
|
// console.log(product);
|
|
if (product) showModalEdit(product);
|
|
});
|
|
};
|
|
|
|
const onClickRemove = (e: MouseEvent): void => {
|
|
const btnEl = e.currentTarget as HTMLButtonElement;
|
|
const currentRow = parents(btnEl, 'tr')[0] as HTMLTableRowElement;
|
|
const id = currentRow.dataset.id ?? '';
|
|
|
|
const productName = query<HTMLElement>(currentRow, '.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: MouseEvent): void => {
|
|
const btnEl = e.currentTarget as HTMLButtonElement;
|
|
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: MouseEvent): void => {
|
|
const btnEl = e.currentTarget as HTMLButtonElement;
|
|
// const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button
|
|
const currentRowEl = parents(btnEl, 'tr')[0] as HTMLTableRowElement;
|
|
|
|
// 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: MouseEvent): void => {
|
|
const btnEl = e.currentTarget as HTMLButtonElement;
|
|
// const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button
|
|
const currentRowEl = parents(btnEl, 'tr')[0] as HTMLTableRowElement;
|
|
|
|
// 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): void => {
|
|
const btnEl = e.currentTarget as HTMLButtonElement;
|
|
const currentRowEl = parents(btnEl, 'tr')[0] as HTMLTableRowElement;
|
|
currentRowEl.draggable = true;
|
|
};
|
|
|
|
const onMouseUpDrag = (e: MouseEvent): void => {
|
|
const btnEl = e.currentTarget as HTMLButtonElement;
|
|
const currentRowEl = parents(btnEl, 'tr')[0] as HTMLTableRowElement;
|
|
currentRowEl.draggable = false;
|
|
};
|
|
|
|
const onDragStart = (e: DragEvent): void => {
|
|
console.log('DragEvent: ', e);
|
|
const currentRowEl = e.currentTarget as HTMLTableRowElement; // tr <- aktuelle Zeie, die bewegt wird
|
|
const idx = indexOfRow(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): void => {
|
|
e.preventDefault(); // WICHTIG! Sonst funktioniert drop EventHandler nicht.
|
|
};
|
|
|
|
const onDrop = (e: DragEvent): void => {
|
|
const currentRowEl = e.currentTarget as HTMLTableRowElement; // tr <- Zielzeile, auf die gedroppt wird.
|
|
const targetIdx = indexOfRow(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 (Number.isNaN(sourceIdx) || sourceIdx === targetIdx) {
|
|
return;
|
|
}
|
|
|
|
const draggedEl = DOM.tBody.querySelector<HTMLTableRowElement>(`tr:nth-child(${sourceIdx + 1})`);
|
|
// const draggedEl = DOM.tBody.children[sourceIdx]
|
|
|
|
if (!draggedEl) return;
|
|
|
|
// Verschiebe das Element im DOM
|
|
if (sourceIdx > targetIdx) {
|
|
currentRowEl.before(draggedEl);
|
|
} else {
|
|
currentRowEl.after(draggedEl);
|
|
}
|
|
|
|
disableNonFunctionalButtons();
|
|
};
|
|
|
|
// === XHR/FETCH ========
|
|
|
|
/** Fehler eines fetch-Aufrufs in eine ApiResponse umwandeln. */
|
|
const toErrorResponse = <TData = unknown>(error: unknown): ApiResponse<TData> => ({
|
|
msg: error instanceof Error ? error.message : String(error),
|
|
status: 0,
|
|
success: false,
|
|
});
|
|
|
|
// HTTP - Methode - PATCH
|
|
// reset products
|
|
const resetProducts = async (): Promise<ApiResponse> => {
|
|
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: ApiResponse = await response.json(); // HTTP-Response
|
|
|
|
return data;
|
|
} catch (error) {
|
|
const result = toErrorResponse(error);
|
|
Toast(result.msg, 'error').show();
|
|
|
|
console.error(error);
|
|
return result;
|
|
}
|
|
};
|
|
|
|
// HTTP - Methode - PATCH
|
|
// save products
|
|
const saveProducts = async (): Promise<ApiResponse> => {
|
|
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: ApiResponse = await response.json(); // HTTP-Response
|
|
|
|
return data;
|
|
} catch (error) {
|
|
const result = toErrorResponse(error);
|
|
Toast(result.msg, 'error').show();
|
|
|
|
console.error(error);
|
|
return result;
|
|
}
|
|
};
|
|
|
|
// HTTP - Methode - POST
|
|
// (C)RUD - create
|
|
// BRE(A)D - add - neues Produkt hinzufügen
|
|
const createProduct = async (product: ProductDraft): Promise<ApiResponse<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: ApiResponse<Product> = await response.json(); // HTTP-Response
|
|
|
|
return data;
|
|
} catch (error) {
|
|
const result = toErrorResponse<Product>(error);
|
|
Toast(result.msg, 'error').show();
|
|
|
|
console.error(error);
|
|
return result;
|
|
}
|
|
};
|
|
|
|
// HTTP - Methode - GET
|
|
// C(R)UD - Read
|
|
// (B)READ - Browse - auslesen aller Produkte
|
|
const getProducts = async (): Promise<Product[]> => {
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/api/products`); // HTTP Request URL
|
|
if (!response.ok) {
|
|
throw new Error('Fetch went wrong.');
|
|
}
|
|
const data: Product[] = await response.json(); // HTTP-Response
|
|
|
|
return data;
|
|
} catch (error) {
|
|
console.error(error);
|
|
return [];
|
|
}
|
|
};
|
|
|
|
// HTTP - Methode - GET
|
|
// C(R)UD - Read
|
|
// B(R)EAD - Read - auslesen eines Produkts
|
|
const getProduct = async (id: string): Promise<Product | null> => {
|
|
try {
|
|
const response = await fetch(`${BASE_URL}/api/products/${id}`); // HTTP Request URL
|
|
if (!response.ok) {
|
|
throw new Error('Fetch went wrong.');
|
|
}
|
|
const data: Product = await response.json(); // HTTP-Response
|
|
|
|
return data;
|
|
} catch (error) {
|
|
console.error(error);
|
|
return null;
|
|
}
|
|
};
|
|
|
|
// HTTP - Methode - PUT
|
|
// CR(U)D - update
|
|
// BR(E)AD - edit - Produkt aktualisieren
|
|
const updateProduct = async (product: Product): Promise<ApiResponse<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: ApiResponse<Product> = await response.json(); // HTTP-Response
|
|
|
|
return data;
|
|
} catch (error) {
|
|
console.error(error);
|
|
return toErrorResponse(error);
|
|
}
|
|
};
|
|
|
|
// HTTP - Methode - DELETE
|
|
// CRU(D) - delete
|
|
// BREA(D) - delete - Produkt löschen
|
|
const deleteProduct = async (id: string): Promise<ApiResponse<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: ApiResponse<string> = await response.json();
|
|
return data;
|
|
} catch (error) {
|
|
console.error(error);
|
|
return toErrorResponse(error);
|
|
}
|
|
};
|
|
|
|
// === FUNCTIONS ========
|
|
|
|
const initProducts = (): void => {
|
|
getProducts().then((products) => {
|
|
products.forEach((product) => {
|
|
addProduct(product);
|
|
});
|
|
Toast('Init products').show();
|
|
disableNonFunctionalButtons();
|
|
});
|
|
|
|
// PRODUCTS.forEach((product) => {
|
|
// addProduct(product);
|
|
// });
|
|
//disableNonFunctionalButtons();
|
|
// PRODUCTS.forEach(addProduct);
|
|
};
|
|
|
|
const loadProducts = (): void => {
|
|
DOM.tBody.innerHTML = '';
|
|
getProducts().then((data) => {
|
|
data.forEach((product) => {
|
|
addProduct(product);
|
|
});
|
|
disableNonFunctionalButtons();
|
|
});
|
|
};
|
|
|
|
const addProduct = (product: Product): void => {
|
|
const { name, price, _id: id, position } = product;
|
|
|
|
// https://developer.mozilla.org/de/docs/Web/API/HTMLTemplateElement/content
|
|
const templateEl = DOM.templateRow.content.firstElementChild;
|
|
if (!templateEl) throw new Error('ProductManager: <template class="template-row"> ist leer.');
|
|
|
|
const trEl = templateEl.cloneNode(true) as HTMLTableRowElement;
|
|
|
|
const tdNameEl = query<HTMLTableCellElement>(trEl, '.td-name');
|
|
const tdPriceEl = query<HTMLTableCellElement>(trEl, '.td-price');
|
|
const btnRemoveEl = query<HTMLButtonElement>(trEl, '.button-product-remove');
|
|
const btnMoveUpEl = query<HTMLButtonElement>(trEl, '.button-product-move-up');
|
|
const btnMoveDownEl = query<HTMLButtonElement>(trEl, '.button-product-move-down');
|
|
|
|
const btnDragEl = query<HTMLButtonElement>(trEl, '.button-drag');
|
|
const btnEditEl = query<HTMLButtonElement>(trEl, '.button-product-edit');
|
|
|
|
tdNameEl.textContent = 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): void => {
|
|
const { name = '', price = 0, _id: id, position } = product;
|
|
|
|
DOM.inputEditName.value = name;
|
|
DOM.inputEditPrice.value = String(price);
|
|
|
|
DOM.inputEditId.value = id;
|
|
DOM.inputEditPosition.value = String(position);
|
|
};
|
|
|
|
const resetFields = (): void => {
|
|
DOM.btnAdd.disabled = true;
|
|
DOM.inputPrice.value = '';
|
|
DOM.inputName.value = '';
|
|
|
|
DOM.formEdit.reset();
|
|
};
|
|
|
|
const disableNonFunctionalButtons = (): void => {
|
|
Array.from(DOM.tBody.querySelectorAll('tr')).forEach((tr) => {
|
|
const btnMoveUp = query<HTMLButtonElement>(tr, '.button-product-move-up');
|
|
const btnMoveDown = query<HTMLButtonElement>(tr, '.button-product-move-down');
|
|
|
|
btnMoveUp.disabled = !tr.previousElementSibling;
|
|
btnMoveDown.disabled = !tr.nextElementSibling;
|
|
});
|
|
};
|
|
|
|
/** Position einer Zeile innerhalb ihres Elternelements. */
|
|
const indexOfRow = (rowEl: HTMLTableRowElement): number => {
|
|
const siblings = rowEl.parentElement ? Array.from(rowEl.parentElement.children) : [];
|
|
return siblings.indexOf(rowEl);
|
|
};
|
|
|
|
// Helferfunktion aus jQuery (youmightnotjquery)
|
|
const parents = (el: Element, selector?: string): Element[] => {
|
|
const result: Element[] = [];
|
|
let current: Node | null = el.parentNode;
|
|
|
|
while (current && current !== document) {
|
|
if (current instanceof Element && (!selector || current.matches(selector))) {
|
|
result.push(current);
|
|
}
|
|
current = current.parentNode;
|
|
}
|
|
return result;
|
|
};
|
|
|
|
init();
|
|
|
|
return {
|
|
init,
|
|
initProducts,
|
|
resetFields,
|
|
};
|
|
};
|
|
|
|
// Freigabe für import
|
|
export default ProductManager;
|