Flaschengeist
/
flaschengeist-users
7
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

fix(widget) Cleanup widget and use more shared api functions

This commit is contained in:
Ferdinand Thiessen 2021-11-29 18:12:16 +01:00
parent 4fa7be51c7
commit 868a3f3383
1 changed files with 12 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Widget.vue
View File

@ -1,18 +1,15 @@
<template> <template>
<q-card style="text-align: center"> <q-card style="text-align: center">
<q-card-section class="row justify-center content-stretch"> <q-card-section class="row justify-center content-stretch">
<div v-if="avatar" class="col-4"> <div class="col-4">
<div style="width: 100%; padding-bottom: 100%; position: relative"> <q-avatar>
<q-avatar style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"> <q-img :src="avatar" style="min-height: 100%; min-width: 100%">
<q-img <template #error>
v-if="!avatarError" <img src="no-image.svg" style="height: 100%"/>
:src="api.defaults.baseURL + avatarLink" </template>
@error="avatarError = true" </q-img>
/>
<q-img v-else src="no-image.svg" />
</q-avatar> </q-avatar>
</div> </div>
</div>
<div class="col-8"> <div class="col-8">
<span class="text-h6">Hallo {{ name }}</span <span class="text-h6">Hallo {{ name }}</span
><br /> ><br />
@ -31,11 +28,11 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { useMainStore, useUserStore, api } from '@flaschengeist/api'; import { avatarURL, useMainStore, useUserStore } from '@flaschengeist/api';
import { computed, defineComponent, onMounted, ref } from 'vue'; import { computed, defineComponent, onMounted, ref } from 'vue';
export default defineComponent({ export default defineComponent({
name: 'Greeting', name: 'GreetingsWidget',
setup() { setup() {
const mainStore = useMainStore(); const mainStore = useMainStore();
const userStore = useUserStore(); const userStore = useUserStore();
@ -43,14 +40,8 @@ export default defineComponent({
// Ensure users are loaded,so we can query birthdays // Ensure users are loaded,so we can query birthdays
onMounted(() => userStore.getUsers(false)); onMounted(() => userStore.getUsers(false));
const avatar = ref(true);
const name = ref(mainStore.currentUser.firstname); const name = ref(mainStore.currentUser.firstname);
const avatarLink = ref(mainStore.currentUser.avatar_url); const avatar = computed(() => avatarURL(mainStore.currentUser));
const avatarError = ref(false);
function error() {
avatar.value = false;
}
function userHasBirthday(user: FG.User) { function userHasBirthday(user: FG.User) {
const today = new Date(); const today = new Date();
@ -71,7 +62,7 @@ export default defineComponent({
.filter((user) => user.userid !== mainStore.currentUser.userid) .filter((user) => user.userid !== mainStore.currentUser.userid)
); );
return { avatar, avatarLink, error, name, hasBirthday, birthday, api, avatarError }; return { avatar, name, hasBirthday, birthday };
}, },
}); });
</script> </script>