feat(frontend): ✨ Add Initial CookBook Support

frontend/pages/recipe/_slug.vue

@@ -110,26 +110,35 @@
               />
             </draggable>
             <div class="d-flex justify-end mt-2">
+              <RecipeIngredientParserMenu class="mr-1" :ingredients="recipe.recipeIngredient" />
               <RecipeDialogBulkAdd class="mr-1" @bulk-data="addIngredient" />
-              <BaseButton class="mr-1" @click="addIngredient"> {{ $t("general.new") }} </BaseButton>
-              <RecipeIngredientParserMenu :ingredients="recipe.recipeIngredient" />
+              <BaseButton @click="addIngredient"> {{ $t("general.new") }} </BaseButton>
             </div>
           </div>
 
           <div class="d-flex justify-space-between align-center pb-3">
-            <v-btn
-              v-if="recipe.recipeYield"
-              dense
-              small
-              :hover="false"
-              type="label"
-              :ripple="false"
-              elevation="0"
-              color="secondary darken-1"
-              class="rounded-sm static"
-            >
-              {{ scaledYield }}
-            </v-btn>
+            <v-tooltip small top color="secondary darken-1">
+              <template #activator="{ on, attrs }">
+                <v-btn
+                  v-if="recipe.recipeYield"
+                  dense
+                  small
+                  :hover="false"
+                  type="label"
+                  :ripple="false"
+                  elevation="0"
+                  color="secondary darken-1"
+                  class="rounded-sm static"
+                  v-bind="attrs"
+                  @click="scale = 1"
+                  v-on="on"
+                >
+                  {{ scaledYield }}
+                </v-btn>
+              </template>
+              <span> Reset Scale </span>
+            </v-tooltip>
+
             <template v-if="!recipe.settings.disableAmount">
               <v-btn color="secondary darken-1" class="mx-1" small @click="scale > 1 ? scale-- : null">
                 <v-icon>

frontend/pages/user/group/pages.vue

@@ -1,24 +1,64 @@
 <template>
   <v-container fluid>
-    <BaseCardSectionTitle title="Group Pages">
-      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias error provident, eveniet, laboriosam assumenda
-      earum amet quaerat vel consequatur molestias sed enim. Adipisci a consequuntur dolor culpa expedita voluptatem
-      praesentium optio iste atque, ea reiciendis iure non aut suscipit modi ducimus ratione, quam numquam quaerat
-      distinctio illum nemo. Dicta, doloremque!
-    </BaseCardSectionTitle>
+    <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">
+            {{ cookbook.name }}
+            <template #actions>
+              <v-btn color="info" fab small class="ml-auto mr-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>
+              <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>
+            </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() {
-    return {};
+    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>