From 29b3f03f5dbd20a0199495bc2e8b3ba871aa1113 Mon Sep 17 00:00:00 2001
From: David Carlos <ddavidcarlos1392@gmail.com>
Date: Aug 09 2017 01:12:38 +0000
Subject: Consume thd '/packages' endpoint.


      - Now we show a list of packages, retrieved from the
      '/packages' endpoint.

---

diff --git a/src/components/List.vue b/src/components/List.vue
index 5b91765..7f3e2ae 100644
--- a/src/components/List.vue
+++ b/src/components/List.vue
@@ -2,18 +2,17 @@
 <template>
     <div class='list-pkgs'>
   <data-tables :data='tableData' :search-def='searchDef'>
-    <el-table-column prop="package" label="Package" sortable="custom">
-    </el-table-column>
-    <el-table-column prop="latest_version" label="Latest Version" sortable="custom">
-    </el-table-column>
-    <el-table-column prop="fetcher" label="Fetcher" sortable="custom">
+    <el-table-column prop="name" label="Package" sortable="custom">
     </el-table-column>
+    <el-table-column prop="id" label="Package id" sortable="custom">
     </el-table-column>
   </data-tables>
 </div>
 </template>
 
 <script>
+import axios from 'axios'
+
 export default({
   data () {
     return {
@@ -24,21 +23,20 @@ export default({
     }
   },
   created () {
-    this.tableData = [{
-      'package': '5',
-      'latest_version': 'North',
-      'fetcher': '13400000000'
-    }, {
-      'package': '6',
-      'latest_version': 'North',
-      'fetcher': '13400000000'
-    }, {
-      'package': '7',
-      'latest_version': 'North',
-      'fetcher': '13400000000'
-    }]
+    var instance = axios.create({
+      baseURL: 'http://0.0.0.0:5000',
+      timeout: 1000
+    })
+    getPackages(instance).then(response => {
+      this.tableData = response.data.packages
+    })
   }
 })
+
+function getPackages (axiosIinstance) {
+  return axiosIinstance.get('/packages')
+}
+
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/src/main.js b/src/main.js
index 748dcac..ad059a5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,6 +8,10 @@ import List from './components/List'
 import DataTables from 'vue-data-tables'
 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'
+
+locale.use(lang)
 
 Vue.use(ElementUI)
 Vue.use(DataTables)