From 74a035c402d24e007a5914b370912b43f1fb67f8 Mon Sep 17 00:00:00 2001
From: Thiago Moreira <thiago.cmoreira@yahoo.com.br>
Date: Aug 30 2017 15:18:36 +0000
Subject: [PATCH 1/4] Changing directory of components and routes, but not working

- Adding component Home to use other components

---

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/Home.vue b/src/components/Home.vue
new file mode 100644
index 0000000..8f6e6f0
--- /dev/null
+++ b/src/components/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 './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/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/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..b7a8607
--- /dev/null
+++ b/src/router/routes.js
@@ -0,0 +1,5 @@
+import Home from '../components/Home.vue'
+
+export const routes = [
+  { path: '', component: Home }
+]

From bab6d0c22ba433c91ebf82bcc26e3e069b077892 Mon Sep 17 00:00:00 2001
From: Thiago Moreira <thiago.cmoreira@yahoo.com.br>
Date: Aug 30 2017 15:28:18 +0000
Subject: [PATCH 2/4] Keeping only one instance of vue and adjusting files for proper operation


---

diff --git a/index.html b/index.html
index 713d8dd..6bdc5d0 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,19 @@
 <!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">
+<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>
 
-<div id="app"></div>
+<!-- <div id="app"></div>
 <md-layout>
     <div id="list">
         <list-component :is="tableData"></list-component>
     </div>
-</md-layout>
+</md-layout> -->
diff --git a/package.json b/package.json
index 67a7f7e..8daa5a1 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,11 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs"
   },
   "dependencies": {
+    "moment": "^2.18.1",
+    "node-sass": "^4.5.3",
+    "sass-loader": "^6.0.6",
     "vue": "^2.3.3",
+    "vue-data-tables": "^2.0.4",
     "vue-material": "^0.7.4",
     "vue-router": "^2.6.0",
     "vue-table-component": "^1.3.0"
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/main.js b/src/main.js
index ad059a5..e4ca4c3 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 DataTables from 'vue-data-tables'
 import ElementUI from 'element-ui'
@@ -15,9 +14,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',
@@ -31,20 +32,12 @@ 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)
 })

From 8d036a6af5a8e6ff53fb4f73b5b19792fc727a50 Mon Sep 17 00:00:00 2001
From: Thiago Moreira <thiago.cmoreira@yahoo.com.br>
Date: Aug 31 2017 19:04:20 +0000
Subject: [PATCH 3/4] Adding api and any changes to structure


---

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/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/components/Home.vue b/src/components/Home.vue
deleted file mode 100644
index 8f6e6f0..0000000
--- a/src/components/Home.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div>
-    <header-kiskadee></header-kiskadee>
-    <list-packages></list-packages>
-  </div>
-</template>
-
-<script>
-import HeaderK from './shared/HeaderK.vue'
-import List from './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/List.vue b/src/components/List.vue
deleted file mode 100644
index 4615ae5..0000000
--- a/src/components/List.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-<div class="list-pkgs">
-  <md-button v-on:click="updateTable">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 {
-      tableData: [],
-      searchDef: {
-        show: false
-      },
-      currentRow: null
-    }
-  },
-  methods: {
-    updateTable: function () {
-      getPackages().then(response => {
-        this.tableData = parseApiData(response.data.packages)
-        console.log(response)
-      })
-    },
-    showPackage: function () {
-      // show the analysis here
-    }
-  },
-  created () {
-    getPackages().then(response => {
-      this.tableData = parseApiData(response.data.packages)
-    })
-  }
-})
-
-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/router/routes.js b/src/router/routes.js
index b7a8607..183a362 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1,4 +1,4 @@
-import Home from '../components/Home.vue'
+import Home from '../components/home/Home.vue'
 
 export const routes = [
   { path: '', component: Home }

From 8c6e817cc34d1cc2ead5197dfdd0ece32fee5702 Mon Sep 17 00:00:00 2001
From: Thiago Moreira <thiago.cmoreira@yahoo.com.br>
Date: Aug 31 2017 20:07:12 +0000
Subject: [PATCH 4/4] Refactoring List component and adding api method to get packages


---

diff --git a/index.html b/index.html
index 6bdc5d0..a4a551b 100644
--- a/index.html
+++ b/index.html
@@ -10,10 +10,3 @@
     <div id="app"></div>
   </body>
 </html>
-
-<!-- <div id="app"></div>
-<md-layout>
-    <div id="list">
-        <list-component :is="tableData"></list-component>
-    </div>
-</md-layout> -->
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/packages/List.vue b/src/components/packages/List.vue
new file mode 100644
index 0000000..28355fa
--- /dev/null
+++ b/src/components/packages/List.vue
@@ -0,0 +1,61 @@
+<template>
+<div class="list-pkgs">
+  <md-button v-on:click="updateTable">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 packagesApi from '../../api/packages.js'
+
+export default {
+  data () {
+    return {
+      tableData: [],
+      searchDef: {
+        show: false
+      },
+      currentRow: null
+    }
+  },
+  methods: {
+    parseApiData (packages) {
+      var parsedPackages = []
+
+      for (var pkg of packages) {
+        var pkgName = pkg.name
+        var pkgNewestAnalyzedVersion = pkg.versions[0].number
+        var item = {name: pkgName, last_version: pkgNewestAnalyzedVersion}
+        parsedPackages.push(item)
+      }
+
+      return parsedPackages
+    },
+    showPackage () {
+      // show the analysis here
+    },
+    async updateTable () {
+      let { data } = await packagesApi.get()
+      this.tableData = this.parseApiData(data.packages)
+    }
+  },
+  created () {
+    this.updateTable()
+  }
+}
+
+</script>
+
+<style scoped>
+
+.list-pkgs {
+  position: relative;
+  top: 50px;
+}
+
+</style>