24.06.35: added filters module filter-search.vue [WTEL-4530]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.6.31",
+  "version": "24.6.35",
   "private": false,
   "scripts": {
     "dev": "vite",

src/components/wt-search-bar/wt-search-bar.vue

@@ -43,7 +43,7 @@
         <wt-context-menu
           v-if="searchMode"
           :options="searchModeOptions"
-          @click="emit('change:search-mode', $event.option)"
+          @click="updateSearchMode"
         >
           <template #activator>
             <wt-tooltip>
@@ -117,6 +117,10 @@ const emit = defineEmits([
   'input',
   'search',
   'enter',
+  'update:search-mode',
+  /**
+   * @deprecated
+   */
   'change:search-mode',
 ]);
 
@@ -144,6 +148,11 @@ function handleKeyup(event) {
     event.preventDefault();
   }
 }
+
+function updateSearchMode({ option }) {
+  emit('update:search-mode', option);
+  emit('change:search-mode', option);
+}
 </script>
 
 <style lang="scss">

src/modules/Filters/components/filter-search.vue

@@ -0,0 +1,79 @@
+<template>
+  <wt-search-bar
+    :search-mode="multisearch && filterName"
+    :search-mode-options="multisearch && searchModeOpts"
+    :value="localValue"
+    class="filter-search"
+    @input="localValue = $event"
+    @search="setValue({ name: filterName, value: localValue })"
+    @update:search-mode="changeMode"
+  />
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { useStore } from 'vuex';
+import FilterEvent from '../enums/FilterEvent.enum.js';
+
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
+  },
+  multisearch: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    type: String,
+    default: 'q',
+  },
+  searchModeOpts: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const store = useStore();
+
+function getValue(filter) {
+  return store.getters[`${props.namespace}/GET_FILTER`](filter);
+}
+
+function setValue(payload) {
+  return store.dispatch(`${props.namespace}/SET_FILTER`, payload);
+}
+
+const filterName = ref(props.multisearch ? props.searchModeOpts[0].value : props.name);
+
+const filterValue = computed(() => getValue(filterName.value));
+
+const localValue = ref(filterValue.value);
+
+async function changeMode({ value }, { clearValue = true } = {}) {
+  if (clearValue) await setValue({ name: filterName.value, value: '' });
+  filterName.value = value;
+}
+
+function restoreSearchMode() {
+  const mode = props.searchModeOpts.find(({ value }) => !!getValue(value));
+  if (mode) changeMode({ value: mode.value }, { clearValue: false });
+}
+
+function subscribe(payload) {
+  store.dispatch(`${props.namespace}/SUBSCRIBE`, payload);
+}
+
+subscribe({
+  event: FilterEvent.RESTORED,
+  callback: restoreSearchMode,
+});
+
+watch(() => filterValue.value, () => {
+  localValue.value = filterValue.value;
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>