[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/pages/user/group/cookbooks.vue

@@ -0,0 +1,70 @@
+<template>
+  <v-container fluid>
+    <BaseCardSectionTitle title="Cookbooks"> </BaseCardSectionTitle>
+    <BaseButton create @click="actions.createOne()" />
+    <v-expansion-panels class="mt-2">
+      <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">
+            <div class="d-flex align-center">
+              <v-icon large left>
+                {{ $globals.icons.pages }}
+              </v-icon>
+              {{ cookbook.name }}
+            </div>
+            <template #actions>
+              <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>
+            </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 save @click="actions.updateOne(cookbook)"> </BaseButton>
+            </v-card-actions>
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+      </draggable>
+    </v-expansion-panels>
+  </v-container>
+</template>
+    
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+import { useCookbooks } from "@/composables/use-cookbooks";
+import draggable from "vuedraggable";
+
+export default defineComponent({
+  components: { draggable },
+  layout: "admin",
+  setup() {
+    const { cookbooks, actions, workingCookbookData, deleteTargetId, validForm } = useCookbooks();
+
+    return {
+      cookbooks,
+      actions,
+      workingCookbookData,
+      deleteTargetId,
+      validForm,
+    };
+  },
+});
+</script>
+    
+<style scoped>
+.my-border {
+  border-left: 5px solid var(--v-primary-base);
+}
+</style>