Split category and category-group stores

web/src/dialogs/CreateCategoryGroup.vue

@@ -2,17 +2,16 @@
 import { ref } from 'vue';
 import Modal from '../components/Modal.vue';
 import Input from '../components/Input.vue';
-import { useCategoryStore } from '../stores/category';
+import { useCategoryGroupStore } from '../stores/category-group';
 
-const categoryStore = useCategoryStore();
+const categoryGroupStore = useCategoryGroupStore();
 
 const categoryGroupName = ref("");
 const error = ref("");
 
 function createCategoryGroup(e : {cancel:boolean}) : boolean {
   error.value = "";
-  categoryStore.CreateCategoryGroup(categoryGroupName.value);
-
+  categoryGroupStore.CreateCategoryGroup(categoryGroupName.value);
   return true;
 }
 
@@ -20,7 +19,7 @@ function createCategoryGroup(e : {cancel:boolean}) : boolean {
 
 <template>
   <Modal
-    button-text="Create Category"
+    button-text="Create Category Group"
     @submit="createCategoryGroup"
   >
     <template #placeholder>

web/src/pages/Budgeting.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, ref, watchEffect } from "vue";
 import Currency from "../components/Currency.vue";
 import { useBudgetsStore } from "../stores/budget";
+import { useCategoryGroupStore } from "../stores/category-group";
 import { useAccountStore } from "../stores/budget-account";
 import { useSessionStore } from "../stores/session";
 import Input from "../components/Input.vue";
@@ -17,6 +18,9 @@ const props = defineProps<{
     month: string,
 }>()
 
+const categoryStore = useCategoryGroupStore()
+const categoryGroups = computed(() => [...categoryStore.CategoryGroups.values()]);
+
 const budgetsStore = useBudgetsStore();
 const CurrentBudgetID = computed(() => budgetsStore.CurrentBudgetID);
 
@@ -27,11 +31,6 @@ function GetCategories(group: string) {
     return [...categoriesForMonth(selected.value.Year, selected.value.Month, group)];
 };
 
-const groupsForMonth = accountStore.CategoryGroupsForMonth;
-const GroupsForMonth = computed(() => {
-    return [...groupsForMonth(selected.value.Year, selected.value.Month)];
-});
-
 const previous = computed(() => ({
     Year: new Date(selected.value.Year, selected.value.Month - 1, 1).getFullYear(),
     Month: new Date(selected.value.Year, selected.value.Month - 1, 1).getMonth(),
@@ -105,7 +104,7 @@ function assignedChanged(e : Event, category : Category){
     <span class="hidden sm:block text-right">Activity</span>
     <span class="hidden sm:block text-right">Available</span>
     <template
-      v-for="group in GroupsForMonth"
+      v-for="group in categoryGroups"
       :key="group.Name"
     >
       <span

web/src/stores/category-group.ts

@@ -0,0 +1,39 @@
+import { defineStore } from "pinia";
+import { POST } from "../api";
+import { useBudgetsStore } from "./budget";
+
+interface State {
+    CategoryGroups: Map<string, CategoryGroup>;
+}
+
+export interface CategoryGroup {
+  ID: string;
+  Name: string;
+  CategoryIDs: string[];
+}
+
+export const useCategoryGroupStore = defineStore("category-group", {
+  state: (): State => ({
+      CategoryGroups: new Map<string, CategoryGroup>(),
+  }),
+  getters: {
+  },
+  actions: {
+    async CreateCategoryGroup(
+      group: string,
+    ) {
+      const result = await POST(
+        "/category-group/new",
+        JSON.stringify({
+          budgetId: useBudgetsStore().CurrentBudgetID,
+          group: group,
+        })
+      );
+      const response = await result.json();
+      this.AddCategoryGroup(response);
+    },
+    async AddCategoryGroup(categoryGroup : CategoryGroup){
+      this.CategoryGroups.set(categoryGroup.ID, categoryGroup);
+    }
+  },
+});

web/src/stores/category.ts

@@ -1,12 +1,9 @@
 import { defineStore } from "pinia";
-import { GET, POST } from "../api";
+import { POST } from "../api";
 import { useBudgetsStore } from "./budget";
-import { useAccountStore } from "./budget-account";
-import { Budget, useSessionStore } from "./session";
 
 interface State {
     Categories: Map<string, Category>;
-    CategoryGroups: Map<string, CategoryGroup>;
 }
 
 export interface Category {
@@ -18,32 +15,13 @@ export interface Category {
     Activity: number;
 }
 
-export interface CategoryGroup {
-  ID: string;
-  Name: string;
-}
-
 export const useCategoryStore = defineStore("category", {
   state: (): State => ({
       Categories: new Map<string, Category>(),
-      CategoryGroups: new Map<string, CategoryGroup>(),
   }),
   getters: {
   },
   actions: {
-    async CreateCategoryGroup(
-      group: string,
-    ) {
-      const result = await POST(
-        "/category-group/new",
-        JSON.stringify({
-          budgetId: useBudgetsStore().CurrentBudgetID,
-          group: group,
-        })
-      );
-      const response = await result.json();
-      useCategoryStore().AddCategoryGroup(response);
-    },
     async CreateCategory(
       group: string,
       name: string,
@@ -57,13 +35,10 @@ export const useCategoryStore = defineStore("category", {
         })
       );
       const response = await result.json();
-      useCategoryStore().AddCategory(response);
+      this.AddCategory(response);
     },
     async AddCategory(category : Category){
       this.Categories.set(category.ID, category);
     },
-    async AddCategoryGroup(categoryGroup : CategoryGroup){
-      this.CategoryGroups.set(categoryGroup.ID, categoryGroup);
-    }
   },
 });