feat: User-specific Recipe Ratings (#3345)

frontend/components/Domain/Group/GroupMealPlanRuleForm.vue

@@ -19,7 +19,7 @@
 <script lang="ts">
 import { defineComponent, computed, useContext } from "@nuxtjs/composition-api";
 import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
-import { RecipeTag, RecipeCategory } from "~/lib/api/types/group";
+import { RecipeTag, RecipeCategory } from "~/lib/api/types/recipe";
 
 export default defineComponent({
   components: {

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -21,7 +21,7 @@
 
     <v-spacer></v-spacer>
     <div v-if="!open" class="custom-btn-group ma-1">
-      <RecipeFavoriteBadge v-if="loggedIn" class="mx-1" color="info" button-style :slug="recipe.slug" show-always />
+      <RecipeFavoriteBadge v-if="loggedIn" class="mx-1" color="info" button-style :recipe-id="recipe.id" show-always />
       <RecipeTimelineBadge v-if="loggedIn" button-style :slug="recipe.slug" :recipe-name="recipe.name" />
       <div v-if="loggedIn">
         <v-tooltip v-if="!locked" bottom color="info">

frontend/components/Domain/Recipe/RecipeCard.vue

@@ -35,9 +35,9 @@
 
         <slot name="actions">
           <v-card-actions v-if="showRecipeContent" class="px-1">
-            <RecipeFavoriteBadge v-if="isOwnGroup" class="absolute" :slug="slug" show-always />
+            <RecipeFavoriteBadge v-if="isOwnGroup" class="absolute" :recipe-id="recipeId" show-always />
 
-            <RecipeRating class="pb-1" :value="rating" :name="name" :slug="slug" :small="true" />
+            <RecipeRating class="pb-1" :value="rating" :recipe-id="recipeId" :slug="slug" :small="true" />
             <v-spacer></v-spacer>
             <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" url-prefix="tags" />
 
@@ -97,6 +97,10 @@ export default defineComponent({
       required: false,
       default: 0,
     },
+    ratingColor: {
+      type: String,
+      default: "secondary",
+    },
     image: {
       type: String,
       required: false,

frontend/components/Domain/Recipe/RecipeCardMobile.vue

@@ -38,17 +38,14 @@
           </v-list-item-subtitle>
           <div class="d-flex flex-wrap justify-end align-center">
             <slot name="actions">
-              <RecipeFavoriteBadge v-if="isOwnGroup && showRecipeContent" :slug="slug" show-always />
-              <v-rating
-                v-if="showRecipeContent"
-                color="secondary"
+              <RecipeFavoriteBadge v-if="isOwnGroup && showRecipeContent" :recipe-id="recipeId" show-always />
+              <RecipeRating
                 :class="isOwnGroup ? 'ml-auto' : 'ml-auto pb-2'"
-                background-color="secondary lighten-3"
-                dense
-                length="5"
-                size="15"
                 :value="rating"
-              ></v-rating>
+                :recipe-id="recipeId"
+                :slug="slug"
+                :small="true"
+              />
               <v-spacer></v-spacer>
 
               <!-- If we're not logged-in, no items display, so we hide this menu -->
@@ -85,12 +82,14 @@ import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composi
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeCardImage from "./RecipeCardImage.vue";
+import RecipeRating from "./RecipeRating.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 
 export default defineComponent({
   components: {
     RecipeFavoriteBadge,
     RecipeContextMenu,
+    RecipeRating,
     RecipeCardImage,
   },
   props: {

frontend/components/Domain/Recipe/RecipeChips.vue

@@ -18,7 +18,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composition-api";
-import { RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/user";
+import { RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
 
 export type UrlPrefixParam = "tags" | "categories" | "tools";
 

frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue

@@ -22,11 +22,12 @@
 
 <script lang="ts">
 import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+import { useUserSelfRatings } from "~/composables/use-users";
 import { useUserApi } from "~/composables/api";
 import { UserOut } from "~/lib/api/types/user";
 export default defineComponent({
   props: {
-    slug: {
+    recipeId: {
       type: String,
       default: "",
     },
@@ -42,19 +43,23 @@ export default defineComponent({
   setup(props) {
     const api = useUserApi();
     const { $auth } = useContext();
+    const { userRatings, refreshUserRatings } = useUserSelfRatings();
 
     // TODO Setup the correct type for $auth.user
     // See https://github.com/nuxt-community/auth-module/issues/1097
     const user = computed(() => $auth.user as unknown as UserOut);
-    const isFavorite = computed(() => user.value?.favoriteRecipes?.includes(props.slug));
+    const isFavorite = computed(() => {
+      const rating = userRatings.value.find((r) => r.recipeId === props.recipeId);
+      return rating?.isFavorite || false;
+    });
 
     async function toggleFavorite() {
       if (!isFavorite.value) {
-        await api.users.addFavorite(user.value?.id, props.slug);
+        await api.users.addFavorite(user.value?.id, props.recipeId);
       } else {
-        await api.users.removeFavorite(user.value?.id, props.slug);
+        await api.users.removeFavorite(user.value?.id, props.recipeId);
       }
-      $auth.fetchUser();
+      await refreshUserRatings();
     }
 
     return { isFavorite, toggleFavorite };

frontend/components/Domain/Recipe/RecipeOrganizerSelector.vue

@@ -46,7 +46,7 @@
 <script lang="ts">
 import { defineComponent, ref, useContext, computed, onMounted } from "@nuxtjs/composition-api";
 import RecipeOrganizerDialog from "./RecipeOrganizerDialog.vue";
-import { RecipeCategory, RecipeTag } from "~/lib/api/types/user";
+import { RecipeCategory, RecipeTag } from "~/lib/api/types/recipe";
 import { RecipeTool } from "~/lib/api/types/admin";
 import { useTagStore } from "~/composables/store/use-tag-store";
 import { useCategoryStore, useToolStore } from "~/composables/store";

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

@@ -5,7 +5,7 @@
         <v-card-text>
           <v-card-title class="headline pa-0 flex-column align-center">
             {{ recipe.name }}
-            <RecipeRating :key="recipe.slug" v-model="recipe.rating" :name="recipe.name" :slug="recipe.slug" />
+            <RecipeRating :key="recipe.slug" :value="recipe.rating" :recipe-id="recipe.id" :slug="recipe.slug" />
           </v-card-title>
           <v-divider class="my-2"></v-divider>
           <SafeMarkdown :source="recipe.description" />

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

@@ -20,7 +20,7 @@
       v-if="landscape && $vuetify.breakpoint.smAndUp"
       :key="recipe.slug"
       v-model="recipe.rating"
-      :name="recipe.name"
+      :recipe-id="recipe.id"
       :slug="recipe.slug"
     />
   </div>

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

@@ -24,7 +24,7 @@
           v-if="$vuetify.breakpoint.smAndDown"
           :key="recipe.slug"
           v-model="recipe.rating"
-          :name="recipe.name"
+          :recipe-id="recipe.id"
           :slug="recipe.slug"
         />
       </div>

frontend/components/Domain/Recipe/RecipeRating.vue

@@ -1,34 +1,35 @@
 <template>
   <div @click.prevent>
-    <v-rating
-      v-model="rating"
-      :readonly="!isOwnGroup"
-      color="secondary"
-      background-color="secondary lighten-3"
-      length="5"
-      :dense="small ? true : undefined"
-      :size="small ? 15 : undefined"
-      hover
-      :value="value"
-      clearable
-      @input="updateRating"
-      @click="updateRating"
-    ></v-rating>
+    <v-hover v-slot="{ hover }">
+      <v-rating
+        :value="rating.ratingValue"
+        :half-increments="(!hover) || (!isOwnGroup)"
+        :readonly="!isOwnGroup"
+        :color="hover ? attrs.hoverColor : attrs.color"
+        :background-color="attrs.backgroundColor"
+        length="5"
+        :dense="small ? true : undefined"
+        :size="small ? 15 : undefined"
+        hover
+        clearable
+        @input="updateRating"
+        @click="updateRating"
+      />
+    </v-hover>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api";
+import { computed, defineComponent, ref, useContext, watch } from "@nuxtjs/composition-api";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
-import { useUserApi } from "~/composables/api";
+import { useUserSelfRatings } from "~/composables/use-users";
 export default defineComponent({
   props: {
     emitOnly: {
       type: Boolean,
       default: false,
     },
-    // TODO Remove name prop?
-    name: {
+    recipeId: {
       type: String,
       default: "",
     },
@@ -44,26 +45,79 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    preferGroupRating: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props, context) {
+    const { $auth } = useContext();
     const { isOwnGroup } = useLoggedInState();
+    const { userRatings, setRating, ready: ratingsLoaded } = useUserSelfRatings();
+    const hideGroupRating = ref(false);
 
-    const rating = ref(props.value);
+    type Rating = {
+      ratingValue: number | undefined;
+      hasUserRating: boolean | undefined
+    };
 
-    const api = useUserApi();
-    function updateRating(val: number | null) {
-      if (val === 0) {
-        val = null;
+    // prefer user rating over group rating
+    const rating = computed<Rating>(() => {
+      if (!ratingsLoaded.value) {
+        return { ratingValue: undefined, hasUserRating: undefined };
       }
+      if (!($auth.user?.id) || props.preferGroupRating) {
+        return { ratingValue: props.value, hasUserRating: false };
+      }
+
+      const userRating = userRatings.value.find((r) => r.recipeId === props.recipeId);
+      return {
+        ratingValue: userRating?.rating || (hideGroupRating.value ? 0 : props.value),
+        hasUserRating: !!userRating?.rating
+      };
+    });
+
+    // if a user unsets their rating, we don't want to fall back to the group rating since it's out of sync
+    watch(
+      () => rating.value.hasUserRating,
+      () => {
+        if (rating.value.hasUserRating && !props.preferGroupRating) {
+          hideGroupRating.value = true;
+        }
+      },
+    )
+
+    const attrs = computed(() => {
+      return isOwnGroup.value ? {
+        // Logged-in user
+        color: rating.value.hasUserRating ? "secondary" : "grey darken-1",
+        hoverColor: "secondary",
+        backgroundColor: "secondary lighten-3",
+      } : {
+        // Anonymous user
+        color: "secondary",
+        hoverColor: "secondary",
+        backgroundColor: "secondary lighten-3",
+      };
+    })
+
+    function updateRating(val: number | null) {
+      if (!isOwnGroup.value) {
+        return;
+      }
+
       if (!props.emitOnly) {
-        api.recipes.patchOne(props.slug, {
-          rating: val,
-        });
+        setRating(props.slug, val || 0, null);
       }
       context.emit("input", val);
     }
 
-    return { isOwnGroup, rating, updateRating };
+    return {
+      attrs,
+      isOwnGroup,
+      rating,
+      updateRating,
+    };
   },
 });
 </script>

frontend/composables/recipes/use-recipe-tools.ts

@@ -2,7 +2,7 @@ import { reactive, ref, useAsync } from "@nuxtjs/composition-api";
 import { useAsyncKey } from "../use-utils";
 import { useUserApi } from "~/composables/api";
 import { VForm } from "~/types/vuetify";
-import { RecipeTool } from "~/lib/api/types/user";
+import { RecipeTool } from "~/lib/api/types/recipe";
 
 export const useTools = function (eager = true) {
   const workingToolData = reactive<RecipeTool>({

frontend/composables/store/use-category-store.ts

@@ -2,7 +2,7 @@ import { reactive, ref, Ref } from "@nuxtjs/composition-api";
 import { usePublicStoreActions, useStoreActions } from "../partials/use-actions-factory";
 import { usePublicExploreApi } from "../api/api-client";
 import { useUserApi } from "~/composables/api";
-import { RecipeCategory } from "~/lib/api/types/admin";
+import { RecipeCategory } from "~/lib/api/types/recipe";
 
 const categoryStore: Ref<RecipeCategory[]> = ref([]);
 const publicStoreLoading = ref(false);

frontend/composables/use-users/index.ts

@@ -1,2 +1,3 @@
 export { useUserForm } from "./user-form";
 export { useUserRegistrationForm } from "./user-registration-form";
+export { useUserSelfRatings } from "./user-ratings";

frontend/composables/use-users/user-ratings.ts

@@ -0,0 +1,40 @@
+import { ref, useContext } from "@nuxtjs/composition-api";
+import { useUserApi } from "~/composables/api";
+import { UserRatingSummary } from "~/lib/api/types/user";
+
+const userRatings = ref<UserRatingSummary[]>([]);
+const loading = ref(false);
+const ready = ref(false);
+
+export const useUserSelfRatings = function () {
+    const { $auth } = useContext();
+    const api = useUserApi();
+
+    async function refreshUserRatings() {
+        if (loading.value) {
+            return;
+        }
+
+        loading.value = true;
+        const { data } = await api.users.getSelfRatings();
+        userRatings.value = data?.ratings || [];
+        loading.value = false;
+        ready.value = true;
+    }
+
+    async function setRating(slug: string, rating: number | null, isFavorite: boolean | null) {
+        loading.value = true;
+        const userId = $auth.user?.id || "";
+        await api.users.setRating(userId, slug, rating, isFavorite);
+        loading.value = false;
+        await refreshUserRatings();
+    }
+
+    refreshUserRatings();
+    return {
+        userRatings,
+        refreshUserRatings,
+        setRating,
+        ready,
+    }
+}

frontend/lib/api/types/user.ts

@@ -5,10 +5,11 @@
 /* Do not modify it by hand - just update the pydantic models and then re-run the script
 */
 
+export type WebhookType = "mealplan";
 export type AuthMethod = "Mealie" | "LDAP" | "OIDC";
 
 export interface ChangePassword {
-  currentPassword: string;
+  currentPassword?: string;
   newPassword: string;
 }
 export interface CreateToken {
@@ -30,6 +31,11 @@ export interface CreateUserRegistration {
   seedData?: boolean;
   locale?: string;
 }
+export interface CredentialsRequest {
+  username: string;
+  password: string;
+  remember_me?: boolean;
+}
 export interface DeleteTokenResponse {
   tokenDelete: string;
 }
@@ -44,7 +50,7 @@ export interface GroupInDB {
   id: string;
   slug: string;
   categories?: CategoryBase[];
-  webhooks?: unknown[];
+  webhooks?: ReadWebhook[];
   users?: UserOut[];
   preferences?: ReadGroupPreferences;
 }
@@ -60,7 +66,17 @@ export interface CategoryBase {
   id: string;
   slug: string;
 }
+export interface ReadWebhook {
+  enabled?: boolean;
+  name?: string;
+  url?: string;
+  webhookType?: WebhookType & string;
+  scheduledTime: string;
+  groupId: string;
+  id: string;
+}
 export interface UserOut {
+  id: string;
   username?: string;
   fullName?: string;
   email: string;
@@ -68,11 +84,9 @@ export interface UserOut {
   admin?: boolean;
   group: string;
   advanced?: boolean;
-  favoriteRecipes?: string[];
   canInvite?: boolean;
   canManage?: boolean;
   canOrganize?: boolean;
-  id: string;
   groupId: string;
   groupSlug: string;
   tokens?: LongLiveTokenOut[];
@@ -109,6 +123,7 @@ export interface LongLiveTokenInDB {
   user: PrivateUser;
 }
 export interface PrivateUser {
+  id: string;
   username?: string;
   fullName?: string;
   email: string;
@@ -116,11 +131,9 @@ export interface PrivateUser {
   admin?: boolean;
   group: string;
   advanced?: boolean;
-  favoriteRecipes?: string[];
   canInvite?: boolean;
   canManage?: boolean;
   canOrganize?: boolean;
-  id: string;
   groupId: string;
   groupSlug: string;
   tokens?: LongLiveTokenOut[];
@@ -129,6 +142,9 @@ export interface PrivateUser {
   loginAttemps?: number;
   lockedAt?: string;
 }
+export interface OIDCRequest {
+  id_token: string;
+}
 export interface PasswordResetToken {
   token: string;
 }
@@ -163,9 +179,17 @@ export interface UpdateGroup {
   id: string;
   slug: string;
   categories?: CategoryBase[];
-  webhooks?: unknown[];
+  webhooks?: CreateWebhook[];
+}
+export interface CreateWebhook {
+  enabled?: boolean;
+  name?: string;
+  url?: string;
+  webhookType?: WebhookType & string;
+  scheduledTime: string;
 }
 export interface UserBase {
+  id?: string;
   username?: string;
   fullName?: string;
   email: string;
@@ -173,65 +197,12 @@ export interface UserBase {
   admin?: boolean;
   group?: string;
   advanced?: boolean;
-  favoriteRecipes?: string[];
   canInvite?: boolean;
   canManage?: boolean;
   canOrganize?: boolean;
 }
-export interface UserFavorites {
-  username?: string;
-  fullName?: string;
-  email: string;
-  authMethod?: AuthMethod & string;
-  admin?: boolean;
-  group?: string;
-  advanced?: boolean;
-  favoriteRecipes?: RecipeSummary[];
-  canInvite?: boolean;
-  canManage?: boolean;
-  canOrganize?: boolean;
-}
-export interface RecipeSummary {
-  id?: string;
-  userId?: string;
-  groupId?: string;
-  name?: string;
-  slug?: string;
-  image?: unknown;
-  recipeYield?: string;
-  totalTime?: string;
-  prepTime?: string;
-  cookTime?: string;
-  performTime?: string;
-  description?: string;
-  recipeCategory?: RecipeCategory[];
-  tags?: RecipeTag[];
-  tools?: RecipeTool[];
-  rating?: number;
-  orgURL?: string;
-  dateAdded?: string;
-  dateUpdated?: string;
-  createdAt?: string;
-  updateAt?: string;
-  lastMade?: string;
-}
-export interface RecipeCategory {
-  id?: string;
-  name: string;
-  slug: string;
-}
-export interface RecipeTag {
-  id?: string;
-  name: string;
-  slug: string;
-}
-export interface RecipeTool {
-  id: string;
-  name: string;
-  slug: string;
-  onHand?: boolean;
-}
 export interface UserIn {
+  id?: string;
   username?: string;
   fullName?: string;
   email: string;
@@ -239,15 +210,32 @@ export interface UserIn {
   admin?: boolean;
   group?: string;
   advanced?: boolean;
-  favoriteRecipes?: string[];
   canInvite?: boolean;
   canManage?: boolean;
   canOrganize?: boolean;
   password: string;
 }
+export interface UserRatingCreate {
+  recipeId: string;
+  rating?: number;
+  isFavorite?: boolean;
+  userId: string;
+}
+export interface UserRatingOut {
+  recipeId: string;
+  rating?: number;
+  isFavorite?: boolean;
+  userId: string;
+  id: string;
+}
+export interface UserRatingSummary {
+  recipeId: string;
+  rating?: number;
+  isFavorite?: boolean;
+}
 export interface UserSummary {
   id: string;
-  fullName?: string;
+  fullName: string;
 }
 export interface ValidateResetToken {
   token: string;

frontend/lib/api/user/users.ts

@@ -9,17 +9,27 @@ import {
   LongLiveTokenOut,
   ResetPassword,
   UserBase,
-  UserFavorites,
   UserIn,
   UserOut,
+  UserRatingOut,
+  UserRatingSummary,
   UserSummary,
 } from "~/lib/api/types/user";
 
+export interface UserRatingsSummaries {
+  ratings: UserRatingSummary[];
+}
+
+export interface UserRatingsOut {
+  ratings: UserRatingOut[];
+}
+
 const prefix = "/api";
 
 const routes = {
   groupUsers: `${prefix}/users/group-users`,
   usersSelf: `${prefix}/users/self`,
+  ratingsSelf: `${prefix}/users/self/ratings`,
   groupsSelf: `${prefix}/users/self/group`,
   passwordReset: `${prefix}/users/reset-password`,
   passwordChange: `${prefix}/users/password`,
@@ -30,6 +40,10 @@ const routes = {
   usersId: (id: string) => `${prefix}/users/${id}`,
   usersIdFavorites: (id: string) => `${prefix}/users/${id}/favorites`,
   usersIdFavoritesSlug: (id: string, slug: string) => `${prefix}/users/${id}/favorites/${slug}`,
+  usersIdRatings: (id: string) => `${prefix}/users/${id}/ratings`,
+  usersIdRatingsSlug: (id: string, slug: string) => `${prefix}/users/${id}/ratings/${slug}`,
+  usersSelfFavoritesId: (id: string) => `${prefix}/users/self/favorites/${id}`,
+  usersSelfRatingsId: (id: string) => `${prefix}/users/self/ratings/${id}`,
 
   usersApiTokens: `${prefix}/users/api-tokens`,
   usersApiTokensTokenId: (token_id: string | number) => `${prefix}/users/api-tokens/${token_id}`,
@@ -56,7 +70,23 @@ export class UserApi extends BaseCRUDAPI<UserIn, UserOut, UserBase> {
   }
 
   async getFavorites(id: string) {
-    return await this.requests.get<UserFavorites>(routes.usersIdFavorites(id));
+    return await this.requests.get<UserRatingsOut>(routes.usersIdFavorites(id));
+  }
+
+  async getSelfFavorites() {
+    return await this.requests.get<UserRatingsSummaries>(routes.ratingsSelf);
+  }
+
+  async getRatings(id: string) {
+    return await this.requests.get<UserRatingsOut>(routes.usersIdRatings(id));
+  }
+
+  async setRating(id: string, slug: string, rating: number | null, isFavorite: boolean | null) {
+    return await this.requests.post(routes.usersIdRatingsSlug(id, slug), { rating, isFavorite });
+  }
+
+  async getSelfRatings() {
+    return await this.requests.get<UserRatingsSummaries>(routes.ratingsSelf);
   }
 
   async changePassword(changePassword: ChangePassword) {

frontend/pages/group/data/categories.vue

@@ -96,7 +96,7 @@
 import { defineComponent, reactive, ref, useContext } from "@nuxtjs/composition-api";
 import { validators } from "~/composables/use-validators";
 import { useCategoryStore, useCategoryData } from "~/composables/store";
-import { RecipeCategory } from "~/lib/api/types/admin";
+import { RecipeCategory } from "~/lib/api/types/recipe";
 
 export default defineComponent({
   setup() {

frontend/pages/user/_id/favorites.vue

@@ -1,7 +1,11 @@
 <template>
   <v-container>
-    <RecipeCardSection v-if="user && isOwnGroup" :icon="$globals.icons.heart" :title="$tc('user.user-favorites')" :recipes="user.favoriteRecipes">
-    </RecipeCardSection>
+    <RecipeCardSection
+      v-if="recipes && isOwnGroup"
+      :icon="$globals.icons.heart"
+      :title="$tc('user.user-favorites')"
+      :recipes="recipes"
+    />
   </v-container>
 </template>
 
@@ -21,14 +25,13 @@ export default defineComponent({
     const { isOwnGroup } = useLoggedInState();
 
     const userId = route.value.params.id;
-
-    const user = useAsync(async () => {
-      const { data } = await api.users.getFavorites(userId);
-      return data;
+    const recipes = useAsync(async () => {
+      const { data } = await api.recipes.getAll(1, -1, { queryFilter: `favoritedBy.id = "${userId}"` });
+      return data?.items || null;
     }, useAsyncKey());
 
     return {
-      user,
+      recipes,
       isOwnGroup,
     };
   },