web/src/dialogs/CreateCategory.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+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 { useRouter } from 'vue-router';
+import { useBudgetsStore } from '../stores/budget';
+
+const router = useRouter();
+const categoryStore = null;
+
+const categoryName = ref("");
+const error = ref("");
+
+function createCategory(e : {cancel:boolean}) : boolean {
+    error.value = "";
+//    categoryStore.CreateCategory(CurrentAccount.value?.ID ?? "", accountName.value, accountOnBudget.value, accountOpen.value);
+
+    return true;
+}
+
+</script>
+
+<template>
+  <Modal
+    button-text="Create Category"
+    @submit="createCategory"
+  >
+    <template #placeholder>
+      <span class="ml-2">+</span>
+    </template>
+    <div class="mt-2 px-7 py-3">
+      <Input
+        v-model="categoryName"
+        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

@@ -6,6 +6,7 @@ import { Category, 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";
 
 const props = defineProps<{
     budgetid: string,
@@ -158,7 +159,9 @@ const budgeted = computed(() => accountStore.GetBudgeted(selected.value.Year, se
       <span
         class="text-lg font-bold mt-2"
         @click="toggleGroup(group)"
-      >{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</span>
+      >{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}
+        <CreateCategory />
+      </span>
       <Currency
         :value="group.AvailableLastMonth"
         class="hidden lg:block mt-2"
@@ -214,5 +217,6 @@ const budgeted = computed(() => accountStore.GetBudgeted(selected.value.Year, se
         </div>
       </template>
     </template>
+    <button class="px-2 py-0 w-full bg-slate-400 rounded-md mt-4">Add Group</button>
   </div>
 </template>