mealie/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue

68 lines
1.6 KiB
Vue
Raw Normal View History

<template>
<v-tooltip bottom nudge-right="50" :color="buttonStyle ? 'info' : 'secondary'">
2021-08-02 03:24:47 +00:00
<template #activator="{ on, attrs }">
2021-06-12 06:59:14 +00:00
<v-btn
v-if="isFavorite || showAlways"
2021-08-02 03:24:47 +00:00
small
:color="buttonStyle ? 'info' : 'secondary'"
2021-06-12 06:59:14 +00:00
:icon="!buttonStyle"
:fab="buttonStyle"
v-bind="attrs"
2021-08-02 03:24:47 +00:00
@click.prevent="toggleFavorite"
2021-06-12 06:59:14 +00:00
v-on="on"
>
<v-icon :small="!buttonStyle" :color="buttonStyle ? 'white' : 'secondary'">
{{ isFavorite ? $globals.icons.heart : $globals.icons.heartOutline }}
2021-06-12 06:59:14 +00:00
</v-icon>
</v-btn>
</template>
<span>{{ isFavorite ? $t("recipe.remove-from-favorites") : $t("recipe.add-to-favorites") }}</span>
</v-tooltip>
</template>
<script>
import { defineComponent } from "@nuxtjs/composition-api";
import { useApiSingleton } from "~/composables/use-api";
export default defineComponent({
props: {
slug: {
2021-08-02 03:24:47 +00:00
type: String,
default: "",
},
showAlways: {
type: Boolean,
default: false,
},
buttonStyle: {
type: Boolean,
default: false,
},
},
setup() {
const api = useApiSingleton();
return { api };
},
computed: {
user() {
return this.$auth.user;
},
isFavorite() {
return this.$auth.user.favoriteRecipes.includes(this.slug);
},
},
methods: {
async toggleFavorite() {
if (!this.isFavorite) {
await this.api.users.addFavorite(this.$auth.user.id, this.slug);
} else {
await this.api.users.removeFavorite(this.$auth.user.id, this.slug);
}
this.$auth.fetchUser();
},
},
});
</script>
<style lang="scss" scoped>
</style>