Call backend on query

test-frontend/src/App.vue

@@ -1,22 +1,22 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import SearchResults from '@/components/SearchResults.vue'
-import SearchForm from '@/components/ui/searchForm/SearchForm.vue';
-import type { SearchCriterion } from '@/lib/types';
-
-const data = ref<Any[]>([])
-
-const criteria = ref<SearchCriterion[]>([]);
-onMounted(async () => {
-  data.value = await getData();
-});
-</script>
-
 <template>
   <div class="container py-10 mx-auto">
-    <search-form :criteria="criteria" :is-root="true" :parent-field="'library'"/>
+    <search-form :criteria="criteria" :is-root="true" :parent-field="'library'" @update:results="handleSearchResults"/>
   </div>
   <div class="container py-10 mx-auto">
-    <SearchResults/>
+    <SearchResults :data="searchResultsData" />
   </div>
 </template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import SearchResults from '@/components/SearchResults.vue';
+import SearchForm from '@/components/ui/searchForm/SearchForm.vue';
+import type { SearchCriterion, Library } from '@/lib/types';
+
+const criteria = ref<SearchCriterion[]>([]);
+const searchResultsData = ref<Library[]>([]);
+
+const handleSearchResults = (results: Library[]) => {
+  searchResultsData.value = results;
+};
+</script>

test-frontend/src/components/SearchResults.vue

@@ -1,31 +1,15 @@
-<script lang="ts" setup>
-import {onMounted, ref} from 'vue'
-
-import {columns} from "@/lib/search/columns"
-import {components} from '@/lib/api-schema';
-import {getLibrariesByQuery} from '@/lib/api';
-import LibraryTable from "@/components/ui/LibraryTable.vue"
-
-const data = ref<components['schemas']['Library'][]>([])
-
-async function getData(): Promise<components['schemas']['Library'][]> {
-  const query: components['schemas']['SearchCriterion'][] = [
-    {
-      field: "name",
-      op: "like",
-      value: "%Library%"
-    }
-  ];
-  return getLibrariesByQuery(query)
-}
-
-onMounted(async () => {
-  data.value = await getData();
-});
-</script>
-
 <template>
   <div class="container py-10 mx-auto">
     <LibraryTable :columns="columns" :data="data"/>
   </div>
-</template>
+</template>
+
+<script lang="ts" setup>
+import LibraryTable from '@/components/ui/LibraryTable.vue';
+import { columns } from "@/lib/search/columns";
+import type { Library } from '@/lib/types';
+
+const props = defineProps<{
+  data: Library[]
+}>();
+</script>

test-frontend/src/components/ui/searchForm/SearchForm.vue

@@ -14,26 +14,32 @@
       <div v-if="hasSubCriteria(criterion)" class="my-2 ml-6 relative">
         <div class="absolute left-0 top-0 bottom-0 w-0.5 bg-gray-400" style="margin-left: -1rem;"></div>
         <search-form :criteria="criterion.subCriteria" :parent-field="criterion.field" :is-root="false"/>
-        <Button v-if="canHaveSubCriteria(criterion.field)" @click="() => addSubCriterion(criterion)" class="bg-emerald-600 flex-shrink-0 w-10 h-10">
+        <Button v-if="canHaveSubCriteria(criterion.field)" @click="() => addSubCriterion(criterion)" class="bg-emerald-400 flex-shrink-0 w-10 h-10">
           <Plus class="w-4 h-4 flex-shrink-0" />
         </Button>
       </div>
     </div>
     <Button v-if="isRoot" size="icon" @click="addCriterion" class="bg-emerald-400 flex-shrink-0 w-10 h-10">
       <Plus class="w-4 h-4 flex-shrink-0" />
     </Button>
+    <div class="flex justify-end mt-4">
+      <Button v-if="isRoot" @click="search" class="bg-blue-400 flex-shrink-0 mr-6">
+        Search
+      </Button>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { SearchCriterion } from '@/lib/types';
-import { fieldsConfiguration } from '@/lib/fieldsConfiguration';
+import {ref, computed} from 'vue';
+import {SearchCriterion} from '@/lib/types';
+import {fieldsConfiguration} from '@/lib/fieldsConfiguration';
+import {getLibrariesByQuery} from '@/lib/api';
 import FieldSelector from './FieldSelector.vue';
 import OperationSelector from './OperationSelector.vue';
 import ValueInput from './ValueInput.vue';
-import { Minus, Plus } from 'lucide-vue-next';
-import { Button } from '@/components/ui/button';
-import {computed} from "vue";
+import {Minus, Plus} from 'lucide-vue-next';
+import {Button} from '@/components/ui/button';
 
 const props = defineProps({
   criteria: Array as PropType<SearchCriterion[]>,
@@ -44,7 +50,9 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['update:criteria']);
+const searchResults = ref<Library[]>([]);
+
+const emit = defineEmits(['update:criteria', 'update:results']);
 
 const addCriterion = () => {
   props.criteria.push({ field: '', op: '', value: '', subCriteria: [] });
@@ -70,6 +78,16 @@ const updateFieldConfig = (criterion: SearchCriterion) => {
   emit('update:criteria', props.criteria);
 };
 
+const search = async () => {
+  try {
+    searchResults.value = await getLibrariesByQuery(props.criteria);
+    emit('update:results', searchResults.value);
+  } catch (error) {
+    console.error('Search failed', error);
+  }
+};
+
+
 const currentFieldsConfig = computed(() => fieldsConfiguration[props.parentField]);
 
 const hasOperations = (field: string) => field && currentFieldsConfig.value[field]?.opOptions.length > 0;