feat: cookbook editor on cookbook page (#3378)

* remove unnecessairy string

* add edit functionality to cookbook page

* restrict to own group

frontend/components/Domain/Cookbook/CookbookPage.vue

@@ -1,8 +1,33 @@
 <template>
+  <div>
+    <!-- Edit Dialog -->
+    <BaseDialog
+      v-if="editTarget"
+      v-model="dialogStates.edit"
+      :width="650"
+      :icon="$globals.icons.pages"
+      :title="$t('general.edit')"
+      :submit-icon="$globals.icons.save"
+      :submit-text="$tc('general.save')"
+      @submit="editCookbook"
+    >
+      <v-card-text>
+        <CookbookEditor :cookbook="editTarget" :actions="actions" />
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Page -->
     <v-container v-if="book" fluid>
-      <v-app-bar color="transparent" flat class="mt-n1 rounded">
+      <v-app-bar color="transparent" flat class="mt-n1">
         <v-icon large left> {{ $globals.icons.pages }} </v-icon>
         <v-toolbar-title class="headline"> {{ book.name }} </v-toolbar-title>
+        <v-spacer></v-spacer>
+        <BaseButton
+          v-if="isOwnGroup"
+          class="mx-1"
+          :edit="true"
+          @click="handleEditCookbook"
+        />
       </v-app-bar>
       <v-card flat>
         <v-card-text class="py-0">
@@ -22,17 +47,20 @@
         />
       </v-container>
     </v-container>
-  </template>
+  </div>
+</template>
 
   <script lang="ts">
-  import { computed, defineComponent, useRoute, ref, useContext, useMeta } from "@nuxtjs/composition-api";
+  import { computed, defineComponent, useRoute, ref, useContext, useMeta, reactive, useRouter } from "@nuxtjs/composition-api";
   import { useLazyRecipes } from "~/composables/recipes";
   import RecipeCardSection from "@/components/Domain/Recipe/RecipeCardSection.vue";
-  import { useCookbook } from "~/composables/use-group-cookbooks";
+  import { useCookbook, useCookbooks } from "~/composables/use-group-cookbooks";
   import { useLoggedInState } from "~/composables/use-logged-in-state";
+  import { RecipeCookBook } from "~/lib/api/types/cookbook";
+  import CookbookEditor from "~/components/Domain/Cookbook/CookbookEditor.vue";
 
   export default defineComponent({
-    components: { RecipeCardSection },
+    components: { RecipeCardSection, CookbookEditor },
     setup() {
       const { $auth } = useContext();
       const { isOwnGroup } = useLoggedInState();
@@ -43,10 +71,36 @@
       const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
       const slug = route.value.params.slug;
       const { getOne } = useCookbook(isOwnGroup.value ? null : groupSlug.value);
+      const { actions } = useCookbooks();
+      const router = useRouter();
 
       const tab = ref(null);
       const book = getOne(slug);
 
+      const dialogStates = reactive({
+        edit: false,
+      });
+
+      const editTarget = ref<RecipeCookBook | null>(null);
+      function handleEditCookbook() {
+        dialogStates.edit = true;
+        editTarget.value = book.value;
+      }
+
+      async function editCookbook() {
+        if (!editTarget.value) {
+          return;
+        }
+        const response = await actions.updateOne(editTarget.value);
+
+        // if name changed, redirect to new slug
+        if (response?.slug && book.value?.slug !== response?.slug) {
+          router.push(`/g/${route.value.params.groupSlug}/cookbooks/${response?.slug}`);
+        }
+        dialogStates.edit = false;
+        editTarget.value = null;
+      }
+
       useMeta(() => {
         return {
           title: book?.value?.name || "Cookbook",
@@ -62,6 +116,12 @@
         recipes,
         removeRecipe,
         replaceRecipes,
+        isOwnGroup,
+        dialogStates,
+        editTarget,
+        handleEditCookbook,
+        editCookbook,
+        actions,
       };
     },
     head: {}, // Must include for useMeta