Custom search input component integrated (#2170)

- Integrated into main layout already; added to table.vue and
Notebook;

src/plugins/notebook/res/templates/notebook.html

@@ -1,15 +1,9 @@
 <div class="c-notebook">
     <div class="c-notebook__head">
-        <!-- TODO: use search component here -->
+        <search class="c-notebook__search"
-        <div class="c-notebook__search c-search"
-             :class="{ 'is-active': entrySearch }">
-            <input class="c-search__input" type="search"
-                   type="text" tabindex="10000"
                 v-model="entrySearch"
-                   v-on:keyup="search($event)"/>
+                v-on:input="search($event)"
-            <a class="c-search__clear-input icon-x-in-circle"
+                v-on:clear="entrySearch = ''; search($event)"></search>
-               v-on:click="entrySearch = ''; search($event)"></a>
-        </div>
         <div class="c-notebook__controls">
             <div class="select c-notebook__controls__time">
                 <select v-model="showTime">

src/plugins/notebook/src/controllers/NotebookController.js

@@ -26,7 +26,8 @@ define([
     './EmbedController',
     '../../res/templates/notebook.html',
     '../../res/templates/entry.html',
-    '../../res/templates/embed.html'
+    '../../res/templates/embed.html',
+    '../../../../ui/components/controls/search.vue'
 ],
 function (
     Vue,
@@ -34,7 +35,8 @@ function (
     EmbedController,
     NotebookTemplate,
     EntryTemplate,
-    EmbedTemplate
+    EmbedTemplate,
+    search
 ) {
 
     function NotebookController(openmct, domainObject) {
@@ -79,7 +81,8 @@ function (
         var notebookVue = Vue.extend({
             template: NotebookTemplate,
             components: {
-                'notebook-entry': entryComponent
+                'notebook-entry': entryComponent,
+                'search': search.default
             },
             data: function () {
                 return {

src/plugins/telemetryTable/components/table.vue

@@ -19,16 +19,16 @@
                         :class="['is-sortable', sortOptions.key === key ? 'is-sorting' : '', sortOptions.direction].join(' ')"
                         :style="{ width: columnWidths[headerIndex], 'max-width': columnWidths[headerIndex]}">{{title}}</th>
                 </tr>
-                <tr class="s-filters">
+                <tr>
                     <th v-for="(title, key, headerIndex) in headers"
                         :style="{
                             width: columnWidths[headerIndex],
                             'max-width': columnWidths[headerIndex],
                         }">
-                        <div class="holder l-filter flex-elem grows" :class="{active: filters[key]}">
+                        <search class="c-table__search"
-                            <input type="text" v-model="filters[key]" v-on:input="filterChanged(key)" />
+                            v-model="filters[key]"
-                            <a class="clear-icon clear-input icon-x-in-circle" :class="{show: filters[key]}" @click="clearFilter(key)"></a>
+                            v-on:input="filterChanged(key)"
-                        </div>
+                            v-on:clear="clearFilter(key)" />
                     </th>
                 </tr>
             </thead>
@@ -266,6 +266,7 @@
 
 <script>
 import TelemetryTableRow from './table-row.vue';
+import search from '../../../ui/components/controls/search.vue';
 import _ from 'lodash';
 
 const VISIBLE_ROW_COUNT = 100;
@@ -275,7 +276,8 @@ const AUTO_SCROLL_TRIGGER_HEIGHT = 20;
 
 export default {
     components: {
-        TelemetryTableRow
+        TelemetryTableRow,
+        search
     },
     inject: ['table', 'openmct', 'csvExporter'],
     props: ['configuration'],

src/ui/components/controls/search.vue

@@ -1,9 +1,12 @@
 <template>
     <div class="c-search"
          :class="{ 'is-active': active === true }">
-        <input class="c-search__input" type="search"
+        <input class="c-search__input"
-               v-bind:value="searchInput"
+               tabindex="10000"
-               @input="handleInput($event)"/>
+               type="search"
+               v-bind="$attrs"
+               v-bind:value="value"
+               v-on="inputListeners"/>
         <a class="c-search__clear-input icon-x-in-circle"
            v-on:click="clearInput"></a>
     </div>
@@ -71,26 +74,36 @@
 </style>
 
 <script>
+    /* Emits input and clear events */
     export default {
+        inheritAttrs: false,
         props: {
             value: String
         },
+        computed: {
+            inputListeners: function () {
+                let vm = this;
+                return Object.assign({},
+                    this.$listeners,
+                    {
+                        input: function (event) {
+                            vm.$emit('input', event.target.value);
+                            vm.active = (event.target.value.length > 0);
+                        }
+                    }
+                )
+            }
+        },
         data: function() {
             return {
-                searchInput: '',
                 active: false
             }
         },
         methods: {
-            handleInput(e) {
-                // Grab input as the user types it
-                // and set 'active' based on input length > 0
-                this.searchInput = e.target.value;
-                this.active = (this.searchInput.length > 0);
-            },
             clearInput() {
                 // Clear the user's input and set 'active' to false
-                this.searchInput = '';
+                this.value = '';
+                this.$emit('clear','');
                 this.active = false;
             }
         }