flaschengeist-frontend/src/plugins/user/components/Widget.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>