From cdb062844f96f8b21f76e3c5c3bfca8b148dfbcd Mon Sep 17 00:00:00 2001
From: MatheusMello <mat.mello93@gmail.com>
Date: Sep 12 2017 19:58:21 +0000
Subject: [PATCH 1/22] disabling mock


---

diff --git a/src/components/List.vue b/src/components/List.vue
index bae7f43..38a2e77 100644
--- a/src/components/List.vue
+++ b/src/components/List.vue
@@ -33,12 +33,10 @@ export default({
       self.disabled = true
       self.notUpdating = false
 
-      setTimeout(function () {
-        self.disabled = false
-        self.notUpdating = true
-      }, 2000)
       getPackages().then(response => {
         this.tableData = parseApiData(response.data.packages)
+        self.disabled = false
+        self.notUpdating = true
         console.log(response)
       })
     },

From fe0b307af806b2f53b9a1ef983a0e7e73a62029e Mon Sep 17 00:00:00 2001
From: MatheusMello <mat.mello93@gmail.com>
Date: Sep 12 2017 19:59:24 +0000
Subject: [PATCH 2/22] Merge branch 'autorefresh_48' of ssh://pagure.io/forks/kiskadeemes/kiskadee/kiskadee_ui into autorefresh_48


---

diff --git a/.gitignore b/.gitignore
index cce8044..faf2133 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,7 +5,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 test/unit/coverage
-*.lock.json
+*lock.json
 
 # Editor directories and files
 .idea
diff --git a/config/index.js b/config/index.js
index 196da1f..c0e698d 100644
--- a/config/index.js
+++ b/config/index.js
@@ -27,7 +27,12 @@ module.exports = {
     autoOpenBrowser: true,
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    proxyTable: {},
+    proxyTable: {
+      '/api': {
+        target: 'http://localhost:5000',
+        changeOrigin: true
+      }
+    },
     // CSS Sourcemaps off by default because relative paths are "buggy"
     // with this option, according to the CSS-Loader README
     // (https://github.com/webpack/css-loader#sourcemaps)
diff --git a/index.html b/index.html
index 713d8dd..a4a551b 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,12 @@
 <!DOCTYPE html>
-<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
-<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
-
-<div id="app"></div>
-<md-layout>
-    <div id="list">
-        <list-component :is="tableData"></list-component>
-    </div>
-</md-layout>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Kiskadee</title>
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
+    <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/package.json b/package.json
index e906dad..8ca4576 100644
--- a/package.json
+++ b/package.json
@@ -13,13 +13,18 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs"
   },
   "dependencies": {
+    "css-loader": "^0.28.7",
     "element-ui": "^1.4.3",
+    "moment": "^2.18.1",
+    "node-sass": "^4.5.3",
+    "sass-loader": "^6.0.6",
     "vue": "^2.3.3",
     "vue-awesome": "^2.3.1",
     "vue-data-tables": "^2.0.4",
     "vue-material": "^0.7.4",
     "vue-router": "^2.6.0",
-    "vue-table-component": "^1.3.0"
+    "vue-table-component": "^1.3.0",
+    "vue-toastr-2": "0.0.9"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
@@ -36,7 +41,6 @@
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
     "cross-env": "^5.0.1",
-    "css-loader": "^0.28.0",
     "cssnano": "^3.10.0",
     "eslint": "^3.19.0",
     "eslint-config-standard": "^6.2.1",
diff --git a/src/App.vue b/src/App.vue
index e9bd7e8..1b90d41 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,31 +1,20 @@
 <template>
-        <md-toolbar>
-        <md-layout md-order="start">
-        <md-layout :md-flex="5">
-          <md-icon>menu</md-icon>
-        </md-layout>
-        <md-layout :md-flex="15">
-          <h2 class="md-title;">Kiskadee</h2>
-        </md-layout>
-
-        <md-layout md-flex-offset="50" >
-            <form novalidate @submit.stop.prevent="submit">
-              <md-input-container>
-                <md-input placeholder="Find package"></md-input>
-              </md-input-container>
-            </form>
-        </md-layout>
-      </md-layout>
-      </md-toolbar>
+  <div id="app"> 
+    <router-view></router-view>
+  </div>
 </template>
 
 <script>
 import Vue from 'vue'
-var VueMaterial = require('vue-material')
-require('vue-material/dist/vue-material.css')
+import VueMaterial from 'vue-material'
+import 'vue-material/dist/vue-material.css'
 Vue.use(VueMaterial)
 
-export default({
-  el: '#app'
-})
+export default {
+
+}
 </script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/api/index.js b/src/api/index.js
new file mode 100644
index 0000000..f00eb03
--- /dev/null
+++ b/src/api/index.js
@@ -0,0 +1,9 @@
+import axios from 'axios'
+
+let axiosApi = axios.create({
+  // baseURL: '/api',
+  baseURL: 'http://localhost:5000',
+  timeout: 1000
+})
+
+export default axiosApi
diff --git a/src/api/packages.js b/src/api/packages.js
new file mode 100644
index 0000000..3379371
--- /dev/null
+++ b/src/api/packages.js
@@ -0,0 +1,7 @@
+import axiosApi from './index'
+
+export default {
+  get: () => {
+    return axiosApi.get('/packages')
+  }
+}
diff --git a/src/components/Header.vue b/src/components/Header.vue
deleted file mode 100644
index c869f1c..0000000
--- a/src/components/Header.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <div class='header-b'>
-  <div class='content'>
-    <div id='kiskadee_name'>
-      <span> {{ say_my_name }} </span>
-    </div>
-      <input class='search-container' type="text" placeholder="Search a package">
-  </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      say_my_name: 'Kiskadee'
-    }
-  }
-}
-
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-
-.header-b {
-  position: absolute;
-  width: 100%;
-  top: 0;
-  box-shadow: 1px 1px 1px #888888;
-}
-
-.content {
-  width: 100%;
-  height: 40px;
-  top: 0;
-}
-
-.search-container {
-  position: relative;
-  float: right;
-  left: -15px;
-  top: -10px;
-  height: 20px;
-}
-
-#kiskadee_name {
-  position: relative;
-  left: 15px;
-  top: 15px;
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-}
-</style>
diff --git a/src/components/Hello.vue b/src/components/Hello.vue
deleted file mode 100644
index 2d80539..0000000
--- a/src/components/Hello.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
-      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
-      <br>
-      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
-      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
-      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'hello',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/List.vue b/src/components/List.vue
deleted file mode 100644
index 38a2e77..0000000
--- a/src/components/List.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-<div class="list-pkgs">
-  <md-button :disabled='disabled' v-if="notUpdating" v-on:click="updateTable"> <icon name="refresh" scale="1.5"></icon> &nbsp &nbsp Update Table</md-button>
-  <md-button :disabled='disabled' v-else v-on:click="updateTable"> <icon spin name="refresh" scale="1.5"></icon> &nbsp &nbsp Update Table</md-button>
-    <el-table :data="tableData"  height="400" @cell-click="showPackage" border>
-      <el-table-column prop="name" label="project name" sortable="custom">
-      </el-table-column>
-      <el-table-column prop="last_version" label="Last analyzed version" sortable="custom">
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-
-export default({
-  data () {
-    return {
-      notUpdating: true,
-      disabled: false,
-      tableData: [],
-      searchDef: {
-        show: false
-      },
-      currentRow: null,
-      timer: ''
-    }
-  },
-  methods: {
-    updateTable: function () {
-      const self = this
-      self.disabled = true
-      self.notUpdating = false
-
-      getPackages().then(response => {
-        this.tableData = parseApiData(response.data.packages)
-        self.disabled = false
-        self.notUpdating = true
-        console.log(response)
-      })
-    },
-    showPackage: function () {
-      // show the analysis here
-    },
-    cancelAutoUpdate: function () { clearInterval(this.timer) }
-  },
-  beforeDestroy () {
-    clearInterval(this.timer)
-  },
-  created () {
-    getPackages().then(response => {
-      this.tableData = parseApiData(response.data.packages)
-    })
-    this.updateTable()
-    this.timer = setInterval(this.updateTable, 10000)
-  }
-})
-
-function getPackages () {
-  var axiosInstance = axios.create({
-    baseURL: 'http://0.0.0.0:5000',
-    timeout: 1000
-  })
-  return axiosInstance.get('/packages')
-}
-
-function parseApiData (packages) {
-  var parsedPackages = []
-  var listSize = packages.length
-
-  var i = 0
-  for (; i < listSize;) {
-    var pkgName = packages[i].name
-    var pkgNewestAnalyzedVersion = packages[i]['versions'][0].number
-    var item = {name: pkgName, last_version: pkgNewestAnalyzedVersion}
-    parsedPackages.push(item)
-    i++
-  }
-  return parsedPackages
-}
-
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-
-.list-pkgs {
-  position: relative;
-  top: 50px;
-}
-</style>
diff --git a/src/components/home/Home.vue b/src/components/home/Home.vue
new file mode 100644
index 0000000..7341376
--- /dev/null
+++ b/src/components/home/Home.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <header-kiskadee></header-kiskadee>
+    <list-packages></list-packages>
+  </div>
+</template>
+
+<script>
+import HeaderK from '../shared/HeaderK.vue'
+import List from '../packages/List.vue'
+
+export default {
+  components: {
+    'header-kiskadee': HeaderK,
+    'list-packages': List
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/packages/List.vue b/src/components/packages/List.vue
new file mode 100644
index 0000000..38a2e77
--- /dev/null
+++ b/src/components/packages/List.vue
@@ -0,0 +1,92 @@
+<template>
+<div class="list-pkgs">
+  <md-button :disabled='disabled' v-if="notUpdating" v-on:click="updateTable"> <icon name="refresh" scale="1.5"></icon> &nbsp &nbsp Update Table</md-button>
+  <md-button :disabled='disabled' v-else v-on:click="updateTable"> <icon spin name="refresh" scale="1.5"></icon> &nbsp &nbsp Update Table</md-button>
+    <el-table :data="tableData"  height="400" @cell-click="showPackage" border>
+      <el-table-column prop="name" label="project name" sortable="custom">
+      </el-table-column>
+      <el-table-column prop="last_version" label="Last analyzed version" sortable="custom">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default({
+  data () {
+    return {
+      notUpdating: true,
+      disabled: false,
+      tableData: [],
+      searchDef: {
+        show: false
+      },
+      currentRow: null,
+      timer: ''
+    }
+  },
+  methods: {
+    updateTable: function () {
+      const self = this
+      self.disabled = true
+      self.notUpdating = false
+
+      getPackages().then(response => {
+        this.tableData = parseApiData(response.data.packages)
+        self.disabled = false
+        self.notUpdating = true
+        console.log(response)
+      })
+    },
+    showPackage: function () {
+      // show the analysis here
+    },
+    cancelAutoUpdate: function () { clearInterval(this.timer) }
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
+  },
+  created () {
+    getPackages().then(response => {
+      this.tableData = parseApiData(response.data.packages)
+    })
+    this.updateTable()
+    this.timer = setInterval(this.updateTable, 10000)
+  }
+})
+
+function getPackages () {
+  var axiosInstance = axios.create({
+    baseURL: 'http://0.0.0.0:5000',
+    timeout: 1000
+  })
+  return axiosInstance.get('/packages')
+}
+
+function parseApiData (packages) {
+  var parsedPackages = []
+  var listSize = packages.length
+
+  var i = 0
+  for (; i < listSize;) {
+    var pkgName = packages[i].name
+    var pkgNewestAnalyzedVersion = packages[i]['versions'][0].number
+    var item = {name: pkgName, last_version: pkgNewestAnalyzedVersion}
+    parsedPackages.push(item)
+    i++
+  }
+  return parsedPackages
+}
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+.list-pkgs {
+  position: relative;
+  top: 50px;
+}
+</style>
diff --git a/src/components/shared/HeaderK.vue b/src/components/shared/HeaderK.vue
new file mode 100644
index 0000000..d2e69e5
--- /dev/null
+++ b/src/components/shared/HeaderK.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <md-toolbar>
+      <md-layout md-order="start">
+        <md-layout :md-flex="5">
+          <md-icon>menu</md-icon>
+        </md-layout>
+        <md-layout :md-flex="15">
+          <h2 class="md-title;">Kiskadee</h2>
+        </md-layout>
+        <md-layout md-flex-offset="50" >
+            <form novalidate @submit.stop.prevent="submit">
+              <md-input-container>
+                <md-input placeholder="Find package"></md-input>
+              </md-input-container>
+            </form>
+        </md-layout>
+      </md-layout>
+    </md-toolbar>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      say_my_name: 'Kiskadee'
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/main.js b/src/main.js
index 13891b8..318d2e5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,8 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
-import Header from './components/Header'
-import List from './components/List'
+
+import VueRouter from 'vue-router'
+import { routes } from './router/routes'
 
 import 'vue-awesome/icons'
 import Icon from 'vue-awesome/components/Icon'
@@ -17,9 +16,11 @@ locale.use(lang)
 
 Vue.use(ElementUI)
 Vue.use(DataTables)
-var VueMaterial = require('vue-material')
+import VueMaterial from 'vue-material'
 Vue.use(VueMaterial)
 
+Vue.use(VueRouter)
+
 Vue.material.registerTheme('default', {
   primary: {
     color: 'teal',
@@ -33,22 +34,14 @@ Vue.material.registerTheme('default', {
 Vue.config.productionTip = false
 /* eslint-disable no-new */
 
-new Vue({
-  el: '#app',
-  template: '<App/>',
-  components: { App }
-})
-
-new Vue({
-  el: '#header',
-  template: '<Header/>',
-  components: { Header }
+const router = new VueRouter({
+  routes: routes
 })
 
 new Vue({
-  el: '#list',
-  template: '<List/>',
-  components: { List }
+  el: '#app',
+  router: router,
+  render: h => h(App)
 })
 
 Vue.component('icon', Icon)
diff --git a/src/router/index.js b/src/router/index.js
deleted file mode 100644
index 5bf9ea6..0000000
--- a/src/router/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import Hello from '@/components/Hello'
-
-Vue.use(Router)
-
-export default new Router({
-  routes: [
-    {
-      path: '/',
-      name: 'Hello',
-      component: Hello
-    }
-  ]
-})
diff --git a/src/router/routes.js b/src/router/routes.js
new file mode 100644
index 0000000..183a362
--- /dev/null
+++ b/src/router/routes.js
@@ -0,0 +1,5 @@
+import Home from '../components/home/Home.vue'
+
+export const routes = [
+  { path: '', component: Home }
+]

From 9b63ff1547f37e7064bc35c9009a10f6dc203fe5 Mon Sep 17 00:00:00 2001
From: MatheusMello <mat.mello93@gmail.com>
Date: Sep 12 2017 20:31:14 +0000
Subject: [PATCH 3/22] component register order


---

diff --git a/src/components/List.vue b/src/components/List.vue
new file mode 100644
index 0000000..38a2e77
--- /dev/null
+++ b/src/components/List.vue
@@ -0,0 +1,92 @@
+<template>
+<div class="list-pkgs">
+  <md-button :disabled='disabled' v-if="notUpdating" v-on:click="updateTable"> <icon name="refresh" scale="1.5"></icon> &nbsp &nbsp Update Table</md-button>
+  <md-button :disabled='disabled' v-else v-on:click="updateTable"> <icon spin name="refresh" scale="1.5"></icon> &nbsp &nbsp Update Table</md-button>
+    <el-table :data="tableData"  height="400" @cell-click="showPackage" border>
+      <el-table-column prop="name" label="project name" sortable="custom">
+      </el-table-column>
+      <el-table-column prop="last_version" label="Last analyzed version" sortable="custom">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default({
+  data () {
+    return {
+      notUpdating: true,
+      disabled: false,
+      tableData: [],
+      searchDef: {
+        show: false
+      },
+      currentRow: null,
+      timer: ''
+    }
+  },
+  methods: {
+    updateTable: function () {
+      const self = this
+      self.disabled = true
+      self.notUpdating = false
+
+      getPackages().then(response => {
+        this.tableData = parseApiData(response.data.packages)
+        self.disabled = false
+        self.notUpdating = true
+        console.log(response)
+      })
+    },
+    showPackage: function () {
+      // show the analysis here
+    },
+    cancelAutoUpdate: function () { clearInterval(this.timer) }
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
+  },
+  created () {
+    getPackages().then(response => {
+      this.tableData = parseApiData(response.data.packages)
+    })
+    this.updateTable()
+    this.timer = setInterval(this.updateTable, 10000)
+  }
+})
+
+function getPackages () {
+  var axiosInstance = axios.create({
+    baseURL: 'http://0.0.0.0:5000',
+    timeout: 1000
+  })
+  return axiosInstance.get('/packages')
+}
+
+function parseApiData (packages) {
+  var parsedPackages = []
+  var listSize = packages.length
+
+  var i = 0
+  for (; i < listSize;) {
+    var pkgName = packages[i].name
+    var pkgNewestAnalyzedVersion = packages[i]['versions'][0].number
+    var item = {name: pkgName, last_version: pkgNewestAnalyzedVersion}
+    parsedPackages.push(item)
+    i++
+  }
+  return parsedPackages
+}
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+.list-pkgs {
+  position: relative;
+  top: 50px;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 318d2e5..3b300c6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -38,10 +38,10 @@ const router = new VueRouter({
   routes: routes
 })
 
+Vue.component('icon', Icon)
+
 new Vue({
   el: '#app',
   router: router,
   render: h => h(App)
 })
-
-Vue.component('icon', Icon)

From 8473d2395e2f0856dfaba9f23d30fcdfb4d986b3 Mon Sep 17 00:00:00 2001
From: MatheusMello <mat.mello93@gmail.com>
Date: Sep 12 2017 20:40:29 +0000
Subject: [PATCH 4/22] removing duplicated file


---

diff --git a/src/components/List.vue b/src/components/List.vue
deleted file mode 100644
index 38a2e77..0000000
--- a/src/components/List.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-<div class="list-pkgs">
-  <md-button :disabled='disabled' v-if="notUpdating" v-on:click="updateTable"> <icon name="refresh" scale="1.5"></icon> &nbsp &nbsp Update Table</md-button>
-  <md-button :disabled='disabled' v-else v-on:click="updateTable"> <icon spin name="refresh" scale="1.5"></icon> &nbsp &nbsp Update Table</md-button>
-    <el-table :data="tableData"  height="400" @cell-click="showPackage" border>
-      <el-table-column prop="name" label="project name" sortable="custom">
-      </el-table-column>
-      <el-table-column prop="last_version" label="Last analyzed version" sortable="custom">
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-
-export default({
-  data () {
-    return {
-      notUpdating: true,
-      disabled: false,
-      tableData: [],
-      searchDef: {
-        show: false
-      },
-      currentRow: null,
-      timer: ''
-    }
-  },
-  methods: {
-    updateTable: function () {
-      const self = this
-      self.disabled = true
-      self.notUpdating = false
-
-      getPackages().then(response => {
-        this.tableData = parseApiData(response.data.packages)
-        self.disabled = false
-        self.notUpdating = true
-        console.log(response)
-      })
-    },
-    showPackage: function () {
-      // show the analysis here
-    },
-    cancelAutoUpdate: function () { clearInterval(this.timer) }
-  },
-  beforeDestroy () {
-    clearInterval(this.timer)
-  },
-  created () {
-    getPackages().then(response => {
-      this.tableData = parseApiData(response.data.packages)
-    })
-    this.updateTable()
-    this.timer = setInterval(this.updateTable, 10000)
-  }
-})
-
-function getPackages () {
-  var axiosInstance = axios.create({
-    baseURL: 'http://0.0.0.0:5000',
-    timeout: 1000
-  })
-  return axiosInstance.get('/packages')
-}
-
-function parseApiData (packages) {
-  var parsedPackages = []
-  var listSize = packages.length
-
-  var i = 0
-  for (; i < listSize;) {
-    var pkgName = packages[i].name
-    var pkgNewestAnalyzedVersion = packages[i]['versions'][0].number
-    var item = {name: pkgName, last_version: pkgNewestAnalyzedVersion}
-    parsedPackages.push(item)
-    i++
-  }
-  return parsedPackages
-}
-
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-
-.list-pkgs {
-  position: relative;
-  top: 50px;
-}
-</style>

From 8e376bc6d6d0c8d12384691fa3af86168f56c3e0 Mon Sep 17 00:00:00 2001
From: Thiago Moreira <thiago.cmoreira@yahoo.com.br>
Date: Sep 19 2017 20:28:02 +0000
Subject: [PATCH 5/22] Adding bootstrap


---

diff --git a/package.json b/package.json
index 53af5fd..964e5b3 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "babel-preset-env": "^1.3.2",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",
+    "bootstrap-vue": "^1.0.0-beta.7",
     "chai": "^3.5.0",
     "chalk": "^2.0.1",
     "connect-history-api-fallback": "^1.3.0",
diff --git a/src/main.js b/src/main.js
index a025eca..668d5fd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,7 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-default/index.css'
 import lang from 'element-ui/lib/locale/lang/en'
 import locale from 'element-ui/lib/locale'
+import BootstrapVue from 'bootstrap-vue'
 
 locale.use(lang)
 
@@ -18,6 +19,11 @@ Vue.use(DataTables)
 import VueMaterial from 'vue-material'
 Vue.use(VueMaterial)
 
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+Vue.use(BootstrapVue)
+
 Vue.use(VueRouter)
 
 Vue.material.registerTheme('default', {
@@ -27,7 +33,7 @@ Vue.material.registerTheme('default', {
   },
   accent: 'black',
   warn: 'black',
-  background: 'black'
+  background: 'white'
 })
 
 Vue.config.productionTip = false

From 2196096a90de9b44fa233c8497ed21e55dc3301f Mon Sep 17 00:00:00 2001
From: MatheusMello <mat.mello93@gmail.com>
Date: Sep 19 2017 21:42:12 +0000
Subject: [PATCH 6/22] Search Component


Signed-off-by: MatheusMello <mat.mello93@gmail.com>
Signed-off-by: ThiagoMoreira <thiago.cmoreira@yahoo.com.br>

---

diff --git a/src/components/home/Home.vue b/src/components/home/Home.vue
index 7341376..6b436ba 100644
--- a/src/components/home/Home.vue
+++ b/src/components/home/Home.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <header-kiskadee></header-kiskadee>
+    <search></search>
     <list-packages></list-packages>
   </div>
 </template>
@@ -8,9 +9,11 @@
 <script>
 import HeaderK from '../shared/HeaderK.vue'
 import List from '../packages/List.vue'
+import Search from '../packages/Search.vue'
 
 export default {
   components: {
+    'search': Search,
     'header-kiskadee': HeaderK,
     'list-packages': List
   }
@@ -19,4 +22,4 @@ export default {
 
 <style lang="scss" scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/packages/Search.vue b/src/components/packages/Search.vue
new file mode 100644
index 0000000..d9faa33
--- /dev/null
+++ b/src/components/packages/Search.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="search-wrapper">
+    <div class="row">
+      <div class="text-center col-md-12">
+        <h1>Find Packages</h1>
+      </div>
+    </div>
+    <div class="row">
+      <div class="text-center col-md-12">
+        <h4>2 new projects recently added</h4>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-12 text-center">
+        <div class="wrapper">
+          <input placeholder="Find projects..." type="text">
+          <a href="">
+            <icon class="search-icon" name="search" scale="1.5"></icon>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      say_my_name: 'Kiskadee'
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+
+.search-wrapper {
+  background-image: url('/static/grey.jpg');
+  background-size: cover;
+  background-color: rgb(228, 227, 227);
+  min-height: 200px;
+ }
+
+h1 {
+  margin-top: 30px;
+  text-transform: uppercase;
+  text-size: 4em;
+  line-height: 1;
+  font-weight: 300;
+}
+
+h4 {
+  margin-top: -10px;
+  font-size: 1.4em;
+  font-weight: 300;
+  color: rgb(31, 48, 90);
+}
+
+.wrapper {
+  position: relative;
+  margin-bottom: 30px;
+ }
+
+.search-icon {
+  position: absolute;
+  font-size: 40px;
+  line-height: 30px;
+  top: 11px;
+  right: 5px;
+  }
+
+  a {
+   text-decoration: none;
+  }
+
+  a:visited {
+   color: black;
+ }
+
+ input:focus {
+   border-color: rgb(31, 48, 90);
+   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(31, 48, 90, 0.6);
+ }
+
+</style>
diff --git a/src/main.js b/src/main.js
index 668d5fd..1da55c8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,10 @@ import lang from 'element-ui/lib/locale/lang/en'
 import locale from 'element-ui/lib/locale'
 import BootstrapVue from 'bootstrap-vue'
 
+import 'vue-awesome/icons'
+import Icon from 'vue-awesome/components/Icon'
+Vue.component('icon', Icon)
+
 locale.use(lang)
 
 Vue.use(ElementUI)

From acbb6a901dd9eb8a98af9b3bce1947b910442c35 Mon Sep 17 00:00:00 2001
From: MatheusMello <mat.mello93@gmail.com>
Date: Sep 19 2017 21:58:29 +0000
Subject: [PATCH 7/22] Search component styles


Signed-off-by: MatheusMello <mat.mello93@gmail.com>
Signed-off-by: ThiagoMoreira <thiago.cmoreira@yahoo.com.br>

---

diff --git a/src/components/packages/Search.vue b/src/components/packages/Search.vue
index d9faa33..444896f 100644
--- a/src/components/packages/Search.vue
+++ b/src/components/packages/Search.vue
@@ -46,16 +46,17 @@ export default {
 h1 {
   margin-top: 30px;
   text-transform: uppercase;
-  text-size: 4em;
+  font-size: 4em;
   line-height: 1;
-  font-weight: 300;
+  font-weight: 200;
 }
 
 h4 {
-  margin-top: -10px;
-  font-size: 1.4em;
+  margin: 5px 0;
+  font-size: 1.3em;
   font-weight: 300;
-  color: rgb(31, 48, 90);
+  color: #2066AC;
+  /*color: rgb(31, 48, 90);*/
 }
 
 .wrapper {
@@ -79,6 +80,14 @@ h4 {
    color: black;
  }
 
+  input {
+    margin-top: 20px;
+    padding: 8px 5px;
+    width: 450px;
+    font-size: 1.2em;
+    line-height: 30px;
+  }
+
  input:focus {
    border-color: rgb(31, 48, 90);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(31, 48, 90, 0.6);
diff --git a/static/grey.jpg b/static/grey.jpg
new file mode 100644
index 0000000..35ebb92
Binary files /dev/null and b/static/grey.jpg differ

From e8473cbc8aae713d54461746cc1027afeeccbf72 Mon Sep 17 00:00:00 2001
From: MatheusMello <mat.mello93@gmail.com>
Date: Sep 21 2017 20:41:39 +0000
Subject: [PATCH 8/22] Search Component


Signed-off-by: MatheusMello <mat.mello93@gmail.com>
Signed-off-by: ThiagoMoreira <thiago.cmoreira@yahoo.com.br>

---

diff --git a/src/components/packages/Search.vue b/src/components/packages/Search.vue
index 444896f..0541538 100644
--- a/src/components/packages/Search.vue
+++ b/src/components/packages/Search.vue
@@ -7,18 +7,19 @@
     </div>
     <div class="row">
       <div class="text-center col-md-12">
-        <h4>2 new projects recently added</h4>
+        <h4>2 new packages recently added</h4>
       </div>
     </div>
     <div class="row">
-      <div class="col-md-12 text-center">
-        <div class="wrapper">
-          <input placeholder="Find projects..." type="text">
-          <a href="">
-            <icon class="search-icon" name="search" scale="1.5"></icon>
-          </a>
+        <div class="col-md-3"></div>
+        <div class="col-md-6 text-center">
+          <div class="wrapper">
+            <input placeholder="Find projects..." type="text" />
+            <a href="">
+              <icon class="search-icon" name="search" scale="1.5"></icon>
+            </a>
+          </div>
         </div>
-      </div>
     </div>
   </div>
 </template>
@@ -36,10 +37,22 @@ export default {
 
 <style scoped>
 
+@media only screen and (max-width : 767px) {
+  .search-icon {
+    margin-left: -35px!important;
+  }
+}
+
+@media only screen and (max-width : 480px) {
+  .search-icon {
+    margin-left: 150px!important;
+  }
+}
+
 .search-wrapper {
-  background-image: url('/static/grey.jpg');
+  /*background-image: url('/static/grey.jpg');*/
   background-size: cover;
-  background-color: rgb(228, 227, 227);
+  background-color: #eee;
   min-height: 200px;
  }
 
@@ -56,11 +69,11 @@ h4 {
   font-size: 1.3em;
   font-weight: 300;
   color: #2066AC;
-  /*color: rgb(31, 48, 90);*/
 }
 
 .wrapper {
   position: relative;
+  padding:0;
   margin-bottom: 30px;
  }
 
@@ -68,8 +81,8 @@ h4 {
   position: absolute;
   font-size: 40px;
   line-height: 30px;
-  top: 11px;
-  right: 5px;
+  margin-left: -35px;
+  top: 30px;
   }
 
   a {
@@ -83,7 +96,7 @@ h4 {
   input {
     margin-top: 20px;
     padding: 8px 5px;
-    width: 450px;
+    width: 400px;
     font-size: 1.2em;
     line-height: 30px;
   }
diff --git a/static/grey.jpg b/static/grey.jpg
deleted file mode 100644
index 35ebb92..0000000
Binary files a/static/grey.jpg and /dev/null differ

From eb4af81baf2b158b5b8c78eb58f7267818338926 Mon Sep 17 00:00:00 2001
From: Thiago Moreira <thiago.cmoreira@yahoo.com.br>
Date: Sep 21 2017 21:16:05 +0000
Subject: [PATCH 9/22] Creating state to filter packages


Signed-off-by: Thiago Moreira <thiago.cmoreira@yahoo.com.br>
Signed-off-by: MatheusMello <mat.mello93@gmail.com>

---

diff --git a/package.json b/package.json
index 964e5b3..97c54df 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "node-sass": "^4.5.3",
     "sass-loader": "^6.0.6",
     "vue": "^2.3.3",
+    "vue-awesome": "^2.3.3",
     "vue-data-tables": "^2.0.4",
     "vue-material": "^0.7.4",
     "vue-router": "^2.6.0",
diff --git a/src/store/actionTypes.js b/src/store/actionTypes.js
index bf553e5..14876ae 100644
--- a/src/store/actionTypes.js
+++ b/src/store/actionTypes.js
@@ -1 +1,2 @@
 export const FETCH_PACKAGES = 'fetchPackages'
+export const FILTERED_PACKAGES = 'filteredPackages'
diff --git a/src/store/getterNames.js b/src/store/getterNames.js
index f1e1aba..dcfa1a9 100644
--- a/src/store/getterNames.js
+++ b/src/store/getterNames.js
@@ -1 +1,2 @@
 export const allPackages = 'allPackages'
+export const filteredPackages = 'filteredPackages'
diff --git a/src/store/modules/packages.js b/src/store/modules/packages.js
index a85b18f..453217c 100644
--- a/src/store/modules/packages.js
+++ b/src/store/modules/packages.js
@@ -1,22 +1,49 @@
-import api from '../../api/packages'
+// import api from '../../api/packages'
 import * as actionTypes from '../actionTypes'
 import * as getterNames from '../getterNames'
 import * as mutationTypes from '../mutationsTypes'
 
 const state = {
-  allPackages: []
+  allPackages: [
+    {
+      name: 'example1',
+      versions: [
+        { number: '0.1' }
+      ]
+    },
+    {
+      name: 'foo1',
+      versions: [
+        { number: '0.2' }
+      ]
+    },
+    {
+      name: 'example2',
+      versions: [
+        { number: '0.3' }
+      ]
+    }
+  ],
+  filteredPackages: {}
 }
 
 const getters = {
   [getterNames.allPackages]: (state) => {
     return state.allPackages
+  },
+  [getterNames.filteredPackages]: (state) => {
+    return state.filteredPackages
   }
 }
 
 const actions = {
   async [actionTypes.FETCH_PACKAGES] ({commit, getters, state}) {
-    let { data } = await api.get()
+    // let { data } = await api.get()
+    let data = state.allPackages
     commit(mutationTypes.STORE_PACKAGES, data)
+  },
+  async [actionTypes.FILTERED_PACKAGES] ({commit, getters, state}, search) {
+    commit(mutationTypes.FILTER_PACKAGES, search)
   }
 }
 
@@ -28,6 +55,16 @@ const mutations = {
         last_version: pkg.versions[0].number
       }
     })
+  },
+  [mutationTypes.FILTER_PACKAGES] (state, search) {
+    state.filtered = state.allPackages.map((pkg) => {
+      return {
+        name: pkg.name,
+        last_version: pkg.versions[0].number
+      }
+    }).filter((pkg) => {
+      return pkg.name.includes(search)
+    })
   }
 }
 
diff --git a/src/store/mutationsTypes.js b/src/store/mutationsTypes.js
index fca80de..ee1f6b1 100644
--- a/src/store/mutationsTypes.js
+++ b/src/store/mutationsTypes.js
@@ -1 +1,2 @@
 export const STORE_PACKAGES = 'STORE_PACKAGES'
+export const FILTER_PACKAGES = 'FILTER_PACKAGES'

From 73875070c3fb4c99c91fa396c271de50e45acec6 Mon Sep 17 00:00:00 2001
From: Thiago Moreira <thiago.cmoreira@yahoo.com.br>
Date: Sep 21 2017 21:24:21 +0000
Subject: [PATCH 10/22] Creating state to filter packages


Signed-off-by: Thiago Moreira <thiago.cmoreira@yahoo.com.br>
Signed-off-by: MatheusMello <mat.mello93@gmail.com>

---

diff --git a/package.json b/package.json
index 964e5b3..97c54df 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "node-sass": "^4.5.3",
     "sass-loader": "^6.0.6",
     "vue": "^2.3.3",
+    "vue-awesome": "^2.3.3",
     "vue-data-tables": "^2.0.4",
     "vue-material": "^0.7.4",
     "vue-router": "^2.6.0",
diff --git a/src/store/actionTypes.js b/src/store/actionTypes.js
index bf553e5..14876ae 100644
--- a/src/store/actionTypes.js
+++ b/src/store/actionTypes.js
@@ -1 +1,2 @@
 export const FETCH_PACKAGES = 'fetchPackages'
+export const FILTERED_PACKAGES = 'filteredPackages'
diff --git a/src/store/getterNames.js b/src/store/getterNames.js
index f1e1aba..dcfa1a9 100644
--- a/src/store/getterNames.js
+++ b/src/store/getterNames.js
@@ -1 +1,2 @@
 export const allPackages = 'allPackages'
+export const filteredPackages = 'filteredPackages'
diff --git a/src/store/modules/packages.js b/src/store/modules/packages.js
index a85b18f..a94d2d2 100644
--- a/src/store/modules/packages.js
+++ b/src/store/modules/packages.js
@@ -1,33 +1,70 @@
-import api from '../../api/packages'
+// import api from '../../api/packages'
 import * as actionTypes from '../actionTypes'
 import * as getterNames from '../getterNames'
 import * as mutationTypes from '../mutationsTypes'
 
 const state = {
-  allPackages: []
+  allPackages: [
+    {
+      name: 'example1',
+      versions: [
+        { number: '0.1' }
+      ]
+    },
+    {
+      name: 'foo1',
+      versions: [
+        { number: '0.2' }
+      ]
+    },
+    {
+      name: 'example2',
+      versions: [
+        { number: '0.3' }
+      ]
+    }
+  ],
+  filteredPackages: {}
 }
 
 const getters = {
   [getterNames.allPackages]: (state) => {
     return state.allPackages
+  },
+  [getterNames.filteredPackages]: (state) => {
+    return state.filteredPackages
   }
 }
 
 const actions = {
   async [actionTypes.FETCH_PACKAGES] ({commit, getters, state}) {
-    let { data } = await api.get()
+    // let { data } = await api.get()
+    let data = state.allPackages
     commit(mutationTypes.STORE_PACKAGES, data)
+  },
+  async [actionTypes.FILTERED_PACKAGES] ({commit, getters, state}, search) {
+    commit(mutationTypes.FILTER_PACKAGES, search)
   }
 }
 
 const mutations = {
   [mutationTypes.STORE_PACKAGES] (state, data) {
-    state.allPackages = data.packages.map((pkg) => {
+    state.allPackages = data.map((pkg) => {
       return {
         name: pkg.name,
         last_version: pkg.versions[0].number
       }
     })
+  },
+  [mutationTypes.FILTER_PACKAGES] (state, search) {
+    state.filtered = state.allPackages.map((pkg) => {
+      return {
+        name: pkg.name,
+        last_version: pkg.versions[0].number
+      }
+    }).filter((pkg) => {
+      return pkg.name.includes(search)
+    })
   }
 }
 
diff --git a/src/store/mutationsTypes.js b/src/store/mutationsTypes.js
index fca80de..ee1f6b1 100644
--- a/src/store/mutationsTypes.js
+++ b/src/store/mutationsTypes.js
@@ -1 +1,2 @@
 export const STORE_PACKAGES = 'STORE_PACKAGES'
+export const FILTER_PACKAGES = 'FILTER_PACKAGES'

From 8e29e9b136b2114230c5f58c2c636a81d7898c45 Mon Sep 17 00:00:00 2001
From: MatheusMello <mat.mello93@gmail.com>
Date: Sep 21 2017 21:28:17 +0000
Subject: [PATCH 11/22] Merge branch '12-search' of ssh://pagure.io/forks/kiskadeemes/kiskadee/kiskadee_ui into 12-search


---

diff --git a/src/store/modules/packages.js b/src/store/modules/packages.js
index 453217c..a94d2d2 100644
--- a/src/store/modules/packages.js
+++ b/src/store/modules/packages.js
@@ -49,7 +49,7 @@ const actions = {
 
 const mutations = {
   [mutationTypes.STORE_PACKAGES] (state, data) {
-    state.allPackages = data.packages.map((pkg) => {
+    state.allPackages = data.map((pkg) => {
       return {
         name: pkg.name,
         last_version: pkg.versions[0].number

From 27f0bde44611ed49164d1aac9fabe1f989138459 Mon Sep 17 00:00:00 2001
From: eduqg <eduardoqgomes@gmail.com>
Date: Sep 21 2017 21:33:07 +0000
Subject: [PATCH 12/22] Updating main table to bootstrap and including mock for packages


Signed-off-by: eduqg <eduardoqgomes@gmail.com>
Signed-off-by: omarjunior <omarfariajr@gmail.com>

---

diff --git a/src/api/index.js b/src/api/index.js
index 7982ba4..c71f91d 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -2,7 +2,7 @@ import axios from 'axios'
 
 let axiosApi = axios.create({
   baseURL: 'http://localhost:5000',
-  timeout: 1000
+  timeout: 3000
 })
 
 export default axiosApi
diff --git a/src/components/packages/List.vue b/src/components/packages/List.vue
index 2bd3015..2620088 100644
--- a/src/components/packages/List.vue
+++ b/src/components/packages/List.vue
@@ -1,12 +1,7 @@
 <template>
-<div class="list-pkgs">
-  <md-button v-on:click="fetchPackages()">Update Table</md-button>
-    <el-table :data="allPackages"  height="400" @cell-click="showPackage" border>
-      <el-table-column prop="name" label="project name" sortable="custom">
-      </el-table-column>
-      <el-table-column prop="last_version" label="Last analyzed version" sortable="custom">
-      </el-table-column>
-    </el-table>
+  <div class="list-pkgs">
+    <b-button variant="outline-primary sm" v-on:click="fetchPackages()" class="update">Update Table</b-button>
+    <b-table striped hover :items="items" height="100" @cell-click="showPackage"></b-table>
   </div>
 </template>
 
@@ -15,9 +10,16 @@ import { mapActions, mapGetters } from 'vuex'
 import * as actionTypes from '../../store/actionTypes.js'
 import * as getterNames from '../../store/getterNames.js'
 
+const items = [
+  { Name: 'Debian', Version: 1.0, Upstream: 'http://ftp.us.debian.org/debian' },
+  { Name: 'Juliet', Version: 11.2, Upstream: 'http://juliet.org' },
+  { Name: 'Anytia', Version: 2.1, Upstream: 'http://anytia.com' }
+]
+
 export default {
   data () {
     return {
+      items: items,
       searchDef: {
         show: false
       },
diff --git a/src/store/modules/packages.js b/src/store/modules/packages.js
index a85b18f..9d92df5 100644
--- a/src/store/modules/packages.js
+++ b/src/store/modules/packages.js
@@ -24,8 +24,11 @@ const mutations = {
   [mutationTypes.STORE_PACKAGES] (state, data) {
     state.allPackages = data.packages.map((pkg) => {
       return {
+        package_id: pkg.versions[0].package_id,
         name: pkg.name,
-        last_version: pkg.versions[0].number
+        last_version: pkg.versions[0].number,
+        fetcher_id: pkg.fetcher_id,
+        analyzer_id: pkg.versions[0].analysis[0].analyzer_id
       }
     })
   }

From f7ba16f308854f09a8ca5b4e9e551abb92c75a9f Mon Sep 17 00:00:00 2001
From: eduqg <eduardoqgomes@gmail.com>
Date: Sep 22 2017 18:24:28 +0000
Subject: [PATCH 13/22] Merging with bootstrap


---

diff --git a/package.json b/package.json
index 8ca4576..5ada5df 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "vue-material": "^0.7.4",
     "vue-router": "^2.6.0",
     "vue-table-component": "^1.3.0",
-    "vue-toastr-2": "0.0.9"
+    "vuex": "^2.4.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
@@ -36,6 +36,7 @@
     "babel-preset-env": "^1.3.2",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",
+    "bootstrap-vue": "^1.0.0-beta.7",
     "chai": "^3.5.0",
     "chalk": "^2.0.1",
     "connect-history-api-fallback": "^1.3.0",
diff --git a/src/App.vue b/src/App.vue
index 1b90d41..0ec5f1f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,10 @@
 import Vue from 'vue'
 import VueMaterial from 'vue-material'
 import 'vue-material/dist/vue-material.css'
+import Vuex from 'vuex'
+
 Vue.use(VueMaterial)
+Vue.use(Vuex)
 
 export default {
 
diff --git a/src/api/index.js b/src/api/index.js
index f00eb03..c71f91d 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,9 +1,8 @@
 import axios from 'axios'
 
 let axiosApi = axios.create({
-  // baseURL: '/api',
   baseURL: 'http://localhost:5000',
-  timeout: 1000
+  timeout: 3000
 })
 
 export default axiosApi
diff --git a/src/components/packages/List.vue b/src/components/packages/List.vue
index 38a2e77..7237207 100644
--- a/src/components/packages/List.vue
+++ b/src/components/packages/List.vue
@@ -1,25 +1,28 @@
 <template>
-<div class="list-pkgs">
-  <md-button :disabled='disabled' v-if="notUpdating" v-on:click="updateTable"> <icon name="refresh" scale="1.5"></icon> &nbsp &nbsp Update Table</md-button>
-  <md-button :disabled='disabled' v-else v-on:click="updateTable"> <icon spin name="refresh" scale="1.5"></icon> &nbsp &nbsp Update Table</md-button>
-    <el-table :data="tableData"  height="400" @cell-click="showPackage" border>
-      <el-table-column prop="name" label="project name" sortable="custom">
-      </el-table-column>
-      <el-table-column prop="last_version" label="Last analyzed version" sortable="custom">
-      </el-table-column>
-    </el-table>
+  <div class="list-pkgs">
+    <b-button :disabled="disabled" variant="outline-primary sm" v-if="notUpdating" @click="fetchPackages()"><icon name="refresh" scale="1.5"></icon> &nbsp &nbsp Update Table</b-button>
+    <b-button :disabled="disabled" variant="primary sm" v-else @click="fetchPackages()"><icon spin name="refresh" scale="1.5"></icon> &nbsp &nbsp Hey Update Table</b-button>
+    <b-table striped hover :items="items" height="100" @cell-click="showPackage"></b-table>
   </div>
 </template>
 
 <script>
-import axios from 'axios'
+import { mapActions, mapGetters } from 'vuex'
+import * as actionTypes from '../../store/actionTypes.js'
+import * as getterNames from '../../store/getterNames.js'
+
+const items = [
+  { Name: 'Debian', Version: 1.0, Upstream: 'http://ftp.us.debian.org/debian' },
+  { Name: 'Juliet', Version: 11.2, Upstream: 'http://juliet.org' },
+  { Name: 'Anytia', Version: 2.1, Upstream: 'http://anytia.com' }
+]
 
 export default({
   data () {
     return {
       notUpdating: true,
       disabled: false,
-      tableData: [],
+      items: items,
       searchDef: {
         show: false
       },
@@ -27,59 +30,41 @@ export default({
       timer: ''
     }
   },
+  computed: {
+    ...mapGetters([
+      getterNames.allPackages
+    ])
+  },
   methods: {
-    updateTable: function () {
-      const self = this
-      self.disabled = true
-      self.notUpdating = false
-
-      getPackages().then(response => {
-        this.tableData = parseApiData(response.data.packages)
-        self.disabled = false
-        self.notUpdating = true
-        console.log(response)
-      })
-    },
-    showPackage: function () {
+    ...mapActions([
+      actionTypes.FETCH_PACKAGES
+    ]),
+    showPackage () {
       // show the analysis here
     },
-    cancelAutoUpdate: function () { clearInterval(this.timer) }
-  },
-  beforeDestroy () {
-    clearInterval(this.timer)
+    updateTable () {
+      this.fetchPackages();
+      this.notUpdating = false
+      this.updateAnimation();
+      console.log("No update tables");
+      console.log(this.notUpdating);
+      
+    },
+    updateAnimation () {
+      this.notUpdating = true
+      setTimeout(function() { console.log(this.notUpdating);}, 3000)
+      
+    },
   },
   created () {
-    getPackages().then(response => {
-      this.tableData = parseApiData(response.data.packages)
-    })
     this.updateTable()
     this.timer = setInterval(this.updateTable, 10000)
-  }
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
+  },
 })
 
-function getPackages () {
-  var axiosInstance = axios.create({
-    baseURL: 'http://0.0.0.0:5000',
-    timeout: 1000
-  })
-  return axiosInstance.get('/packages')
-}
-
-function parseApiData (packages) {
-  var parsedPackages = []
-  var listSize = packages.length
-
-  var i = 0
-  for (; i < listSize;) {
-    var pkgName = packages[i].name
-    var pkgNewestAnalyzedVersion = packages[i]['versions'][0].number
-    var item = {name: pkgName, last_version: pkgNewestAnalyzedVersion}
-    parsedPackages.push(item)
-    i++
-  }
-  return parsedPackages
-}
-
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/src/main.js b/src/main.js
index 3b300c6..5fd43a7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import App from './App'
 
 import VueRouter from 'vue-router'
 import { routes } from './router/routes'
+import store from './store'
 
 import 'vue-awesome/icons'
 import Icon from 'vue-awesome/components/Icon'
@@ -11,6 +12,7 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-default/index.css'
 import lang from 'element-ui/lib/locale/lang/en'
 import locale from 'element-ui/lib/locale'
+import BootstrapVue from 'bootstrap-vue'
 
 locale.use(lang)
 
@@ -19,6 +21,11 @@ Vue.use(DataTables)
 import VueMaterial from 'vue-material'
 Vue.use(VueMaterial)
 
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+Vue.use(BootstrapVue)
+
 Vue.use(VueRouter)
 
 Vue.material.registerTheme('default', {
@@ -28,7 +35,7 @@ Vue.material.registerTheme('default', {
   },
   accent: 'black',
   warn: 'black',
-  background: 'black'
+  background: 'white'
 })
 
 Vue.config.productionTip = false
@@ -43,5 +50,6 @@ Vue.component('icon', Icon)
 new Vue({
   el: '#app',
   router: router,
+  store,
   render: h => h(App)
 })
diff --git a/src/store/actionTypes.js b/src/store/actionTypes.js
new file mode 100644
index 0000000..bf553e5
--- /dev/null
+++ b/src/store/actionTypes.js
@@ -0,0 +1 @@
+export const FETCH_PACKAGES = 'fetchPackages'
diff --git a/src/store/getterNames.js b/src/store/getterNames.js
new file mode 100644
index 0000000..f1e1aba
--- /dev/null
+++ b/src/store/getterNames.js
@@ -0,0 +1 @@
+export const allPackages = 'allPackages'
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..066bf2c
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,9 @@
+import Vuex from 'vuex'
+
+import packages from './modules/packages'
+
+export default new Vuex.Store({
+  modules: {
+    packages
+  }
+})
diff --git a/src/store/modules/packages.js b/src/store/modules/packages.js
new file mode 100644
index 0000000..9d92df5
--- /dev/null
+++ b/src/store/modules/packages.js
@@ -0,0 +1,42 @@
+import api from '../../api/packages'
+import * as actionTypes from '../actionTypes'
+import * as getterNames from '../getterNames'
+import * as mutationTypes from '../mutationsTypes'
+
+const state = {
+  allPackages: []
+}
+
+const getters = {
+  [getterNames.allPackages]: (state) => {
+    return state.allPackages
+  }
+}
+
+const actions = {
+  async [actionTypes.FETCH_PACKAGES] ({commit, getters, state}) {
+    let { data } = await api.get()
+    commit(mutationTypes.STORE_PACKAGES, data)
+  }
+}
+
+const mutations = {
+  [mutationTypes.STORE_PACKAGES] (state, data) {
+    state.allPackages = data.packages.map((pkg) => {
+      return {
+        package_id: pkg.versions[0].package_id,
+        name: pkg.name,
+        last_version: pkg.versions[0].number,
+        fetcher_id: pkg.fetcher_id,
+        analyzer_id: pkg.versions[0].analysis[0].analyzer_id
+      }
+    })
+  }
+}
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations
+}
diff --git a/src/store/mutationsTypes.js b/src/store/mutationsTypes.js
new file mode 100644
index 0000000..fca80de
--- /dev/null
+++ b/src/store/mutationsTypes.js
@@ -0,0 +1 @@
+export const STORE_PACKAGES = 'STORE_PACKAGES'

From 6723303d19c5216dc4987a08715bd889fbe6cfac Mon Sep 17 00:00:00 2001
From: MatheusMello <mat.mello93@gmail.com>
Date: Sep 26 2017 16:44:19 +0000
Subject: [PATCH 14/22] Search Handler


Signed-off-by: MatheusMello <mat.mello93@gmail.com>
Signed-off-by: ThiagoMoreira <thiagomoreira@yahoo.com.br>

---

diff --git a/src/components/packages/Search.vue b/src/components/packages/Search.vue
index 0541538..ffa3f87 100644
--- a/src/components/packages/Search.vue
+++ b/src/components/packages/Search.vue
@@ -14,7 +14,7 @@
         <div class="col-md-3"></div>
         <div class="col-md-6 text-center">
           <div class="wrapper">
-            <input placeholder="Find projects..." type="text" />
+            <input v-model="term" placeholder="Find projects..." type="text" />
             <a href="">
               <icon class="search-icon" name="search" scale="1.5"></icon>
             </a>
@@ -25,11 +25,41 @@
 </template>
 
 <script>
+import { mapActions, mapGetters } from 'vuex'
+import * as actionTypes from '../../store/actionTypes.js'
+import * as getterNames from '../../store/getterNames.js'
+
 export default {
   data () {
     return {
-      say_my_name: 'Kiskadee'
+      term: '',
+      searchDef: {
+        show: false
+      },
+      currentRow: null
+    }
+  },
+  computed: {
+    ...mapGetters([
+      getterNames.allPackages
+    ])
+  },
+  watch: {
+    term: function (val, oldVal) {
+      console.log(val)
+      this.fetchPackages(val)
+    }
+  },
+  methods: {
+    ...mapActions([
+      actionTypes.FETCH_PACKAGES
+    ]),
+    showPackage () {
+      // show the analysis here
     }
+  },
+  created () {
+    this.fetchPackages(this.term)
   }
 }
 
diff --git a/src/store/modules/packages.js b/src/store/modules/packages.js
index a94d2d2..d3ab537 100644
--- a/src/store/modules/packages.js
+++ b/src/store/modules/packages.js
@@ -3,27 +3,23 @@ import * as actionTypes from '../actionTypes'
 import * as getterNames from '../getterNames'
 import * as mutationTypes from '../mutationsTypes'
 
+const mockedPackages = [
+  {
+    name: 'example1',
+    last_version: '0.1'
+  },
+  {
+    name: 'foo1',
+    last_version: '0.2'
+  },
+  {
+    name: 'example2',
+    last_version: '0.3'
+  }
+]
+
 const state = {
-  allPackages: [
-    {
-      name: 'example1',
-      versions: [
-        { number: '0.1' }
-      ]
-    },
-    {
-      name: 'foo1',
-      versions: [
-        { number: '0.2' }
-      ]
-    },
-    {
-      name: 'example2',
-      versions: [
-        { number: '0.3' }
-      ]
-    }
-  ],
+  allPackages: [],
   filteredPackages: {}
 }
 
@@ -37,9 +33,17 @@ const getters = {
 }
 
 const actions = {
-  async [actionTypes.FETCH_PACKAGES] ({commit, getters, state}) {
+  async [actionTypes.FETCH_PACKAGES] ({commit, getters, state}, search) {
     // let { data } = await api.get()
-    let data = state.allPackages
+    console.log(`action: ${search}`)
+    let data = []
+    if (!search) {
+      data = mockedPackages
+    } else {
+      data = mockedPackages.filter((pkg) => {
+        return pkg.name.includes(search)
+      })
+    }
     commit(mutationTypes.STORE_PACKAGES, data)
   },
   async [actionTypes.FILTERED_PACKAGES] ({commit, getters, state}, search) {
@@ -52,7 +56,7 @@ const mutations = {
     state.allPackages = data.map((pkg) => {
       return {
         name: pkg.name,
-        last_version: pkg.versions[0].number
+        last_version: pkg.last_version
       }
     })
   },
@@ -60,7 +64,7 @@ const mutations = {
     state.filtered = state.allPackages.map((pkg) => {
       return {
         name: pkg.name,
-        last_version: pkg.versions[0].number
+        last_version: pkg.last_version
       }
     }).filter((pkg) => {
       return pkg.name.includes(search)

From 972b3509b4199cb56a5911569857bd9a8a8863e0 Mon Sep 17 00:00:00 2001
From: MatheusMello <mat.mello93@gmail.com>
Date: Sep 26 2017 18:39:45 +0000
Subject: [PATCH 15/22] Autorefresh migration to bootstrap


Signed-off-by: matmello <mat.mello93@gmail.com>
Signed-off-by: eduqg <eduardoqgomes@gmail.com>
Signed-off-by: rafaelrabetti <rafael.rabetti@gmail.com>

---

diff --git a/src/components/packages/List.vue b/src/components/packages/List.vue
index 7237207..6c9056d 100644
--- a/src/components/packages/List.vue
+++ b/src/components/packages/List.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="list-pkgs">
-    <b-button :disabled="disabled" variant="outline-primary sm" v-if="notUpdating" @click="fetchPackages()"><icon name="refresh" scale="1.5"></icon> &nbsp &nbsp Update Table</b-button>
-    <b-button :disabled="disabled" variant="primary sm" v-else @click="fetchPackages()"><icon spin name="refresh" scale="1.5"></icon> &nbsp &nbsp Hey Update Table</b-button>
-    <b-table striped hover :items="items" height="100" @cell-click="showPackage"></b-table>
+    <b-button :disabled="disabled" variant="outline-primary sm" v-if="notUpdating" @click="this.updateTable"><icon name="refresh" scale="1.5"></icon> &nbsp &nbsp Update Table</b-button>
+    <b-button :disabled="disabled" variant="primary sm" v-else @click="fetchPackages()"><icon spin name="refresh" scale="1.5"></icon> &nbsp &nbsp Updating</b-button>
+    <b-table striped hover :items="allPackages" height="100" @cell-click="showPackage"></b-table>
   </div>
 </template>
 
@@ -43,17 +43,23 @@ export default({
       // show the analysis here
     },
     updateTable () {
-      this.fetchPackages();
-      this.notUpdating = false
-      this.updateAnimation();
-      console.log("No update tables");
-      console.log(this.notUpdating);
-      
+      this.notUpdating = false;
+      this.fetchPackages().then((res) => {
+        setTimeout(() => {
+          this.notUpdating = true;
+        }, 1000)
+      });
+
+      // this.notUpdating = false
+      // this.updateAnimation();
+      // console.log("No update tables");
+      // console.log(this.notUpdating);
+
     },
     updateAnimation () {
       this.notUpdating = true
       setTimeout(function() { console.log(this.notUpdating);}, 3000)
-      
+
     },
   },
   created () {

From f41342148aa93b35ee905752354d4eb19907c8cc Mon Sep 17 00:00:00 2001
From: MatheusMello <mat.mello93@gmail.com>
Date: Sep 26 2017 18:52:15 +0000
Subject: [PATCH 16/22] fixing link errors


---

diff --git a/src/components/packages/List.vue b/src/components/packages/List.vue
index 6c9056d..3208b61 100644
--- a/src/components/packages/List.vue
+++ b/src/components/packages/List.vue
@@ -43,24 +43,17 @@ export default({
       // show the analysis here
     },
     updateTable () {
-      this.notUpdating = false;
+      this.notUpdating = false
       this.fetchPackages().then((res) => {
         setTimeout(() => {
-          this.notUpdating = true;
+          this.notUpdating = true
         }, 1000)
-      });
-
-      // this.notUpdating = false
-      // this.updateAnimation();
-      // console.log("No update tables");
-      // console.log(this.notUpdating);
-
+      })
     },
     updateAnimation () {
       this.notUpdating = true
-      setTimeout(function() { console.log(this.notUpdating);}, 3000)
-
-    },
+      setTimeout(function () { console.log(this.notUpdating) }, 3000)
+    }
   },
   created () {
     this.updateTable()
@@ -68,7 +61,7 @@ export default({
   },
   beforeDestroy () {
     clearInterval(this.timer)
-  },
+  }
 })
 
 </script>

From 756304aa0c8db2f47a2ed6231ed6ab8912213de4 Mon Sep 17 00:00:00 2001
From: MatheusMello <mat.mello93@gmail.com>
Date: Sep 26 2017 19:18:12 +0000
Subject: [PATCH 17/22] Merge branch '12-search' into analise


Signed-off-by: MatheusMello <mat.mello93@gmail.com>

---

diff --git a/package.json b/package.json
index 5ada5df..5c00c63 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "node-sass": "^4.5.3",
     "sass-loader": "^6.0.6",
     "vue": "^2.3.3",
-    "vue-awesome": "^2.3.1",
+    "vue-awesome": "^2.3.3",
     "vue-data-tables": "^2.0.4",
     "vue-material": "^0.7.4",
     "vue-router": "^2.6.0",
diff --git a/src/components/home/Home.vue b/src/components/home/Home.vue
index 7341376..6b436ba 100644
--- a/src/components/home/Home.vue
+++ b/src/components/home/Home.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <header-kiskadee></header-kiskadee>
+    <search></search>
     <list-packages></list-packages>
   </div>
 </template>
@@ -8,9 +9,11 @@
 <script>
 import HeaderK from '../shared/HeaderK.vue'
 import List from '../packages/List.vue'
+import Search from '../packages/Search.vue'
 
 export default {
   components: {
+    'search': Search,
     'header-kiskadee': HeaderK,
     'list-packages': List
   }
@@ -19,4 +22,4 @@ export default {
 
 <style lang="scss" scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/packages/Search.vue b/src/components/packages/Search.vue
new file mode 100644
index 0000000..ffa3f87
--- /dev/null
+++ b/src/components/packages/Search.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="search-wrapper">
+    <div class="row">
+      <div class="text-center col-md-12">
+        <h1>Find Packages</h1>
+      </div>
+    </div>
+    <div class="row">
+      <div class="text-center col-md-12">
+        <h4>2 new packages recently added</h4>
+      </div>
+    </div>
+    <div class="row">
+        <div class="col-md-3"></div>
+        <div class="col-md-6 text-center">
+          <div class="wrapper">
+            <input v-model="term" placeholder="Find projects..." type="text" />
+            <a href="">
+              <icon class="search-icon" name="search" scale="1.5"></icon>
+            </a>
+          </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+import * as actionTypes from '../../store/actionTypes.js'
+import * as getterNames from '../../store/getterNames.js'
+
+export default {
+  data () {
+    return {
+      term: '',
+      searchDef: {
+        show: false
+      },
+      currentRow: null
+    }
+  },
+  computed: {
+    ...mapGetters([
+      getterNames.allPackages
+    ])
+  },
+  watch: {
+    term: function (val, oldVal) {
+      console.log(val)
+      this.fetchPackages(val)
+    }
+  },
+  methods: {
+    ...mapActions([
+      actionTypes.FETCH_PACKAGES
+    ]),
+    showPackage () {
+      // show the analysis here
+    }
+  },
+  created () {
+    this.fetchPackages(this.term)
+  }
+}
+
+</script>
+
+<style scoped>
+
+@media only screen and (max-width : 767px) {
+  .search-icon {
+    margin-left: -35px!important;
+  }
+}
+
+@media only screen and (max-width : 480px) {
+  .search-icon {
+    margin-left: 150px!important;
+  }
+}
+
+.search-wrapper {
+  /*background-image: url('/static/grey.jpg');*/
+  background-size: cover;
+  background-color: #eee;
+  min-height: 200px;
+ }
+
+h1 {
+  margin-top: 30px;
+  text-transform: uppercase;
+  font-size: 4em;
+  line-height: 1;
+  font-weight: 200;
+}
+
+h4 {
+  margin: 5px 0;
+  font-size: 1.3em;
+  font-weight: 300;
+  color: #2066AC;
+}
+
+.wrapper {
+  position: relative;
+  padding:0;
+  margin-bottom: 30px;
+ }
+
+.search-icon {
+  position: absolute;
+  font-size: 40px;
+  line-height: 30px;
+  margin-left: -35px;
+  top: 30px;
+  }
+
+  a {
+   text-decoration: none;
+  }
+
+  a:visited {
+   color: black;
+ }
+
+  input {
+    margin-top: 20px;
+    padding: 8px 5px;
+    width: 400px;
+    font-size: 1.2em;
+    line-height: 30px;
+  }
+
+ input:focus {
+   border-color: rgb(31, 48, 90);
+   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(31, 48, 90, 0.6);
+ }
+
+</style>
diff --git a/src/main.js b/src/main.js
index 5fd43a7..7729772 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,6 +14,10 @@ import lang from 'element-ui/lib/locale/lang/en'
 import locale from 'element-ui/lib/locale'
 import BootstrapVue from 'bootstrap-vue'
 
+import 'vue-awesome/icons'
+import Icon from 'vue-awesome/components/Icon'
+Vue.component('icon', Icon)
+
 locale.use(lang)
 
 Vue.use(ElementUI)
diff --git a/src/store/actionTypes.js b/src/store/actionTypes.js
index bf553e5..14876ae 100644
--- a/src/store/actionTypes.js
+++ b/src/store/actionTypes.js
@@ -1 +1,2 @@
 export const FETCH_PACKAGES = 'fetchPackages'
+export const FILTERED_PACKAGES = 'filteredPackages'
diff --git a/src/store/getterNames.js b/src/store/getterNames.js
index f1e1aba..dcfa1a9 100644
--- a/src/store/getterNames.js
+++ b/src/store/getterNames.js
@@ -1 +1,2 @@
 export const allPackages = 'allPackages'
+export const filteredPackages = 'filteredPackages'
diff --git a/src/store/modules/packages.js b/src/store/modules/packages.js
index 9d92df5..a57c996 100644
--- a/src/store/modules/packages.js
+++ b/src/store/modules/packages.js
@@ -1,35 +1,80 @@
-import api from '../../api/packages'
+// import api from '../../api/packages'
 import * as actionTypes from '../actionTypes'
 import * as getterNames from '../getterNames'
 import * as mutationTypes from '../mutationsTypes'
 
+const mockedPackages = [
+  {
+    name: 'example1',
+    last_version: '0.1'
+  },
+  {
+    name: 'foo1',
+    last_version: '0.2'
+  },
+  {
+    name: 'example2',
+    last_version: '0.3'
+  }
+]
+
 const state = {
-  allPackages: []
+  allPackages: [],
+  filteredPackages: {}
 }
 
 const getters = {
   [getterNames.allPackages]: (state) => {
     return state.allPackages
+  },
+  [getterNames.filteredPackages]: (state) => {
+    return state.filteredPackages
   }
 }
 
 const actions = {
-  async [actionTypes.FETCH_PACKAGES] ({commit, getters, state}) {
-    let { data } = await api.get()
+  async [actionTypes.FETCH_PACKAGES] ({commit, getters, state}, search) {
+    // let { data } = await api.get()
+    console.log(`action: ${search}`)
+    let data = []
+    if (!search) {
+      data = mockedPackages
+    } else {
+      data = mockedPackages.filter((pkg) => {
+        return pkg.name.includes(search)
+      })
+    }
     commit(mutationTypes.STORE_PACKAGES, data)
+  },
+  async [actionTypes.FILTERED_PACKAGES] ({commit, getters, state}, search) {
+    commit(mutationTypes.FILTER_PACKAGES, search)
   }
 }
 
 const mutations = {
   [mutationTypes.STORE_PACKAGES] (state, data) {
-    state.allPackages = data.packages.map((pkg) => {
+    state.allPackages = data.map((pkg) => {
+      return {
+        name: pkg.name,
+        last_version: pkg.last_version
+      }
+    })
+  },
+  [mutationTypes.FILTER_PACKAGES] (state, search) {
+    state.filtered = state.allPackages.map((pkg) => {
       return {
         package_id: pkg.versions[0].package_id,
         name: pkg.name,
+<<<<<<< HEAD
         last_version: pkg.versions[0].number,
         fetcher_id: pkg.fetcher_id,
         analyzer_id: pkg.versions[0].analysis[0].analyzer_id
+=======
+        last_version: pkg.last_version
+>>>>>>> 12-search
       }
+    }).filter((pkg) => {
+      return pkg.name.includes(search)
     })
   }
 }
diff --git a/src/store/mutationsTypes.js b/src/store/mutationsTypes.js
index fca80de..ee1f6b1 100644
--- a/src/store/mutationsTypes.js
+++ b/src/store/mutationsTypes.js
@@ -1 +1,2 @@
 export const STORE_PACKAGES = 'STORE_PACKAGES'
+export const FILTER_PACKAGES = 'FILTER_PACKAGES'

From 10fb37809a82177bba603bcffa9fa8eaa1690c21 Mon Sep 17 00:00:00 2001
From: MatheusMello <mat.mello93@gmail.com>
Date: Sep 26 2017 19:31:36 +0000
Subject: [PATCH 18/22] merge


---

diff --git a/src/main.js b/src/main.js
index 7729772..ad3eabe 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,8 +14,6 @@ import lang from 'element-ui/lib/locale/lang/en'
 import locale from 'element-ui/lib/locale'
 import BootstrapVue from 'bootstrap-vue'
 
-import 'vue-awesome/icons'
-import Icon from 'vue-awesome/components/Icon'
 Vue.component('icon', Icon)
 
 locale.use(lang)
diff --git a/src/store/modules/packages.js b/src/store/modules/packages.js
index a57c996..47fa484 100644
--- a/src/store/modules/packages.js
+++ b/src/store/modules/packages.js
@@ -65,13 +65,9 @@ const mutations = {
       return {
         package_id: pkg.versions[0].package_id,
         name: pkg.name,
-<<<<<<< HEAD
-        last_version: pkg.versions[0].number,
+        last_version: pkg.last_version,
         fetcher_id: pkg.fetcher_id,
         analyzer_id: pkg.versions[0].analysis[0].analyzer_id
-=======
-        last_version: pkg.last_version
->>>>>>> 12-search
       }
     }).filter((pkg) => {
       return pkg.name.includes(search)

From edfd9f6e7833e398549c21c0cf04a84378d2b8fc Mon Sep 17 00:00:00 2001
From: Omar Junior <omarfariajr@gmail.com>
Date: Sep 26 2017 20:57:41 +0000
Subject: [PATCH 19/22] Adding last update table time


---

diff --git a/src/components/packages/List.vue b/src/components/packages/List.vue
index 3208b61..c2f417c 100644
--- a/src/components/packages/List.vue
+++ b/src/components/packages/List.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="list-pkgs">
     <b-button :disabled="disabled" variant="outline-primary sm" v-if="notUpdating" @click="this.updateTable"><icon name="refresh" scale="1.5"></icon> &nbsp &nbsp Update Table</b-button>
-    <b-button :disabled="disabled" variant="primary sm" v-else @click="fetchPackages()"><icon spin name="refresh" scale="1.5"></icon> &nbsp &nbsp Updating</b-button>
+    <b-button :disabled="disabled" variant="primary sm" v-else><icon spin name="refresh" scale="1.5"></icon> &nbsp &nbsp Updating</b-button>
+    <span class="text-muted">Last updated {{ this.updateData }}</span>
     <b-table striped hover :items="allPackages" height="100" @cell-click="showPackage"></b-table>
   </div>
 </template>
@@ -10,6 +11,7 @@
 import { mapActions, mapGetters } from 'vuex'
 import * as actionTypes from '../../store/actionTypes.js'
 import * as getterNames from '../../store/getterNames.js'
+import moment from 'moment'
 
 const items = [
   { Name: 'Debian', Version: 1.0, Upstream: 'http://ftp.us.debian.org/debian' },
@@ -20,6 +22,7 @@ const items = [
 export default({
   data () {
     return {
+      updateData: null,
       notUpdating: true,
       disabled: false,
       items: items,
@@ -49,6 +52,7 @@ export default({
           this.notUpdating = true
         }, 1000)
       })
+      this.updateData = moment().calendar()
     },
     updateAnimation () {
       this.notUpdating = true

From 7d977d9ba12153dad1b30e246d62deab1363e1d5 Mon Sep 17 00:00:00 2001
From: eduqg <eduardoqgomes@gmail.com>
Date: Sep 26 2017 21:30:15 +0000
Subject: [PATCH 20/22] Inserting message for sucess and import error


---

diff --git a/src/components/packages/List.vue b/src/components/packages/List.vue
index 3208b61..fa7566b 100644
--- a/src/components/packages/List.vue
+++ b/src/components/packages/List.vue
@@ -1,7 +1,22 @@
 <template>
   <div class="list-pkgs">
+    <b-alert :show="sucessCountDown"
+             dismissible
+             variant="success"
+             @dismissed="sucessCountDown=0"
+             @dismiss-count-down="successCountDownChanged">
+      Packages successfully imported! ({{sucessCountDown}})
+    </b-alert>
+    <b-alert :show="errorCountDown"
+             dismissible
+             variant="danger"
+             @dismissed="errorCountDown=0"
+             @dismiss-count-down="errorCountDownChanged">
+      Packages not imported! ({{errorCountDown}})
+    </b-alert>
+
     <b-button :disabled="disabled" variant="outline-primary sm" v-if="notUpdating" @click="this.updateTable"><icon name="refresh" scale="1.5"></icon> &nbsp &nbsp Update Table</b-button>
-    <b-button :disabled="disabled" variant="primary sm" v-else @click="fetchPackages()"><icon spin name="refresh" scale="1.5"></icon> &nbsp &nbsp Updating</b-button>
+    <b-button :disabled="disabled" variant="primary sm" v-else><icon spin name="refresh" scale="1.5"></icon> &nbsp &nbsp Updating</b-button>
     <b-table striped hover :items="allPackages" height="100" @cell-click="showPackage"></b-table>
   </div>
 </template>
@@ -27,7 +42,10 @@ export default({
         show: false
       },
       currentRow: null,
-      timer: ''
+      timer: '',
+      dismissSecs: 3,
+      sucessCountDown: 0,
+      errorCountDown: 0
     }
   },
   computed: {
@@ -44,7 +62,8 @@ export default({
     },
     updateTable () {
       this.notUpdating = false
-      this.fetchPackages().then((res) => {
+      this.fetchPackages().then(async response => {
+        this.showAlert(response)
         setTimeout(() => {
           this.notUpdating = true
         }, 1000)
@@ -53,6 +72,19 @@ export default({
     updateAnimation () {
       this.notUpdating = true
       setTimeout(function () { console.log(this.notUpdating) }, 3000)
+    },
+    successCountDownChanged (sucessCountDown) {
+      this.sucessCountDown = sucessCountDown
+    },
+    errorCountDownChanged (errorCountDown) {
+      this.errorCountDown = errorCountDown
+    },
+    showAlert (sucessMessage) {
+      if (sucessMessage === true) {
+        this.sucessCountDown = this.dismissSecs
+      } else {
+        this.errorCountDown = this.dismissSecs
+      }
     }
   },
   created () {
diff --git a/src/store/modules/packages.js b/src/store/modules/packages.js
index 47fa484..3f37f35 100644
--- a/src/store/modules/packages.js
+++ b/src/store/modules/packages.js
@@ -45,6 +45,12 @@ const actions = {
       })
     }
     commit(mutationTypes.STORE_PACKAGES, data)
+
+    if (data.length === 0) {
+      return false
+    } else {
+      return true
+    }
   },
   async [actionTypes.FILTERED_PACKAGES] ({commit, getters, state}, search) {
     commit(mutationTypes.FILTER_PACKAGES, search)

From 00b52126adcfdd2015aab5d0418efa00553878ec Mon Sep 17 00:00:00 2001
From: MatheusMello <mat.mello93@gmail.com>
Date: Sep 26 2017 21:32:55 +0000
Subject: [PATCH 21/22] merge message import


---

diff --git a/src/components/packages/List.vue b/src/components/packages/List.vue
index c2f417c..550f13c 100644
--- a/src/components/packages/List.vue
+++ b/src/components/packages/List.vue
@@ -1,5 +1,20 @@
 <template>
   <div class="list-pkgs">
+    <b-alert :show="sucessCountDown"
+             dismissible
+             variant="success"
+             @dismissed="sucessCountDown=0"
+             @dismiss-count-down="successCountDownChanged">
+      Packages successfully imported! ({{sucessCountDown}})
+    </b-alert>
+    <b-alert :show="errorCountDown"
+             dismissible
+             variant="danger"
+             @dismissed="errorCountDown=0"
+             @dismiss-count-down="errorCountDownChanged">
+      Packages not imported! ({{errorCountDown}})
+    </b-alert>
+
     <b-button :disabled="disabled" variant="outline-primary sm" v-if="notUpdating" @click="this.updateTable"><icon name="refresh" scale="1.5"></icon> &nbsp &nbsp Update Table</b-button>
     <b-button :disabled="disabled" variant="primary sm" v-else><icon spin name="refresh" scale="1.5"></icon> &nbsp &nbsp Updating</b-button>
     <span class="text-muted">Last updated {{ this.updateData }}</span>
@@ -30,7 +45,10 @@ export default({
         show: false
       },
       currentRow: null,
-      timer: ''
+      timer: '',
+      dismissSecs: 3,
+      sucessCountDown: 0,
+      errorCountDown: 0
     }
   },
   computed: {
@@ -47,7 +65,8 @@ export default({
     },
     updateTable () {
       this.notUpdating = false
-      this.fetchPackages().then((res) => {
+      this.fetchPackages().then(async response => {
+        this.showAlert(response)
         setTimeout(() => {
           this.notUpdating = true
         }, 1000)
@@ -57,6 +76,19 @@ export default({
     updateAnimation () {
       this.notUpdating = true
       setTimeout(function () { console.log(this.notUpdating) }, 3000)
+    },
+    successCountDownChanged (sucessCountDown) {
+      this.sucessCountDown = sucessCountDown
+    },
+    errorCountDownChanged (errorCountDown) {
+      this.errorCountDown = errorCountDown
+    },
+    showAlert (sucessMessage) {
+      if (sucessMessage === true) {
+        this.sucessCountDown = this.dismissSecs
+      } else {
+        this.errorCountDown = this.dismissSecs
+      }
     }
   },
   created () {
diff --git a/src/store/modules/packages.js b/src/store/modules/packages.js
index 47fa484..3f37f35 100644
--- a/src/store/modules/packages.js
+++ b/src/store/modules/packages.js
@@ -45,6 +45,12 @@ const actions = {
       })
     }
     commit(mutationTypes.STORE_PACKAGES, data)
+
+    if (data.length === 0) {
+      return false
+    } else {
+      return true
+    }
   },
   async [actionTypes.FILTERED_PACKAGES] ({commit, getters, state}, search) {
     commit(mutationTypes.FILTER_PACKAGES, search)

From d83d348ae273a24017315386f2676c33050a449b Mon Sep 17 00:00:00 2001
From: MatheusMello <mat.mello93@gmail.com>
Date: Sep 26 2017 23:49:27 +0000
Subject: [PATCH 22/22] merge fixtures


---

diff --git a/src/components/packages/List.vue b/src/components/packages/List.vue
index 550f13c..de2b6e7 100644
--- a/src/components/packages/List.vue
+++ b/src/components/packages/List.vue
@@ -1,23 +1,34 @@
 <template>
-  <div class="list-pkgs">
-    <b-alert :show="sucessCountDown"
-             dismissible
-             variant="success"
-             @dismissed="sucessCountDown=0"
-             @dismiss-count-down="successCountDownChanged">
-      Packages successfully imported! ({{sucessCountDown}})
-    </b-alert>
-    <b-alert :show="errorCountDown"
-             dismissible
-             variant="danger"
-             @dismissed="errorCountDown=0"
-             @dismiss-count-down="errorCountDownChanged">
-      Packages not imported! ({{errorCountDown}})
-    </b-alert>
+  <div class="container list-pkgs">
 
-    <b-button :disabled="disabled" variant="outline-primary sm" v-if="notUpdating" @click="this.updateTable"><icon name="refresh" scale="1.5"></icon> &nbsp &nbsp Update Table</b-button>
-    <b-button :disabled="disabled" variant="primary sm" v-else><icon spin name="refresh" scale="1.5"></icon> &nbsp &nbsp Updating</b-button>
-    <span class="text-muted">Last updated {{ this.updateData }}</span>
+    <div class="row">
+      <div class="col-md-12">
+        <div class="alert">
+          <b-alert :show="sucessCountDown"
+                   dismissible
+                   variant="success"
+                   @dismissed="sucessCountDown=0"
+                   @dismiss-count-down="successCountDownChanged">
+            Packages successfully imported! ({{sucessCountDown}})
+          </b-alert>
+          <b-alert :show="errorCountDown"
+                   dismissible
+                   variant="danger"
+                   @dismissed="errorCountDown=0"
+                   @dismiss-count-down="errorCountDownChanged">
+            Packages not imported! ({{errorCountDown}})
+          </b-alert>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-5">
+        <b-button :disabled="disabled" variant="outline-primary sm" v-if="notUpdating" @click="this.updateTable"><icon name="refresh" scale="1.5"></icon> &nbsp &nbsp Update Table</b-button>
+        <b-button :disabled="disabled" variant="primary sm" v-else><icon spin name="refresh" scale="1.5"></icon> &nbsp &nbsp Updating</b-button>
+        <span class="date text-muted">Last updated {{ this.updateData }}</span>
+      </div>
+    </div>
     <b-table striped hover :items="allPackages" height="100" @cell-click="showPackage"></b-table>
   </div>
 </template>
@@ -105,6 +116,10 @@ export default({
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 
+.date {
+  font-size: 12px;
+}
+
 .list-pkgs {
   position: relative;
   top: 50px;
diff --git a/src/components/packages/Search.vue b/src/components/packages/Search.vue
index ffa3f87..f6098f1 100644
--- a/src/components/packages/Search.vue
+++ b/src/components/packages/Search.vue
@@ -14,7 +14,7 @@
         <div class="col-md-3"></div>
         <div class="col-md-6 text-center">
           <div class="wrapper">
-            <input v-model="term" placeholder="Find projects..." type="text" />
+            <input v-model="term" placeholder="Find packages..." type="text" />
             <a href="">
               <icon class="search-icon" name="search" scale="1.5"></icon>
             </a>

