server/category_group_new.go

@@ -0,0 +1,35 @@
+package server
+
+import (
+	"net/http"
+
+	"git.javil.eu/jacob1123/budgeteer/postgres"
+	"github.com/google/uuid"
+	"github.com/labstack/echo/v4"
+)
+
+type newCategoryGroupInformation struct {
+	BudgetID uuid.UUID `json:"budgetId"`
+	Group    string    `json:"group"`
+}
+
+func (h *Handler) newCategoryGroup(c echo.Context) error {
+	var newCategory newCategoryGroupInformation
+	if err := c.Bind(&newCategory); err != nil {
+		return echo.NewHTTPError(http.StatusNotAcceptable, err)
+	}
+
+	if newCategory.Group == "" {
+		return echo.NewHTTPError(http.StatusBadRequest, "category group is required")
+	}
+
+	budget, err := h.Service.CreateCategoryGroup(c.Request().Context(), postgres.CreateCategoryGroupParams{
+		BudgetID: newCategory.BudgetID,
+		Name:     newCategory.Group,
+	})
+	if err != nil {
+		return err
+	}
+
+	return c.JSON(http.StatusOK, budget)
+}

server/http.go

@@ -56,6 +56,9 @@ func (h *Handler) LoadRoutes(router *echo.Echo) {
 		category := authenticated.Group("/category")
 		category.POST("/new", h.newCategory)
 
+		categoryGroup := authenticated.Group("/category-group")
+		categoryGroup.POST("/new", h.newCategoryGroup)
+
 		budget := authenticated.Group("/budget")
 		budget.POST("/new", h.newBudget)
 		budget.GET("/:budgetid", h.budget)

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,