- aggiunto filtro nella lista producttable

- ora compare il bottone aggiungi alla lista solo se non è presente.

src/components/CProductTable/CProductTable.ts

@@ -79,7 +79,7 @@ export default defineComponent({
       type: Object,
       required: false,
       default: () => ({}),
-    }
+    },
   },
   setup(props, { emit }) {
     // Copia locale della lista_prodotti per manipolazione interna
@@ -91,6 +91,8 @@ export default defineComponent({
 
     const $q = useQuasar();
 
+    const searchText = ref('');
+
     const arrordersCart = ref(<IOrderCart[]>[]);
 
     const globalStore = useGlobalStore();
@@ -149,6 +151,10 @@ export default defineComponent({
     ),
       { deep: true };
 
+    watch(() => searchText.value, () => {
+      searchProducts();
+    });
+
     const allColumns = ref([]);
 
     const isVisibleEditBtn = ref(false);
@@ -874,7 +880,14 @@ export default defineComponent({
     function isEditColumn(name: string): boolean {
       const column = allColumns.value.find((col) => col.name === name);
       return column ? column.edit : false;
-    };
+    }
+
+    const faiConfronto = () => {
+      return (
+        Array.isArray(props.lista_prod_confronto) &&
+        props.lista_prod_confronto.length > 0
+      );
+    }
 
     // 3. Funzione per verificare se una colonna è visibile (isColumnVisible)
     const isColumnVisible = (column: string, real?: boolean, element?: any) => {
@@ -891,20 +904,40 @@ export default defineComponent({
         (!props.optcatalogo.showListaArgomenti ||
           (props.optcatalogo.showListaArgomenti && !isEditColumn(column)));
 
-      if (props.options?.showbuttAdd && column === 'addtolist'
-        && (!element || !props.lista_prod_confronto.some((prod: any) => prod._id === element?._id))
+      if (
+        props.options?.showbuttAdd &&
+        column === 'addtolist' &&
+        (!element ||
+          !props.lista_prod_confronto.some((prod: any) => prod._id === element?._id))
       ) {
-        if (tools.isCollaboratore())
-          ok = true
+        if (tools.isCollaboratore()) ok = true;
       }
 
-      if (!props.options?.showbuttAdd && column === 'addtolist' && (element && props.lista_prod_confronto.some((prod: any) => prod._id === element?._id))) {
-        ok = false
+      if (column === 'addtolist') {
+        if (!faiConfronto()) {
+          ok = false
+        }
       }
 
       return selectedColumns.value.includes(column) && ok;
     };
 
+    function isElementVisible(col: string, element: any) {
+      let ok = true
+
+      if (col === 'addtolist') {
+        if (
+          props.options?.showbuttAdd &&
+          element &&
+          props.lista_prod_confronto.some((prod: any) => prod._id === element?._id)
+        ) {
+          ok = false;
+        }
+      }
+
+      return ok
+    }
+
     const getColumnLabelByName = (name: string): string => {
       const column = allColumns.value.find((col) => col.name === name);
       return column ? column.label : '';
@@ -1118,7 +1151,7 @@ export default defineComponent({
     }
 
     function addtolist(element) {
-      emit('addtolist', element)
+      emit('addtolist', element);
     }
 
     function getFieldClick(element: any, field: any): (() => void) | null {
@@ -1242,6 +1275,41 @@ export default defineComponent({
       updateProduct(element);
     }
 
+    function searchProducts() {
+      console.log('searchProducts');
+      if (!searchText.value) {
+        internalProducts.value = [...props.lista_prodotti];
+        return;
+      }
+
+      // Funzione per "escapare" i caratteri speciali nelle regex
+      const escapeRegex = (w: any) => {
+        return w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&').replace(/#/g, '\\#');
+      };
+
+      // Escape del testo di ricerca per evitare conflitti con caratteri speciali
+      const searchTextEscaped = escapeRegex(searchText.value.toLowerCase());
+
+      const searchRegex = new RegExp(searchTextEscaped, 'i');
+
+      internalProducts.value = props.lista_prodotti.filter((prod: any) => {
+        // Controllo se il titolo corrisponde alla regex
+        const titleMatch = searchRegex.test(`${prod.productInfo?.name}`);
+
+        // Controllo se uno degli autori corrisponde alla regex
+        const authorMatch =
+          prod.productInfo?.authors &&
+          prod.productInfo.authors.some((author: IAuthor) =>
+            searchRegex.test(`${author.name} ${author.surname}`)
+          );
+
+        // Controllo se il codice corrisponde alla regex
+        const codeMatch = searchRegex.test(`${prod.productInfo?.code}`);
+
+        return titleMatch || authorMatch || codeMatch;
+      });
+    }
+
     onMounted(mounted);
 
     return {
@@ -1292,6 +1360,9 @@ export default defineComponent({
       addtoCart,
       arrordersCart,
       addtolist,
+      searchProducts,
+      searchText,
+      isElementVisible,
     };
   },
 });

src/components/CProductTable/CProductTable.vue

@@ -5,6 +5,26 @@
       <div class="row justify-center q-mx-auto q-pt-sm text-italic">
         {{ internalProducts?.length }} elementi nella lista
       </div>
+      <div class="row justify-center q-mx-auto q-pt-sm">
+        <q-input
+          v-model="searchText"
+          dense
+          outlined
+          clearable
+          debounce="250"
+          placeholder="Cerca titolo se presente in lista"
+          class="col-12 col-md-6"
+          :style="{ 'min-width': '300px' }"
+
+        >
+        </q-input>
+        <div
+          v-if="searchText"
+          class="row justify-center q-mx-auto q-pa-sm text-caption text-red-7 "
+        >
+          Lista filtrata con il termine "{{ searchText }}"
+        </div>
+      </div>
       <div class="q-mb-md text-right">
         <q-select
           v-model="selectedColumns"
@@ -129,7 +149,7 @@
                   />
                 </span>
               </td>
-              <td v-else-if="field.name === 'addtocart' && isColumnVisible('addtocart')">
+              <td v-else-if="field.name === 'addtocart' && isColumnVisible('addtocart') ">
                 <q-btn
                   icon-right="fas fa-cart-plus"
                   color="positive"
@@ -160,7 +180,12 @@
                 >
                 </q-btn>
               </td>
-              <td v-else-if="field.name === 'addtolist' && isColumnVisible('addtolist', false, element)">
+              <td
+                v-else-if="
+                  field.name === 'addtolist' &&
+                  isColumnVisible('addtolist') && isElementVisible('addtolist', element)
+                "
+              >
                 <q-btn
                   icon="fas fa-plus"
                   color="primary"