Added functionality for adding and deleting transactions manually, and loading and saving using localstorage, however there is a bug with the job passed to localstorage. Also changed the data structure slightly.

README.md

@@ -21,7 +21,7 @@ If you wish to contribute other bank statement csv formats or features then plea
 
 ### Things for version 1.0
 
-1. Set up adding statement lines and displaying them
+1. ~~Set up adding statement lines and displaying them~~
 2. Set up adding and saving statement lines with localstorage, and reloading from localstorage
 3. Set up importing a csv file (bank statement) to the data structure, adding each line 
 4. Modify that to ignore any entries that already exist upon import

package-lock.json

@@ -10566,8 +10566,7 @@
     "uuid": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
-      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
-      "dev": true
     },
     "validate-npm-package-license": {
       "version": "3.0.4",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^2.6.5",
+    "uuid": "^3.3.2",
     "vue": "^2.6.6",
     "vue-router": "^3.0.1"
   },

src/App.vue

@@ -11,48 +11,6 @@ export default {
   name: 'app',
   components: {
     Header
-  },
-  data: function() {
-    return {
-      accounts: [
-        {
-          "AccountName": "", 
-          "Bank": "", 
-          "Transactions": [
-            {
-              "Date": "",
-              "TransactionTypeDescription": "",
-              "Description": "",
-              "IsExpenditure": true,
-              "Amount": 0,
-              "Balance": 0, 
-              "Tags": []
-            }
-          ]
-        }
-      ], 
-      tagsExpenditure: [
-        "Appearance",
-        "Bills - Car",
-        "Bills - Home",
-        "Bills - Subscriptions",
-        "Eating out",
-        "Enjoyment",
-        "Family",
-        "Home",
-        "Insurance",
-        "One-off or other",
-        "Repayments",
-        "Savings",
-        "Transfers",
-        "Transport"
-      ],
-      tagsIncome: [
-        "Other",
-        "Savings",
-        "Wages"
-      ]
-    }
   }
 }
 </script>

src/components/AddTransaction.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <form @submit="addTransaction">
+      <input type="text" v-model="description" name="description" placeholder="Add transaction description...">
+      <input type="submit" value="Submit" class="btn">
+    </form>
+  </div>
+</template>
+
+<script>
+import uuid from 'uuid';
+export default {
+  name: "AddTransaction",
+  data() {
+    return {
+      description: ''
+    }
+  },
+  methods: {
+    addTransaction(e) {
+      e.preventDefault();
+      const newTransaction = {
+        id: uuid.v4(),
+        date: "Monday 1st Jan",
+        transactionTypeDescription: "Type desc",
+        description: this.description,
+        isExpenditure: true,
+        amount: 10,
+        balance: 0, 
+        tags: ["tag1", "tag2"]
+      }
+      // Send up to parent
+      this.$emit('add-transaction', newTransaction);
+      this.description = '';
+    }
+  }
+}
+</script>
+
+<style scoped>
+  form {
+    display: flex;
+  }
+  input[type="text"] {
+    flex: 10;
+    padding: 5px;
+  }
+  input[type="submit"] {
+    flex: 2;
+  }
+</style>

src/components/TransactionLine.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="transaction-line" v-bind:class="{'is-saving':!transaction.isExpenditure}">
+    <p>
+      {{transaction.id}} - {{transaction.date}} - {{transaction.transactionTypeDescription}} - {{transaction.description}} - {{transaction.amount}} :: {{transaction.tags}}
+      <button @click="$emit('del-transaction', transaction.id)" class="del">x</button>
+      </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TransactionLine",
+  props: ["transaction"]
+}
+</script>
+
+<style scoped>
+  .transaction-line {
+    background: #f4f4f4;
+    padding: 10px;
+    border-bottom: 1px #ccc dotted;
+  }
+  .is-saving {
+    background: #00cc66;
+  }
+  .del {
+    background: #ff0000;
+    color: #fff;
+    border: none;
+    padding: 5px 9px;
+    border-radius: 50%;
+    cursor: pointer;
+    float: right;
+  }
+</style>

src/components/Transactions.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <div v-bind:key="transaction.id" v-for="transaction in transactions">
+      <TransactionLine v-bind:transaction="transaction" v-on:del-transaction="$emit('del-transaction', transaction.id)" />
+    </div>
+  </div>
+</template>
+
+<script>
+import TransactionLine from './TransactionLine.vue';
+export default {
+  name: "Transactions",
+  components: {
+    TransactionLine
+  },
+  props: ["transactions"]
+}
+</script>
+
+<style scoped>
+</style>

src/views/Home.vue

@@ -1,18 +1,102 @@
 <template>
-  <div class="home">
+  <div id="app">
-    <img alt="Vue logo" src="../assets/logo.png">
+    <AddTransaction v-on:add-transaction="addTransaction" />
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <Transactions v-bind:transactions="transactions" v-on:del-transaction="deleteTransaction" />
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
+import Transactions from '../components/Transactions';
-import HelloWorld from '@/components/HelloWorld.vue'
+import AddTransaction from '../components/AddTransaction';
 
 export default {
   name: 'home',
   components: {
-    HelloWorld
+    Transactions, 
+    AddTransaction
+  }, 
+  data: function() {
+    return {
+      accounts: [
+        {
+          "accountName": "", 
+          "bank": ""
+        }
+      ], 
+      "transactions": [],
+      tagsExpenditure: [
+        "Appearance",
+        "Bills - Car",
+        "Bills - Home",
+        "Bills - Subscriptions",
+        "Eating out",
+        "Enjoyment",
+        "Family",
+        "Home",
+        "Insurance",
+        "One-off or other",
+        "Repayments",
+        "Savings",
+        "Transfers",
+        "Transport"
+      ],
+      tagsIncome: [
+        "Other",
+        "Savings",
+        "Wages"
+      ]
+    }
+  },
+  mounted() {
+    if (localStorage.getItem('transactions')) {
+      try {
+        this.transactions = JSON.parse(localStorage.getItem('transactions'));
+      } catch(e) {
+        alert(e);
+        localStorage.removeItem('transactions');
+      }
+    }
+  },
+  watch: {
+    transactions(newTransaction) {
+      localStorage.transactions = [...localStorage.transactions, newTransaction];
+    }
+  },
+  methods: {
+    deleteTransaction(id) {
+      this.transactions = this.transactions.filter(transaction => transaction.id !== id);
+    },
+    addTransaction(newTransaction) {
+      this.transactions.push(newTransaction);
+      this.saveTransactions();
+    },
+    saveTransactions() {
+      alert(JSON.stringify(this.transactions));
+      localStorage.setItem('transactions', JSON.stringify(this.transactions));
+    }
   }
 }
 </script>
+
+<style>
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+  body {
+    font-family: Arial, Helvetica, sans-serif;
+    line-height: 1.4;
+  }
+  .btn {
+    display: inline-block;
+    border: none;
+    background: #555;
+    color: #fff;
+    padding: 7px 20px;
+    cursor: pointer;
+  }
+  .btn:hover {
+    background: #666;
+  }
+</style>