[Feat] ✨ Migrate from Pages to Cookbooks (#664)

* feat: ✨ Add Description to Cookbooks

* feat(frontend): ✨ Cookbook view page

* feat(frontend): 💄 Add final UI touches

* fix(backend): 🐛 Add get by slug or id

* fix linting issue

* test(backend): ✅ Update tests from pages -> cookbooks

* refactor(backend): 🔥 Delete old page files

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/api/class-interfaces/cookbooks.ts

@@ -11,6 +11,7 @@ export interface CreateCookBook {
 export interface CookBook extends CreateCookBook {
   id: number;
   slug: string;
+  description: string;
   position: number;
   group_id: number;
   categories: Category[] | CategoryBase[];

frontend/composables/use-cookbooks.ts

@@ -5,6 +5,22 @@ import { CookBook } from "~/api/class-interfaces/cookbooks";
 
 let cookbookStore: Ref<CookBook[] | null> | null = null;
 
+export const useCookbook = function () {
+  function getOne(id: string | number) {
+    const api = useApiSingleton();
+
+    const units = useAsync(async () => {
+      const { data } = await api.cookbooks.getOne(id);
+
+      return data;
+    }, useAsyncKey());
+
+    return units;
+  }
+
+  return { getOne };
+};
+
 export const useCookbooks = function () {
   const api = useApiSingleton();
   const loading = ref(false);
@@ -45,10 +61,10 @@ export const useCookbooks = function () {
       loading.value = true;
       const { data } = await api.cookbooks.createOne({
         // @ts-ignore. I"m thinking this will always be defined.
-        name: "New Cookbook" + String(cookbookStore?.value?.length + 1 || 1),
+        name: "Cookbook " + String(cookbookStore?.value?.length + 1 || 1),
       });
       if (data && cookbookStore?.value) {
-        cookbookStore.value.unshift(data);
+        cookbookStore.value.push(data);
       } else {
         this.refreshAll();
       }

frontend/lang/messages/en-US.json

@@ -402,7 +402,9 @@
   },
   "sidebar": {
     "all-recipes": "All Recipes",
+    "backups": "Backups",
     "categories": "Categories",
+    "cookbooks": "Cookbooks",
     "dashboard": "Dashboard",
     "home-page": "Home Page",
     "manage-users": "Manage Users",
@@ -411,8 +413,7 @@
     "search": "Search",
     "site-settings": "Site Settings",
     "tags": "Tags",
-    "toolbox": "Toolbox",
-    "backups": "Backups"
+    "toolbox": "Toolbox"
   },
   "signup": {
     "error-signing-up": "Error Signing Up",

frontend/layouts/admin.vue

@@ -58,8 +58,8 @@ export default defineComponent({
         },
         {
           icon: this.$globals.icons.pages,
-          to: "/user/group/pages",
-          title: this.$t("settings.pages"),
+          to: "/user/group/cookbooks",
+          title: this.$t("sidebar.cookbooks"),
         },
       ],
       adminLinks: [

frontend/pages/cookbooks/_slug.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-container v-if="book" fluid>
+    <v-app-bar color="transparent" flat class="mt-n1 rounded">
+      <v-icon large left> {{ $globals.icons.pages }} </v-icon>
+      <v-toolbar-title class="headline"> {{ book.name }} </v-toolbar-title>
+    </v-app-bar>
+    <v-card flat>
+      <v-card-text class="py-0">
+        {{ book.description }}
+      </v-card-text>
+    </v-card>
+    <v-tabs v-model="tab" show-arrows>
+      <v-tab v-for="(cat, index) in book.categories" :key="index">
+        {{ cat.name }}
+      </v-tab>
+    </v-tabs>
+    <v-tabs-items v-model="tab">
+      <v-tab-item v-for="(cat, idx) in book.categories" :key="`tabs` + idx">
+        <RecipeCardSection class="mb-5 mx-1" :recipes="cat.recipes" />
+      </v-tab-item>
+    </v-tabs-items>
+  </v-container>
+</template>
+
+<script lang="ts">
+import RecipeCardSection from "@/components/Domain/Recipe/RecipeCardSection.vue";
+import { defineComponent, useRoute, ref } from "@nuxtjs/composition-api";
+import { useCookbook } from "~/composables/use-cookbooks";
+export default defineComponent({
+  components: { RecipeCardSection },
+  setup() {
+    const route = useRoute();
+    const slug = route.value.params.slug;
+    const { getOne } = useCookbook();
+
+    const tab = ref(null);
+
+    const book = getOne(slug);
+
+    return {
+      book,
+      tab,
+    };
+  },
+});
+</script>
+
+<style scoped>
+</style>

frontend/pages/user/group/cookbooks.vue

@@ -6,27 +6,33 @@
       <draggable v-model="cookbooks" handle=".handle" style="width: 100%" @change="actions.updateOrder()">
         <v-expansion-panel v-for="(cookbook, index) in cookbooks" :key="index" class="my-2 my-border rounded">
           <v-expansion-panel-header disable-icon-rotate class="headline">
-            {{ cookbook.name }}
+            <div class="d-flex align-center">
+              <v-icon large left>
+                {{ $globals.icons.pages }}
+              </v-icon>
+              {{ cookbook.name }}
+            </div>
             <template #actions>
-              <v-btn color="info" fab small class="ml-auto mr-2">
+              <v-icon class="handle">
+                {{ $globals.icons.arrowUpDown }}
+              </v-icon>
+              <v-btn color="info" fab small class="ml-2">
                 <v-icon color="white">
                   {{ $globals.icons.edit }}
                 </v-icon>
               </v-btn>
-              <v-icon class="handle">
-                {{ $globals.icons.arrowUpDown }}
-              </v-icon>
             </template>
           </v-expansion-panel-header>
           <v-expansion-panel-content>
             <v-card-text>
               <v-text-field v-model="cookbooks[index].name" label="Cookbook Name"></v-text-field>
+              <v-textarea v-model="cookbooks[index].description" auto-grow :rows="2" label="Description"></v-textarea>
               <DomainRecipeCategoryTagSelector v-model="cookbooks[index].categories" />
             </v-card-text>
             <v-card-actions>
               <v-spacer></v-spacer>
               <BaseButton delete @click="actions.deleteOne(cookbook.id)" />
-              <BaseButton update @click="actions.updateOne(cookbook)"> </BaseButton>
+              <BaseButton save @click="actions.updateOne(cookbook)"> </BaseButton>
             </v-card-actions>
           </v-expansion-panel-content>
         </v-expansion-panel>