Global Search component
Added global Search component to Sensors page.
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I3121cc4e582c782fa7e9937738cefbeddc23610e
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
new file mode 100644
index 0000000..d305017
--- /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 4636503..9fc64d0 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 5379eae..3b36897 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 @@
name: 'Sensors',
components: {
PageTitle,
+ Search,
StatusIcon,
TableFilter,
TableToolbar,
@@ -155,7 +164,8 @@
values: SENSOR_STATUS
}
],
- activeFilters: []
+ activeFilters: [],
+ searchFilter: null
};
},
computed: {
@@ -198,6 +208,9 @@
},
onFilterChange({ activeFilters }) {
this.activeFilters = activeFilters;
+ },
+ onChangeSearchInput(event) {
+ this.searchFilter = event;
}
}
};