Merge pull request #25 from webitel/feature/contacts-variables-search

feature: variables search added to contacts list [WTEL-3888]
webitel · Oct 23, 2023 · 5bfcee2 · 5bfcee2
2 parents f7fa313 + 6173ff3
commit 5bfcee2
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 8 deletions.
diff --git a/src/modules/contacts/api/ContactsAPI.js b/src/modules/contacts/api/ContactsAPI.js
@@ -42,6 +42,9 @@ const getList = async (params) => {
   } else if (params[SearchMode.ABOUT]) {
     searchValue = params[SearchMode.ABOUT];
     searchKey = SearchMode.ABOUT;
+  } else if (params[SearchMode.VARIABLES]) {
+    searchValue = params[SearchMode.VARIABLES];
+    searchKey = SearchMode.VARIABLES;
   }
 
   const changedParams = {
@@ -50,6 +53,17 @@ const getList = async (params) => {
     qin: searchKey,
   };
 
+  const transformations = [
+    sanitize(fieldsToSend),
+    merge(getDefaultGetParams()),
+    camelToSnake(),
+  ];
+
+  // This code needed for adding starToSearch method to applyTransform while searchKey !== SearchMode.VARIABLES because '*' in variables search mode brokes backend logic.
+  if (searchKey !== SearchMode.VARIABLES) {
+    transformations.push(starToSearch('q'));
+  }
+
   const {
     page,
     size,
@@ -58,12 +72,8 @@ const getList = async (params) => {
     fields,
     id,
     qin,
-  } = applyTransform(changedParams, [
-    sanitize(fieldsToSend),
-    merge(getDefaultGetParams()),
-    starToSearch('q'),
-    camelToSnake(),
-  ]);
+  } = applyTransform(changedParams, transformations);
+
   try {
     const response = await service.searchContacts(
       page,

diff --git a/src/modules/contacts/modules/filters/components/filter-search.vue b/src/modules/contacts/modules/filters/components/filter-search.vue
@@ -1,13 +1,16 @@
 <template>
   <form
     class="filter-search"
-    @submit.prevent>
+    @submit.prevent
+  >
     <wt-search-bar
+      :hint="searchBarHint"
+      :v="v$.localValue"
       :value="localValue"
       debounce
       @search="setLocalValue($event)"
     >
-      <template v-slot:additional-actions>
+      <template v-slot:additional-actions="options">
         <wt-context-menu
           :options="searchModeOptions"
           @click="changeMode($event.option)"
@@ -16,6 +19,7 @@
             <wt-tooltip>
               <template v-slot:activator>
                 <wt-icon-btn
+                  :color="options.invalid ? 'error' : 'default'"
                   icon="filter"
                 ></wt-icon-btn>
               </template>
@@ -36,6 +40,7 @@
 </template>
 
 <script setup>
+import { useVuelidate } from '@vuelidate/core';
 import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
 import {
   watch,
@@ -45,6 +50,7 @@ import {
 } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
+import variableSearchValidator from '@webitel/ui-sdk/src/validators/variableSearchValidator';
 import SearchMode from '../enums/SearchMode.enum';
 
 const props = defineProps({
@@ -72,12 +78,33 @@ const searchModeOptions = computed(() => [
     value: SearchMode.ABOUT,
     text: t('vocabulary.description'),
   },
+  {
+    value: SearchMode.VARIABLES,
+    text: t('vocabulary.variables', 1),
+  },
 ]);
 
 const filterQuery = ref(SearchMode.NAME);
 const filterSchema = computed(() => (
   getNamespacedState(store.state, `${props.namespace}`)[filterQuery.value]));
 
+const searchBarHint = computed(() => {
+  switch (filterQuery.value) {
+    case SearchMode.VARIABLES:
+      return t('webitelUI.searchBar.variableSearchHint');
+    default:
+      return null;
+  }
+});
+
+const v$ = useVuelidate(computed(() => {
+  return {
+    localValue: filterQuery.value === SearchMode.VARIABLES ? { variableSearchValidator } : {},
+  };
+}), { localValue }, { $autoDirty: true });
+
+v$.value.$touch();
+
 function getValue(filter) {
   return store.getters[`${props.namespace}/GET_FILTER`](filter);
 }

diff --git a/src/modules/contacts/modules/filters/enums/SearchMode.enum.js b/src/modules/contacts/modules/filters/enums/SearchMode.enum.js
@@ -2,6 +2,7 @@ const SearchMode = Object.freeze({
   NAME: 'name',
   LABELS: 'labels',
   ABOUT: 'about',
+  VARIABLES: 'variables',
 });
 
 export default SearchMode;
diff --git a/src/modules/contacts/modules/filters/store/filters.js b/src/modules/contacts/modules/filters/store/filters.js
@@ -18,6 +18,7 @@ const state = {
   [SearchMode.NAME]: new BaseFilterSchema(),
   [SearchMode.LABELS]: new BaseFilterSchema(),
   [SearchMode.ABOUT]: new BaseFilterSchema(),
+  [SearchMode.VARIABLES]: new BaseFilterSchema(),
 };
 
 const getters = {