From 834ac4201f357303dde8b57253a04dad7e60ccf1 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paul@wilde.cloud>
Date: Mon, 20 Mar 2023 15:48:33 +0000
Subject: [PATCH] better search on contract edit

---
 src/views/contracts/ContractEdit.vue | 45 ++++++++++++++++++++--------
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/views/contracts/ContractEdit.vue b/src/views/contracts/ContractEdit.vue
index 9e07ded..076ff22 100644
--- a/src/views/contracts/ContractEdit.vue
+++ b/src/views/contracts/ContractEdit.vue
@@ -108,12 +108,17 @@
                 <v-progress-linear indeterminate :active="customers_loading">
                 </v-progress-linear>
                 <v-list>
-                    <template v-for="c in customers" :key="c.acc_no">
-                        <v-list-item>
-                            <v-btn icon="mdi-arrow-right" title="select" @click="contract.customer = c; search[0] = false" size="small" color="success"></v-btn>
-                            {{ c.acc_no }} - {{ c.name }}
-                        </v-list-item>
-                    </template>
+                    <RecycleScroller class="scroller"
+                                     :items="filteredCustomers"
+                                     :item-size="50"
+                                     v-slot="{ item }" 
+                                     key-field="acc_no"
+                                     >
+                                     <v-list-item>
+                                         <v-btn icon="mdi-arrow-right" title="select" @click="contract.customer = item; search[0] = false" size="small" color="success"></v-btn>
+                                         {{ item.acc_no }} - {{ item.name }}
+                                     </v-list-item>
+                    </RecycleScroller>
                 </v-list>
             </v-card-text>
         </v-card>
@@ -125,18 +130,23 @@
                 <v-progress-linear indeterminate :active="products_loading">
                 </v-progress-linear>
                 <v-list>
-                    <template v-for="p in products" :key="p.code">
+                    <RecycleScroller class="scroller"
+                                     :items="products"
+                                     :item-size="50"
+                                     v-slot="{ item }" 
+                                     key-field="code"
+                                     >
                         <v-list-item>
-                            <v-btn icon="mdi-arrow-right" title="select" @click="setProduct(p)" size="small" color="success"></v-btn>
-                            {{ p.code }} - {{ p.name }}
+                            <v-btn icon="mdi-arrow-right" title="select" @click="setProduct(item)" size="small" color="success"></v-btn>
+                            {{ item.code }} - {{ item.name }}
                         </v-list-item>
-                    </template>
+                    </RecycleScroller>
                 </v-list>
             </v-card-text>
         </v-card>
     </v-dialog>
-</template>
-<script>
+    </template>
+    <script>
 import axios from 'axios'
 import DatePicker from '@vuepic/vue-datepicker'
 import ErrorBanner from '@/components/ErrorBanner.vue'
@@ -172,6 +182,17 @@ export default {
         }
     },
     computed: {
+        filteredCustomers(){
+            if (this.customer_search == null){
+                return []
+            }
+            let query = this.customer_search.toLowerCase()
+            let clist = this.customers.filter(q =>
+                q.name.toLowerCase().includes(query) ||
+                q.acc_no.includes(query)
+            )
+            return clist
+        },
         title() {
             if ( this.contract.isNew ) {
                 return "New Contract"