From 0c8a273fb91af2e59cbde55f9db6e5b83bf40df1 Mon Sep 17 00:00:00 2001
From: Davi Busanello <itsme@davibusanello.net>
Date: Tue, 9 Oct 2018 12:13:08 -0300
Subject: [PATCH] WIP: Draft transactions timeline

---
 src/components/Login.vue                | 10 ++++--
 src/components/TransactionsTimeline.vue | 41 +++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 src/components/TransactionsTimeline.vue

diff --git a/src/components/Login.vue b/src/components/Login.vue
index 40aed8d..25c611b 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -23,7 +23,12 @@
 
     <div v-if="api.loaded" class="charts">
       <span class="title">Categories</span>
-      <bar-chart  :data=this.api.data.categories></bar-chart>
+      <bar-chart :data=this.api.data.categories></bar-chart>
+    </div>
+
+    <div id="timeline" v-if="api.loaded">
+      <span class="title">Transactions Timeline</span>
+      <transactions-timeline :transactions=this.api.data.feedData></transactions-timeline>
     </div>
 
   </div>
@@ -32,10 +37,11 @@
 <script>
 
 import BarChart from './Charts/CategoriesChart.vue';
+import TransactionsTimeline from './TransactionsTimeline.vue';
 
 export default {
   name: 'Login',
-  components: { BarChart },
+  components: { BarChart, TransactionsTimeline },
   data: () => ({
     username: null,
     password: null,
diff --git a/src/components/TransactionsTimeline.vue b/src/components/TransactionsTimeline.vue
new file mode 100644
index 0000000..2c097b2
--- /dev/null
+++ b/src/components/TransactionsTimeline.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="container">
+    <span class="title">Last 30 Transactions</span>
+    <div v-if="data !== []">
+      <ul id="transactions">
+        <li v-for="transaction in transactions" :key="transaction.id">
+          <span class="date">{{transaction.date}}</span>
+          <span class="description">{{ transaction.description }}</span>
+          <span class="amount">Amount: {{transaction.amount}}</span>
+          <span v-if="transaction.dollar">Dollar: {{transaction.dollar}}</span>
+        </li>
+      </ul>
+
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'TransactionsTimeline',
+  props: {
+    transactions: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.transactions = Object.entries(this.transactions)
+      .slice(0, 30)
+      .map(item => item[1]);
+  },
+};
+</script>
+
+<style scoped>
+span {
+  padding: 5px;
+}
+</style>