Add send search request when enter is pressed inside a text field

Fix linting errors
ag-computational-bio · Sep 7, 2023 · a3da272 · a3da272
1 parent c402deb
commit a3da272
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 36 deletions.
diff --git a/src/components/querybuilder/QueryBuilder.vue b/src/components/querybuilder/QueryBuilder.vue
@@ -1,12 +1,14 @@
 <template>
   <div class="query-builder">
     <QueryGroup
+      :index="0"
       :depth="0"
       :query="query"
       :rules="rules"
       :options="options"
       @update:query="updateQuery"
       @remove:query="removeQuery"
+      @submit="emit('submit')"
     />
   </div>
 </template>
@@ -51,7 +53,10 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits<{ (e: "update:query", v: Query): void }>();
+const emit = defineEmits<{
+  (e: "update:query", v: Query): void;
+  (e: "submit"): void;
+}>();
 
 function updateQuery(idx: number, newQuery: Query) {
   emit("update:query", newQuery);

diff --git a/src/components/querybuilder/QueryGroup.vue b/src/components/querybuilder/QueryGroup.vue
@@ -14,7 +14,7 @@
           <div class="col-auto">
             <select
               id="query-builder-match-type"
-              v-model="query.op"
+              v-model="op"
               class="form-select"
             >
               <option value="or">{{ options.labels.matchTypes.or }}</option>
@@ -77,30 +77,37 @@
         :options="options"
         :rules="rules"
         @update:children="updateChildren"
+        @submit="emit('submit')"
       />
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import type { CompoundQuery, Query } from "@/model/Search";
-import { ref, type PropType } from "vue";
+import { ref, type PropType, computed } from "vue";
 import type { QueryBuilderOptions, Rule } from "./Rule";
 import QueryGroupChildren from "./QueryGroupChildren.vue";
 
 const props = defineProps({
-  index: { type: Number as PropType<number>, default: 0 },
-  depth: { type: Number as PropType<number>, default: 0 },
-  query: { type: Object as PropType<CompoundQuery>, default: {} },
-  options: { type: Object as PropType<QueryBuilderOptions>, default: 0 },
-  rules: { type: Array as PropType<Rule[]>, default: [] },
+  index: { type: Number as PropType<number>, required: true },
+  depth: { type: Number as PropType<number>, required: true },
+  query: { type: Object as PropType<CompoundQuery>, required: true },
+  options: { type: Object as PropType<QueryBuilderOptions>, required: true },
+  rules: { type: Array as PropType<Rule[]>, default: () => [] },
   title: { type: String, default: "" },
 });
 
 const emit = defineEmits<{
   (e: "update:query", i: number, v: CompoundQuery): void;
   (e: "remove:query", i: number): void;
+  (e: "submit"): void;
 }>();
 
+const op = computed({
+  get: () => props.query.op,
+  set: (v) => emit("update:query", props.index, { ...props.query, op: v }),
+});
+
 const selectedRule = ref(0);
 
 function addGroup() {

diff --git a/src/components/querybuilder/QueryGroupChildren.vue b/src/components/querybuilder/QueryGroupChildren.vue
@@ -9,6 +9,7 @@
       :depth="depth + 1"
       @update:query="updateQuery"
       @remove:query="removeQuery"
+      @submit="emit('submit')"
     />
     <QueryNested
       v-if="'op' in child && child.op == 'nested'"
@@ -19,6 +20,7 @@
       :depth="depth + 1"
       @update:query="updateQuery"
       @remove:query="removeQuery"
+      @submit="emit('submit')"
     />
     <QueryLeaf
       v-if="isLeafQuery(child)"
@@ -29,6 +31,7 @@
       :depth="depth + 1"
       @update:query="updateQuery"
       @remove:query="removeQuery"
+      @submit="emit('submit')"
     />
   </template>
 </template>
@@ -37,17 +40,19 @@ import { isLeafQuery, type Query } from "@/model/Search";
 import type { PropType } from "vue";
 import QueryGroup from "./QueryGroup.vue";
 import QueryLeaf from "./QueryLeaf.vue";
-import type { NestedRule, QueryBuilderOptions, Rule } from "./Rule";
-import QueryBuilder from "./QueryBuilder.vue";
 import QueryNested from "./QueryNested.vue";
+import type { QueryBuilderOptions, Rule } from "./Rule";
 
 const props = defineProps({
   children: { type: Array as PropType<Query[]>, default: () => [] },
-  depth: { type: Number as PropType<number>, default: 0 },
-  options: { type: Object as PropType<QueryBuilderOptions>, default: 0 },
-  rules: { type: Array as PropType<Rule[]>, default: [] },
+  depth: { type: Number as PropType<number>, required: true },
+  options: { type: Object as PropType<QueryBuilderOptions>, required: true },
+  rules: { type: Array as PropType<Rule[]>, default: () => [] },
 });
-const emit = defineEmits<{ (e: "update:children", v: Query[]): void }>();
+const emit = defineEmits<{
+  (e: "update:children", v: Query[]): void;
+  (e: "submit"): void;
+}>();
 
 function updateQuery(index: number, query: Query) {
   const newChildren = [...props.children];

diff --git a/src/components/querybuilder/QueryLeaf.vue b/src/components/querybuilder/QueryLeaf.vue
@@ -31,13 +31,14 @@
               class="form-control"
               type="text"
               :placeholder="options.labels.textInputPlaceholder"
+              @keydown.enter="$emit('submit')"
             />
           </div>
 
           <!-- Basic number input -->
           <template v-else-if="rule.type === 'number'">
-            <template v-if="isRange(query.value) && query.op === '[]'">
-              <RangeInput v-model:value="query.value" />
+            <template v-if="isRange(value) && query.op === '[]'">
+              <RangeInput v-model:value="value" @submit="$emit('submit')" />
             </template>
             <template v-else>
               <div class="col">
@@ -46,6 +47,7 @@
                   class="form-control"
                   type="number"
                   step="any"
+                  @keydown.enter="$emit('submit')"
                 />
               </div>
             </template>
@@ -78,14 +80,15 @@ import RangeInput from "./input/RangeInput.vue";
 const props = defineProps({
   index: { type: Number as PropType<number>, default: 0 },
   depth: { type: Number as PropType<number>, default: 0 },
-  query: { type: Object as PropType<LeafQuery>, default: {} },
-  options: { type: Object as PropType<QueryBuilderOptions>, default: 0 },
-  rules: { type: Array as PropType<Rule[]>, default: [] },
+  query: { type: Object as PropType<LeafQuery>, default: () => {} },
+  options: { type: Object as PropType<QueryBuilderOptions>, required: true },
+  rules: { type: Array as PropType<Rule[]>, default: () => [] },
 });
 
 const emit = defineEmits<{
   (e: "remove:query", i: number): void;
   (e: "update:query", i: number, q: Query): void;
+  (e: "submit"): void;
 }>();
 const rule: Ref<LeafRule | undefined> = computed(() => {
   return props.rules.find(

diff --git a/src/components/querybuilder/QueryNested.vue b/src/components/querybuilder/QueryNested.vue
@@ -8,6 +8,7 @@
     :depth="depth + 1"
     @update:query="updateQuery"
     @remove:query="removeQuery"
+    @submit="$emit('submit')"
   />
 </template>
 <script setup lang="ts">
@@ -17,16 +18,17 @@ import QueryGroup from "./QueryGroup.vue";
 import type { NestedRule, QueryBuilderOptions, Rule } from "./Rule";
 
 const props = defineProps({
-  index: { type: Number as PropType<number>, default: 0 },
-  depth: { type: Number as PropType<number>, default: 0 },
-  query: { type: Object as PropType<NestedQuery>, default: {} },
-  options: { type: Object as PropType<QueryBuilderOptions>, default: 0 },
-  rules: { type: Array as PropType<Rule[]>, default: [] },
+  index: { type: Number as PropType<number>, required: true },
+  depth: { type: Number as PropType<number>, required: true },
+  query: { type: Object as PropType<NestedQuery>, required: true },
+  options: { type: Object as PropType<QueryBuilderOptions>, required: true },
+  rules: { type: Array as PropType<Rule[]>, default: () => [] },
 });
 
 const emit = defineEmits<{
   (e: "update:query", i: number, v: Query): void;
   (e: "remove:query", i: number): void;
+  (e: "submit"): void;
 }>();
 
 const rule = computed(
@@ -36,7 +38,7 @@ const nestedRules = computed(() => rule.value.rules);
 function updateQuery(idx: number, query: Query) {
   emit("update:query", props.index, { ...props.query, value: query });
 }
-function removeQuery(idx: number) {
+function removeQuery() {
   emit("remove:query", props.index);
 }
 </script>
diff --git a/src/components/querybuilder/input/RangeInput.vue b/src/components/querybuilder/input/RangeInput.vue
@@ -2,13 +2,25 @@
   <div class="col">
     <div class="input-group">
       <label class="input-group-text">From</label>
-      <input v-model="from" class="form-control" type="number" step="any" />
+      <input
+        v-model="from"
+        class="form-control"
+        type="number"
+        step="any"
+        @keydown.enter="$emit('submit')"
+      />
     </div>
   </div>
   <div class="col">
     <div class="input-group">
       <label class="input-group-text">To</label>
-      <input v-model="to" class="form-control" type="number" step="any" />
+      <input
+        v-model="to"
+        class="form-control"
+        type="number"
+        step="any"
+        @keydown.enter="$emit('submit')"
+      />
     </div>
   </div>
 </template>
@@ -17,10 +29,11 @@ import { type PropType, computed } from "vue";
 import { type Range } from "@/model/Search";
 
 const props = defineProps({
-  value: { type: Object as PropType<Range>, default: 0 },
+  value: { type: Object as PropType<Range>, required: true },
 });
 const emit = defineEmits<{
   (e: "update:value", v: Range): void;
+  (e: "submit"): void;
 }>();
 const from = computed({
   get: () => props.value.from,

diff --git a/src/views/search/SearchView.vue b/src/views/search/SearchView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useApi } from "@/BakrepApi";
-import CenteredLargeSpinner from "@/components/CenteredLargeSpinner.vue";
+import usePageState, { State } from "@/PageState";
 import Loading from "@/components/Loading.vue";
 import {
   empty,
@@ -9,20 +9,22 @@ import {
   type PositionInResult,
 } from "@/components/pagination/Pagination";
 import Pagination from "@/components/pagination/Pagination.vue";
+import QueryBuilder from "@/components/querybuilder/QueryBuilder.vue";
+import type {
+  LeafRule,
+  NestedRule,
+  Rule,
+} from "@/components/querybuilder/Rule";
 import type { BakrepSearchResultEntry } from "@/model/BakrepSearchResult";
-import usePageState, { State } from "@/PageState";
-import { computed, onMounted, ref, unref, type Ref } from "vue";
-import ResultTable from "./ResultTable.vue";
 import type {
   CompoundQuery,
   SearchInfo,
   SearchInfoField,
   SortDirection,
   SortOption,
 } from "@/model/Search";
-import type { Rule, NestedRule } from "@/components/querybuilder/Rule";
-import QueryBuilder from "@/components/querybuilder/QueryBuilder.vue";
-import type { LeafRule } from "@/components/querybuilder/Rule";
+import { computed, onMounted, ref, unref, type Ref } from "vue";
+import ResultTable from "./ResultTable.vue";
 const pageState = usePageState();
 const searchState = usePageState();
 const entries: Ref<BakrepSearchResultEntry[]> = ref([]);
@@ -134,7 +136,7 @@ onMounted(init);
     <Loading :state="pageState">
       <div class="row">
         <div class="col">
-          <QueryBuilder v-model:query="query" :rules="rules" />
+          <QueryBuilder v-model:query="query" :rules="rules" @submit="search" />
 
           <div class="d-flex mt-2 justify-content-end">
             <button