Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-24 15:49:42 +02:00
Code Issues Releases Activity

feat: User Tooltip (#4319)

Browse source
This commit is contained in:
Michael Genson 2024-10-11 19:36:26 -05:00 • committed by GitHub
parent a2bdb02a7f
commit e06572b7ca
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
23 changed files with 164 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

37
frontend/components/Domain/User/UserAvatar.vue
View file

@ -1,14 +1,26 @@
<template>
<v-list-item-avatar v-if="list && userId">
<v-img :src="imageURL" :alt="userId" @load="error = false" @error="error = true"> </v-img>
</v-list-item-avatar>
<v-avatar v-else-if="userId" :size="size">
<v-img :src="imageURL" :alt="userId" @load="error = false" @error="error = true"> </v-img>
</v-avatar>
<v-tooltip
v-if="userId"
:disabled="!user || !tooltip"
right
>
<template #activator="{ on, attrs }">
<v-list-item-avatar v-if="list" v-bind="attrs" v-on="on">
<v-img :src="imageURL" :alt="userId" @load="error = false" @error="error = true"> </v-img>
</v-list-item-avatar>
<v-avatar v-else :size="size" v-bind="attrs" v-on="on">
<v-img :src="imageURL" :alt="userId" @load="error = false" @error="error = true"> </v-img>
</v-avatar>
</template>
<span v-if="user">
{{ user.fullName }}
</span>
</v-tooltip>
</template>
<script lang="ts">
import { defineComponent, toRefs, reactive, useContext, computed } from "@nuxtjs/composition-api";
import { useUserStore } from "~/composables/store/use-user-store";
import { UserOut } from "~/lib/api/types/user";
export default defineComponent({
@ -25,6 +37,10 @@ export default defineComponent({
type: String,
default: "42",
},
tooltip: {
type: Boolean,
default: true,
}
},
setup(props) {
const state = reactive({
@ -32,15 +48,20 @@ export default defineComponent({
});
const { $auth } = useContext();
const { store: users } = useUserStore();
const user = computed(() => {
return users.value.find((user) => user.id === props.userId);
})
const imageURL = computed(() => {
// TODO Setup correct user type for $auth.user
const user = $auth.user as unknown as UserOut | null;
const key = user?.cacheKey ?? "";
const authUser = $auth.user as unknown as UserOut | null;
const key = authUser?.cacheKey ?? "";
return `/api/media/users/${props.userId}/profile.webp?cacheKey=${key}`;
});
return {
user,
imageURL,
...toRefs(state),
};