diff options
author | Vitalii Lysak <v.lysak@dunice.net> | 2022-08-04 12:15:00 +0300 |
---|---|---|
committer | Vitalii Lysak <v.lysak@dunice.net> | 2022-08-04 12:15:00 +0300 |
commit | a02d02109352c8c72b92272b01fce63d3486efde (patch) | |
tree | 4edcd1ead6f6ccb47e570ef83af64d962528f85e /src/components/_sila/Global/Search.vue | |
parent | 056f1371ef17398ac61dbf52b1840db0c73caf8f (diff) | |
download | webui-vue-a02d02109352c8c72b92272b01fce63d3486efde.tar.xz |
SILABMC-224: add search by select
Diffstat (limited to 'src/components/_sila/Global/Search.vue')
-rw-r--r-- | src/components/_sila/Global/Search.vue | 82 |
1 files changed, 57 insertions, 25 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> |