src/components/ui/NewVnSearchBar.vue

@@ -21,7 +21,7 @@ const props = defineProps({
         default: null
     },
     filter: {
-        type: String,
+        type: Object,
         default: null
     },
     searchField: {
@@ -64,7 +64,6 @@ const search = async () => {
                 params,
                 exprBuilder: props.exprBuilder
             });
-
             emit('onSearch', data);
         }
     } catch (error) {
@@ -83,7 +82,7 @@ onMounted(() => {
 <template>
     <VnInput
         v-model="searchTerm"
-        @keyup.enter="search()"
+        @keyup.enter.stop="search()"
         :placeholder="props.placeholder || t('search')"
         bg-color="white"
         is-outlined

src/pages/Admin/ItemsView.vue

@@ -3,28 +3,46 @@ import { ref } from 'vue';
 
 import CardList from 'src/components/ui/CardList.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
-import VnSearchBar from 'src/components/ui/VnSearchBar.vue';
 import VnList from 'src/components/ui/VnList.vue';
+import VnSearchBar from 'src/components/ui/NewVnSearchBar.vue';
 
 import { useAppStore } from 'stores/app';
 import { storeToRefs } from 'pinia';
 
 const appStore = useAppStore();
 const { isHeaderMounted } = storeToRefs(appStore);
-
 const loading = ref(false);
 const items = ref([]);
-
+const itemFilterProps = {
-const query = `SELECT i.id, i.longName, i.size, i.category,
+    include: [
-            i.value5, i.value6, i.value7,
+        {
-            i.image, im.updated
+            relation: 'itemType',
-            FROM vn.item i
+            scope: {
-            LEFT JOIN image im
+                fields: ['id', 'name']
-            ON im.collectionFk = 'catalog'
+            }
-            AND im.name = i.image
+        },
-            WHERE (i.longName LIKE CONCAT('%', #search, '%')
+        {
-            OR i.id = #search) AND i.isActive
+            relation: 'intrastat',
-            ORDER BY i.longName LIMIT 50`;
+            scope: {
+                fields: ['id', 'description']
+            }
+        },
+        {
+            relation: 'origin',
+            scope: {
+                fields: ['id', 'name']
+            }
+        },
+        {
+            relation: 'production',
+            scope: {
+                fields: ['id', 'name']
+            }
+        }
+    ],
+    isActive: true,
+    order: 'name ASC'
+};
 
 const onSearch = data => (items.value = data || []);
 </script>
@@ -32,9 +50,10 @@ const onSearch = data => (items.value = data || []);
 <template>
     <Teleport v-if="isHeaderMounted" to="#actions">
         <VnSearchBar
-            :sql-query="query"
+            url="Items/filter"
             @on-search="onSearch"
             @on-search-error="items = []"
+            :filter="itemFilterProps"
         />
     </Teleport>
     <QPage class="vn-w-xs">
@@ -68,7 +87,7 @@ const onSearch = data => (items.value = data || []);
                 </template>
                 <template #content>
                     <span class="text-bold q-mb-sm">
-                        {{ item.longName }}
+                        {{ item.name }}
                     </span>
                     <span>
                         {{ item.value5 }} {{ item.value6 }}