Actually call API on save

web/src/dialogs/CreateCategory.vue

@@ -3,21 +3,22 @@ import { computed, ref } from 'vue';
 import Modal from '../components/Modal.vue';
 import { useAccountStore } from '../stores/budget-account';
 import Input from '../components/Input.vue';
-import Checkbox from '../components/Checkbox.vue';
+import { useCategoryStore } from '../stores/category';
-import { useRouter } from 'vue-router';
-import { useBudgetsStore } from '../stores/budget';
 
-const router = useRouter();
+const categoryStore = useCategoryStore();
-const categoryStore = null;
+
+const props = defineProps<{
+  categoryGroup: string
+}>();
 
 const categoryName = ref("");
 const error = ref("");
 
 function createCategory(e : {cancel:boolean}) : boolean {
-    error.value = "";
+  error.value = "";
-//    categoryStore.CreateCategory(CurrentAccount.value?.ID ?? "", accountName.value, accountOnBudget.value, accountOpen.value);
+  categoryStore.CreateCategory(props.categoryGroup, categoryName.value);
 
-    return true;
+  return true;
 }
 
 </script>
@@ -30,6 +31,9 @@ function createCategory(e : {cancel:boolean}) : boolean {
     <template #placeholder>
       <span class="ml-2">+</span>
     </template>
+    <div class="mt-2 px-7 py-3">
+      Parent: {{ categoryGroup }}
+    </div>
     <div class="mt-2 px-7 py-3">
       <Input
         v-model="categoryName"

web/src/pages/Budgeting.vue

@@ -2,12 +2,13 @@
 import { computed, onMounted, ref, watchEffect } from "vue";
 import Currency from "../components/Currency.vue";
 import { useBudgetsStore } from "../stores/budget";
-import { Category, useAccountStore } from "../stores/budget-account";
+import { useAccountStore } from "../stores/budget-account";
 import { useSessionStore } from "../stores/session";
 import Input from "../components/Input.vue";
 import { POST } from "../api";
 import CreateCategory from "../dialogs/CreateCategory.vue";
 import BudgetingSummary from "../components/BudgetingSummary.vue";
+import { Category } from "../stores/category";
 
 const props = defineProps<{
     budgetid: string,
@@ -111,7 +112,7 @@ function assignedChanged(e : Event, category : Category){
         class="text-lg font-bold mt-2"
         @click="toggleGroup(group)"
       >{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}
-        <CreateCategory />
+        <CreateCategory :category-group="group.Name" />
       </span>
       <Currency
         :value="group.AvailableLastMonth"

web/src/stores/budget-account.ts

@@ -1,13 +1,13 @@
 import { defineStore } from "pinia";
 import { GET, POST } from "../api";
 import { useBudgetsStore } from "./budget";
+import { Category } from "./category";
 import { useSessionStore } from "./session";
 import { Transaction, useTransactionsStore } from "./transactions";
 
 interface State {
     Accounts: Map<string, Account>;
     CurrentAccountID: string | null;
-    Categories: Map<string, Category>;
     Months: Map<number, Map<number, Map<string, Category>>>;
     Available: number,
     OverspentLastMonth: number,
@@ -31,15 +31,6 @@ interface NullDate {
     Time: Date;
 }
 
-export interface Category {
-    ID: string;
-    Group: string;
-    Name: string;
-    AvailableLastMonth: number;
-    Assigned: number;
-    Activity: number;
-}
-
 interface BudgetedAmounts {
     Assigned: number,
     Deassigned: number,
@@ -54,7 +45,6 @@ export const useAccountStore = defineStore("budget/account", {
         Months: new Map<number, Map<number, Map<string, Category>>>(),
         Available: 0,
         OverspentLastMonth: 0,
-        Categories: new Map<string, Category>(),
         Assignments: [],
     }),
     getters: {

web/src/stores/budget.ts

@@ -1,6 +1,7 @@
 import { defineStore } from "pinia";
 import { GET, POST } from "../api";
 import { useAccountStore } from "./budget-account";
+import { useCategoryStore } from "./category";
 import { Budget, useSessionStore } from "./session";
 
 interface State {
@@ -62,8 +63,10 @@ export const useBudgetsStore = defineStore("budget", {
                     );
                 accounts.Accounts.set(account.ID, account);
             }
+
+            const categories = useCategoryStore();
             for (const category of response.Categories || []) {
-                accounts.Categories.set(category.ID, category);
+                categories.Categories.set(category.ID, category);
             }
         },
     },