✨ Search text filtering by field

frontend/components/feedback-task/header/DatasetFilters.component.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="filters__wrapper">
     <div class="filters">
-      <SearchBarBase
-        v-model="recordCriteria.searchText"
-        :placeholder="'Introduce a query'"
-      />
+      <SearchBarBase v-model="recordCriteria.searchText" :fields="fields" />
       <StatusFilter class="filters__status" v-model="recordCriteria.status" />
       <FilterButton
         v-if="isAnyAvailableFilter"
@@ -40,8 +37,8 @@
             v-model="recordCriteria.metadata.value"
           />
           <ResponsesFilter
-            v-model="recordCriteria.response.value"
             :datasetQuestions="datasetQuestions"
+            v-model="recordCriteria.response.value"
           />
           <SuggestionFilter
             v-model="recordCriteria.suggestion.value"
@@ -84,6 +81,9 @@ export default {
     isSortedBy() {
       return this.recordCriteria.isSortedBy;
     },
+    fields() {
+      return this.records.firstRecord.fields.map((f) => f.title);
+    },
   },
   methods: {
     newFiltersChanged() {
@@ -102,7 +102,7 @@ export default {
     },
   },
   watch: {
-    "recordCriteria.searchText"() {
+    "recordCriteria.searchText.value"() {
       this.newFiltersChanged();
     },
     "recordCriteria.status"() {

frontend/components/feedback-task/header/SearchBar.base.vue

@@ -21,7 +21,7 @@
     :class="{ active: isSearchActive, expanded: isExpanded }"
   >
     <BaseButton
-      @on-click="applySearch"
+      @on-click="openOrApply"
       class="search-area__icon --search"
       :data-title="$t('search')"
     >
@@ -32,8 +32,8 @@
       class="search-area__input"
       type="text"
       v-model.trim="searchValue"
-      :placeholder="placeholder"
-      :aria-description="description"
+      :placeholder="$t('searchPlaceholder')"
+      :aria-description="$t('searchPlaceholder')"
       autocomplete="off"
       @keydown.stop=""
       @keypress.enter.stop="applySearch"
@@ -45,73 +45,113 @@
     >
       <svgicon name="close" width="12" height="12" />
     </BaseButton>
+
+    <BaseDropdown
+      v-if="fields.length > 1"
+      class="search-area__fields"
+      :visible="dropdownIsVisible"
+      @visibility="onVisibility"
+    >
+      <template slot="dropdown-header">
+        <span class="search-area__fields__header">
+          <span class="search-area__fields__header__text">{{
+            value.value.field
+          }}</span>
+          <svgicon name="chevron-down" height="8" />
+        </span>
+      </template>
+      <template slot="dropdown-content">
+        <ul class="search-area__fields__content">
+          <li v-for="field in filteredFields" :key="field">
+            <BaseButton @on-click="selectField(field)">{{ field }}</BaseButton>
+          </li>
+        </ul>
+      </template>
+    </BaseDropdown>
   </div>
 </template>
 
 <script>
-import { isNil } from "lodash";
-
 export default {
   name: "SearchBarComponent",
   props: {
     value: {
-      type: String,
-      default: "",
-    },
-    placeholder: {
-      type: String,
-      default: "",
+      type: Object,
+      required: true,
     },
-    description: {
-      type: String,
-      default: "Introduce a text",
+    fields: {
+      type: Array,
+      default: () => [],
     },
   },
   data() {
     return {
       searchValue: "",
-      localAdditionalInfo: "",
       isExpanded: false,
+      dropdownIsVisible: false,
     };
   },
   computed: {
     isSearchActive() {
-      return !(isNil(this.value) || this.value.length === 0);
-    },
-    isSearchValueEmpty() {
-      return isNil(this.searchValue) || this.searchValue.length === 0;
+      return this.searchValue.length > 0 || this.value.isCompleted;
     },
     showDelete() {
-      return !this.isSearchValueEmpty || this.isSearchActive;
+      return this.isSearchActive;
+    },
+    fieldList() {
+      return ["all", ...this.fields];
+    },
+    filteredFields() {
+      return this.fieldList.filter((field) => field !== this.value.value.field);
     },
   },
   watch: {
     value: {
       immediate: true,
+      deep: true,
       handler(newValue) {
-        this.searchValue = newValue;
+        this.searchValue = newValue.value.text;
       },
     },
   },
   methods: {
-    applySearch() {
-      this.$emit("input", this.searchValue);
-      if (this.isSearchValueEmpty) {
-        this.isExpanded = !this.isExpanded;
-        this.$refs.searchRef.focus();
+    openOrApply() {
+      if (this.isExpanded && this.isSearchActive) {
+        this.applySearch();
       } else {
-        this.collapseSearch();
-        this.$refs.searchRef.blur();
+        this.isExpanded = !this.isExpanded;
+
+        if (this.isExpanded) {
+          this.$refs.searchRef.focus();
+        } else {
+          this.$refs.searchRef.blur();
+        }
       }
     },
+    applySearch() {
+      this.value.value = {
+        ...this.value.value,
+        text: this.searchValue,
+        field: this.value.value.field,
+      };
+
+      this.$refs.searchRef.blur();
+    },
     resetValue() {
-      this.searchValue = "";
-      this.$emit("input", "");
       this.collapseSearch();
+
+      this.value.reset();
     },
     collapseSearch() {
       this.isExpanded = false;
     },
+    onVisibility(value) {
+      this.dropdownIsVisible = value;
+    },
+    selectField(field) {
+      this.value.value.field = field;
+      this.dropdownIsVisible = false;
+    },
   },
 };
 </script>
@@ -166,6 +206,55 @@ $searchBarSize: $base-space * 4;
       color: $black-37;
     }
   }
+  &__fields {
+    max-width: 30%;
+    border-left: 1px solid $black-37;
+    flex-shrink: 0;
+    &__header {
+      display: flex;
+      gap: $base-space;
+      align-items: center;
+      padding-left: $base-space;
+      min-width: 0;
+      &__text {
+        @include truncate;
+      }
+      &:hover {
+        cursor: pointer;
+        color: $black-87;
+      }
+      .svg-icon {
+        flex-shrink: 0;
+      }
+    }
+    &__content {
+      list-style: none;
+      padding: $base-space;
+      margin: 0;
+      li {
+        padding: $base-space;
+        border-radius: $border-radius-s;
+        transition: background-color 0.3s ease;
+        &:hover {
+          background: $black-4;
+          cursor: pointer;
+          transition: background-color 0.3s ease;
+        }
+      }
+      .button {
+        display: block;
+        max-width: 200px;
+        text-align: left;
+        padding: 0;
+        font-weight: normal;
+        @include truncate;
+      }
+    }
+    :deep(.dropdown__content) {
+      left: auto;
+      right: -$base-space;
+    }
+  }
 }
 .button[data-title] {
   overflow: visible;

frontend/pages/dataset/_id/annotation-mode/useAnnotationModeViewModel.ts

@@ -62,7 +62,7 @@ export const useAnnotationModeViewModel = () => {
       },
       {
         key: "search",
-        value: recordCriteria.value.committed.searchText,
+        value: recordCriteria.value.committed.searchText.urlParams,
       },
       {
         key: "metadata",

frontend/translation/de.js

@@ -7,6 +7,7 @@ export default {
   minimize: "Minimieren",
   select: "Auswählen",
   search: "Suchen",
+  searchPlaceholder: "Eingabe einer Abfrage",
   searchDatasets: "Durchsuche Datensätze",
   expand: "Erweitern",
   copied: "Kopiert",

frontend/translation/en.js

@@ -7,6 +7,7 @@ export default {
   minimize: "Minimize",
   select: "Select",
   search: "Search",
+  searchPlaceholder: "Introduce a query",
   searchDatasets: "Search datasets",
   expand: "Expand",
   copied: "Copied",

frontend/v1/domain/entities/record/RecordCriteria.test.ts

@@ -421,7 +421,9 @@ describe("RecordCriteria", () => {
         ""
       );
 
-      criteria.searchText = "Can ML help to improve your business processes?";
+      criteria.searchText.complete(
+        "Can ML help to improve your business processes?"
+      );
 
       expect(criteria.hasChanges).toBe(true);
     });
@@ -503,7 +505,7 @@ describe("RecordCriteria", () => {
 
       criteria.page.goTo(2);
       criteria.status = "submitted";
-      criteria.searchText = "Love ML";
+      criteria.searchText.complete("Love ML");
       criteria.metadata.value = [
         { name: "metadata1", value: ["value1"] },
         { name: "metadata2", value: ["value2"] },
@@ -539,7 +541,7 @@ describe("RecordCriteria", () => {
 
       criteria.page.goTo(1);
       criteria.status = "discarded";
-      criteria.searchText = "Do you love AI?";
+      criteria.searchText.complete("Do you love AI?");
       criteria.metadata.complete("your_feel.sad");
       criteria.sortBy.complete("record.inserted_at.asc");
       criteria.similaritySearch.order = "least";
@@ -829,7 +831,9 @@ describe("RecordCriteria", () => {
 
       criteria.reset();
 
-      expect(criteria.searchText).toEqual("Can AI help us?");
+      expect(criteria.searchText).toEqual({
+        value: { field: "all", text: "Can AI help us?" },
+      });
     });
   });
 });