Show todays birthdays

src/plugins/user/components/Widget.vue

@@ -7,24 +7,35 @@
         </q-avatar>
       </div>
       <div class="col-8">
-        <span class="text-h6">{{ name }}</span
-        ><br />
-        <span>Andere Infos wo ich aber nicht weiß was</span>
+        <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, ref } from '@vue/composition-api';
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  ref,
+} from '@vue/composition-api';
 import { Store } from 'vuex';
 import { StateInterface } from 'src/store';
 import MD5 from 'crypto-js/md5';
 
 export default defineComponent({
-  name: 'DummyWidget',
+  name: 'Greeting',
   setup(_, { root }) {
     const store = <Store<StateInterface>>root.$store;
+    onMounted(() => store.dispatch('user/getUsers', false));
+
     const avatarLink = computed(() => {
       const hash = MD5(store.state.user.currentUser?.mail || '').toString();
       return `https://www.gravatar.com/avatar/${hash}?s=500&d=robohash`;
@@ -32,7 +43,26 @@ export default defineComponent({
 
     const name = ref(store.state.user.currentUser?.display_name);
 
-    return { avatarLink, name };
+    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>