67 lines
2.1 KiB
Vue
67 lines
2.1 KiB
Vue
<template>
|
|
<q-card style="text-align: center;">
|
|
<q-card-section class="row justify-center content-stretch">
|
|
<div class="col-4">
|
|
<div style="width: 100%; padding-bottom: 100%; position: relative;">
|
|
<q-avatar style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
|
|
<img :src="avatarLink" />
|
|
</q-avatar>
|
|
</div>
|
|
</div>
|
|
<div class="col-8">
|
|
<span class="text-h6">Hallo {{ name }}</span><br />
|
|
<span v-if="hasBirthday">Herzlichen Glückwunsch zum Geburtstag!<br /></span>
|
|
<span v-if="birthday.length > 0">Heute <span v-if="birthday.length === 1">hat </span><span v-else>haben </span><span
|
|
v-for="(user, index) in birthday"
|
|
v-bind:key="index"
|
|
>{{user.display_name}}<span v-if="index < (birthday.length-1)">, </span></span> Geburtstag.</span>
|
|
<span v-else>Heute stehen keine Geburtstage an</span>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {
|
|
computed,
|
|
defineComponent,
|
|
onMounted,
|
|
ref,
|
|
} from '@vue/composition-api';
|
|
import { Store } from 'vuex';
|
|
import { StateInterface } from 'src/store';
|
|
|
|
export default defineComponent({
|
|
name: 'Greeting',
|
|
setup(_, { root }) {
|
|
const store = <Store<StateInterface>>root.$store;
|
|
onMounted(() => store.dispatch('user/getUsers', false));
|
|
|
|
const name = ref(store.state.user.currentUser?.display_name);
|
|
|
|
const avatarLink = ref(store.state.user.currentUser?.avatar_url);
|
|
|
|
function userHasBirthday(user: FG.User) {
|
|
const today = new Date();
|
|
return (
|
|
user.birthday &&
|
|
user.birthday.getMonth() === today.getMonth() &&
|
|
user.birthday.getDate() === today.getDate()
|
|
);
|
|
}
|
|
|
|
const hasBirthday = computed(() => {
|
|
return userHasBirthday(<FG.User>store.state.user.currentUser);
|
|
});
|
|
|
|
const birthday = computed(() =>
|
|
store.state.user.users
|
|
.filter(userHasBirthday)
|
|
.filter((user) => user.userid !== store.state.user.currentUser?.userid)
|
|
);
|
|
|
|
return { avatarLink, name, hasBirthday, birthday };
|
|
},
|
|
});
|
|
</script>
|