feat: Change Recipe Owner (#4355)

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

frontend/components/Domain/Recipe/RecipeDataTable.vue

@@ -34,8 +34,8 @@
     <template #item.userId="{ item }">
       <v-list-item class="justify-start">
         <UserAvatar :user-id="item.userId" :tooltip="false" size="40" />
-        <v-list-item-content>
-          <v-list-item-title>
+        <v-list-item-content class="pl-2">
+          <v-list-item-title class="text-left">
             {{ getMember(item.userId) }}
           </v-list-item-title>
         </v-list-item-content>

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,
     };
   },
 });

frontend/lang/messages/en-US.json

@@ -182,6 +182,7 @@
     "date": "Date",
     "id": "Id",
     "owner": "Owner",
+    "change-owner": "Change Owner",
     "date-added": "Date Added",
     "none": "None",
     "run": "Run",

frontend/lib/api/types/user.ts

@@ -77,6 +77,8 @@ export interface ReadWebhook {
 }
 export interface UserSummary {
   id: string;
+  groupId: string;
+  householdId: string;
   username: string;
   fullName: string;
 }

frontend/lib/api/user/recipes/recipe.ts

@@ -178,6 +178,10 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
     return `${routes.recipesRecipeSlugExportZip(recipeSlug)}?token=${token}`;
   }
 
+  async updateMany(payload: Recipe[]) {
+    return await this.requests.put<Recipe[]>(routes.recipesBase, payload);
+  }
+
   async updateLastMade(recipeSlug: string, timestamp: string) {
     return await this.requests.patch<Recipe, RecipeLastMade>(routes.recipesSlugLastMade(recipeSlug), { timestamp })
   }

frontend/pages/group/data/recipes.vue

@@ -64,6 +64,24 @@
           <i>{{ $tc('data-pages.recipes.selected-length-recipe-s-settings-will-be-updated', selected.length) }}</i>
         </p>
       </v-card-text>
+      <v-card-text v-else-if="dialog.mode == MODES.changeOwner">
+        <v-select
+          v-model="selectedOwner"
+          :items="allUsers"
+          item-text="fullName"
+          item-value="id"
+          :label="$tc('general.owner')"
+          hide-details
+        >
+          <template #prepend>
+            <UserAvatar :user-id="selectedOwner" :tooltip="false" />
+          </template>
+        </v-select>
+        <v-card-text v-if="selectedOwnerHousehold" class="d-flex" style="align-items: flex-end;">
+          <v-icon>{{ $globals.icons.household }}</v-icon>
+          <span class="pl-1">{{ selectedOwnerHousehold.name }}</span>
+        </v-card-text>
+      </v-card-text>
     </BaseDialog>
     <section>
       <!-- Recipe Data Table -->
@@ -109,6 +127,7 @@
           @categorize-selected="openDialog(MODES.category)"
           @delete-selected="openDialog(MODES.delete)"
           @update-settings="openDialog(MODES.updateSettings)"
+          @change-owner="openDialog(MODES.changeOwner)"
         >
         </BaseOverflowButton>
 
@@ -155,7 +174,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, useContext, onMounted } from "@nuxtjs/composition-api";
+import { computed, defineComponent, reactive, ref, useContext, onMounted } from "@nuxtjs/composition-api";
 import RecipeDataTable from "~/components/Domain/Recipe/RecipeDataTable.vue";
 import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
 import { useUserApi } from "~/composables/api";
@@ -165,6 +184,9 @@ import GroupExportData from "~/components/Domain/Group/GroupExportData.vue";
 import { GroupDataExport } from "~/lib/api/types/group";
 import { MenuItem } from "~/components/global/BaseOverflowButton.vue";
 import RecipeSettingsSwitches from "~/components/Domain/Recipe/RecipeSettingsSwitches.vue";
+import { useUserStore } from "~/composables/store/use-user-store";
+import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
+import { useHouseholdStore } from "~/composables/store/use-household-store";
 
 enum MODES {
   tag = "tag",
@@ -172,10 +194,11 @@ enum MODES {
   export = "export",
   delete = "delete",
   updateSettings = "updateSettings",
+  changeOwner = "changeOwner",
 }
 
 export default defineComponent({
-  components: { RecipeDataTable, RecipeOrganizerSelector, GroupExportData, RecipeSettingsSwitches },
+  components: { RecipeDataTable, RecipeOrganizerSelector, GroupExportData, RecipeSettingsSwitches, UserAvatar },
   scrollToTop: true,
   setup() {
     const { $auth, $globals, i18n } = useContext();
@@ -230,6 +253,11 @@ export default defineComponent({
         text: i18n.tc("data-pages.recipes.update-settings"),
         event: "update-settings",
       },
+      {
+        icon: $globals.icons.user,
+        text: i18n.tc("general.change-owner"),
+        event: "change-owner",
+      },
       {
         icon: $globals.icons.delete,
         text: i18n.tc("general.delete"),
@@ -312,9 +340,7 @@ export default defineComponent({
 
       const recipes = selected.value.map((x: Recipe) => x.slug ?? "");
 
-      const { response, data } = await api.bulk.bulkDelete({ recipes });
-
-      console.log(response, data);
+      await api.bulk.bulkDelete({ recipes });
 
       await refreshRecipes();
       resetAll();
@@ -335,9 +361,23 @@ export default defineComponent({
 
       const recipes = selected.value.map((x: Recipe) => x.slug ?? "");
 
-      const { response, data } = await api.bulk.bulkSetSettings({ recipes, settings: recipeSettings });
+      await api.bulk.bulkSetSettings({ recipes, settings: recipeSettings });
 
-      console.log(response, data);
+      await refreshRecipes();
+      resetAll();
+    }
+
+    async function changeOwner() {
+      if(!selected.value.length || !selectedOwner.value) {
+        return;
+      }
+
+      selected.value.forEach((r) => {
+        r.userId = selectedOwner.value;
+      });
+
+      loading.value = true;
+      await api.recipes.updateMany(selected.value);
 
       await refreshRecipes();
       resetAll();
@@ -365,6 +405,7 @@ export default defineComponent({
         [MODES.export]: i18n.tc("data-pages.recipes.export-recipes"),
         [MODES.delete]: i18n.tc("data-pages.recipes.delete-recipes"),
         [MODES.updateSettings]: i18n.tc("data-pages.recipes.update-settings"),
+        [MODES.changeOwner]: i18n.tc("general.change-owner"),
       };
 
       const callbacks: Record<MODES, () => Promise<void>> = {
@@ -373,6 +414,7 @@ export default defineComponent({
         [MODES.export]: exportSelected,
         [MODES.delete]: deleteSelected,
         [MODES.updateSettings]: updateSettings,
+        [MODES.changeOwner]: changeOwner,
       };
 
       const icons: Record<MODES, string> = {
@@ -381,6 +423,7 @@ export default defineComponent({
         [MODES.export]: $globals.icons.database,
         [MODES.delete]: $globals.icons.delete,
         [MODES.updateSettings]: $globals.icons.cog,
+        [MODES.changeOwner]: $globals.icons.user,
       };
 
       dialog.mode = mode;
@@ -390,6 +433,22 @@ export default defineComponent({
       dialog.state = true;
     }
 
+    const { store: allUsers } = useUserStore();
+    const { store: households } = useHouseholdStore();
+    const selectedOwner = ref("");
+    const selectedOwnerHousehold = computed(() => {
+      if(!selectedOwner.value) {
+        return null;
+      }
+
+      const owner = allUsers.value.find((u) => u.id === selectedOwner.value);
+      if (!owner) {
+        return null;
+      };
+
+      return households.value.find((h) => h.id === owner.householdId);
+    });
+
     return {
       recipeSettings,
       selectAll,
@@ -412,6 +471,9 @@ export default defineComponent({
       groupExports,
       purgeExportsDialog,
       purgeExports,
+      allUsers,
+      selectedOwner,
+      selectedOwnerHousehold,
     };
   },
   head() {