fix: Ratings UI and Filter Issues (#3459)

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeRating.vue

@@ -1,12 +1,12 @@
 <template>
   <div @click.prevent>
+    <!-- User Rating -->
     <v-hover v-slot="{ hover }">
       <v-rating
-        :value="rating.ratingValue"
+        v-if="isOwnGroup && (userRating || hover || !ratingsLoaded)"
-        :half-increments="(!hover) || (!isOwnGroup)"
+        :value="userRating"
-        :readonly="!isOwnGroup"
+        color="secondary"
-        :color="hover ? attrs.hoverColor : attrs.color"
+        background-color="secondary lighten-3"
-        :background-color="attrs.backgroundColor"
         length="5"
         :dense="small ? true : undefined"
         :size="small ? 15 : undefined"
@@ -15,12 +15,25 @@
         @input="updateRating"
         @click="updateRating"
       />
+      <!-- Group Rating -->
+      <v-rating
+        v-else
+        :value="groupRating"
+        :half-increments="true"
+        :readonly="true"
+        color="grey darken-1"
+        background-color="secondary lighten-3"
+        length="5"
+        :dense="small ? true : undefined"
+        :size="small ? 15 : undefined"
+        hover
+      />
     </v-hover>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, useContext, watch } from "@nuxtjs/composition-api";
+import { computed, defineComponent, ref, watch } from "@nuxtjs/composition-api";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useUserSelfRatings } from "~/composables/use-users";
 export default defineComponent({
@@ -45,61 +58,29 @@ 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);
 
-    type Rating = {
+    const userRating = computed(() => {
-      ratingValue: number | undefined;
+      return userRatings.value.find((r) => r.recipeId === props.recipeId)?.rating;
-      hasUserRating: boolean | undefined
-    };
-
-    // 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
+    const hideGroupRating = ref(!!userRating.value);
     watch(
-      () => rating.value.hasUserRating,
+      () => userRating.value,
       () => {
-        if (rating.value.hasUserRating && !props.preferGroupRating) {
+        if (userRating.value) {
           hideGroupRating.value = true;
         }
       },
     )
 
-    const attrs = computed(() => {
+    const groupRating = computed(() => {
-      return isOwnGroup.value ? {
+      return hideGroupRating.value ? 0 : props.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) {
@@ -113,9 +94,10 @@ export default defineComponent({
     }
 
     return {
-      attrs,
       isOwnGroup,
-      rating,
+      ratingsLoaded,
+      groupRating,
+      userRating,
       updateRating,
     };
   },

mealie/repos/repository_recipes.py

@@ -18,9 +18,19 @@ from mealie.db.models.recipe.tool import Tool
 from mealie.db.models.users.user_to_recipe import UserToRecipe
 from mealie.schema.cookbook.cookbook import ReadCookBook
 from mealie.schema.recipe import Recipe
-from mealie.schema.recipe.recipe import RecipeCategory, RecipePagination, RecipeSummary, RecipeTag, RecipeTool
+from mealie.schema.recipe.recipe import (
+    RecipeCategory,
+    RecipePagination,
+    RecipeSummary,
+    RecipeTag,
+    RecipeTool,
+)
 from mealie.schema.recipe.recipe_category import CategoryBase, TagBase
-from mealie.schema.response.pagination import OrderByNullPosition, OrderDirection, PaginationQuery
+from mealie.schema.response.pagination import (
+    OrderByNullPosition,
+    OrderDirection,
+    PaginationQuery,
+)
 
 from ..db.models._model_base import SqlAlchemyBase
 from ..schema._mealie.mealie_model import extract_uuids
@@ -173,11 +183,11 @@ class RepositoryRecipes(RepositoryGeneric[Recipe, RecipeModel]):
                         UserToRecipe.rating is not None,
                         UserToRecipe.rating > 0,
                     ),
-                    sa.select(UserToRecipe.rating)
+                    sa.select(sa.func.max(UserToRecipe.rating))
                     .where(UserToRecipe.recipe_id == self.model.id, UserToRecipe.user_id == self.user_id)
                     .scalar_subquery(),
                 ),
-                else_=self.model.rating,
+                else_=sa.case((self.model.rating == 0, None), else_=self.model.rating),
             ).label(effective_rating_column_name)
         )
 
@@ -189,7 +199,7 @@ class RepositoryRecipes(RepositoryGeneric[Recipe, RecipeModel]):
 
         if order_by_null is OrderByNullPosition.first:
             order_attr = sa.nulls_first(order_attr)
-        elif order_by_null is OrderByNullPosition.last:
+        else:
             order_attr = sa.nulls_last(order_attr)
 
         return query.order_by(order_attr)