From a02d02109352c8c72b92272b01fce63d3486efde Mon Sep 17 00:00:00 2001 From: Vitalii Lysak Date: Thu, 4 Aug 2022 12:15:00 +0300 Subject: SILABMC-224: add search by select --- src/components/_sila/Global/Search.vue | 82 +++++++++++++++------- src/components/_sila/Mixins/SearchFilterMixin.js | 1 + src/locales/en-US.json | 7 +- src/locales/ru-RU.json | 7 +- src/views/_sila/Logs/EventLogs/EventLogs.vue | 23 ++++++ src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue | 20 ++++++ 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" > - - - - - + - - - - {{ $t('global.ariaLabel.clearSearch') }} - - + + + + + + + + + + + {{ + $t('global.ariaLabel.clearSearch') + }} + + + @@ -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; +} 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 @@
@@ -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 @@
@@ -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( -- cgit v1.2.3 From 597dbacbb1eec27115b0e8e5dfe1876952f99ac2 Mon Sep 17 00:00:00 2001 From: Vitalii Lysak Date: Thu, 4 Aug 2022 14:24:15 +0300 Subject: add mobile styles for logs search --- src/assets/styles/bmc/_sila/_forms.scss | 9 +++++++++ src/components/_sila/Global/Search.vue | 2 +- src/views/_sila/Logs/EventLogs/EventLogs.vue | 6 +++++- src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue | 6 +++++- 4 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss index 58aaef36..7a0a703a 100644 --- a/src/assets/styles/bmc/_sila/_forms.scss +++ b/src/assets/styles/bmc/_sila/_forms.scss @@ -226,6 +226,15 @@ padding-top: 4px; } +@media (min-width: 1200px) { + .search-block-1200 { + position: absolute; + top: 4.3rem; + right: $spacer; + justify-content: end; + } +} + @media (min-width: 768px) { .search-block { position: absolute; diff --git a/src/components/_sila/Global/Search.vue b/src/components/_sila/Global/Search.vue index 08be4ebb..c25224a7 100644 --- a/src/components/_sila/Global/Search.vue +++ b/src/components/_sila/Global/Search.vue @@ -10,7 +10,7 @@ diff --git a/src/views/_sila/Logs/EventLogs/EventLogs.vue b/src/views/_sila/Logs/EventLogs/EventLogs.vue index 2a344819..b036303e 100644 --- a/src/views/_sila/Logs/EventLogs/EventLogs.vue +++ b/src/views/_sila/Logs/EventLogs/EventLogs.vue @@ -2,7 +2,11 @@ - + - +