Implement YNAB Import in Vue

web/src/pages/Settings.vue

@@ -2,15 +2,44 @@
 import { TITLE } from "../store/mutation-types"
 
 export default {
+    data() {
+        return {
+            transactionsFile: null,
+            assignmentsFile: null
+        }
+    },
+    computed: {
+        hasFiles() {
+            return this.$data.transactionsFile != null && this.$data.assignmentsFile != null;
+        }
+    },
     mounted() {
         this.$store.commit(TITLE, "Settings")
     },
     methods: {
+        gotAssignments(e){
+            this.$data.assignmentsFile = e.target.files[0];
+        },
+        gotTransactions(e) {
+            this.$data.transactionsFile = e.target.files[0];
+        },
         clearBudget() {
             // <a href="/budget/{{$store.getters.CurrentBudget.ID}}/settings/clear">Clear budget</a>
         },
         cleanNegative() {
             // <a href="/budget/{{.Budget.ID}}/settings/clean-negative">Fix all historic negative category-balances</a>
+        },
+        ynabImport() {
+            // <input type="hidden" name="budget_id" value="{{$store.getters.CurrentBudget.ID}}" />
+            let formData = new FormData();
+            formData.append("transactions", this.$data.transactionsFile);
+            formData.append("assignments", this.$data.assignmentsFile);
+            fetch('/api/v1/budget/'+this.$store.getters.CurrentBudget.ID+"/import/ynab", {
+                method: "POST", 
+                headers: {
+                    'Authorization': 'Bearer ' + this.$store.state.Session.Token
+                },
+                body: formData});
         }
     }
 }
@@ -27,18 +56,15 @@ export default {
         <p>This restores YNABs functionality, that would substract any overspent categories' balances from next months inflows.</p>
     </v-card>
     <v-card>
-        <form method="POST" action="/api/v1/transaction/import/ynab" enctype="multipart/form-data">
-            <input type="hidden" name="budget_id" value="{{$store.getters.CurrentBudget.ID}}" />
-            <label for="transactions_file">
-                Transaktionen:
-                <input type="file" name="transactions" accept="text/*" />
-            </label>
-            <br />
-            <label for="assignments_file">
-                Budget:
-                <input type="file" name="assignments" accept="text/*" />
-            </label>
-            <button type="submit">Importieren</button>
-        </form>
+        <label for="transactions_file">
+            Transaktionen:
+            <input type="file" @change="gotTransactions" accept="text/*" />
+        </label>
+        <br />
+        <label for="assignments_file">
+            Budget:
+            <input type="file" @change="gotAssignments" accept="text/*" />
+        </label>
+        <button v-if="hasFiles" @click="ynabImport">Importieren</button>
     </v-card>
 </template>