Split AddEditTransaction into multiple components

Signed-off-by: William Brawner <me@wbrawner.com>

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);
     }
 }

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",

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",

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>

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>

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>

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,
     },
 ]
 

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])