SILABMC-224: add search by select

6 files changed, 111 insertions, 29 deletions

diff --git a/src/components/_sila/Global/Search.vue b/src/components/_sila/Global/Search.vue
index ac8f9bfb..08be4ebb 100644
--- a/src/components/_sila/Global/Search.vue
+++ b/src/components/_sila/Global/Search.vue
@@ -6,32 +6,49 @@
       label-class="invisible"
       class="mb-2"
     >
-      <b-input-group size="md" class="align-items-center">
-        <b-input-group-prepend>
-          <icon-search class="search-icon" />
-        </b-input-group-prepend>
-        <b-form-input
-          :id="`searchInput-${_uid}`"
-          ref="searchInput"
-          v-model="filter"
-          class="search-input"
-          type="text"
-          :aria-label="$t('global.form.search')"
-          :placeholder="placeholder"
-          @input="onChangeInput"
+      <div class="d-flex">
+        <b-form-select
+          v-if="showSearchBy"
+          v-model="searchBy"
+          class="mr-2 w-50 search-selector"
+          :options="selectOptions"
+          @change="onSelect"
         >
-        </b-form-input>
-        <b-button
-          v-if="filter"
-          variant="link"
-          class="btn-icon-only input-action-btn"
-          :title="$t('global.ariaLabel.clearSearch')"
-          @click="onClearSearch"
-        >
-          <icon-close />
-          <span class="sr-only">{{ $t('global.ariaLabel.clearSearch') }}</span>
-        </b-button>
-      </b-input-group>
+          <template #first>
+            <b-form-select-option :value="null" disabled>{{
+              $t('pagePostCodeLogs.table.searchBy')
+            }}</b-form-select-option>
+          </template>
+        </b-form-select>
+        <b-input-group size="md" class="align-items-center">
+          <b-input-group-prepend>
+            <icon-search class="search-icon" />
+          </b-input-group-prepend>
+          <b-form-input
+            :id="`searchInput-${_uid}`"
+            ref="searchInput"
+            v-model="filter"
+            class="search-input"
+            type="text"
+            :aria-label="$t('global.form.search')"
+            :placeholder="placeholder"
+            @input="onChangeInput"
+          >
+          </b-form-input>
+          <b-button
+            v-if="filter"
+            variant="link"
+            class="btn-icon-only input-action-btn"
+            :title="$t('global.ariaLabel.clearSearch')"
+            @click="onClearSearch"
+          >
+            <icon-close />
+            <span class="sr-only">{{
+              $t('global.ariaLabel.clearSearch')
+            }}</span>
+          </b-button>
+        </b-input-group>
+      </div>
     </b-form-group>
   </div>
 </template>
@@ -50,13 +67,25 @@ export default {
         return this.$t('global.form.search');
       },
     },
+    selectOptions: {
+      type: Array,
+      default: () => [],
+    },
+    showSearchBy: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
       filter: null,
+      searchBy: 'all',
     };
   },
   methods: {
+    onSelect() {
+      this.$emit('search-by', this.searchBy);
+    },
     onChangeInput() {
       this.$emit('change-search', this.filter);
     },
@@ -80,4 +109,7 @@ export default {
   z-index: 4;
   stroke: gray('400');
 }
+.search-selector {
+  font-size: 14px;
+}
 </style>
diff --git a/src/components/_sila/Mixins/SearchFilterMixin.js b/src/components/_sila/Mixins/SearchFilterMixin.js
index a4819e26..5cdf7296 100644
--- a/src/components/_sila/Mixins/SearchFilterMixin.js
+++ b/src/components/_sila/Mixins/SearchFilterMixin.js
@@ -4,6 +4,7 @@ const SearchFilterMixin = {
   methods: {
     onChangeSearchInput(searchValue) {
       this.searchFilter = searchValue;
+      console.log('this.searchFilter!!!', this.searchFilter);
     },
     onClearSearchInput() {
       this.searchFilter = null;
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index f5cfed5b..02d72e09 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -295,7 +295,8 @@
       "searchLogs": "Search logs",
       "severity": "Severity",
       "status": "Status",
-      "type": "Type"
+      "type": "Type",
+      "all": "All"
     },
     "toast": {
       "errorDelete": "Error deleting %{count} log. | Error deleting %{count} logs.",
@@ -679,7 +680,9 @@
       "bootCount": "Boot count",
       "postCode": "POST code",
       "searchLogs": "Search logs",
-      "timeStampOffset": "Time stamp offset"
+      "all": "All",
+      "timeStampOffset": "Time stamp offset",
+      "searchBy": "Search by"
     }
   },
   "pageProfileSettings": {
diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json
index 089cf572..cb1523aa 100644
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@@ -295,7 +295,8 @@
       "searchLogs": "Поиск записей в журнале событий",
       "severity": "Уровень",
       "status": "Статус",
-      "type": "Тип"
+      "type": "Тип",
+      "all": "Везде"
     },
     "toast": {
       "errorDelete": "Ошибка удаления %{count} записи. | Ошибка уделения %{count} записей.",
@@ -679,7 +680,9 @@
       "bootCount": "Номер загрузки",
       "postCode": "POST код",
       "searchLogs": "Поиск в логах",
-      "timeStampOffset": "Временная метка"
+      "all": "Везде",
+      "timeStampOffset": "Временная метка",
+      "searchBy": "Поиск по"
     }
   },
   "pageProfileSettings": {
diff --git a/src/views/_sila/Logs/EventLogs/EventLogs.vue b/src/views/_sila/Logs/EventLogs/EventLogs.vue
index bc276b29..2a344819 100644
--- a/src/views/_sila/Logs/EventLogs/EventLogs.vue
+++ b/src/views/_sila/Logs/EventLogs/EventLogs.vue
@@ -5,8 +5,11 @@
       <b-col sm="8" xl="6" class="search-block d-sm-flex align-items-end mb-4">
         <search
           :placeholder="$t('pageEventLogs.table.searchLogs')"
+          :show-search-by="true"
+          :select-options="searchSelectOptions"
           data-test-id="eventLogs-input-searchLogs"
           @change-search="onChangeSearchInput"
+          @search-by="onSearchBy"
           @clear-search="onClearSearchInput"
         />
         <div class="ml-sm-4">
@@ -83,6 +86,8 @@
           :per-page="perPage"
           :current-page="currentPage"
           :filter="searchFilter"
+          :filter-included-fields="filterIncludedFields"
+          :filter-debounce="300"
           :busy="isBusy"
           @filtered="onFiltered"
           @row-selected="onRowSelected($event, filteredLogs.length)"
@@ -360,6 +365,20 @@ export default {
           tdClass: 'text-right text-nowrap',
         },
       ],
+      searchSelectOptions: [
+        {
+          value: 'all',
+          text: this.$t('pageEventLogs.table.all'),
+        },
+        {
+          value: 'id',
+          text: this.$t('pageEventLogs.table.id'),
+        },
+        {
+          value: 'description',
+          text: this.$t('pageEventLogs.table.description'),
+        },
+      ],
       tableFilters: [
         {
           key: 'severity',
@@ -386,6 +405,7 @@ export default {
       itemsPerPageOptions: itemsPerPageOptions,
       perPage: perPage,
       searchFilter: searchFilter,
+      filterIncludedFields: null,
       searchTotalFilteredRows: 0,
       selectedRows: selectedRows,
       tableHeaderCheckboxModel: tableHeaderCheckboxModel,
@@ -443,6 +463,9 @@ export default {
     });
   },
   methods: {
+    onSearchBy(field) {
+      this.filterIncludedFields = field === 'all' ? null : [field];
+    },
     changelogStatus(row) {
       this.$store
         .dispatch('eventLog/updateEventLogStatus', {
diff --git a/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue
index 63b74bc9..33c5e26a 100644
--- a/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue
+++ b/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue
@@ -5,7 +5,10 @@
       <b-col sm="8" xl="6" class="search-block d-sm-flex align-items-end mb-4">
         <search
           :placeholder="$t('pagePostCodeLogs.table.searchLogs')"
+          :show-search-by="true"
+          :select-options="searchSelectOptions"
           @change-search="onChangeSearchInput"
+          @search-by="onSearchBy"
           @clear-search="onClearSearchInput"
         />
         <div class="ml-sm-4">
@@ -65,6 +68,8 @@
           :per-page="perPage"
           :current-page="currentPage"
           :filter="searchFilter"
+          :filter-included-fields="filterIncludedFields"
+          :filter-debounce="300"
           :busy="isBusy"
           @filtered="onFiltered"
           @row-selected="onRowSelected($event, filteredLogs.length)"
@@ -239,6 +244,17 @@ export default {
           tdClass: 'text-right text-nowrap',
         },
       ],
+      searchSelectOptions: [
+        {
+          value: 'all',
+          text: this.$t('pagePostCodeLogs.table.all'),
+        },
+        {
+          value: 'bootCount',
+          text: this.$t('pagePostCodeLogs.table.bootCount'),
+        },
+        { value: 'postCode', text: this.$t('pagePostCodeLogs.table.postCode') },
+      ],
       expandRowLabel,
       activeFilters: [],
       currentPage: currentPage,
@@ -247,6 +263,7 @@ export default {
       itemsPerPageOptions: itemsPerPageOptions,
       perPage: perPage,
       searchFilter: searchFilter,
+      filterIncludedFields: null,
       searchTotalFilteredRows: 0,
       selectedRows: selectedRows,
       tableHeaderCheckboxModel: tableHeaderCheckboxModel,
@@ -306,6 +323,9 @@ export default {
     });
   },
   methods: {
+    onSearchBy(field) {
+      this.filterIncludedFields = field === 'all' ? null : [field];
+    },
     exportAllLogsString() {
       {
         return this.$store.getters['postCodeLogs/allPostCodes'].map(