From 1a24de78fceca238f504c7927fa3a27b35c838b8 Mon Sep 17 00:00:00 2001
From: volodymyr <volodymyr.dechtiaruk@gmail.com>
Date: Fri, 20 Oct 2023 11:59:57 +0300
Subject: [PATCH 1/2] feature: variables search added to contacts list
 [WTEL-3888]

---
 src/app/locale/en/en.js                       |  3 ++
 src/app/locale/ru/ru.js                       |  3 ++
 src/app/locale/ua/ua.js                       |  3 ++
 src/modules/contacts/api/ContactsAPI.js       | 21 +++++++++----
 .../filters/components/filter-search.vue      | 31 +++++++++++++++++--
 .../modules/filters/enums/SearchMode.enum.js  |  1 +
 .../contacts/modules/filters/store/filters.js |  1 +
 .../validators/variableSearchValidator.js     |  4 +++
 8 files changed, 59 insertions(+), 8 deletions(-)
 create mode 100644 src/utils/validators/variableSearchValidator.js

diff --git a/src/app/locale/en/en.js b/src/app/locale/en/en.js
index 86918bef..e5a3e3f7 100644
--- a/src/app/locale/en/en.js
+++ b/src/app/locale/en/en.js
@@ -35,4 +35,7 @@ export default {
       [AccessMode.MANAGE]: 'Allow with delegation',
     },
   },
+  filters: {
+    variableSearchHint: 'Query format: "key=value"',
+  },
 };
diff --git a/src/app/locale/ru/ru.js b/src/app/locale/ru/ru.js
index fa991a27..9592eaeb 100644
--- a/src/app/locale/ru/ru.js
+++ b/src/app/locale/ru/ru.js
@@ -35,4 +35,7 @@ export default {
       [AccessMode.MANAGE]: 'Управление',
     },
   },
+  filters: {
+    variableSearchHint: 'Формат запроса: "ключ=значение"',
+  },
 };
diff --git a/src/app/locale/ua/ua.js b/src/app/locale/ua/ua.js
index ceead073..da1feba5 100644
--- a/src/app/locale/ua/ua.js
+++ b/src/app/locale/ua/ua.js
@@ -35,4 +35,7 @@ export default {
       [AccessMode.MANAGE]: 'Управління',
     },
   },
+  filters: {
+    variableSearchHint: 'Формат запиту: "ключ=значення"',
+  },
 };
diff --git a/src/modules/contacts/api/ContactsAPI.js b/src/modules/contacts/api/ContactsAPI.js
index acd02685..bfe22fb2 100644
--- 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.VARIABLE]) {
+    searchValue = params[SearchMode.VARIABLE];
+    searchKey = 'variables';
   }
 
   const changedParams = {
@@ -50,6 +53,16 @@ const getList = async (params) => {
     qin: searchKey,
   };
 
+  const transformations = [
+    sanitize(fieldsToSend),
+    merge(getDefaultGetParams()),
+    camelToSnake(),
+  ];
+
+  if (searchKey !== 'variables') {
+    transformations.push(starToSearch('q'));
+  }
+
   const {
     page,
     size,
@@ -58,12 +71,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
index fe5ffa28..2d6e16f8 100644
--- 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 ? 'danger' : '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 '../../../../../utils/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.VARIABLE,
+    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.VARIABLE:
+      return t('filters.variableSearchHint');
+    default:
+      return null;
+  }
+});
+
+const v$ = useVuelidate(computed(() => {
+  return {
+    localValue: filterQuery.value === SearchMode.VARIABLE ? { 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
index c1c274e4..84558ac5 100644
--- 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',
+  VARIABLE: 'variable',
 });
 
 export default SearchMode;
diff --git a/src/modules/contacts/modules/filters/store/filters.js b/src/modules/contacts/modules/filters/store/filters.js
index 709cfba7..52ce9e47 100644
--- 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.VARIABLE]: new BaseFilterSchema(),
 };
 
 const getters = {
diff --git a/src/utils/validators/variableSearchValidator.js b/src/utils/validators/variableSearchValidator.js
new file mode 100644
index 00000000..7c2608fd
--- /dev/null
+++ b/src/utils/validators/variableSearchValidator.js
@@ -0,0 +1,4 @@
+export default function variableSearchValidator(value) {
+  const isValid = /^(?!.*\s)[^\s=]+=[^\s=]+$/.test(value);
+  return !value || isValid;
+};

From 4853e1897ba127d8f0da94b3da0d38b0c3cfe67b Mon Sep 17 00:00:00 2001
From: volodymyr <volodymyr.dechtiaruk@gmail.com>
Date: Fri, 20 Oct 2023 16:59:02 +0300
Subject: [PATCH 2/2] refactor: code refactored due to codereview

---
 src/app/locale/en/en.js                              |  3 ---
 src/app/locale/ru/ru.js                              |  3 ---
 src/app/locale/ua/ua.js                              |  3 ---
 src/modules/contacts/api/ContactsAPI.js              |  9 +++++----
 .../modules/filters/components/filter-search.vue     | 12 ++++++------
 .../modules/filters/enums/SearchMode.enum.js         |  2 +-
 .../contacts/modules/filters/store/filters.js        |  2 +-
 src/utils/validators/variableSearchValidator.js      |  4 ----
 8 files changed, 13 insertions(+), 25 deletions(-)
 delete mode 100644 src/utils/validators/variableSearchValidator.js

diff --git a/src/app/locale/en/en.js b/src/app/locale/en/en.js
index e5a3e3f7..86918bef 100644
--- a/src/app/locale/en/en.js
+++ b/src/app/locale/en/en.js
@@ -35,7 +35,4 @@ export default {
       [AccessMode.MANAGE]: 'Allow with delegation',
     },
   },
-  filters: {
-    variableSearchHint: 'Query format: "key=value"',
-  },
 };
diff --git a/src/app/locale/ru/ru.js b/src/app/locale/ru/ru.js
index 9592eaeb..fa991a27 100644
--- a/src/app/locale/ru/ru.js
+++ b/src/app/locale/ru/ru.js
@@ -35,7 +35,4 @@ export default {
       [AccessMode.MANAGE]: 'Управление',
     },
   },
-  filters: {
-    variableSearchHint: 'Формат запроса: "ключ=значение"',
-  },
 };
diff --git a/src/app/locale/ua/ua.js b/src/app/locale/ua/ua.js
index da1feba5..ceead073 100644
--- a/src/app/locale/ua/ua.js
+++ b/src/app/locale/ua/ua.js
@@ -35,7 +35,4 @@ export default {
       [AccessMode.MANAGE]: 'Управління',
     },
   },
-  filters: {
-    variableSearchHint: 'Формат запиту: "ключ=значення"',
-  },
 };
diff --git a/src/modules/contacts/api/ContactsAPI.js b/src/modules/contacts/api/ContactsAPI.js
index bfe22fb2..27cd17db 100644
--- a/src/modules/contacts/api/ContactsAPI.js
+++ b/src/modules/contacts/api/ContactsAPI.js
@@ -42,9 +42,9 @@ const getList = async (params) => {
   } else if (params[SearchMode.ABOUT]) {
     searchValue = params[SearchMode.ABOUT];
     searchKey = SearchMode.ABOUT;
-  } else if (params[SearchMode.VARIABLE]) {
-    searchValue = params[SearchMode.VARIABLE];
-    searchKey = 'variables';
+  } else if (params[SearchMode.VARIABLES]) {
+    searchValue = params[SearchMode.VARIABLES];
+    searchKey = SearchMode.VARIABLES;
   }
 
   const changedParams = {
@@ -59,7 +59,8 @@ const getList = async (params) => {
     camelToSnake(),
   ];
 
-  if (searchKey !== 'variables') {
+  // 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'));
   }
 
diff --git a/src/modules/contacts/modules/filters/components/filter-search.vue b/src/modules/contacts/modules/filters/components/filter-search.vue
index 2d6e16f8..b977b301 100644
--- a/src/modules/contacts/modules/filters/components/filter-search.vue
+++ b/src/modules/contacts/modules/filters/components/filter-search.vue
@@ -19,7 +19,7 @@
             <wt-tooltip>
               <template v-slot:activator>
                 <wt-icon-btn
-                  :color="options.invalid ? 'danger' : 'default'"
+                  :color="options.invalid ? 'error' : 'default'"
                   icon="filter"
                 ></wt-icon-btn>
               </template>
@@ -50,7 +50,7 @@ import {
 } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
-import variableSearchValidator from '../../../../../utils/validators/variableSearchValidator';
+import variableSearchValidator from '@webitel/ui-sdk/src/validators/variableSearchValidator';
 import SearchMode from '../enums/SearchMode.enum';
 
 const props = defineProps({
@@ -79,7 +79,7 @@ const searchModeOptions = computed(() => [
     text: t('vocabulary.description'),
   },
   {
-    value: SearchMode.VARIABLE,
+    value: SearchMode.VARIABLES,
     text: t('vocabulary.variables', 1),
   },
 ]);
@@ -90,8 +90,8 @@ const filterSchema = computed(() => (
 
 const searchBarHint = computed(() => {
   switch (filterQuery.value) {
-    case SearchMode.VARIABLE:
-      return t('filters.variableSearchHint');
+    case SearchMode.VARIABLES:
+      return t('webitelUI.searchBar.variableSearchHint');
     default:
       return null;
   }
@@ -99,7 +99,7 @@ const searchBarHint = computed(() => {
 
 const v$ = useVuelidate(computed(() => {
   return {
-    localValue: filterQuery.value === SearchMode.VARIABLE ? { variableSearchValidator } : {},
+    localValue: filterQuery.value === SearchMode.VARIABLES ? { variableSearchValidator } : {},
   };
 }), { localValue }, { $autoDirty: true });
 
diff --git a/src/modules/contacts/modules/filters/enums/SearchMode.enum.js b/src/modules/contacts/modules/filters/enums/SearchMode.enum.js
index 84558ac5..28b43c27 100644
--- a/src/modules/contacts/modules/filters/enums/SearchMode.enum.js
+++ b/src/modules/contacts/modules/filters/enums/SearchMode.enum.js
@@ -2,7 +2,7 @@ const SearchMode = Object.freeze({
   NAME: 'name',
   LABELS: 'labels',
   ABOUT: 'about',
-  VARIABLE: 'variable',
+  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
index 52ce9e47..9157a9bc 100644
--- a/src/modules/contacts/modules/filters/store/filters.js
+++ b/src/modules/contacts/modules/filters/store/filters.js
@@ -18,7 +18,7 @@ const state = {
   [SearchMode.NAME]: new BaseFilterSchema(),
   [SearchMode.LABELS]: new BaseFilterSchema(),
   [SearchMode.ABOUT]: new BaseFilterSchema(),
-  [SearchMode.VARIABLE]: new BaseFilterSchema(),
+  [SearchMode.VARIABLES]: new BaseFilterSchema(),
 };
 
 const getters = {
diff --git a/src/utils/validators/variableSearchValidator.js b/src/utils/validators/variableSearchValidator.js
deleted file mode 100644
index 7c2608fd..00000000
--- a/src/utils/validators/variableSearchValidator.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export default function variableSearchValidator(value) {
-  const isValid = /^(?!.*\s)[^\s=]+=[^\s=]+$/.test(value);
-  return !value || isValid;
-};