github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-22 06:23:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 17

Fav Badge

Browse source
This commit is contained in:
Kuchenpirat 2025-07-30 11:33:36 +00:00
commit 8fc3609d19
1 changed files with 32 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

51
frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue
View file

@ -4,7 +4,7 @@
nudge-right="50" nudge-right="50"
:color="buttonStyle ? 'info' : 'secondary'" :color="buttonStyle ? 'info' : 'secondary'"
> >
<template #activator="{ props }"> <template #activator="{ props: tooltipProps }">
<v-btn <v-btn
v-if="isFavorite || showAlways" v-if="isFavorite || showAlways"
icon icon
@ -13,7 +13,7 @@
size="small" size="small"
:color="buttonStyle ? 'info' : 'secondary'" :color="buttonStyle ? 'info' : 'secondary'"
:fab="buttonStyle" :fab="buttonStyle"
v-bind="{ ...props, ...$attrs }" v-bind="{ ...tooltipProps, ...$attrs }"
@click.prevent="toggleFavorite" @click.prevent="toggleFavorite"
> >
<v-icon <v-icon
@ -28,36 +28,31 @@
</v-tooltip> </v-tooltip>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { useUserSelfRatings } from "~/composables/use-users"; import { useUserSelfRatings } from "~/composables/use-users";
import { useUserApi } from "~/composables/api"; import { useUserApi } from "~/composables/api";
export default defineNuxtComponent({ interface Props {
props: { recipeId?: string;
recipeId: { showAlways?: boolean;
type: String, buttonStyle?: boolean;
default: "", }
}, const props = withDefaults(defineProps<Props>(), {
showAlways: { recipeId: "",
type: Boolean, showAlways: false,
default: false, buttonStyle: false,
}, });
buttonStyle: {
type: Boolean,
default: false,
},
},
setup(props) {
const api = useUserApi();
const $auth = useMealieAuth();
const { userRatings, refreshUserRatings } = useUserSelfRatings();
const isFavorite = computed(() => { const api = useUserApi();
const $auth = useMealieAuth();
const { userRatings, refreshUserRatings } = useUserSelfRatings();
const isFavorite = computed(() => {
const rating = userRatings.value.find(r => r.recipeId === props.recipeId); const rating = userRatings.value.find(r => r.recipeId === props.recipeId);
return rating?.isFavorite || false; return rating?.isFavorite || false;
}); });
async function toggleFavorite() { async function toggleFavorite() {
if (!$auth.user.value) return; if (!$auth.user.value) return;
if (!isFavorite.value) { if (!isFavorite.value) {
await api.users.addFavorite($auth.user.value?.id, props.recipeId); await api.users.addFavorite($auth.user.value?.id, props.recipeId);
@ -66,9 +61,5 @@ export default defineNuxtComponent({
await api.users.removeFavorite($auth.user.value?.id, props.recipeId); await api.users.removeFavorite($auth.user.value?.id, props.recipeId);
} }
await refreshUserRatings(); await refreshUserRatings();
} }
return { isFavorite, toggleFavorite };
},
});
</script> </script>