Convert most code to ts

web/src/App.vue

@@ -1,7 +1,8 @@
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
 import { LOGOUT } from "./store/mutation-types";
 
-export default {
+export default defineComponent({
   computed: {
     loggedIn() {
       return this.$store.state.Session.Token;
@@ -19,7 +20,7 @@ export default {
   beforeCreate () {
     this.$store.commit("initializeStore");
   }
-}
+})
 </script>
 
 <template>

web/src/main.js

@@ -1,24 +0,0 @@
-import { createApp } from 'vue/dist/vue.esm-bundler'
-import App from './App.vue'
-import router from './router/routes.js'
-import store from './store/index.js'
-import vuetify from './plugins/vuetify'
-import { loadFonts } from './plugins/webfontloader'
-import { SET_CURRENT_ACCOUNT, SET_CURRENT_BUDGET } from './store/action-types'
-
-loadFonts()
-
-const app = createApp(App)
-app.use(router)
-app.use(store)
-app.use(vuetify)
-app.mount('#app')
-
-router.beforeEach(async (to, from, next) => {
-  await store.dispatch(SET_CURRENT_BUDGET, to.params.budgetid);
-  await store.dispatch(SET_CURRENT_ACCOUNT, {
-        accountid: to.params.accountid,
-        budgetid: to.params.budgetid
-  });
-  next();
-})

web/src/pages/Account.vue

@@ -1,7 +1,9 @@
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({
     props: ["budgetid", "accountid"]
-}
+})
 </script>
 
 <template>

web/src/pages/BudgetSidebar.vue

@@ -1,7 +1,9 @@
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({
   props: ['budgetid', 'accountid'],
-}
+})
 </script>
 
 <template>

web/src/pages/Dashboard.vue

@@ -1,10 +1,11 @@
-<script>
-import NewBudget from '@/dialogs/NewBudget.vue';
+<script lang="ts">
+import NewBudget from '../dialogs/NewBudget.vue';
+import { defineComponent } from 'vue';
 
-export default {
+export default defineComponent({
     props: ["budgetid"],
     components: { NewBudget }
-}
+})
 </script>
 
 <template>

web/src/pages/Login.vue

@@ -1,8 +1,9 @@
-<script>
+<script lang="ts">
 import { TITLE } from "../store/mutation-types";
 import { LOGIN } from '../store/action-types'
+import { defineComponent } from "vue";
 
-export default {
+export default defineComponent({
     data() {
         return {
             error: [],
@@ -30,7 +31,7 @@ export default {
             // TODO redirect to dashboard on success
         }
     }
-}
+})
 </script>
 
 <template>

web/src/pages/Settings.vue

@@ -1,7 +1,8 @@
-<script>
+<script lang="ts">
+import { defineComponent } from "vue"
 import { TITLE } from "../store/mutation-types"
 
-export default {
+export default defineComponent({
     data() {
         return {
             transactionsFile: null,
@@ -51,7 +52,7 @@ export default {
             this.$store.dispatch("YNAB", formData);
         }
     }
-}
+})
 </script>
 
 <template>

web/src/shims-vuex.d.ts

@@ -0,0 +1,9 @@
+import { ComponentCustomProperties } from 'vue'
+import { State } from './store'
+import { Store } from 'vuex'
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $store: Store<State>
+  }
+}

web/src/store/action-types.ts

@@ -0,0 +1,10 @@
+export const IMPORT_YNAB = "YNAB import";
+export const GET = "GET";
+export const POST = "POST";
+export const NEW_BUDGET = "New budget";
+export const SET_CURRENT_BUDGET = "Set current budget";
+export const SET_CURRENT_ACCOUNT = "Set current account";
+export const FETCH_BUDGET = "Fetch budget";
+export const LOGIN = 'Log in';
+export const REGISTER = 'Register';
+export const FETCH_ACCOUNT = "Fetch account";

web/src/store/index.ts

@@ -1,27 +1,52 @@
-import { createStore, createLogger } from 'vuex'
+import { InjectionKey } from 'vue'
+import { createStore, Store, createLogger } from 'vuex'
 import { LOGIN_SUCCESS, LOGOUT, TITLE } from './mutation-types'
 import { FETCH_ACCOUNT, FETCH_BUDGET, GET, REGISTER, IMPORT_YNAB, LOGIN, NEW_BUDGET, POST, SET_CURRENT_ACCOUNT, SET_CURRENT_BUDGET} from './action-types'
 
-const store = createStore({
-    state() {
-        return {
+export interface State {
+    Session: {
+        Token?: string
+        User?: string
+    },
+    ShowMenu?: boolean,
+    Budgets: Map<string, Budget>,
+    CurrentBudgetID?: string,
+    Accounts: Map<string, Account>,
+    CurrentAccountID?: string,
+    Categories: [],
+    Transactions: [],
+    Assignments: []
+}
+
+export interface Budget {
+    ID: string
+}
+
+export interface Account {
+    ID: string
+    OnBudget: boolean
+}
+
+export const key: InjectionKey<Store<State>> = Symbol()
+
+export const store = createStore<State>({
+    state: {
             Session: {
-                Token: null,
-                User: null
+                Token: undefined,
+                User: undefined
             },
-            ShowMenu: null,
-            Budgets: [],
-            CurrentBudgetID: null,
-            Accounts: [],
-            CurrentAccountID: null,
+            ShowMenu: undefined,
+            Budgets: new Map<string, Budget>(),
+            CurrentBudgetID: undefined,
+            Accounts: new Map<string, Account>(),
+            CurrentAccountID: undefined,
             Categories: [],
             Transactions: [],
             Assignments: []
-        }
     },
     mutations: {
-        deleteBudget(state, budgetid) {
-            delete state.Budgets[budgetid]
+        deleteBudget(state : State, budgetid : string) {
+            state.Budgets.delete(budgetid)
         },
         toggleMenu(state) {
             state.ShowMenu = !state.ShowMenu;
@@ -43,19 +68,19 @@ const store = createStore({
                 Token: result.Token
             };
             for (const budget of result.Budgets) {
-                state.Budgets[budget.ID] = budget
+                state.Budgets.set(budget.ID, budget)
             }
         },
         setBudgets(state, budgets) {
             state.Budgets = budgets;
         },
         addBudget(state, budget) {
-            state.Budgets.push(budget);
+            state.Budgets.set(budget.ID, budget);
         },
         [LOGOUT](state, token) {
-            state.Session = { Token: null, User: null };
-            state.Budgets = {};
-            state.Accounts = [];
+            state.Session = { Token: undefined, User: undefined };
+            state.Budgets.clear();
+            state.Accounts.clear();
             state.Categories = [];
             state.Transactions = [];
             state.Assignments = [];
@@ -164,7 +189,7 @@ const store = createStore({
             if (state.CurrentBudgetID == null)
                 return {};
 
-            return state.Budgets[state.CurrentBudgetID];
+            return state.Budgets.get(state.CurrentBudgetID);
         },
         Accounts(state) {
             return state.Accounts || [];
@@ -172,13 +197,13 @@ const store = createStore({
         CurrentAccount(state) {
             if (state.CurrentAccountID == null)
                 return { name: "Not found" };
-            return state.Accounts.filter(x => x.ID == state.CurrentAccountID)[0];
+            return state.Accounts.get(state.CurrentAccountID);
         },
         OnBudgetAccounts(state) {
-            return (state.Accounts || []).filter(x => x.OnBudget);
+            return Array.from(state.Accounts.values()).filter(x => x.OnBudget);
         },
         OffBudgetAccounts(state) {
-            return (state.Accounts || []).filter(x => !x.OnBudget);
+            return Array.from(state.Accounts.values()).filter(x => !x.OnBudget);
         },
         Transactions(state) {
             return (state.Transactions || []);
@@ -197,6 +222,4 @@ store.subscribe((mutation, state) => {
         ShowMenu: state.ShowMenu
     }
     localStorage.setItem("store", JSON.stringify(persistedState));
-})
-
-export default store
+})