diff options
-rw-r--r-- | src/components/Global/Search.vue | 64 | ||||
-rw-r--r-- | src/locales/en-US.json | 2 | ||||
-rw-r--r-- | src/views/Health/Sensors/Sensors.vue | 17 |
3 files changed, 81 insertions, 2 deletions
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue new file mode 100644 index 00000000..d3050170 --- /dev/null +++ b/src/components/Global/Search.vue @@ -0,0 +1,64 @@ +<template> + <div class="search-global"> + <b-form-group + :label="$t('global.form.search')" + label-for="searchInput" + label-sr-only + 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" + v-model="filter" + type="text" + :placeholder="placeholder" + @input="onChangeInput" + ></b-form-input> + </b-input-group> + </b-form-group> + </div> +</template> + +<script> +import IconSearch from '@carbon/icons-vue/es/search/16'; +export default { + name: 'Search', + components: { IconSearch }, + props: { + placeholder: { + type: String, + default: () => { + return this.$t('global.form.search'); + } + } + }, + data() { + return { + filter: null + }; + }, + methods: { + onChangeInput() { + this.$emit('changeSearch', this.filter); + } + } +}; +</script> + +<style lang="scss" scoped> +@import 'src/assets/styles/helpers'; + +#searchInput { + padding-left: ($spacer * 2); +} +.search-icon { + position: absolute; + left: 10px; + top: 12px; + z-index: 4; + stroke: $gray-400; +} +</style> diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 4636503b..9fc64d0b 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -29,6 +29,7 @@ "lengthMustBeBetween": "Length must be between %{min} – %{max} characters", "mustBeAtLeast": "Must be at least %{value}", "required": "Required", + "search": "Search", "selectAnOption": "Select an option", "valueMustBeBetween": "Value must be between %{min} – %{max}" }, @@ -321,6 +322,7 @@ } }, "pageSensors": { + "searchForSensors": "Search for sensors", "table": { "currentValue": "Current value", "lowerWarning": "Lower warning", diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue index 5379eae8..3b368976 100644 --- a/src/views/Health/Sensors/Sensors.vue +++ b/src/views/Health/Sensors/Sensors.vue @@ -2,7 +2,13 @@ <b-container fluid="xl"> <page-title /> <b-row> - <b-col xl="12" class="text-right"> + <b-col md="5" xl="4"> + <search + :placeholder="$t('pageSensors.searchForSensors')" + @changeSearch="onChangeSearchInput" + /> + </b-col> + <b-col md="7" xl="8" class="text-right"> <table-filter :filters="tableFilters" @filterChange="onFilterChange" /> </b-col> </b-row> @@ -32,6 +38,7 @@ :fields="fields" :sort-desc="true" :sort-compare="sortCompare" + :filter="searchFilter" @row-selected="onRowSelected($event, filteredSensors.length)" > <!-- Checkbox column --> @@ -76,6 +83,7 @@ <script> import PageTitle from '../../../components/Global/PageTitle'; +import Search from '../../../components/Global/Search'; import StatusIcon from '../../../components/Global/StatusIcon'; import TableFilter from '../../../components/Global/TableFilter'; import TableToolbar from '@/components/Global/TableToolbar'; @@ -98,6 +106,7 @@ export default { name: 'Sensors', components: { PageTitle, + Search, StatusIcon, TableFilter, TableToolbar, @@ -155,7 +164,8 @@ export default { values: SENSOR_STATUS } ], - activeFilters: [] + activeFilters: [], + searchFilter: null }; }, computed: { @@ -198,6 +208,9 @@ export default { }, onFilterChange({ activeFilters }) { this.activeFilters = activeFilters; + }, + onChangeSearchInput(event) { + this.searchFilter = event; } } }; |