Better subcriteria form behavior

PabloLec · May 9, 2024 · 1d713b7 · 1d713b7
1 parent 62c7d26
commit 1d713b7
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/test-frontend/src/App.vue b/test-frontend/src/App.vue
@@ -14,7 +14,7 @@ onMounted(async () => {
 
 <template>
   <div class="container py-10 mx-auto">
-    <search-form :criteria="criteria"/>
+    <search-form :criteria="criteria" :is-root="true" :parent-field="library"/>
   </div>
   <div class="container py-10 mx-auto">
     <SearchResults/>

diff --git a/test-frontend/src/components/ui/searchForm/SearchForm.vue b/test-frontend/src/components/ui/searchForm/SearchForm.vue
@@ -1,47 +1,57 @@
 <template>
   <div>
     <div v-for="(criterion, index) in criteria" :key="index">
-      <div class="flex items-center space-x-4">
-        <field-selector v-model="criterion.field" @change="() => updateFieldConfig(criterion)" />
+      <div class="flex items-center space-x-4 my-2">
+        <field-selector v-model="criterion.field" @change="() => updateFieldConfig(criterion)" :parent-field="parentField" />
         <operation-selector v-if="hasOperations(criterion.field)" v-model="criterion.op" :field="criterion.field" />
         <value-input v-if="hasValueInput(criterion.field)" v-model="criterion.value" :field="criterion.field" />
-        <button @click="removeCriterion(index)" class="mt-2">Remove</button>
+        <Button size="icon" @click="removeCriterion(index)" class="bg-orange-400">
+          <Minus class="w-4 h-4" />
+        </Button>
       </div>
-      <button v-if="canHaveSubCriteria(criterion.field)" @click="() => addSubCriterion(criterion)" class="mt-2 ml-2">
-        Add Sub-Criterion
-      </button>
-      <div v-if="hasSubCriteria(criterion)" class="mt-2 ml-6">
-        <search-form :criteria="criterion.subCriteria"/>
+      <div v-if="hasSubCriteria(criterion)" class="my-2 ml-6">
+        <search-form :criteria="criterion.subCriteria" :parent-field="criterion.field" />
+        <Button v-if="canHaveSubCriteria(criterion.field)" @click="() => addSubCriterion(criterion)" class="bg-emerald-600">
+          <Plus class="w-4 h-4" />
+        </Button>
       </div>
     </div>
-    <button @click="addCriterion" class="mt-4">Add Criterion</button>
+    <Button v-if="isRoot" size="icon" @click="addCriterion" class="bg-emerald-400">
+      <Plus class="w-4 h-4" />
+    </Button>
   </div>
 </template>
 
-
 <script lang="ts" setup>
-import {SearchCriterion} from '@/lib/types';
-import {fieldsConfiguration} from '@/lib/fieldsConfiguration';
+import { SearchCriterion } from '@/lib/types';
+import { fieldsConfiguration } from '@/lib/fieldsConfiguration';
 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';
 
-const props = defineProps<{
-  criteria: SearchCriterion[]
-}>();
+const props = defineProps({
+  criteria: Array as PropType<SearchCriterion[]>,
+  parentField: String,
+  isRoot: {
+    type: Boolean,
+    default: false
+  }
+});
 
 const emit = defineEmits(['update:criteria']);
 
 const addCriterion = () => {
-  props.criteria.push({field: '', op: '', value: '', subCriteria: []});
+  props.criteria.push({ field: '', op: '', value: '', subCriteria: [] });
   emit('update:criteria', props.criteria);
 };
 
 const addSubCriterion = (criterion: SearchCriterion) => {
   if (!criterion.subCriteria) {
     criterion.subCriteria = [];
   }
-  criterion.subCriteria.push({field: '', op: '', value: '', subCriteria: []});
+  criterion.subCriteria.push({ field: '', op: '', value: '', subCriteria: [] });
   emit('update:criteria', props.criteria);
 };