From 32f2235127d2dbeff949205b5ee26b5438dba9fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dalibor=20Markovi=C4=87?= <dalibor31@gmail.com>
Date: Sat, 20 Jun 2026 23:49:42 +0200
Subject: [PATCH] =?UTF-8?q?Liste:=20interaktivna=20pretraga=20za=20dobavlj?=
 =?UTF-8?q?a=C4=8De;=20poruka=20'za=20datu=20pretragu=20nema=20rezultata'?=
 =?UTF-8?q?=20kad=20pretraga=20ne=20vra=C4=87a=20ni=C5=A1ta?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/static/css/main.css                |  3 ++
 web/templates/stranice/dobavljaci.html | 43 ++++++++++++++++++++------
 web/templates/stranice/klijenti.html   |  4 +--
 web/templates/stranice/magacin.html    |  4 +--
 web/templates/stranice/servis.html     |  4 +--
 5 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/web/static/css/main.css b/web/static/css/main.css
index 831cc5c..c697b6c 100644
--- a/web/static/css/main.css
+++ b/web/static/css/main.css
@@ -1091,6 +1091,9 @@ select {
 #klijenti-rezultati.bez-anim .tabela tbody tr,
 #klijenti-rezultati.bez-anim .animiraj { animation: none; }
 
+#dobavljaci-rezultati.bez-anim .tabela tbody tr,
+#dobavljaci-rezultati.bez-anim .animiraj { animation: none; }
+
 /* korisnikova preferencija animacije: body[data-animacija] nadjačava podrazumevano.
    Kad korisnik odabere stil, animiraju se i redovi tabela i mobilne kartice. */
 [data-animacija="bez"] .animiraj,
diff --git a/web/templates/stranice/dobavljaci.html b/web/templates/stranice/dobavljaci.html
index bf7e03f..6dc9541 100644
--- a/web/templates/stranice/dobavljaci.html
+++ b/web/templates/stranice/dobavljaci.html
@@ -12,19 +12,21 @@
     <div class="poruka-uspeh poruka-animacija">Dobavljač je uspešno obrisan.</div>
     {{end}}
 
-    <!-- gornja traka: dugme + pretraga -->
-    <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
+    <!-- gornja traka: dugme + interaktivna pretraga -->
+    <div id="dobavljaci-filteri" style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
         <a href="/dobavljaci/novi" class="btn-primarno">+ Novi dobavljač</a>
-        <form method="GET" action="/dobavljaci" style="display:flex;gap:8px;flex:1;min-width:200px;">
+        <form method="GET" action="/dobavljaci" style="display:flex;gap:8px;flex:1;min-width:200px;"
+              hx-get="/dobavljaci" hx-target="#dobavljaci-rezultati" hx-select="#dobavljaci-rezultati" hx-swap="innerHTML" hx-push-url="true">
             <input type="text" name="pretraga" value="{{.Pretraga}}"
                 placeholder="Pretraži dobavljače..."
-                style="flex:1;">
-            <button type="submit" class="btn-primarno">
-                Traži
-            </button>
+                style="flex:1;"
+                hx-trigger="keyup[target.value.length==0||target.value.length>=3] changed delay:150ms, search"
+                hx-get="/dobavljaci" hx-target="#dobavljaci-rezultati" hx-select="#dobavljaci-rezultati" hx-swap="innerHTML" hx-push-url="true">
         </form>
     </div>
 
+    <div id="dobavljaci-rezultati">
+
     <!-- desktop tabela -->
     <div class="kartica dobavljaci-tabela animiraj" style="padding:0;overflow:hidden;">
         <div style="overflow-x:auto;">
@@ -70,7 +72,7 @@
                     {{else}}
                     <tr>
                         <td colspan="5" style="padding:32px;text-align:center;font-size:14px;color:var(--tekst-sporedni);">
-                            Nema dobavljača. <a href="/dobavljaci/novi" style="color:var(--sb-akcent);">Dodaj prvog dobavljača.</a>
+                            {{if $.Pretraga}}Za datu pretragu nema dobavljača u bazi.{{else}}Nema dobavljača. <a href="/dobavljaci/novi" style="color:var(--sb-akcent);">Dodaj prvog dobavljača.</a>{{end}}
                         </td>
                     </tr>
                     {{end}}
@@ -122,10 +124,33 @@
         </div>
         {{else}}
         <div style="padding:32px;text-align:center;font-size:14px;color:var(--tekst-sporedni);">
-            Nema dobavljača. <a href="/dobavljaci/novi" style="color:var(--sb-akcent);">Dodaj prvog dobavljača.</a>
+            {{if $.Pretraga}}Za datu pretragu nema dobavljača u bazi.{{else}}Nema dobavljača. <a href="/dobavljaci/novi" style="color:var(--sb-akcent);">Dodaj prvog dobavljača.</a>{{end}}
         </div>
         {{end}}
     </div>
 
+    </div><!-- kraj #dobavljaci-rezultati -->
+
 </div>
+
+<script>
+// Gasi animaciju redova pri pretrazi.
+document.body.addEventListener('htmx:beforeRequest', function (e) {
+    var elt = e.detail && e.detail.elt;
+    if (elt && elt.name === 'pretraga') {
+        var rez = document.getElementById('dobavljaci-rezultati');
+        if (rez) rez.classList.add('bez-anim');
+    }
+});
+// Reflow pri sidebar navigaciji da nema bljeska animacije.
+document.body.addEventListener('htmx:afterSwap', function (e) {
+    var t = e.detail && e.detail.target;
+    if (t && t.id === 'dobavljaci-rezultati') return;
+    var rez = document.getElementById('dobavljaci-rezultati');
+    if (!rez) return;
+    rez.classList.add('bez-anim');
+    void rez.offsetHeight;
+    rez.classList.remove('bez-anim');
+});
+</script>
 {{end}}
\ No newline at end of file
diff --git a/web/templates/stranice/klijenti.html b/web/templates/stranice/klijenti.html
index ee1b09c..42c22c6 100644
--- a/web/templates/stranice/klijenti.html
+++ b/web/templates/stranice/klijenti.html
@@ -100,7 +100,7 @@
                     {{else}}
                     <tr>
                         <td colspan="5" class="prazno-stanje">
-                            Nema klijenata. <a href="/klijenti/novi" style="color:var(--sb-akcent);">Dodaj prvog klijenta.</a>
+                            {{if $.Pretraga}}Za datu pretragu nema klijenata u bazi.{{else}}Nema klijenata. <a href="/klijenti/novi" style="color:var(--sb-akcent);">Dodaj prvog klijenta.</a>{{end}}
                         </td>
                     </tr>
                     {{end}}
@@ -156,7 +156,7 @@
         </div>
         {{else}}
         <div class="prazno-stanje">
-            Nema klijenata. <a href="/klijenti/novi" style="color:var(--sb-akcent);">Dodaj prvog klijenta.</a>
+            {{if $.Pretraga}}Za datu pretragu nema klijenata u bazi.{{else}}Nema klijenata. <a href="/klijenti/novi" style="color:var(--sb-akcent);">Dodaj prvog klijenta.</a>{{end}}
         </div>
         {{end}}
     </div>
diff --git a/web/templates/stranice/magacin.html b/web/templates/stranice/magacin.html
index 543e73b..fd1a740 100644
--- a/web/templates/stranice/magacin.html
+++ b/web/templates/stranice/magacin.html
@@ -135,7 +135,7 @@
                     {{else}}
                     <tr>
                         <td colspan="7" style="padding:32px;text-align:center;font-size:14px;color:var(--tekst-sporedni);">
-                            Nema artikala. <a href="/magacin/novi" style="color:var(--sb-akcent);">Dodaj prvi artikal.</a>
+                            {{if or $.Filter.Pretraga $.KategorijaIDStr $.Filter.SamoKriticni}}Za datu pretragu nema artikala u bazi.{{else}}Nema artikala. <a href="/magacin/novi" style="color:var(--sb-akcent);">Dodaj prvi artikal.</a>{{end}}
                         </td>
                     </tr>
                     {{end}}
@@ -203,7 +203,7 @@
         </div>
         {{else}}
         <div style="padding:32px;text-align:center;font-size:14px;color:var(--tekst-sporedni);">
-            Nema artikala. <a href="/magacin/novi" style="color:var(--sb-akcent);">Dodaj prvi artikal.</a>
+            {{if or $.Filter.Pretraga $.KategorijaIDStr $.Filter.SamoKriticni}}Za datu pretragu nema artikala u bazi.{{else}}Nema artikala. <a href="/magacin/novi" style="color:var(--sb-akcent);">Dodaj prvi artikal.</a>{{end}}
         </div>
         {{end}}
     </div>
diff --git a/web/templates/stranice/servis.html b/web/templates/stranice/servis.html
index 49203b1..d369353 100644
--- a/web/templates/stranice/servis.html
+++ b/web/templates/stranice/servis.html
@@ -94,7 +94,7 @@
                     {{else}}
                     <tr>
                         <td colspan="6" style="padding:32px;text-align:center;font-size:14px;color:var(--tekst-sporedni);">
-                            Nema servisnih naloga. <a href="/servis/novi" style="color:var(--sb-akcent);">Dodaj prvi nalog.</a>
+                            {{if or $.Pretraga $.FilterStatus}}Za datu pretragu nema servisnih naloga u bazi.{{else}}Nema servisnih naloga. <a href="/servis/novi" style="color:var(--sb-akcent);">Dodaj prvi nalog.</a>{{end}}
                         </td>
                     </tr>
                     {{end}}
@@ -145,7 +145,7 @@
         </div>
         {{else}}
         <div style="padding:32px;text-align:center;font-size:14px;color:var(--tekst-sporedni);">
-            Nema servisnih naloga. <a href="/servis/novi" style="color:var(--sb-akcent);">Dodaj prvi nalog.</a>
+            {{if or $.Pretraga $.FilterStatus}}Za datu pretragu nema servisnih naloga u bazi.{{else}}Nema servisnih naloga. <a href="/servis/novi" style="color:var(--sb-akcent);">Dodaj prvi nalog.</a>{{end}}
         </div>
         {{end}}
     </div>