From 12936c72abd0111c726ef7af655fbdb2de306098 Mon Sep 17 00:00:00 2001
From: William Brawner <me@wbrawner.com>
Date: Sun, 15 Mar 2020 21:15:43 -0600
Subject: [PATCH] Split AddEditTransaction into multiple components

Signed-off-by: William Brawner <me@wbrawner.com>
---
 lib/Db/Transaction.php                        |  2 +-
 src/components/BudgetDetails.vue              |  2 +-
 src/components/CategoryDetails.vue            |  2 +-
 .../transaction/EditTransaction.vue           | 20 ++++++++++++
 src/components/transaction/NewTransaction.vue | 23 ++++++++++++++
 .../{ => transaction}/TransactionDetails.vue  |  0
 .../TransactionForm.vue}                      | 31 +++++++++----------
 .../{ => transaction}/TransactionList.vue     |  0
 src/router/index.js                           |  9 +++---
 src/store/index.js                            |  5 +--
 10 files changed, 68 insertions(+), 26 deletions(-)
 create mode 100644 src/components/transaction/EditTransaction.vue
 create mode 100644 src/components/transaction/NewTransaction.vue
 rename src/components/{ => transaction}/TransactionDetails.vue (100%)
 rename src/components/{AddEditTransaction.vue => transaction/TransactionForm.vue} (80%)
 rename src/components/{ => transaction}/TransactionList.vue (100%)

diff --git a/lib/Db/Transaction.php b/lib/Db/Transaction.php
index 0ff428f..1faae35 100644
--- a/lib/Db/Transaction.php
+++ b/lib/Db/Transaction.php
@@ -41,6 +41,6 @@ class Transaction extends Entity implements JsonSerializable {
         if (!$timestamp) return null;
         $datetime = new DateTime();
         $datetime->setTimestamp($timestamp);
-        return $datetime->format(DateTime::ATOM);
+        return $datetime->format(DateTime::RFC3339_EXTENDED);
     }
 }
\ No newline at end of file
diff --git a/src/components/BudgetDetails.vue b/src/components/BudgetDetails.vue
index 4867e64..4c325f4 100644
--- a/src/components/BudgetDetails.vue
+++ b/src/components/BudgetDetails.vue
@@ -37,7 +37,7 @@ import { mapGetters, mapState } from "vuex";
 import { Actions } from "@nextcloud/vue/dist/Components/Actions";
 import { ActionButton } from "@nextcloud/vue/dist/Components/ActionButton";
 import CategoryList from "./CategoryList";
-import TransactionList from "./TransactionList";
+import TransactionList from "./transaction/TransactionList";
 
 export default {
   name: "budget-details",
diff --git a/src/components/CategoryDetails.vue b/src/components/CategoryDetails.vue
index 75ee19a..ec0d024 100644
--- a/src/components/CategoryDetails.vue
+++ b/src/components/CategoryDetails.vue
@@ -8,7 +8,7 @@
 </template>
 <script>
 import { mapGetters, mapState } from "vuex";
-import TransactionList from './TransactionList'
+import TransactionList from './transaction/TransactionList'
 
 export default {
   name: "category-details",
diff --git a/src/components/transaction/EditTransaction.vue b/src/components/transaction/EditTransaction.vue
new file mode 100644
index 0000000..508363b
--- /dev/null
+++ b/src/components/transaction/EditTransaction.vue
@@ -0,0 +1,20 @@
+<template>
+    <TransactionForm :transaction="transaction" />
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import TransactionForm from './TransactionForm'
+
+export default {
+    name: 'edit-transaction',
+    components: {
+        TransactionForm
+    },
+    computed: {
+        ...mapGetters(['transaction'])
+    },
+    mounted() {
+        this.$store.dispatch("editTransactionViewed", this.$route.params.id);
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/transaction/NewTransaction.vue b/src/components/transaction/NewTransaction.vue
new file mode 100644
index 0000000..1809fcd
--- /dev/null
+++ b/src/components/transaction/NewTransaction.vue
@@ -0,0 +1,23 @@
+<template>
+  <TransactionForm :transaction="transaction" />
+</template>
+<script>
+import TransactionForm from "./TransactionForm";
+
+export default {
+  name: "new-transaction",
+  components: {
+    TransactionForm
+  },
+  data: function() {
+    return {
+      transaction: {
+        date: new Date(),
+        expense: true,
+        budgetId: this.$store.state.currentBudget,
+        categoryId: this.$store.state.currentCategory
+      }
+    };
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/components/TransactionDetails.vue b/src/components/transaction/TransactionDetails.vue
similarity index 100%
rename from src/components/TransactionDetails.vue
rename to src/components/transaction/TransactionDetails.vue
diff --git a/src/components/AddEditTransaction.vue b/src/components/transaction/TransactionForm.vue
similarity index 80%
rename from src/components/AddEditTransaction.vue
rename to src/components/transaction/TransactionForm.vue
index 8bedb48..0b31bc5 100644
--- a/src/components/AddEditTransaction.vue
+++ b/src/components/transaction/TransactionForm.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="!loading && transaction" class="add-edit-transaction">
+    <div v-if="!loading" class="add-edit-transaction">
       <h2>{{ transaction.id ? 'Edit' : 'Add' }} Transaction</h2>
       <input v-model="transaction.name" type="text" placeholder="Name" title="Name" />
       <textarea v-model="transaction.description" placeholder="Description" title="Description"></textarea>
@@ -40,42 +40,39 @@ export default {
   },
   data: function() {
     return {
-      transaction: Object,
-      loading: true
+      saving: false
     };
   },
+  props: {
+    transaction: Object
+  },
   computed: {
     ...mapGetters(["budgets"]),
     filteredCategories: function(state) {
       return this.$store.getters.categories.filter(function(category) {
         return category.expense === state.transaction.expense;
       });
-    }
+    },
+    loading: state => state.transaction === undefined || state.saving
   },
   methods: {
     updateCategories() {
+      if (!this.transaction) return;
       this.$store.dispatch(
         "addEditTransactionBudgetSelected",
         this.transaction.budgetId
       );
     },
     saveTransaction() {
-        this.loading = true
-        this.$store.dispatch('addEditTransactionSaveClicked', this.transaction)
+      this.saving = true;
+      this.$store.dispatch("addEditTransactionSaveClicked", this.transaction);
     }
   },
   mounted() {
-    if (this.$route.params.id) {
-      this.transaction = this.$store.getters.transaction(this.$route.params.id);
-    } else {
-      this.transaction = {
-        date: new Date(),
-        expense: true,
-        budgetId: this.$store.state.currentBudget,
-        categoryId: this.$store.state.currentCategory
-      };
+    let transactionId;
+    if (this.transaction) {
+      transactionId = this.transaction.id;
     }
-    this.loading = false;
     this.updateCategories();
   }
 };
@@ -95,6 +92,6 @@ export default {
   margin-right: 1em;
 }
 .icon-loading {
-    margin-top: 16px;
+  margin-top: 16px;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/TransactionList.vue b/src/components/transaction/TransactionList.vue
similarity index 100%
rename from src/components/TransactionList.vue
rename to src/components/transaction/TransactionList.vue
diff --git a/src/router/index.js b/src/router/index.js
index b6f6373..49ea192 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,8 +2,9 @@ import VueRouter from 'vue-router'
 import Vue from 'vue'
 import BudgetDetails from '../components/BudgetDetails'
 import CategoryDetails from '../components/CategoryDetails'
-import AddEditTransaction from '../components/AddEditTransaction'
-import TransactionDetails from '../components/TransactionDetails'
+import NewTransaction from '../components/transaction/NewTransaction'
+import EditTransaction from '../components/transaction/EditTransaction'
+import TransactionDetails from '../components/transaction/TransactionDetails'
 
 Vue.use(VueRouter)
 
@@ -21,7 +22,7 @@ const routes = [
     {
         path: '/transactions/new',
         name: 'newTransaction',
-        component: AddEditTransaction,
+        component: NewTransaction,
     },
     {
         path: '/transactions/:id',
@@ -31,7 +32,7 @@ const routes = [
     {
         path: '/transactions/:id/edit',
         name: 'editTransaction',
-        component: AddEditTransaction,
+        component: EditTransaction,
     },
 ]
 
diff --git a/src/store/index.js b/src/store/index.js
index 18b1785..70e801f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -91,8 +91,9 @@ export default new Vuex.Store({
         addTransactionClicked({ commit }) {
             router.push({ name: "newTransaction" })
         },
-        addEditTransactionViewed({ commit, state, getters }, transactionId) {
-            if (transactionId && getters.transaction(transactionId) === undefined) {
+        editTransactionViewed({ commit, state, getters }, transactionId) {
+            commit('setCurrentTransaction', transactionId)
+            if (transactionId !== undefined && getters.transaction === undefined) {
                 axios.get(OC.generateUrl(`/apps/twigs/api/v1.0/transactions/${transactionId}`))
                     .then((response) => {
                         commit('setTransactions', [response.data])