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>