Servis: dogruzavanje rezultata pri pretrazi postojećeg klijenta

Dropdown za pretragu klijenta u Novom nalogu je imao tvrdi limit od 100
rezultata. Sada radi po istom obrascu kao u Novoj prodaji — učitava po 30,
i dogrejava sledećih 30 kad korisnik skroluje do dna liste.

web/static/js/ntech.js

@@ -303,6 +303,7 @@ document.addEventListener('alpine:init', () => {
         izabrani: null,
         izabraniId: 0,
         prikaziListu: false,
+        limitKlijenata: 30,
         // polja novog klijenta (vezana x-model-om na inpute)
         noviIme: '',
         noviPrezime: '',
@@ -326,8 +327,9 @@ document.addEventListener('alpine:init', () => {
         get vrednostKlijentId() {
             return this.izabraniId || ''
         },
-        // filtrira klijente po tipu i početnim karakterima unosa (najviše 8)
+        // svi klijenti koji odgovaraju tipu/pretrazi (bez ograničenja) — zna se da li ima
-        get filtrirani() {
+        // još rezultata za dogruzavanje pri skrolu
+        get svihFiltriranih() {
             const q = this.pretraga.trim().toLowerCase()
             const tip = this.tip
             return this.klijenti.filter(k => {
@@ -338,7 +340,19 @@ document.addEventListener('alpine:init', () => {
                 const punoIme = ((k.Ime || '') + ' ' + (k.Prezime || '')).trim()
                 const polja = (tip === 'pravno') ? [k.NazivFirme] : [punoIme, k.Ime, k.Prezime]
                 return polja.some(p => (p || '').toLowerCase().startsWith(q))
-            }).slice(0, 100)
+            })
+        },
+        get filtrirani() {
+            return this.svihFiltriranih.slice(0, this.limitKlijenata)
+        },
+        get imaJosKlijenata() {
+            return this.limitKlijenata < this.svihFiltriranih.length
+        },
+        ucitajViseKlijenata(e) {
+            const el = e.target
+            if (el.scrollTop + el.clientHeight >= el.scrollHeight - 40 && this.imaJosKlijenata) {
+                this.limitKlijenata += 30
+            }
         },
         jeTip(t) {
             return this.tip === t
@@ -387,9 +401,14 @@ document.addEventListener('alpine:init', () => {
             this.tip = t
             this.ocisti()
             this.pretraga = ''
+            this.limitKlijenata = 30
             this.noviIme = ''
             this.noviPrezime = ''
             this.noviNaziv = ''
+        },
+        pretragaPromenjena() {
+            this.prikaziListu = true
+            this.limitKlijenata = 30
         }
     }))
 

web/templates/stranice/servis_forma.html

@@ -151,10 +151,10 @@
                 <div x-show="nijeIzabran" style="position:relative;" @click.outside="prikaziListu=false">
                     <label class="polje-labela">Pretraži postojećeg klijenta</label>
                     <input type="text" x-model="pretraga" autocomplete="off"
-                        @focus="prikaziListu=true" @input="prikaziListu=true"
+                        @focus="prikaziListu=true" @input="pretragaPromenjena()"
                         @keydown.enter.prevent="potvrdiNovog()"
                         placeholder="Ukucajte početak imena ili naziva..." style="width:100%;">
-                    <div x-show="prikaziListu && filtrirani.length" x-cloak
+                    <div x-show="prikaziListu && filtrirani.length" x-cloak @scroll="ucitajViseKlijenata($event)"
                         style="position:absolute;z-index:30;left:0;right:0;margin-top:4px;background:var(--pozadina-kartica,var(--pozadina));border:1px solid var(--ivica);border-radius:10px;max-height:240px;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.14);">
                         <template x-for="k in filtrirani" :key="k.ID">
                             <div @click="izaberi(k)" class="klijent-stavka"
@@ -164,6 +164,7 @@
                                     x-text="detalj(k)"></div>
                             </div>
                         </template>
+                        <div x-show="imaJosKlijenata" style="padding:6px 12px;text-align:center;font-size:11px;color:var(--tekst-sporedni);">Skrolujte za još rezultata...</div>
                     </div>
                 </div>