budgeteer/web/src/pages/Settings.vue

124 lines
4.9 KiB
Vue

<script lang="ts" setup>
import { computed, defineComponent, onMounted, ref } from "vue"
import { useRouter } from "vue-router";
import { DELETE, POST } from "../api";
import { useBudgetsStore } from "../stores/budget";
import { useSessionStore } from "../stores/session";
import Card from "../components/Card.vue";
import Button from "../components/Button.vue";
import { saveAs } from 'file-saver';
import Input from "../components/Input.vue";
const transactionsFile = ref<File | undefined>(undefined);
const assignmentsFile = ref<File | undefined>(undefined);
const filesIncomplete = computed(() => transactionsFile.value == undefined || assignmentsFile.value == undefined);
onMounted(() => {
useSessionStore().setTitle("Settings");
});
const budgetStore = useBudgetsStore();
const CurrentBudgetID = computed(() => budgetStore.CurrentBudgetID);
const CurrentBudgetName = computed(() => budgetStore.CurrentBudgetName);
function gotAssignments(e: Event) {
const input = (<HTMLInputElement>e.target);
if (input.files != null)
assignmentsFile.value = input.files[0];
}
function gotTransactions(e: Event) {
const input = (<HTMLInputElement>e.target);
if (input.files != null)
transactionsFile.value = input.files[0];
};
function deleteBudget() {
if (CurrentBudgetID.value == null)
return;
DELETE("/budget/" + CurrentBudgetID.value);
const budgetStore = useSessionStore();
budgetStore.Budgets.delete(CurrentBudgetID.value);
useRouter().push("/")
};
function clearBudget() {
POST("/budget/" + CurrentBudgetID.value + "/settings/clear", null)
};
function cleanNegative() {
// <a href="/budget/{{.Budget.ID}}/settings/clean-negative">Fix all historic negative category-balances</a>
};
function ynabImport() {
if (transactionsFile.value == undefined || assignmentsFile.value == undefined)
return
let formData = new FormData();
formData.append("transactions", transactionsFile.value);
formData.append("assignments", assignmentsFile.value);
const budgetStore = useBudgetsStore();
budgetStore.ImportYNAB(formData);
};
function ynabExport() {
const timeStamp = new Date().toISOString();
POST("/budget/"+CurrentBudgetID.value+"/export/ynab/assignments", "")
.then(x => x.text())
.then(x => {
var blob = new Blob([x], {type: "text/plain;charset=utf-8"});
saveAs(blob, timeStamp + " " + CurrentBudgetName.value + " - Budget.tsv");
})
POST("/budget/"+CurrentBudgetID.value+"/export/ynab/transactions", "")
.then(x => x.text())
.then(x => {
var blob = new Blob([x], {type: "text/plain;charset=utf-8"});
saveAs(blob, timeStamp + " " + CurrentBudgetName.value + " - Transactions.tsv");
})
}
</script>
<template>
<div>
<h1>Danger Zone</h1>
<div class="grid md:grid-cols-2 gap-6">
<Card class="flex-col p-3">
<h2 class="text-lg font-bold">Clear Budget</h2>
<p>This removes transactions and assignments to start from scratch. Accounts and categories are kept. Not undoable!</p>
<Button class="bg-red-500 py-2" @click="clearBudget">Clear budget</Button>
</Card>
<Card class="flex-col p-3">
<h2 class="text-lg font-bold">Delete Budget</h2>
<p>This deletes the whole bugdet including all transactions, assignments, accounts and categories. Not undoable!</p>
<Button class="bg-red-500 py-2" @click="deleteBudget">Delete budget</button>
</Card>
<Card class="flex-col p-3">
<h2 class="text-lg font-bold">Fix all historic negative category-balances</h2>
<p>This restores YNABs functionality, that would substract any overspent categories' balances from next months inflows.</p>
<Button class="bg-orange-500 py-2" @click="cleanNegative">Fix negative</button>
</Card>
<Card class="flex-col p-3">
<h2 class="text-lg font-bold">Import YNAB Budget</h2>
<div>
<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>
</div>
<Button class="bg-blue-500 py-2" :disabled="filesIncomplete" @click="ynabImport">Importieren</Button>
</Card>
<Card class="flex-col p-3">
<h2 class="text-lg font-bold">Export as YNAB TSV</h2>
<div class="flex flex-row">
<Button class="bg-blue-500 py-2" @click="ynabExport">Export</Button>
</div>
</Card>
</div>
</div>
</template>