Add front- end backend for new category-group

web/src/dialogs/CreateCategoryGroup.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import Modal from '../components/Modal.vue';
+import Input from '../components/Input.vue';
+import { useCategoryStore } from '../stores/category';
+
+const categoryStore = useCategoryStore();
+
+const categoryGroupName = ref("");
+const error = ref("");
+
+function createCategoryGroup(e : {cancel:boolean}) : boolean {
+  error.value = "";
+  categoryStore.CreateCategoryGroup(categoryGroupName.value);
+
+  return true;
+}
+
+</script>
+
+<template>
+  <Modal
+    button-text="Create Category"
+    @submit="createCategoryGroup"
+  >
+    <template #placeholder>
+      <button class="px-2 py-0 w-full bg-slate-400 rounded-md mt-4">Add Group</button>
+    </template>
+    <div class="mt-2 px-7 py-3">
+      <Input
+        v-model="categoryGroupName"
+        class="border-2 dark:border-gray-700"
+        type="text"
+        placeholder="Category name"
+        required
+      />
+    </div>
+    <div
+      v-if="error != ''"
+      class="dark:text-red-300 text-red-700"
+    >
+      {{ error }}
+    </div>
+  </Modal>
+</template>

web/src/pages/Budgeting.vue

@@ -9,6 +9,7 @@ import { POST } from "../api";
 import CreateCategory from "../dialogs/CreateCategory.vue";
 import BudgetingSummary from "../components/BudgetingSummary.vue";
 import { Category } from "../stores/category";
+import CreateCategoryGroup from "../dialogs/CreateCategoryGroup.vue";
 
 const props = defineProps<{
     budgetid: string,
@@ -57,7 +58,6 @@ onMounted(() => {
     useSessionStore().setTitle("Budget for " + selected.value.Month + "/" + selected.value.Year);
 })
 
-
 const expandedGroups = ref<Map<string, boolean>>(new Map<string, boolean>())
 
 function toggleGroup(group: { Name: string, Expand: boolean }) {
@@ -169,6 +169,6 @@ function assignedChanged(e : Event, category : Category){
         </div>
       </template>
     </template>
-    <button class="px-2 py-0 w-full bg-slate-400 rounded-md mt-4">Add Group</button>
+    <CreateCategoryGroup />
   </div>
 </template>

web/src/stores/category.ts

@@ -24,6 +24,19 @@ export const useCategoryStore = defineStore("category", {
   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().AddCategory(response);
+    },
     async CreateCategory(
       group: string,
       name: string,