webseite-ts-claude/frontend/dev/scripts/modules/ProductManager.ts

@@ -0,0 +1,616 @@
+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: MouseEvent): 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;