From 077a480d0f12b65b730851506bce6f71bd76bed0 Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Tue, 30 Mar 2021 18:10:27 -0800
Subject: [PATCH] create category dialog

---
 frontend/src/api/category.js                  |  5 ++
 .../Admin/General/HomePageSettings.vue        |  3 +
 .../Admin/General/NewCategoryDialog.vue       | 78 +++++++++++++++++++
 mealie/db/models/recipe/category.py           |  4 +-
 mealie/routes/recipe/category_routes.py       | 11 ++-
 mealie/schema/category.py                     |  8 +-
 6 files changed, 103 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/Admin/General/NewCategoryDialog.vue

diff --git a/frontend/src/api/category.js b/frontend/src/api/category.js
index 2f619fe87..ef582c580 100644
--- a/frontend/src/api/category.js
+++ b/frontend/src/api/category.js
@@ -15,6 +15,11 @@ export const categoryAPI = {
     let response = await apiReq.get(categoryURLs.get_all);
     return response.data;
   },
+  async create(name) {
+    let response = await apiReq.post(categoryURLs.get_all, { name: name });
+    store.dispatch("requestCategories");
+    return response.data;
+  },
   async getRecipesInCategory(category) {
     let response = await apiReq.get(categoryURLs.get_category(category));
     return response.data;
diff --git a/frontend/src/components/Admin/General/HomePageSettings.vue b/frontend/src/components/Admin/General/HomePageSettings.vue
index b4e11fda3..b31c6b609 100644
--- a/frontend/src/components/Admin/General/HomePageSettings.vue
+++ b/frontend/src/components/Admin/General/HomePageSettings.vue
@@ -84,6 +84,7 @@
               </v-toolbar-title>
 
               <v-spacer></v-spacer>
+              <NewCategoryDialog />
             </v-app-bar>
             <v-list height="300" dense style="overflow:auto">
               <v-list-item-group>
@@ -132,11 +133,13 @@
 import { api } from "@/api";
 import LanguageMenu from "@/components/UI/LanguageMenu";
 import draggable from "vuedraggable";
+import NewCategoryDialog from "./NewCategoryDialog.vue";
 
 export default {
   components: {
     draggable,
     LanguageMenu,
+    NewCategoryDialog,
   },
   data() {
     return {
diff --git a/frontend/src/components/Admin/General/NewCategoryDialog.vue b/frontend/src/components/Admin/General/NewCategoryDialog.vue
new file mode 100644
index 000000000..e9ad28f22
--- /dev/null
+++ b/frontend/src/components/Admin/General/NewCategoryDialog.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <v-btn icon @click="dialog = true">
+      <v-icon color="white">mdi-plus</v-icon>
+    </v-btn>
+    <v-dialog v-model="dialog" width="500">
+      <v-card>
+        <v-app-bar dense dark color="primary mb-2">
+          <v-icon large left class="mt-1">
+            mdi-tag
+          </v-icon>
+
+          <v-toolbar-title class="headline">
+            Create a Category
+          </v-toolbar-title>
+
+          <v-spacer></v-spacer>
+        </v-app-bar>
+        <v-card-title> </v-card-title>
+        <v-form @submit.prevent="select">
+          <v-card-text>
+            <v-text-field
+              dense
+              label="Category Name"
+              v-model="categoryName"
+              :rules="[rules.required]"
+            ></v-text-field>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="grey" text @click="dialog = false">
+              {{ $t("general.cancel") }}
+            </v-btn>
+            <v-btn color="success" text type="submit" :disabled="!categoryName">
+              {{ $t("general.create") }}
+            </v-btn>
+          </v-card-actions>
+        </v-form>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import { api } from "@/api";
+export default {
+  props: {
+    buttonText: String,
+    value: String,
+  },
+  data() {
+    return {
+      dialog: false,
+      categoryName: "",
+      rules: {
+        required: val =>
+          !!val || this.$t("settings.theme.theme-name-is-required"),
+      },
+    };
+  },
+  watch: {
+    dialog(val) {
+      if (!val) this.categoryName = "";
+    },
+  },
+
+  methods: {
+    async select() {
+      await api.categories.create(this.categoryName);
+      this.$emit("new-category", this.categoryName);
+      this.dialog = false;
+    },
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/mealie/db/models/recipe/category.py b/mealie/db/models/recipe/category.py
index 8112fad0d..4e68baa54 100644
--- a/mealie/db/models/recipe/category.py
+++ b/mealie/db/models/recipe/category.py
@@ -1,7 +1,7 @@
 import sqlalchemy as sa
 import sqlalchemy.orm as orm
-from mealie.db.models.model_base import SqlAlchemyBase
 from fastapi.logger import logger
+from mealie.db.models.model_base import SqlAlchemyBase
 from slugify import slugify
 from sqlalchemy.orm import validates
 
@@ -46,7 +46,7 @@ class Category(SqlAlchemyBase):
         assert name != ""
         return name
 
-    def __init__(self, name) -> None:
+    def __init__(self, name, session=None) -> None:
         self.name = name.strip()
         self.slug = slugify(name)
 
diff --git a/mealie/routes/recipe/category_routes.py b/mealie/routes/recipe/category_routes.py
index 5d1feeb8b..043bfca9d 100644
--- a/mealie/routes/recipe/category_routes.py
+++ b/mealie/routes/recipe/category_routes.py
@@ -2,7 +2,7 @@ from fastapi import APIRouter, Depends
 from mealie.db.database import db
 from mealie.db.db_setup import generate_session
 from mealie.routes.deps import get_current_user
-from mealie.schema.category import RecipeCategoryResponse
+from mealie.schema.category import CategoryIn, RecipeCategoryResponse
 from mealie.schema.snackbar import SnackResponse
 from sqlalchemy.orm.session import Session
 
@@ -18,6 +18,15 @@ async def get_all_recipe_categories(session: Session = Depends(generate_session)
     return db.categories.get_all_limit_columns(session, ["slug", "name"])
 
 
+@router.post("")
+async def create_recipe_category(
+    category: CategoryIn, session: Session = Depends(generate_session), current_user=Depends(get_current_user)
+):
+    """ Creates a Category in the database """
+
+    return db.categories.create(session, category.dict())
+
+
 @router.get("/{category}", response_model=RecipeCategoryResponse)
 def get_all_recipes_by_category(category: str, session: Session = Depends(generate_session)):
     """ Returns a list of recipes associated with the provided category. """
diff --git a/mealie/schema/category.py b/mealie/schema/category.py
index b15785769..3e8635152 100644
--- a/mealie/schema/category.py
+++ b/mealie/schema/category.py
@@ -1,13 +1,15 @@
 from typing import List, Optional
 
 from fastapi_camelcase import CamelModel
-
 from mealie.schema.recipe import Recipe
 
 
-class CategoryBase(CamelModel):
-    id: int
+class CategoryIn(CamelModel):
     name: str
+
+
+class CategoryBase(CategoryIn):
+    id: int
     slug: str
 
     class Config: