functional

frontend/src/api/siteSettings.js

@@ -27,11 +27,26 @@ export default {
     return response.data;
   },
 
+  async getPage(id) {
+    let response = await apiReq.get(settingsURLs.customPage(id));
+    return response.data;
+  },
+
+  async createPage(body) {
+    let response = await apiReq.post(settingsURLs.customPages, body);
+    return response.data;
+  },
+
   async deletePage(id) {
     let response = await apiReq.delete(settingsURLs.customPage(id));
     return response.data;
   },
 
+  async updatePage(body) {
+    let response = await apiReq.put(settingsURLs.customPage(body.id), body);
+    return response.data;
+  },
+
   async updateAllPages(allPages) {
     let response = await apiReq.put(settingsURLs.customPages, allPages);
     return response;

frontend/src/components/Admin/General/CreatePageDialog.vue

@@ -0,0 +1,95 @@
+<template>
+  <v-dialog v-model="pageDialog" max-width="500">
+    <v-card>
+      <v-app-bar dark dense color="primary">
+        <v-icon left>
+          mdi-page-layout-body
+        </v-icon>
+
+        <v-toolbar-title class="headline">
+          {{ title }}
+        </v-toolbar-title>
+
+        <v-spacer></v-spacer>
+      </v-app-bar>
+      <v-form ref="newGroup" @submit="submitForm">
+        <v-card-text>
+          <v-text-field
+            autofocus
+            v-model="page.name"
+            label="Page Name"
+          ></v-text-field>
+          <CategorySelector v-model="page.categories" />
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="grey" text @click="pageDialog = false">
+            {{ $t("general.cancel") }}
+          </v-btn>
+          <v-btn color="primary" type="submit">
+            {{ buttonText }}
+          </v-btn>
+        </v-card-actions>
+      </v-form>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+const NEW_PAGE_EVENT = "refresh-page";
+import api from "@/api";
+import CategorySelector from "@/components/FormHelpers/CategorySelector";
+export default {
+  components: {
+    CategorySelector,
+  },
+  data() {
+    return {
+      title: "",
+      buttonText: "",
+      create: false,
+      pageDialog: false,
+      page: {
+        name: "",
+        position: 0,
+        categories: [],
+      },
+    };
+  },
+  mounted() {
+    this.page = {
+      name: "",
+      position: 0,
+      categories: [],
+    };
+  },
+  watch: {
+    page() {
+      console.log(this.page);
+    },
+  },
+  methods: {
+    open(parameters) {
+      this.page = parameters.data;
+      this.create = parameters.create;
+      this.buttonText = parameters.buttonText;
+      this.title = parameters.title;
+      this.pageDialog = true;
+    },
+    async submitForm() {
+      if (this.create) {
+        await api.siteSettings.createPage(this.page);
+      } else {
+        await api.siteSettings.updatePage(this.page);
+      }
+      this.pageDialog = false;
+      this.page.categories = [];
+      this.$emit(NEW_PAGE_EVENT);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

frontend/src/components/Admin/General/CustomPageCreator.vue

@@ -1,11 +1,12 @@
 <template>
   <v-card flat>
+    <CreatePageDialog ref="createDialog" @refresh-page="getPages" />
     <v-card-text>
       <h2 class="mt-1 mb-1 ">
         Custom Pages
         <span>
-          <v-btn color="success" small class="ml-3">
-            New
+          <v-btn color="success" @click="newPage" small class="ml-3">
+            Create
           </v-btn>
         </span>
       </h2>
@@ -19,11 +20,11 @@
           :key="item + item.id"
         >
           <v-card>
-            <v-card-title class="headline">{{ item.name }}</v-card-title>
-            <v-divider></v-divider>
-
-            <v-card-text>
-              Card Position: {{ index }}
+            <v-card-text class="mb-0 pb-0">
+              <h3>{{ item.name }}</h3>
+              <v-divider></v-divider>
+            </v-card-text>
+            <v-card-text class="mt-0">
               <div>
                 <v-chip
                   v-for="cat in item.categories"
@@ -43,7 +44,7 @@
                 Delete
               </v-btn>
               <v-spacer> </v-spacer>
-              <v-btn small text color="success">
+              <v-btn small text color="success" @click="editPage(index)">
                 Edit
               </v-btn>
             </v-card-actions>
@@ -62,14 +63,33 @@
 
 <script>
 import draggable from "vuedraggable";
+import CreatePageDialog from "@/components/Admin/General/CreatePageDialog";
 import api from "@/api";
 export default {
   components: {
     draggable,
+    CreatePageDialog,
   },
   data() {
     return {
+      pageDialog: false,
       customPages: [],
+      newPageData: {
+        create: true,
+        title: "New Page",
+        buttonText: "Create",
+        data: {
+          name: "",
+          categories: [],
+          position: 0,
+        },
+      },
+      editPageData: {
+        create: false,
+        title: "Edit Page",
+        buttonText: "Update",
+        data: {},
+      },
     };
   },
   async mounted() {
@@ -78,6 +98,7 @@ export default {
   methods: {
     async getPages() {
       this.customPages = await api.siteSettings.getPages();
+      this.customPages.sort((a, b) => a.position - b.position);
     },
     async deletePage(id) {
       await api.siteSettings.deletePage(id);
@@ -90,7 +111,15 @@ export default {
 
       await api.siteSettings.updateAllPages(this.customPages);
 
-      this.getPages;
+      this.getPages();
+    },
+    editPage(index) {
+      this.editPageData.data = this.customPages[index];
+      this.$refs.createDialog.open(this.editPageData);
+    },
+    newPage() {
+      this.newPageData.position = this.customPages.length;
+      this.$refs.createDialog.open(this.newPageData);
     },
   },
 };

frontend/src/components/FormHelpers/CategorySelector.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <v-select
+      :items="allCategories"
+      v-model="selected"
+      label="Categories"
+      chips
+      deletable-chips
+      dense
+      item-text="name"
+      multiple
+      return-object
+      @input="emitChange"
+    ></v-select>
+  </div>
+</template>
+
+<script>
+import api from "@/api";
+export default {
+  props: {
+    value: Array,
+  },
+  data() {
+    return {
+      selected: [],
+      allCategories: [],
+    };
+  },
+  watch: {
+    value() {
+      this.selected = this.value;
+    },
+  },
+  async created() {
+    this.allCategories = await api.categories.get_all();
+  },
+  methods: {
+    emitChange() {
+      this.$emit("input", this.selected);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

frontend/src/components/UI/CategorySidebar.vue

@@ -33,6 +33,7 @@
 </template>
 
 <script>
+import api from "@/api";
 export default {
   data() {
     return {
@@ -62,8 +63,7 @@ export default {
     allCategories() {
       this.buildSidebar();
     },
-    showSidebar() {
-    },
+    showSidebar() {},
   },
   mounted() {
     this.buildSidebar();
@@ -75,10 +75,12 @@ export default {
     async buildSidebar() {
       this.links = [];
       this.links.push(...this.baseLinks);
-      this.allCategories.forEach(async element => {
+      const pages = await api.siteSettings.getPages();
+      pages.sort((a, b) => a.position - b.position);
+      pages.forEach(async element => {
         this.links.push({
           title: element.name,
-          to: `/recipes/${element.slug}`,
+          to: `/pages/${element.slug}`,
           icon: "mdi-tag",
         });
       });

frontend/src/pages/Recipes/CustomPage.vue

@@ -3,7 +3,7 @@
     <CategorySidebar />
     <v-card flat height="100%">
       <v-card-title class="text-center justify-center py-6 headline">
-        Category Section
+        {{ title }}
       </v-card-title>
       <div v-if="render">
         <v-tabs v-model="tab" background-color="transparent" grow>
@@ -37,41 +37,35 @@ export default {
   },
   data() {
     return {
+      title: "",
       tab: null,
       render: false,
       recipeStore: [],
-      categories: [
-        {
-          id: 2,
-          slug: "brownie",
-          name: "brownie",
-        },
-        {
-          id: 3,
-          slug: "dessert",
-          name: "dessert",
-        },
-        {
-          id: 4,
-          slug: "drink",
-          name: "Drink",
-        },
-      ],
+      categories: [],
     };
   },
+  computed: {
+    pageSlug() {
+      return this.$route.params.customPage;
+    },
+  },
 
   watch: {
-    tab(val) {
-      console.log(val);
+    pageSlug() {
+      this.buildPage();
     },
   },
+
   async mounted() {
     await this.buildPage();
     this.render = true;
   },
   methods: {
     async buildPage() {
-      this.categories.forEach(async element => {
+      const page = await api.siteSettings.getPage(this.pageSlug);
+      this.title = page.name;
+      this.categories = page.categories;
+      page.categories.forEach(async element => {
         let categoryRecipes = await this.getRecipeByCategory(element.slug);
         this.recipeStore.push(categoryRecipes);
       });

frontend/src/routes/index.js

@@ -32,7 +32,7 @@ export const routes = [
   { path: "/debug", component: Debug },
   { path: "/search", component: SearchPage },
   { path: "/recipes/all", component: AllRecipes },
-  { path: "/recipes/test-page", component: CustomPage },
+  { path: "/pages/:customPage", component: CustomPage },
   { path: "/recipes/:category", component: CategoryPage },
   { path: "/recipe/:recipe", component: ViewRecipe },
   { path: "/new/", component: NewRecipe },

mealie/routes/site_settings/custom_pages.py

@@ -1,3 +1,5 @@
+from typing import Union
+
 from fastapi import APIRouter, Depends
 from mealie.db.database import db
 from mealie.db.db_setup import generate_session
@@ -43,13 +45,22 @@ async def update_multiple_pages(
 
 
 @router.get("/{id}")
-async def delete_custom_page(
-    id: int,
+async def get_single_page(
+    id: Union[int, str],
     session: Session = Depends(generate_session),
 ):
     """ Removes a custom page from the database """
+    if isinstance(id, int):
+        return db.custom_pages.get(session, id)
+    elif isinstance(id, str):
+        return db.custom_pages.get(session, id, "slug")
 
-    return db.custom_pages.get(session, id)
+
+@router.put("/{id}")
+async def update_single_age(data: CustomPageOut, id: int, session: Session = Depends(generate_session)):
+    """ Removes a custom page from the database """
+
+    return db.custom_pages.update(session, id, data.dict())
 
 
 @router.delete("/{id}")