✨ FEAT: Search for feedbacktask

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

@@ -2,18 +2,18 @@
   <div class="filters">
     <span
       class="filters__component"
-      v-for="{ id } in sortedFiltersValue"
+      v-for="{ id, componentType, placeholder, options } in sortedFiltersValue"
       :key="id"
     >
       <SearchBarBase
-        v-if="getFilterById(id).component_type === 'searchBar'"
-        :current-search-text="getFilterById(id).value"
-        @on-search-text="onSearch(id, $event)"
-        :placeholder="getFilterById(id).placeholder"
+        v-if="componentType === 'searchBar'"
+        :placeholder="placeholder"
+        v-model="searchInput"
       />
+
       <StatusFilter
-        v-if="getFilterById(id).component_type === 'statusSelector'"
-        :options="getFilterById(id).options"
+        v-if="componentType === 'statusSelector'"
+        :options="options"
         v-model="selectedStatus"
       />
     </span>
@@ -44,16 +44,25 @@ export default {
   data: () => {
     return {
       selectedStatus: null,
+      searchInput: null,
+      sortedFiltersValue: [],
     };
   },
-  mounted() {
+  beforeMount() {
     this.selectedStatus = this.selectedStatus || this.statusFromRoute;
+    this.searchInput = this.searchInput ?? this.searchFromRoute;
 
     this.$root.$on("reset-status-filter", () => {
       this.selectedStatus = this.statusFromRoute;
     });
-  },
+    this.$root.$on("reset-search-filter", () => {
+      this.searchInput = this.searchFromRoute;
+    });
 
+    this.sortedFiltersValue = Object.values(this.filters).sort((a, b) =>
+      a.order > b.order ? -1 : 1
+    );
+  },
   computed: {
     filtersFromVuex() {
       return getFiltersByDatasetId(
@@ -62,30 +71,30 @@ export default {
         this.orderBy?.ascendent
       );
     },
-    sortedFiltersValue() {
-      return Object.values(this.filters).sort((a, b) =>
-        a.order > b.order ? -1 : 1
-      );
-    },
     statusFromRoute() {
       return this.$route.query?._status;
     },
+    searchFromRoute() {
+      return this.$route.query?._search;
+    },
   },
   watch: {
     selectedStatus(newValue) {
       this.$root.$emit("status-filter-changed", newValue);
     },
+    async searchInput(searchInput) {
+      this.$root.$emit("search-filter-changed", searchInput);
+    },
   },
   created() {
     this.filters = {
-      // NOTE: HIDE SEARCHBAR FOR MVP
-      // searchText: {
-      //   id: "searchText",
-      //   name: "Search",
-      //   componentType: "searchBar",
-      //   order: 0,
-      //   placeholder: "Introduce your query",
-      // },
+      searchText: {
+        id: "searchText",
+        name: "Search",
+        componentType: "searchBar",
+        order: 0,
+        placeholder: "Introduce your query",
+      },
       statusSelector: {
         id: "statusSelector",
         name: "Status Selector",
@@ -153,13 +162,15 @@ export default {
   },
   beforeDestroy() {
     this.$root.$off("reset-status-filter");
+    this.$root.$off("reset-search-filter");
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .filters {
   display: flex;
+  flex-wrap: wrap;
   gap: $base-space * 2;
   align-items: center;
   padding: $base-space * 2 0;

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

@@ -16,87 +16,99 @@
   -->
 
 <template>
-  <form @submit.prevent="searchText(query)">
-    <div class="searchbar" :class="{ active: query }" :style="searchBarStyles">
-      <BaseIcon
-        v-if="!query"
-        icon-name="search"
-        icon-width="20"
-        icon-height="20"
-      />
-      <BaseButton
-        v-else
-        class="searchbar__button"
-        @click="removeCurrentSearchText()"
-      >
-        <BaseIcon
-          class="searchbar__button__icon"
-          icon-name="close"
-          icon-width="20"
-          icon-height="20"
-        />
-      </BaseButton>
-      <label class="searchbar__label" for="query" v-text="description" />
-      <input
-        ref="input"
-        class="searchbar__input"
-        type="text"
-        name="query"
-        id="query"
-        v-model.lazy="query"
-        :placeholder="placeholder"
-        autocomplete="off"
-      />
-    </div>
-  </form>
+  <div
+    class="search-area"
+    :class="{ active: isSearchActive }"
+    @click="focusInSearch"
+  >
+    <BaseIconWithBadge
+      class="searchbar__icon"
+      :icon="iconType"
+      :show-badge="false"
+      iconColor="#acacac"
+      badge-vertical-position="top"
+      badge-horizontal-position="right"
+      badge-border-color="white"
+      @click-icon="resetValue"
+    />
+    <input
+      ref="searchRef"
+      class="searchbar__input"
+      type="text"
+      v-model.trim="searchValue"
+      :placeholder="placeholder"
+      :aria-description="description"
+      autocomplete="off"
+      @keydown.enter.exact="applySearch"
+      @keydown.arrow-right.stop=""
+      @keydown.arrow-left.stop=""
+      @keydown.delete.exact.stop=""
+      @keydown.enter.exact.stop=""
+    />
+  </div>
 </template>
 
 <script>
 export default {
+  name: "SearchBarComponent",
   props: {
-    currentSearchText: {
+    value: {
       type: String,
-      default: "",
+      default: () => "",
     },
     placeholder: {
       type: String,
-      default: "Introduce your text:",
+      default: () => "",
     },
     description: {
       type: String,
       default: "Introduce your text",
     },
-    bgColor: {
-      type: String,
-      default: "#ffffff",
-    },
   },
-  data: () => ({
-    query: "",
-  }),
+  data() {
+    return {
+      searchValue: "",
+    };
+  },
   computed: {
-    searchBarStyles() {
-      return { backgroundColor: this.bgColor };
+    isSearchActive() {
+      return this.value?.length;
+    },
+    iconType() {
+      return this.searchValue?.length ? "close" : "search";
+    },
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(newValue) {
+        this.searchValue = newValue ?? "";
+      },
     },
   },
   methods: {
-    searchText(query) {
-      this.$refs.input.blur();
-      this.$emit("on-search-text", query);
+    applySearch() {
+      this.$emit("input", this.searchValue);
+      this.looseFocus();
     },
-    removeCurrentSearchText() {
-      this.query = "";
-      this.$emit("on-search-text", "");
+    looseFocus() {
+      this.$refs.searchRef.blur();
+    },
+    focusInSearch() {
+      this.$refs.searchRef.focus();
+    },
+    resetValue() {
+      if (this.searchValue?.length) {
+        this.searchValue = "";
+        this.$emit("input", "");
+      }
     },
-  },
-  created() {
-    this.query = this.currentSearchText;
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.searchbar {
+.search-area {
   display: flex;
   flex: 1;
   align-items: center;
@@ -111,22 +123,17 @@ export default {
     box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
     transition: all 0.2s ease;
   }
-  &__button.button {
+  button {
     display: flex;
     padding: 0;
     &:hover {
       background: $black-4;
     }
   }
-  &__button {
-    &__icon {
-      padding: calc($base-space / 2);
-    }
-  }
-  &__label {
-    @extend %visuallyhidden;
+  &__icon {
+    padding: calc($base-space / 2);
   }
-  &__input {
+  input {
     width: 100%;
     height: 1rem;
     padding: 0;