From c78b5315bbdca89d6ce237123cbc156b241619fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?=
 <mateusz.gruszczynski@firma.interia.pl>
Date: Sat, 16 Aug 2025 13:14:45 +0200
Subject: [PATCH] poprawki

---
 static/js/mass_add.js | 70 +++++++++++++++++++++++++++----------------
 1 file changed, 44 insertions(+), 26 deletions(-)

diff --git a/static/js/mass_add.js b/static/js/mass_add.js
index 69c7769..8f19744 100644
--- a/static/js/mass_add.js
+++ b/static/js/mass_add.js
@@ -3,8 +3,8 @@ document.addEventListener('DOMContentLoaded', function () {
   const productList = document.getElementById('mass-add-list');
   const sortBar = document.getElementById('sort-bar');
   const productCountDisplay = document.getElementById('product-count');
+  const modalBody = modal?.querySelector('.modal-body');
 
-  // Normalizacja nazw
   function normalize(str) {
     return str ? str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase() : '';
   }
@@ -52,21 +52,47 @@ document.addEventListener('DOMContentLoaded', function () {
   async function fetchProducts(reset = false) {
     if (loading || reachedEnd) return;
     loading = true;
+
+    if (!reset) {
+      const loadingLi = document.createElement('li');
+      loadingLi.className = 'list-group-item bg-dark text-light loading';
+      loadingLi.textContent = 'Ładowanie...';
+      productList.appendChild(loadingLi);
+    }
+
     try {
-      productList.innerHTML = '<li class="list-group-item bg-dark text-light">Ładowanie...</li>';
       const res = await fetch(`/all_products?sort=${sortMode}&limit=${limit}&offset=${offset}`);
       const data = await res.json();
       const products = data.products || data.allproducts || [];
+
       if (products.length < limit) reachedEnd = true;
       allProducts = reset ? products : allProducts.concat(products);
-      renderProducts(products, reset);
+
+      const loadingEl = productList.querySelector('.loading');
+      if (loadingEl) loadingEl.remove();
+
+      if (reset && products.length === 0) {
+        const emptyLi = document.createElement('li');
+        emptyLi.className = 'list-group-item text-muted bg-dark';
+        emptyLi.textContent = 'Brak produktów do wyświetlenia.';
+        productList.appendChild(emptyLi);
+      } else {
+        renderProducts(products);
+      }
+
       offset += limit;
       if (productCountDisplay) {
         productCountDisplay.textContent = `Wyświetlono ${allProducts.length} produktów.`;
       }
     } catch (err) {
-      productList.innerHTML = '<li class="list-group-item text-danger bg-dark">Błąd ładowania danych</li>';
+      const loadingEl = productList.querySelector('.loading');
+      if (loadingEl) loadingEl.remove();
+      const errorLi = document.createElement('li');
+      errorLi.className = 'list-group-item text-danger bg-dark';
+      errorLi.textContent = 'Błąd ładowania danych';
+      productList.appendChild(errorLi);
     }
+
     loading = false;
   }
 
@@ -80,8 +106,7 @@ document.addEventListener('DOMContentLoaded', function () {
     return set;
   }
 
-  function renderProducts(products, reset) {
-    if (reset) productList.innerHTML = '';
+  function renderProducts(products) {
     addedProducts = getAlreadyAddedProducts();
     products.forEach(name => {
       if (typeof name === "object" && name.name) name = name.name;
@@ -132,9 +157,7 @@ document.addEventListener('DOMContentLoaded', function () {
           qty.value = parseInt(qty.value) + 1;
         };
 
-        qtyWrapper.appendChild(minusBtn);
-        qtyWrapper.appendChild(qty);
-        qtyWrapper.appendChild(plusBtn);
+        qtyWrapper.append(minusBtn, qty, plusBtn);
 
         const btn = document.createElement('button');
         btn.className = 'btn btn-sm btn-primary ms-4';
@@ -144,30 +167,27 @@ document.addEventListener('DOMContentLoaded', function () {
           socket.emit('add_item', { list_id: LIST_ID, name: name, quantity: quantity });
         };
 
-        li.appendChild(qtyWrapper);
-        li.appendChild(btn);
+        li.append(qtyWrapper, btn);
       }
+
       productList.appendChild(li);
     });
   }
 
-  // Infinite scroll
-  const modalBody = modal.querySelector('.modal-body');
+  if (modalBody) {
+    modalBody.addEventListener('scroll', function () {
+      if (!loading && !reachedEnd && (modalBody.scrollTop + modalBody.clientHeight > modalBody.scrollHeight - 80)) {
+        fetchProducts(false);
+      }
+    });
+  }
 
-  modalBody.addEventListener('scroll', function () {
-    if (!loading && !reachedEnd && (modalBody.scrollTop + modalBody.clientHeight > modalBody.scrollHeight - 80)) {
-      fetchProducts(false);
-    }
-  });
-
-  // Modal otwarty
   modal.addEventListener('show.bs.modal', function () {
     resetAndFetchProducts();
   });
 
   renderSortBar();
 
-  // Obsługa dodania przez socket
   socket.on('item_added', data => {
     document.querySelectorAll('#mass-add-list li').forEach(li => {
       const itemName = li.firstChild?.textContent.trim();
@@ -194,13 +214,11 @@ document.addEventListener('DOMContentLoaded', function () {
         let secondsLeft = 15;
         timerBtn.textContent = `${secondsLeft}s`;
 
-        btnGroup.appendChild(undoBtn);
-        btnGroup.appendChild(timerBtn);
+        btnGroup.append(undoBtn, timerBtn);
 
         const rightWrapper = document.createElement('div');
         rightWrapper.className = 'd-flex align-items-center gap-2 ms-auto';
-        rightWrapper.appendChild(btnGroup);
-        rightWrapper.appendChild(badge);
+        rightWrapper.append(btnGroup, badge);
         li.appendChild(rightWrapper);
 
         const intervalId = setInterval(() => {
@@ -218,6 +236,7 @@ document.addEventListener('DOMContentLoaded', function () {
           btnGroup.remove();
           badge.remove();
           li.classList.remove('opacity-50');
+
           const qtyWrapper = document.createElement('div');
           qtyWrapper.className = 'd-flex align-items-center ms-2 quantity-controls';
 
@@ -268,5 +287,4 @@ document.addEventListener('DOMContentLoaded', function () {
       }
     });
   });
-
 });