feat: Change Recipe Owner (#4355)

Co-authored-by: boc-the-git <3479092+boc-the-git@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex justify-start align-center">
+  <div class="d-flex justify-start align-top py-2">
     <RecipeImageUploadBtn class="my-1" :slug="recipe.slug" @upload="uploadImage" @refresh="imageKey++" />
     <RecipeSettingsMenu
       class="my-1 mx-1"
@@ -7,22 +7,47 @@
       :is-owner="recipe.userId == user.id"
       @upload="uploadImage"
     />
+    <v-spacer />
+    <v-container class="py-0" style="width: 40%;">
+      <v-select
+        v-model="recipe.userId"
+        :items="allUsers"
+        item-text="fullName"
+        item-value="id"
+        :label="$tc('general.owner')"
+        hide-details
+        :disabled="!canEditOwner"
+      >
+        <template #prepend>
+          <UserAvatar :user-id="recipe.userId" :tooltip="false" />
+        </template>
+      </v-select>
+      <v-card-text v-if="ownerHousehold" class="pa-0 d-flex" style="align-items: flex-end;">
+        <v-spacer />
+        <v-icon>{{ $globals.icons.household }}</v-icon>
+        <span class="pl-1">{{ ownerHousehold.name }}</span>
+      </v-card-text>
+    </v-container>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onUnmounted } from "@nuxtjs/composition-api";
+import { computed, defineComponent, onUnmounted } from "@nuxtjs/composition-api";
 import { clearPageState, usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { Recipe } from "~/lib/api/types/recipe";
 import { useUserApi } from "~/composables/api";
 import RecipeImageUploadBtn from "~/components/Domain/Recipe/RecipeImageUploadBtn.vue";
 import RecipeSettingsMenu from "~/components/Domain/Recipe/RecipeSettingsMenu.vue";
+import { useUserStore } from "~/composables/store/use-user-store";
+import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
+import { useHouseholdStore } from "~/composables/store";
 
 export default defineComponent({
   components: {
     RecipeImageUploadBtn,
     RecipeSettingsMenu,
+    UserAvatar,
   },
   props: {
     recipe: {
@@ -34,6 +59,22 @@ export default defineComponent({
     const { user } = usePageUser();
     const api = useUserApi();
     const { imageKey } = usePageState(props.recipe.slug);
+
+    const canEditOwner = computed(() => {
+      return user.id === props.recipe.userId || user.admin;
+    })
+
+    const { store: allUsers } = useUserStore();
+    const { store: households } = useHouseholdStore();
+    const ownerHousehold = computed(() => {
+      const owner = allUsers.value.find((u) => u.id === props.recipe.userId);
+      if (!owner) {
+        return null;
+      };
+
+      return households.value.find((h) => h.id === owner.householdId);
+    });
+
     onUnmounted(() => {
       clearPageState(props.recipe.slug);
       console.debug("reset RecipePage state during unmount");
@@ -51,8 +92,11 @@ export default defineComponent({
 
     return {
       user,
+      canEditOwner,
       uploadImage,
       imageKey,
+      allUsers,
+      ownerHousehold,
     };
   },
 });