budgeteer/web/src/pages/Settings.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 RowCard from "../components/RowCard.vue";
import Button from "../components/SimpleButton.vue";
import { saveAs } from 'file-saver';
import Input from "../components/Input.vue";

const router = useRouter();

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);
    router.push("/dashboard")
};
function clearBudget() {
    POST("/budget/" + CurrentBudgetID.value + "/settings/clear", null)
};
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">
      <RowCard 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>
      </RowCard>
      <RowCard 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>
      </RowCard>
      <RowCard class="flex-col p-3">
        <h2 class="text-lg font-bold">
          Import YNAB Budget
        </h2>

        <div>
          <label for="transactions_file">
            Transaktionen:
            <input
              type="file"
              accept="text/*"
              @change="gotTransactions"
            >
          </label>
          <br>
          <label for="assignments_file">
            Budget:
            <input
              type="file"
              accept="text/*"
              @change="gotAssignments"
            >
          </label>
        </div>

        <Button
          class="bg-blue-500 py-2"
          :disabled="filesIncomplete"
          @click="ynabImport"
        >
          Importieren
        </Button>
      </RowCard>
      <RowCard 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>
      </RowCard>
    </div>
  </div>
</template>