Implemented UI for pipeline search. TODO implement backend

Author: michelvocks

frontend/client/components/layout/AppMain.vue

@@ -48,5 +48,7 @@ export default {
 
 .app-content {
   padding: 20px;
+  z-index: 0;
+  padding-top: 90px;
 }
 </style>

frontend/client/components/layout/Navbar.vue

@@ -7,7 +7,25 @@
             <i class="fa fa-search fa-lg" aria-hidden="true"/>
           </div>
           <div>
-            <input class="borderless-search" type="text" placeholder="Find pipeline ..." v-model="search">
+            <input class="borderless-search" type="text" placeholder="Find pipeline ..." v-model="search" @input="onChange">
+            <ul id="autocomplete-results" v-show="resultsOpen" class="autocomplete-results">
+              <li class="autocomplete-result" v-for="(result, i) in results" :key="i">
+                <div class="results-bg">
+                <div class="box box-bg">
+                  <article class="media">
+                    <div class="media-left">
+                      <div class="avatar">
+                        <img src="~assets/golang.png">
+                      </div>
+                    </div>
+                    <div class="media-content" style="margin-top: 7px;">
+                      {{ result.name }}
+                    </div>
+                  </article>
+                </div>
+                </div>
+              </li>
+            </ul>
           </div>
           <div class="navbar-button">
             <a class="button is-primary" @click="createPipeline">
@@ -46,7 +64,9 @@ export default {
 
   data () {
     return {
-      search: ''
+      search: '',
+      resultsOpen: false,
+      results: {}
     }
   },
 
@@ -66,6 +86,11 @@ export default {
 
   mounted () {
     this.reload()
+    document.addEventListener('click', this.handleClickOutside)
+  },
+
+  destroyed () {
+    document.removeEventListener('click', this.handleClickOutside)
   },
 
   watch: {
@@ -82,6 +107,29 @@ export default {
       window.location.reload()
     },
 
+    onChange () {
+      this.$emit('input', this.search)
+
+      // Fake search
+      this.results = [
+        {
+          name: 'Test 1',
+          id: 1
+        },
+        {
+          name: 'Test 2',
+          id: 2
+        }
+      ]
+      this.resultsOpen = true
+    },
+
+    handleClickOutside (evt) {
+      if (!this.$el.contains(evt.target)) {
+        this.resultsOpen = false
+      }
+    },
+
     logout () {
       this.$router.push('/')
       this.$store.commit('clearIntervals')
@@ -181,7 +229,7 @@ export default {
 }
 
 .app-navbar {
-  position: static;
+  position: fixed;
   min-width: 100%;
   height: 70px;
   z-index: 1024 - 1;
@@ -206,4 +254,38 @@ export default {
   padding-right: 15px;
   padding-top: 7px;
 }
+
+.autocomplete-results {
+  position: absolute;
+  z-index: 2500;
+  padding: 0;
+  margin: 0;
+  left: 210px;
+  max-width: 350px;
+  box-shadow: 20px 0 30px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
+  height: 177px;
+  overflow: auto;
+  width: 350px;
+  background-color: #2a2735 !important;
+
+}
+
+.autocomplete-result {
+  list-style: none;
+  text-align: left;
+  padding: 4px 6px;
+  cursor: pointer;
+}
+
+.autocomplete-result.is-active,
+.autocomplete-result:hover {
+  background-color: #51a0f6;
+  color: black;
+}
+
+.box-bg {
+  background-color: #3f3d49;
+  color: whitesmoke;
+  text-align: center;
+}
 </style>

frontend/client/views/overview/index.vue

@@ -2,7 +2,7 @@
   <div class="columns is-multiline">
     <template v-for="(pipeline, index) in pipelines">
       <div class="column is-one-third" :key="index">
-        <div class="notification content-article">
+        <div class="pipeline-box notification content-article">
           <div class="status-display-success" v-if="pipeline.r.status === 'success'"></div>
           <div class="status-display-fail" v-else-if="pipeline.r.status === 'failed'"></div>
           <div class="status-display-unknown" v-else></div>
@@ -53,8 +53,7 @@ import moment from 'moment'
 export default {
   data () {
     return {
-      pipelines: [],
-      currentPath: ''
+      pipelines: []
     }
   },
 
@@ -66,20 +65,23 @@ export default {
     var intervalID = setInterval(function () {
       this.fetchData()
     }.bind(this), 3000)
-    this.currentPath = this.$route.path
 
     // Append interval id to store
     this.$store.commit('appendInterval', intervalID)
   },
 
+  destroyed () {
+    this.$store.commit('clearIntervals')
+  },
+
   watch: {
     '$route': 'fetchData'
   },
 
   methods: {
     fetchData () {
       if (this.$route.path !== this.currentPath) {
-        this.$store.commit('clearIntervals')
+        // this.$store.commit('clearIntervals')
       }
 
       this.$http
@@ -171,6 +173,10 @@ export default {
   background-color: grey;
 }
 
+.pipeline-box {
+  width: 377px;
+}
+
 .outer-box {
   padding-left: 40px; 
   min-height: 170px;

frontend/client/views/pipeline/create.vue

@@ -244,8 +244,7 @@ export default {
           field: 'errmsg'
         }
       ],
-      historyRows: [],
-      currentPath: ''
+      historyRows: []
     }
   },
 
@@ -264,22 +263,21 @@ export default {
     var intervalID = setInterval(function () {
       this.fetchData()
     }.bind(this), 3000)
-    this.currentPath = this.$route.path
 
     // Append interval id to store
     this.$store.commit('appendInterval', intervalID)
   },
 
+  destroyed () {
+    this.$store.commit('clearIntervals')
+  },
+
   watch: {
     '$route': 'fetchData'
   },
 
   methods: {
     fetchData () {
-      if (this.$route.path !== this.currentPath) {
-        this.$store.commit('clearIntervals')
-      }
-
       this.$http
         .get('/api/v1/pipeline/created', { showProgressBar: false })
         .then(response => {

frontend/client/views/pipeline/detail.vue

@@ -121,8 +121,7 @@ export default {
           },
           arrows: {to: true}
         }
-      },
-      currentPath: ''
+      }
     }
   },
 
@@ -135,12 +134,15 @@ export default {
     var intervalID = setInterval(function () {
       this.fetchData()
     }.bind(this), 3000)
-    this.currentPath = this.$route.path
 
     // Append interval id to store
     this.$store.commit('appendInterval', intervalID)
   },
 
+  destroyed () {
+    this.$store.commit('clearIntervals')
+  },
+
   watch: {
     '$route': 'locationReload'
   },
@@ -150,10 +152,6 @@ export default {
       // View should be re-rendered
       this.lastRedraw = false
 
-      if (this.$route.path !== this.currentPath) {
-        this.$store.commit('clearIntervals')
-      }
-
       // Fetch data
       this.fetchData()
     },