Liste: interaktivna pretraga za dobavljače; poruka 'za datu pretragu nema rezultata' kad pretraga ne vraća ništa

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,

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 -->
+    <!-- gornja traka: dugme + interaktivna pretraga -->
-    <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
+    <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;">
+                style="flex:1;"
-            <button type="submit" class="btn-primarno">
+                hx-trigger="keyup[target.value.length==0||target.value.length>=3] changed delay:150ms, search"
-                Traži
+                hx-get="/dobavljaci" hx-target="#dobavljaci-rezultati" hx-select="#dobavljaci-rezultati" hx-swap="innerHTML" hx-push-url="true">
-            </button>
         </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}}

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>

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>

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>