From 0cece2b1fc56d92e83ad7468a9c09063326d7fef Mon Sep 17 00:00:00 2001
From: Surya Paolo <paolo.arena77@gmail.com>
Date: Sun, 31 Dec 2023 15:26:57 +0100
Subject: [PATCH] aggio search

---
 .../ecommerce/productsList/productsList.ts    | 20 +++++++++++++------
 .../ecommerce/productsList/productsList.vue   |  7 ++++---
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/views/ecommerce/productsList/productsList.ts b/src/views/ecommerce/productsList/productsList.ts
index 1207d7c7..01810d85 100755
--- a/src/views/ecommerce/productsList/productsList.ts
+++ b/src/views/ecommerce/productsList/productsList.ts
@@ -39,16 +39,24 @@ export default defineComponent({
     const getArrProducts = computed(() => {
       let arrprod = productStore.getProducts(cosa.value)
       let catstr = cat.value;
-      if (!search.value && !catstr) {
+      if ((!search.value || (search.value && search.value.length < 2)) && !catstr) {
         return arrprod
       }
 
       let lowerSearchText = search.value.toLowerCase();
 
       return arrprod.filter((product: IProduct) => {
-        let lowerName = product.productInfo.name!.toLowerCase()
-        let hasCategoria = !catstr || (catstr && product.productInfo.idCatProds?.includes(catstr))
-        return (product.productInfo.code!.includes(search.value) || lowerName.includes(lowerSearchText)) && hasCategoria
+        let lowerName = product.productInfo.name!.toLowerCase();
+        let hasCategoria = !catstr || (catstr && product.productInfo.idCatProds?.includes(catstr));
+
+        // Use a regular expression to match whole words
+        let codeMatch = new RegExp(`\\b${search.value}\\b`, 'i');
+        let nameMatch = new RegExp(`\\b${lowerSearchText}`, 'i');
+
+        // Check if any word in lowerName starts with lowerSearchText
+        let anyWordStartsWithSearch = lowerName.split(/\s+/).some(word => nameMatch.test(word));
+
+        return (codeMatch.test(product.productInfo.code!) || anyWordStartsWithSearch) && hasCategoria;
       });
     })
 
@@ -57,10 +65,10 @@ export default defineComponent({
       if (!search.value) {
         return arrprod
       }
-
+    
       let lowerSearchText = search.value.toLowerCase();
       let catstr = cat.value;
-
+    
       return arrprod.filter((product: IProduct) => {
         let lowerName = product.productInfo.name!.toLowerCase();
         const hasCategoria = !catstr || (catstr && product.productInfo.idCatProds?.includes(catstr));
diff --git a/src/views/ecommerce/productsList/productsList.vue b/src/views/ecommerce/productsList/productsList.vue
index 9049fff8..c6da1d18 100755
--- a/src/views/ecommerce/productsList/productsList.vue
+++ b/src/views/ecommerce/productsList/productsList.vue
@@ -62,6 +62,7 @@
             :dense="tools.isMobile() ? true : false"
             :label="t('ecomm.code_o_text_search')"
             v-model="search"
+            debounce="500"
             class="q-ml-md"
           >
             <template v-slot:append>
@@ -75,9 +76,9 @@
               :push="cat === reccat.value"
               dense
               :size="tools.isMobile() ? '0.70rem' : '1rem'"
-              :icon="reccat.icon"
-              :color="reccat.color ? reccat.color : undefined"
-              :text-color="cat === reccat.value ? 'blue' : 'black'"
+              :icon="reccat.icon ? reccat.icon : undefined"
+              :color="cat === reccat.value ? 'primary' : undefined"
+              :text-color="cat === reccat.value ? 'white' : 'black'"
               rounded
               :label="reccat.label"
               @click="cat = reccat.value"