Remove vuex

web/src/pages/Account.vue

@@ -1,8 +1,11 @@
 <script lang="ts">
+import { mapState } from "pinia";
 import { defineComponent } from "vue"
 import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
 import Currency from "../components/Currency.vue";
 import TransactionRow from "../components/TransactionRow.vue";
+import { useAccountStore } from "../stores/budget-account";
+import { useSessionStore } from "../stores/session";
 
 export default defineComponent({
     data() {
@@ -16,6 +19,9 @@ export default defineComponent({
     },
     components: { Autocomplete, Currency, TransactionRow },
     props: ["budgetid", "accountid"],
+    computed: {
+        ...mapState(useAccountStore, ["CurrentAccount", "TransactionsList"]),
+    },
     methods: {
         saveTransaction(e : MouseEvent) {
             e.preventDefault();
@@ -31,7 +37,7 @@ export default defineComponent({
                     amount: this.$data.Amount,
                     state: "Uncleared"
                 }),
-                headers: this.$store.getters.AuthHeaders,
+                headers: useSessionStore().AuthHeaders,
             })
                 .then(x => x.json());
         },
@@ -40,10 +46,10 @@ export default defineComponent({
 </script>
 
 <template>
-        <h1>{{ $store.getters.CurrentAccount.Name }}</h1>
+        <h1>{{ CurrentAccount?.Name }}</h1>
         <p>
             Current Balance:
-            <Currency :value="$store.getters.CurrentAccount.Balance" />
+            <Currency :value="CurrentAccount?.Balance" />
         </p>
         <table>
             <tr class="font-bold">
@@ -76,7 +82,7 @@ export default defineComponent({
                 </td>
                 <td style="width: 20px;"></td>
             </tr>
-            <TransactionRow v-for="(transaction, index) in $store.getters.Transactions"
+            <TransactionRow v-for="(transaction, index) in TransactionsList"
                 :transaction="transaction"
                 :index="index" />
         </table>

web/src/pages/BudgetSidebar.vue

@@ -1,10 +1,19 @@
 <script lang="ts">
+import { mapState } from "pinia"
 import { defineComponent } from "vue"
 import Currency from "../components/Currency.vue"
+import { useBudgetsStore } from "../stores/budget"
+import { useAccountStore } from "../stores/budget-account"
+import { useSettingsStore } from "../stores/settings"
 
 export default defineComponent({
     props: ["budgetid", "accountid"],
-    components: { Currency }
+    components: { Currency },
+    computed: {
+      ...mapState(useSettingsStore, ["ExpandMenu"]),
+      ...mapState(useBudgetsStore, ["CurrentBudgetName", "CurrentBudgetID"]),
+      ...mapState(useAccountStore, ["OnBudgetAccounts", "OnBudgetAccountsBalance", "OffBudgetAccounts", "OffBudgetAccountsBalance"])
+    }
 })
 </script>
 
@@ -12,44 +21,44 @@ export default defineComponent({
   <div class="flex flex-col">
     <span class="m-1 p-1 px-3 text-xl">
       <router-link to="/dashboard">⌂</router-link>
-      {{$store.getters.CurrentBudgetName}}
+      {{CurrentBudgetName}}
     </span>
     <span class="bg-orange-200 rounded-lg m-1 p-1 px-3 flex flex-col">
       <router-link :to="'/budget/'+budgetid+'/budgeting'">Budget</router-link><br />
-      <!--<router-link :to="'/budget/'+$store.getters.CurrentBudgetID+'/reports'">Reports</router-link>-->
-      <!--<router-link :to="'/budget/'+$store.getters.CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
+      <!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
+      <!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
     </span>
     <li class="bg-orange-200 rounded-lg m-1 p-1 px-3">
       <div class="flex flex-row justify-between font-bold">
         <span>On-Budget Accounts</span>
-        <Currency :class="$store.state.ExpandMenu?'md:inline':'md:hidden'" :value="$store.getters.OnBudgetAccountsBalance" />
+        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OnBudgetAccountsBalance" />
       </div>
-      <div v-for="account in $store.getters.OnBudgetAccounts" class="flex flex-row justify-between">
+      <div v-for="account in OnBudgetAccounts" class="flex flex-row justify-between">
         <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
-        <Currency :class="$store.state.ExpandMenu?'md:inline':'md:hidden'" :value="account.Balance" />
+        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.Balance" />
       </div>
     </li>
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
       <div class="flex flex-row justify-between font-bold">
         <span>Off-Budget Accounts</span>
-        <Currency :class="$store.state.ExpandMenu?'md:inline':'md:hidden'" :value="$store.getters.OffBudgetAccountsBalance" />
+        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OffBudgetAccountsBalance" />
       </div>
-      <div v-for="account in $store.getters.OffBudgetAccounts" class="flex flex-row justify-between">
+      <div v-for="account in OffBudgetAccounts" class="flex flex-row justify-between">
         <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
-        <Currency :class="$store.state.ExpandMenu?'md:inline':'md:hidden'" :value="account.Balance" />
+        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.Balance" />
       </div>
     </li>
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
       Closed Accounts
     </li>
     <!--<li>
-      <router-link :to="'/budget/'+$store.getters.CurrentBudgetID+'/accounts'">Edit accounts</router-link>
+      <router-link :to="'/budget/'+CurrentBudgetID+'/accounts'">Edit accounts</router-link>
     </li>-->
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
       + Add Account
     </li>
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
-      <router-link :to="'/budget/'+$store.getters.CurrentBudgetID+'/settings'">Budget-Settings</router-link>
+      <router-link :to="'/budget/'+CurrentBudgetID+'/settings'">Budget-Settings</router-link>
     </li>
     <!--<li><router-link to="/admin">Admin</router-link></li>-->
   </div>        

web/src/pages/Budgeting.vue

@@ -1,51 +1,53 @@
 <script lang="ts">
+import { mapState } from "pinia";
 import { defineComponent } from "vue";
-import { FETCH_MONTH_BUDGET } from "../store/action-types";
-import { TITLE } from "../store/mutation-types";
 import Currency from "../components/Currency.vue";
+import { useBudgetsStore } from "../stores/budget";
+import { Category, useAccountStore } from "../stores/budget-account";
 
 interface Date {
-    Year:Number, 
-    Month:Number,
+    Year: Number,
+    Month: Number,
 }
 
 export default defineComponent({
     mounted() {
-        this.$store.commit(TITLE, "Budget for " + this.month + " " + this.year);
-        return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
+        document.title = "Budgeteer - Budget for " + this.month + " " + this.year;
+        return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
     },
     watch: {
         year() {
-            return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
+            return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
         },
         month() {
-            return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
+            return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
         },
     },
     props: ["budgetid", "year", "month"],
     computed: {
-        Categories() {
-            return this.$store.getters.Categories(this.year, this.month);
+        ...mapState(useBudgetsStore, ["CurrentBudgetID"]),
+        Categories() : IterableIterator<Category> | undefined {
+            return useAccountStore().Categories(this.year, this.month);
         },
-        previous() : Date {
+        previous(): Date {
             return {
                 Year: new Date(this.year, this.month - 1, 1).getFullYear(),
                 Month: new Date(this.year, this.month - 1, 1).getMonth(),
             };
         },
-        current() : Date {
+        current(): Date {
             return {
                 Year: new Date().getFullYear(),
                 Month: new Date().getMonth(),
             };
         },
-        selected() : Date {
+        selected(): Date {
             return {
                 Year: this.year,
                 Month: Number(this.month) + 1
             }
         },
-        next() : Date {
+        next(): Date {
             return {
                 Year: new Date(this.year, Number(this.month) + 1, 1).getFullYear(),
                 Month: new Date(this.year, Number(this.month) + 1, 1).getMonth(),
@@ -61,13 +63,17 @@ export default defineComponent({
 </script>
 
 <template>
-    <h1>
-        Budget for {{selected.Month}}/{{selected.Year}}
-    </h1>
+    <h1>Budget for {{ selected.Month }}/{{ selected.Year }}</h1>
     <div>
-        <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/budgeting/' + previous.Year + '/' + previous.Month">Previous Month</router-link> - 
-        <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/budgeting/' + current.Year + '/' + current.Month">Current Month</router-link> - 
-        <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/budgeting/' + next.Year + '/' + next.Month">Next Month</router-link>
+        <router-link
+            :to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month"
+        >Previous Month</router-link>-
+        <router-link
+            :to="'/budget/' + CurrentBudgetID + '/budgeting/' + current.Year + '/' + current.Month"
+        >Current Month</router-link>-
+        <router-link
+            :to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month"
+        >Next Month</router-link>
     </div>
     <table class="container col-lg-12" id="content">
         <tr>
@@ -81,14 +87,22 @@ export default defineComponent({
             <th>Available</th>
         </tr>
         <tr v-for="category in Categories">
-            <td>{{category.Group}}</td>
-            <td>{{category.Name}}</td>
+            <td>{{ category.Group }}</td>
+            <td>{{ category.Name }}</td>
             <td></td>
             <td></td>
-            <td class="text-right"><Currency :value="category.AvailableLastMonth" /></td>
-            <td class="text-right"><Currency :value="category.Assigned" /></td>
-            <td class="text-right"><Currency :value="category.Activity" /></td>
-            <td class="text-right"><Currency :value="category.Available" /></td>
+            <td class="text-right">
+                <Currency :value="category.AvailableLastMonth" />
+            </td>
+            <td class="text-right">
+                <Currency :value="category.Assigned" />
+            </td>
+            <td class="text-right">
+                <Currency :value="category.Activity" />
+            </td>
+            <td class="text-right">
+                <Currency :value="category.Available" />
+            </td>
         </tr>
     </table>
 </template>

web/src/pages/Dashboard.vue

@@ -2,17 +2,22 @@
 import NewBudget from '../dialogs/NewBudget.vue';
 import Card from '../components/Card.vue';
 import { defineComponent } from 'vue';
+import { mapState } from 'pinia';
+import { useSessionStore } from '../stores/session';
 
 export default defineComponent({
     props: ["budgetid"],
-    components: { NewBudget, Card }
+    components: { NewBudget, Card },
+    computed: {
+        ...mapState(useSessionStore, ["BudgetsList"]),
+    }
 })
 </script>
 
 <template>
     <h1>Budgets</h1>
     <div class="grid md:grid-cols-2 gap-6">
-        <Card v-for="budget in $store.getters.Budgets">
+        <Card v-for="budget in BudgetsList">
             <router-link v-bind:to="'/budget/'+budget.ID+'/budgeting'" class="contents">
             <!--<svg class="w-24"></svg>-->
                 <p class="w-24 text-center text-6xl"></p>

web/src/pages/Login.vue

@@ -1,7 +1,6 @@
 <script lang="ts">
-import { TITLE } from "../store/mutation-types";
-import { LOGIN } from '../store/action-types'
 import { defineComponent } from "vue";
+import { useSessionStore } from "../stores/session";
 
 export default defineComponent({
     data() {
@@ -15,12 +14,12 @@ export default defineComponent({
         }
     },
     mounted() {
-        this.$store.commit(TITLE, "Login");
+        document.title = "Budgeteer - Login";
     },
     methods: {
         formSubmit(e : MouseEvent) {
             e.preventDefault();
-            this.$store.dispatch(LOGIN, this.$data.login)
+            useSessionStore().login(this.$data.login)
                 .then(x => {
                     this.$data.error = "";
                     this.$router.replace("/dashboard");

web/src/pages/Register.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { REGISTER } from "../store/action-types";
+import { useSessionStore } from '../stores/session';
 
 export default defineComponent({
     data() {
@@ -15,11 +15,11 @@ export default defineComponent({
         }
     },
     methods: {
-        formSubmit (e) {
+        formSubmit (e : FormDataEvent) {
             e.preventDefault();
-            this.$store.dispatch(REGISTER, this.$data.login)
+            useSessionStore().register(this.$data.login)
                 .then(() => this.$data.error = "")
-                .catch(() => this.$data.error = ["Something went wrong!"]);
+                .catch(() => this.$data.error = "Something went wrong!");
 
             // TODO display invalidCredentials
             // TODO redirect to dashboard on success

web/src/pages/Settings.vue

@@ -1,7 +1,8 @@
 <script lang="ts">
 import { defineComponent } from "vue"
-import { IMPORT_YNAB } from "../store/action-types";
-import { TITLE } from "../store/mutation-types"
+import { useAPI } from "../stores/api";
+import { useBudgetsStore } from "../stores/budget";
+import { useSessionStore } from "../stores/session";
 
 export default defineComponent({
     data() {
@@ -16,7 +17,7 @@ export default defineComponent({
         }
     },
     mounted() {
-        this.$store.commit(TITLE, "Settings")
+        document.title = "Budgeteer - Settings";
     },
     methods: {
         gotAssignments(e : Event) {
@@ -30,22 +31,21 @@ export default defineComponent({
                 this.$data.transactionsFile = input.files[0];
         },
         deleteBudget() {
-            fetch("/api/v1/budget/" + this.$store.getters.CurrentBudget.ID, {
-                method: "DELETE",
-                headers: {
-                    'Authorization': 'Bearer ' + this.$store.state.Session.Token
-                },
-            });
-            this.$store.commit("deleteBudget", this.$store.getters.CurrentBudget.ID)
+            const currentBudgetID = useBudgetsStore().CurrentBudgetID;
+            if (currentBudgetID == null)
+                return;
+
+            const api = useAPI();
+            api.DELETE("/api/v1/budget/" + currentBudgetID);
+
+            const budgetStore = useSessionStore();
+            budgetStore.Budgets.delete(currentBudgetID);
             this.$router.push("/")
         },
         clearBudget() {
-            fetch("/api/v1/budget/" + this.$store.getters.CurrentBudget.ID + "/settings/clear", {
-                method: "POST",
-                headers: {
-                    'Authorization': 'Bearer ' + this.$store.state.Session.Token
-                },
-            })
+            const currentBudgetID = useBudgetsStore().CurrentBudgetID;
+            const api = useAPI();
+            api.POST("/api/v1/budget/" + currentBudgetID + "/settings/clear", null)
         },
         cleanNegative() {
             // <a href="/budget/{{.Budget.ID}}/settings/clean-negative">Fix all historic negative category-balances</a>
@@ -57,7 +57,8 @@ export default defineComponent({
             let formData = new FormData();
             formData.append("transactions", this.$data.transactionsFile);
             formData.append("assignments", this.$data.assignmentsFile);
-            this.$store.dispatch(IMPORT_YNAB, formData);
+            const budgetStore = useBudgetsStore();
+            budgetStore.ImportYNAB(formData);
         }
     }
 })