Only format 'like' fields without '%'

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

@@ -22,6 +22,7 @@
     <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>
+    <Separator v-if="isRoot" class="m-4" />
     <div class="flex justify-end mt-4">
       <Button v-if="isRoot" @click="search" class="bg-blue-400 flex-shrink-0 mr-6">
         Search
@@ -40,6 +41,7 @@ import OperationSelector from './OperationSelector.vue';
 import ValueInput from './ValueInput.vue';
 import {Minus, Plus} from 'lucide-vue-next';
 import {Button} from '@/components/ui/button';
+import {Separator} from '@/components/ui/separator';
 
 const props = defineProps({
   criteria: Array as PropType<SearchCriterion[]>,

test-frontend/src/components/ui/separator/Separator.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { Separator, type SeparatorProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)"
+  />
+</template>

test-frontend/src/components/ui/separator/index.ts

@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'

test-frontend/src/lib/api.ts

@@ -49,10 +49,8 @@ function formatCriteria(criteria: SearchCriterion[]): SearchCriterion[] {
 }
 
 function formatLikeCriteria(criteria: SearchCriterion): SearchCriterion {
-    if (criteria.value && !criteria.value.startsWith('%')) {
-        criteria.value = `%${criteria.value}`;
-    }
-    if (criteria.value && !criteria.value.endsWith('%')) {
-        criteria.value = `${criteria.value}%`;
+    if (criteria.value && !criteria.value.includes('%')) {
+        criteria.value = `%${criteria.value}%`;
     }
+    return criteria;
 }