aggiornamento scontistica, corretto errori

src/views/ecommerce/productsList/productsList.ts

@@ -10,6 +10,7 @@ import { useQuasar } from 'quasar'
 import { costanti } from '@costanti'
 
 import { CProductCard } from '@src/components/CProductCard'
+import { IProduct } from '@src/model'
 
 
 export default defineComponent({
@@ -24,12 +25,24 @@ export default defineComponent({
     const $q = useQuasar()
     const { t } = useI18n()
 
+    const search = ref('')
+
     function mounted() {
       // Inizializza
       productStore.loadProducts()
     }
     function getProducts() {
-      return productStore.getProducts()
+      let arrprod = productStore.getProducts()
+      if (!search.value) {
+        return arrprod
+      }
+
+      let lowerSearchText = search.value.toLowerCase();
+
+      return arrprod.filter((product: IProduct) => {
+        let lowerName = product.name!.toLowerCase();
+        return product.code!.includes(search.value) || lowerName.includes(lowerSearchText);
+      });    
     }
   
     onMounted(mounted)
@@ -40,6 +53,7 @@ export default defineComponent({
       tools,
       toolsext,
       getProducts,
+      search,
     }
   }
 })

src/views/ecommerce/productsList/productsList.vue

@@ -2,9 +2,29 @@
   <q-page>
     <div class="panel">
       <div class="container">
+        <div
+          class="q-gutter-y-md column text-center q-mx-auto"
+          style="width: 350px; max-width: 100%"
+        >
+          <q-input
+            filled
+            stack-label
+            label="Inserisci il codice o il testo"
+            v-model="search"
+            class="q-ml-md"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+        </div>
         <div class="row">
-          <div class="q-pa-md row items-start q-gutter-md" v-for="(product, index) in getProducts()" :key="index">
-            <CProductCard :code="product.code" :complete="false"/>
+          <div
+            class="q-pa-md row items-start q-gutter-md"
+            v-for="(product, index) in getProducts()"
+            :key="index"
+          >
+            <CProductCard :code="product.code" :complete="false" />
           </div>
         </div>
       </div>
@@ -13,7 +33,6 @@
 </template>
 
 <script lang="ts" src="./productsList.ts">
-
 </script>
 
 <style lang="scss" scoped>